diff --git a/addons/account/static/src/js/move_line_quickadd.js b/addons/account/static/src/js/move_line_quickadd.js
index 6d437826a6a..e77477a1c79 100644
--- a/addons/account/static/src/js/move_line_quickadd.js
+++ b/addons/account/static/src/js/move_line_quickadd.js
@@ -4,7 +4,7 @@ odoo.define('account.move_line_quickadd', function (require) {
 var core = require('web.core');
 var data = require('web.data');
 var ListView = require('web.ListView');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 
 var QWeb = core.qweb;
 
diff --git a/addons/barcodes/static/src/js/barcode_parser.js b/addons/barcodes/static/src/js/barcode_parser.js
index 4ad34c6543b..00462f36a51 100644
--- a/addons/barcodes/static/src/js/barcode_parser.js
+++ b/addons/barcodes/static/src/js/barcode_parser.js
@@ -2,7 +2,7 @@ odoo.define('barcodes.BarcodeParser', function (require) {
 "use strict";
 
 var Class = require('web.Class');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 
 // The BarcodeParser is used to detect what is the category
 // of a barcode (product, partner, ...) and extract an encoded value
diff --git a/addons/base_import/static/src/js/import.js b/addons/base_import/static/src/js/import.js
index 991dbee7462..779655bbef9 100644
--- a/addons/base_import/static/src/js/import.js
+++ b/addons/base_import/static/src/js/import.js
@@ -3,7 +3,7 @@ odoo.define('base_import.import', function (require) {
 
 var core = require('web.core');
 var ListView = require('web.ListView');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var Widget = require('web.Widget');
 
diff --git a/addons/board/static/src/js/dashboard.js b/addons/board/static/src/js/dashboard.js
index 568a6e2babd..5320893b15e 100644
--- a/addons/board/static/src/js/dashboard.js
+++ b/addons/board/static/src/js/dashboard.js
@@ -7,7 +7,7 @@ var data = require('web.data');
 var Dialog = require('web.Dialog');
 var FavoriteMenu = require('web.FavoriteMenu');
 var form_common = require('web.form_common');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var ViewManager = require('web.ViewManager');
 
diff --git a/addons/calendar/static/src/js/base_calendar.js b/addons/calendar/static/src/js/base_calendar.js
index 0bfcc0311db..0b10febc743 100644
--- a/addons/calendar/static/src/js/base_calendar.js
+++ b/addons/calendar/static/src/js/base_calendar.js
@@ -4,7 +4,7 @@ odoo.define('base_calendar.base_calendar', function (require) {
 var core = require('web.core');
 var data = require('web.data');
 var form_common = require('web.form_common');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var WebClient = require('web.WebClient');
 var CalendarView = require('web_calendar.CalendarView');
 var widgets = require('web_calendar.widgets');
diff --git a/addons/crm_partner_assign/wizard/crm_forward_to_partner_view.xml b/addons/crm_partner_assign/wizard/crm_forward_to_partner_view.xml
index 31da10393ea..4d429dcab82 100644
--- a/addons/crm_partner_assign/wizard/crm_forward_to_partner_view.xml
+++ b/addons/crm_partner_assign/wizard/crm_forward_to_partner_view.xml
@@ -26,7 +26,7 @@
                     </field>
                     <notebook colspan="4" groups="base.group_no_one">
                         <page string="Email Template">
-                            <field name="body" readonly="1"/>
+                            <field name="body" readonly="1" options="{'style-inline': true}"/>
                         </page>
                     </notebook>
                     <footer>
diff --git a/addons/gamification/static/src/js/gamification.js b/addons/gamification/static/src/js/gamification.js
index 37ba574ff19..649df68ecdc 100644
--- a/addons/gamification/static/src/js/gamification.js
+++ b/addons/gamification/static/src/js/gamification.js
@@ -4,7 +4,7 @@ odoo.define('gamification.gamification', function(require) {
 var mail = require('mail.mail');
 var core = require('web.core');
 var form_common = require('web.form_common');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var Widget = require('web.Widget');
 
diff --git a/addons/google_drive/static/src/js/gdrive.js b/addons/google_drive/static/src/js/gdrive.js
index f7d33a53979..bc7449c5507 100644
--- a/addons/google_drive/static/src/js/gdrive.js
+++ b/addons/google_drive/static/src/js/gdrive.js
@@ -2,7 +2,7 @@ odoo.define('google_drive.google_drive', function (require) {
 "use strict";
 
 var data = require('web.data');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var Sidebar = require('web.Sidebar');
 
 Sidebar.include({
diff --git a/addons/hr_attendance/static/src/js/attendance.js b/addons/hr_attendance/static/src/js/attendance.js
index 80859b76bd5..c1545d10470 100644
--- a/addons/hr_attendance/static/src/js/attendance.js
+++ b/addons/hr_attendance/static/src/js/attendance.js
@@ -4,7 +4,7 @@ odoo.define('hr_attendance.hr_attendance', function(require) {
 var core = require('web.core');
 var data = require('web.data');
 var formats = require('web.formats');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var SystrayMenu = require('web.SystrayMenu');
 var time = require('web.time');
 var Widget = require('web.Widget');
diff --git a/addons/hr_timesheet_sheet/static/src/js/timesheet.js b/addons/hr_timesheet_sheet/static/src/js/timesheet.js
index 819556b0a59..59e99cf130e 100644
--- a/addons/hr_timesheet_sheet/static/src/js/timesheet.js
+++ b/addons/hr_timesheet_sheet/static/src/js/timesheet.js
@@ -5,7 +5,7 @@ var core = require('web.core');
 var data = require('web.data');
 var form_common = require('web.form_common');
 var formats = require('web.formats');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var time = require('web.time');
 var utils = require('web.utils');
 
diff --git a/addons/im_chat/static/src/js/im_chat_backend.js b/addons/im_chat/static/src/js/im_chat_backend.js
index fe2d5ae97b9..08eb06ab2e1 100644
--- a/addons/im_chat/static/src/js/im_chat_backend.js
+++ b/addons/im_chat/static/src/js/im_chat_backend.js
@@ -6,7 +6,7 @@ odoo.define('im_chat.im_chat', function (require) {
 var bus = require('bus.bus');
 var core = require('web.core');
 var data = require('web.data');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var SystrayMenu = require('web.SystrayMenu');
 var utils = require('web.utils');
diff --git a/addons/im_livechat/views/im_livechat_channel_templates.xml b/addons/im_livechat/views/im_livechat_channel_templates.xml
index 4a48ce27ebc..767d3986e84 100644
--- a/addons/im_livechat/views/im_livechat_channel_templates.xml
+++ b/addons/im_livechat/views/im_livechat_channel_templates.xml
@@ -155,7 +155,6 @@
                         <t t-raw="rule"/>
                     );
                 });
-                odoo.init();
             });
             </t>
         </template>
diff --git a/addons/link_tracker/__init__.py b/addons/link_tracker/__init__.py
new file mode 100644
index 00000000000..12ce74572a7
--- /dev/null
+++ b/addons/link_tracker/__init__.py
@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+import models
+import controller
\ No newline at end of file
diff --git a/addons/link_tracker/__openerp__.py b/addons/link_tracker/__openerp__.py
new file mode 100644
index 00000000000..46b10b27942
--- /dev/null
+++ b/addons/link_tracker/__openerp__.py
@@ -0,0 +1,15 @@
+{
+    'name': 'Link Tracker',
+    'category': 'Hidden',
+    'description': """
+Create short and trackable URLs.
+=====================================================
+
+        """,
+    'version': '1.0',
+    'depends': ['marketing', 'utm'],
+    'data': [
+        'views/link_tracker.xml',
+        'security/ir.model.access.csv',
+    ],
+}
diff --git a/addons/website_links/models/__init__.py b/addons/link_tracker/controller/__init__.py
similarity index 54%
rename from addons/website_links/models/__init__.py
rename to addons/link_tracker/controller/__init__.py
index b49461a2eb5..a84d81a791b 100644
--- a/addons/website_links/models/__init__.py
+++ b/addons/link_tracker/controller/__init__.py
@@ -1,2 +1,2 @@
 # -*- coding: utf-8 -*-
-import website_links
\ No newline at end of file
+import main
diff --git a/addons/link_tracker/controller/main.py b/addons/link_tracker/controller/main.py
new file mode 100644
index 00000000000..1d7707fb65a
--- /dev/null
+++ b/addons/link_tracker/controller/main.py
@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+import werkzeug
+
+from openerp.addons.web import http
+from openerp.http import request
+
+
+class link_tracker(http.Controller):
+    @http.route('/r/<string:code>', type='http', auth='none', website=True)
+    def full_url_redirect(self, code, **post):
+        request.env['link.tracker.click'].add_click(code, request.httprequest.remote_addr, request.session['geoip'].get('country_code'), stat_id=False)
+        redirect_url = request.env['link.tracker'].get_url_from_code(code)
+        return werkzeug.utils.redirect(redirect_url or '', 301)
diff --git a/addons/link_tracker/models/__init__.py b/addons/link_tracker/models/__init__.py
new file mode 100644
index 00000000000..32330efefd5
--- /dev/null
+++ b/addons/link_tracker/models/__init__.py
@@ -0,0 +1,2 @@
+# -*- coding: utf-8 -*-
+import link_tracker
diff --git a/addons/website_links/models/website_links.py b/addons/link_tracker/models/link_tracker.py
similarity index 86%
rename from addons/website_links/models/website_links.py
rename to addons/link_tracker/models/link_tracker.py
index 99148d1ae71..591804304b9 100644
--- a/addons/website_links/models/website_links.py
+++ b/addons/link_tracker/models/link_tracker.py
@@ -21,12 +21,13 @@ def VALIDATE_URL(url):
     return url
 
 
-class website_links(models.Model):
-    """website_links allow users to wrap any URL into a short and trackable URL
-    via a frontend and backend interface. website_links counts clicks on each tracked link.
+class link_tracker(models.Model):
+    """link_tracker allow users to wrap any URL into a short and trackable URL.
+    link_tracker counts clicks on each tracked link.
     This module is also used by mass_mailing, where each link in mail_mail html_body are converted into
     a trackable link to get the click-through rate of each mass_mailing."""
-    _name = "website.links"
+
+    _name = "link.tracker"
     _rec_name = "short_url"
 
     _inherit = ['utm.mixin']
@@ -34,10 +35,10 @@ class website_links(models.Model):
     url = fields.Char(string='Target URL', required=True)
     count = fields.Integer(string='Number of Clicks', compute='_compute_count', store=True)
     short_url = fields.Char(string='Tracked URL', compute='_compute_short_url')
-    link_click_ids = fields.One2many('website.links.click', 'link_id', string='Clicks')
+    link_click_ids = fields.One2many('link.tracker.click', 'link_id', string='Clicks')
     title = fields.Char(string='Page Title', store=True)
     favicon = fields.Char(string='Favicon', compute='_compute_favicon', store=True)
-    link_code_ids = fields.One2many('website.links.code', 'link_id', string='Codes')
+    link_code_ids = fields.One2many('link.tracker.code', 'link_id', string='Codes')
     code = fields.Char(string='Short URL code', compute='_compute_code')
     redirected_url = fields.Char(string='Redirected URL', compute='_compute_redirected_url')
     short_url_host = fields.Char(string='Host of the short URL', compute='_compute_short_url_host')
@@ -81,7 +82,7 @@ class website_links(models.Model):
 
     @api.one
     def _compute_code(self):
-        record = self.env['website.links.code'].search([('link_id', '=', self.id)], limit=1, order='id DESC')
+        record = self.env['link.tracker.code'].search([('link_id', '=', self.id)], limit=1, order='id DESC')
         self.code = record.code
 
     @api.one
@@ -127,7 +128,7 @@ class website_links(models.Model):
 
     @api.multi
     def action_view_statistics(self):
-        action = self.env['ir.actions.act_window'].for_xml_id('website_links', 'action_view_click_statistics')
+        action = self.env['ir.actions.act_window'].for_xml_id('link_tracker', 'action_view_click_statistics')
         action['domain'] = [('link_id', '=', self.id)]
         return action
 
@@ -177,16 +178,16 @@ class website_links(models.Model):
             if fname not in create_vals:
                 create_vals[fname] = False
 
-        link = super(website_links, self).create(create_vals)
+        link = super(link_tracker, self).create(create_vals)
 
-        code = self.env['website.links.code'].get_random_code_string()
-        self.env['website.links.code'].create({'code': code, 'link_id': link.id})
+        code = self.env['link.tracker.code'].get_random_code_string()
+        self.env['link.tracker.code'].create({'code': code, 'link_id': link.id})
 
         return link
 
     @api.model
     def get_url_from_code(self, code, context=None):
-        code_rec = self.env['website.links.code'].sudo().search([('code', '=', code)])
+        code_rec = self.env['link.tracker.code'].sudo().search([('code', '=', code)])
 
         if not code_rec:
             return None
@@ -198,11 +199,11 @@ class website_links(models.Model):
     ]
 
 
-class website_links_code(models.Model):
-    _name = "website.links.code"
+class link_tracker_code(models.Model):
+    _name = "link.tracker.code"
 
     code = fields.Char(string='Short URL Code', store=True)
-    link_id = fields.Many2one('website.links', 'Link', required=True, ondelete='cascade')
+    link_id = fields.Many2one('link.tracker', 'Link', required=True, ondelete='cascade')
 
     @api.model
     def get_random_code_string(self):
@@ -220,19 +221,19 @@ class website_links_code(models.Model):
     ]
 
 
-class website_links_click(models.Model):
-    _name = "website.links.click"
+class link_tracker_click(models.Model):
+    _name = "link.tracker.click"
     _rec_name = "link_id"
 
     click_date = fields.Date(string='Create Date')
-    link_id = fields.Many2one('website.links', 'Link', required=True, ondelete='cascade')
+    link_id = fields.Many2one('link.tracker', 'Link', required=True, ondelete='cascade')
     ip = fields.Char(string='Internet Protocol')
     country_id = fields.Many2one('res.country', 'Country')
 
     @api.model
     def add_click(self, code, ip, country_code, stat_id=False):
         self = self.sudo()
-        code_rec = self.env['website.links.code'].search([('code', '=', code)])
+        code_rec = self.env['link.tracker.code'].search([('code', '=', code)])
 
         if not code_rec:
             return None
diff --git a/addons/link_tracker/security/ir.model.access.csv b/addons/link_tracker/security/ir.model.access.csv
new file mode 100644
index 00000000000..847be6ce162
--- /dev/null
+++ b/addons/link_tracker/security/ir.model.access.csv
@@ -0,0 +1,10 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_link_tracker_user,link.tracker,model_link_tracker,base.group_user,1,0,0,0
+access_link_tracker_manager,link.tracker,model_link_tracker,marketing.group_marketing_user,1,1,1,1
+access_link_tracker_public,link.tracker,model_link_tracker,base.group_public,1,0,0,0
+access_link_tracker_code_user,link.tracker.code,model_link_tracker_code,base.group_user,1,0,0,0
+access_link_tracker_code_manager,link.tracker.code,model_link_tracker_code,marketing.group_marketing_user,1,1,1,1
+access_link_tracker_code_public,link.tracker.code,model_link_tracker_code,base.group_public,1,0,0,0
+access_link_tracker_click_user,link.tracker.click,model_link_tracker_click,base.group_user,1,0,0,0
+access_link_tracker_click_manager,link.tracker.click,model_link_tracker_click,marketing.group_marketing_user,1,1,1,1
+access_link_tracker_click_public,link.tracker.click,model_link_tracker_click,base.group_public,1,0,0,0
diff --git a/addons/website_links/views/website_links.xml b/addons/link_tracker/views/link_tracker.xml
similarity index 70%
rename from addons/website_links/views/website_links.xml
rename to addons/link_tracker/views/link_tracker.xml
index 8616019de41..ec78e86a1b8 100644
--- a/addons/website_links/views/website_links.xml
+++ b/addons/link_tracker/views/link_tracker.xml
@@ -3,15 +3,15 @@
     <data>
         <record model="ir.actions.act_window" id="action_view_click_statistics">
             <field name="name">Statistics of Clicks</field>
-            <field name="res_model">website.links.click</field>
+            <field name="res_model">link.tracker.click</field>
             <field name="view_mode">graph</field>
             <field name="domain">[('link_id', 'IN', ids)]</field>
         </record>
 
         <!-- Search -->
-        <record id="view_website_links_filter" model="ir.ui.view">
+        <record id="view_link_tracker_filter" model="ir.ui.view">
             <field name="name">Links</field>
-            <field name="model">website.links</field>
+            <field name="model">link.tracker</field>
             <field name="arch" type="xml">
                 <search string="Tracked Link">
                     <field name="title"/>
@@ -21,9 +21,9 @@
         </record>
 
         <!-- Website links views -->
-        <record id="view_website_links_form" model="ir.ui.view">
-            <field name="name">website.links.form</field>
-            <field name="model">website.links</field>
+        <record id="view_link_tracker_form" model="ir.ui.view">
+            <field name="name">link.tracker.form</field>
+            <field name="model">link.tracker</field>
             <field name="arch" type="xml">
                 <form string="Website Link">
                     <sheet>
@@ -53,9 +53,9 @@
         </record>
 
 
-        <record id="view_website_links_form_stats" model="ir.ui.view">
-            <field name="name">website.links.my.form</field>
-            <field name="model">website.links</field>
+        <record id="view_link_tracker_form_stats" model="ir.ui.view">
+            <field name="name">link.tracker.my.form</field>
+            <field name="model">link.tracker</field>
             <field name="arch" type="xml">
                 <form string="Website Link Graph">
                     <sheet>
@@ -71,17 +71,17 @@
             </field>
         </record>
 
-        <record model="ir.actions.act_window" id="action_website_links_stats">
-            <field name="name">website.links.form.graph.action</field>
-            <field name="res_model">website.links</field>
+        <record model="ir.actions.act_window" id="action_link_tracker_stats">
+            <field name="name">link.tracker.form.graph.action</field>
+            <field name="res_model">link.tracker</field>
             <field name="view_type">form</field>
             <field name="view_mode">form</field>
-            <field name="view_id" ref="view_website_links_form_stats"/>
+            <field name="view_id" ref="view_link_tracker_form_stats"/>
         </record>
 
-        <record id="view_website_links_tree" model="ir.ui.view">
-            <field name="name">website.links.tree</field>
-            <field name="model">website.links</field>
+        <record id="view_link_tracker_tree" model="ir.ui.view">
+            <field name="name">link.tracker.tree</field>
+            <field name="model">link.tracker</field>
             <field name="arch" type="xml">
                 <tree string="Website Links">
                     <field name="create_date"/>
@@ -93,9 +93,9 @@
             </field>
         </record>
 
-        <record id="view_website_links_graph" model="ir.ui.view" >
-            <field name="name">website.links.graph</field>
-            <field name="model">website.links</field>
+        <record id="view_link_tracker_graph" model="ir.ui.view" >
+            <field name="name">link.tracker.graph</field>
+            <field name="model">link.tracker</field>
             <field name="arch" type="xml">
                 <graph string="Website Links"  type="bar">
                     <field name="url" type="row"/>
@@ -105,17 +105,17 @@
         </record>
 
         <!-- Action for website links-->
-        <record model="ir.actions.act_window" id="action_website_links">
+        <record model="ir.actions.act_window" id="action_link_tracker">
             <field name="name">Link Tracker</field>
-            <field name="res_model">website.links</field>
+            <field name="res_model">link.tracker</field>
             <field name="view_type">form</field>
             <field name="view_mode">tree,form,graph</field>
         </record>
 
         <!-- Website links click views -->
-        <record id="view_website_links_click_form" model="ir.ui.view">
-            <field name="name">website.links.click.form</field>
-            <field name="model">website.links.click</field>
+        <record id="view_link_tracker_click_form" model="ir.ui.view">
+            <field name="name">link.tracker.click.form</field>
+            <field name="model">link.tracker.click</field>
             <field name="arch" type="xml">
                 <form string="Website Link Clicks">
                     <header>
@@ -131,9 +131,9 @@
             </field>
         </record>
 
-        <record id="view_website_links_click_tree" model="ir.ui.view">
-            <field name="name">website.links.click.tree</field>
-            <field name="model">website.links.click</field>
+        <record id="view_link_tracker_click_tree" model="ir.ui.view">
+            <field name="name">link.tracker.click.tree</field>
+            <field name="model">link.tracker.click</field>
             <field name="arch" type="xml">
                 <tree string="Website Links Clicks">
                     <field name="link_id"/>
@@ -143,9 +143,9 @@
             </field>
         </record>
 
-        <record id="view_website_links_click_graph" model="ir.ui.view" >
-            <field name="name">website.links.click.graph</field>
-            <field name="model">website.links.click</field>
+        <record id="view_link_tracker_click_graph" model="ir.ui.view" >
+            <field name="name">link.tracker.click.graph</field>
+            <field name="model">link.tracker.click</field>
             <field name="arch" type="xml">
                 <graph string="Website Link Clicks">
                     <field name="link_id"/>
@@ -156,14 +156,14 @@
         </record>
 
         <!-- Action for website links click-->
-        <record model="ir.actions.act_window" id="action_website_links_click">
+        <record model="ir.actions.act_window" id="action_link_tracker_click">
             <field name="name">Tracked Links</field>
-            <field name="res_model">website.links.click</field>
+            <field name="res_model">link.tracker.click</field>
             <field name="view_type">form</field>
             <field name="view_mode">graph,tree,form</field>
         </record>
 
         <menuitem id="menu_url_shortener_main" name="Link Tracker" parent="utm.menu_link_tracker_root" groups="base.group_no_one"/>
-        <menuitem id="menu_url_shortener_links" name="Tracked Links" parent="menu_url_shortener_main" action="action_website_links"/>
+        <menuitem id="menu_url_shortener_links" name="Tracked Links" parent="menu_url_shortener_main" action="action_link_tracker"/>
     </data>
 </openerp>
diff --git a/addons/mail/static/src/js/announcement.js b/addons/mail/static/src/js/announcement.js
index 71e74bedab7..61e6ac1159d 100644
--- a/addons/mail/static/src/js/announcement.js
+++ b/addons/mail/static/src/js/announcement.js
@@ -2,7 +2,7 @@ odoo.define('mail.announcement', function (require) {
 "use strict";
 
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var WebClient = require('web.WebClient');
 
diff --git a/addons/mail/static/src/js/many2many_tags_email.js b/addons/mail/static/src/js/many2many_tags_email.js
index 2250935e1da..a9fd41a3cd7 100644
--- a/addons/mail/static/src/js/many2many_tags_email.js
+++ b/addons/mail/static/src/js/many2many_tags_email.js
@@ -4,7 +4,7 @@ odoo.define('mail.many2manytags', function (require) {
 var core = require('web.core');
 var form_common = require('web.form_common');
 var form_relational = require('web.form_relational');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 
 var _t = core._t;
 
diff --git a/addons/mail/views/mail_mail_views.xml b/addons/mail/views/mail_mail_views.xml
index 54f299e610a..5dfd44e4d10 100644
--- a/addons/mail/views/mail_mail_views.xml
+++ b/addons/mail/views/mail_mail_views.xml
@@ -30,7 +30,7 @@
                         </group>
                         <notebook>
                             <page string="Body">
-                                <field name="body_html"/>
+                                <field name="body_html" widget="html" options="{'style-inline': true}"/>
                             </page>
                             <page string="Advanced" groups="base.group_no_one">
                                 <group>
diff --git a/addons/mail/views/mail_message_views.xml b/addons/mail/views/mail_message_views.xml
index 537e33b0709..4c5d714fa2d 100644
--- a/addons/mail/views/mail_message_views.xml
+++ b/addons/mail/views/mail_message_views.xml
@@ -43,7 +43,7 @@
                                 <field name="subtype_id"/>
                             </group>
                         </group>
-                        <field name="body"/>
+                        <field name="body" options="{'style-inline': true}"/>
                     </sheet>
                 </form>
             </field>
diff --git a/addons/mail/views/mail_template_views.xml b/addons/mail/views/mail_template_views.xml
index 91b43b05245..131e646f396 100644
--- a/addons/mail/views/mail_template_views.xml
+++ b/addons/mail/views/mail_template_views.xml
@@ -42,7 +42,7 @@
                             <page string="Content">
                                 <label for="subject"/>
                                 <h2 style="display: inline-block;"><field name="subject" placeholder="Subject (placeholders may be used here)"/></h2>
-                                <field name="body_html"/>
+                                <field name="body_html" widget="html" options="{'style-inline': true}"/>
                                 <field name="attachment_ids" widget="many2many_binary"/>
                             </page>
                             <page string="Email Configuration">
diff --git a/addons/mail/wizard/invite_view.xml b/addons/mail/wizard/invite_view.xml
index 7ad32994dd9..0e9a5373e4f 100644
--- a/addons/mail/wizard/invite_view.xml
+++ b/addons/mail/wizard/invite_view.xml
@@ -15,7 +15,7 @@
                                 placeholder="Add contacts to notify..."
                                 context="{'force_email':True, 'show_email':True}"/>
                         <field name="send_mail"/>
-                        <field name="message" attrs="{'invisible': [('send_mail','!=',True)]}" class="test_message"/>
+                        <field name="message" attrs="{'invisible': [('send_mail','!=',True)]}" options="{'style-inline': true}" class="test_message"/>
                     </group>
                     <footer>
                         <button string="Add Followers"
diff --git a/addons/mail/wizard/mail_compose_message_view.xml b/addons/mail/wizard/mail_compose_message_view.xml
index 7a9d4b23042..964ebbe96a2 100644
--- a/addons/mail/wizard/mail_compose_message_view.xml
+++ b/addons/mail/wizard/mail_compose_message_view.xml
@@ -57,7 +57,7 @@
                             attrs="{'invisible':['|', ('no_auto_thread', '=', False), ('composition_mode', '!=', 'mass_mail')],
                                     'required':[('no_auto_thread', '=', True), ('composition_mode', '=', 'mass_mail')]}"/>
                     </group>
-                    <field name="body"/>
+                    <field name="body" options="{'style-inline': true}"/>
                     <field name="attachment_ids" widget="many2many_binary" string="Attach a file"/>
                     <footer>
                         <button string="Send" name="send_mail_action" type="object" class="oe_highlight"/>
diff --git a/addons/mass_mailing/__openerp__.py b/addons/mass_mailing/__openerp__.py
index 1f3d4da7dde..f20cfe6e91c 100644
--- a/addons/mass_mailing/__openerp__.py
+++ b/addons/mass_mailing/__openerp__.py
@@ -16,10 +16,10 @@ professional emails and reuse templates in a few clicks.
     'depends': [
         'mail',
         'marketing',
-        'web_kanban_gauge',
-        'website_mail',
-        'website_links',
         'utm',
+        'link_tracker',
+        'web_editor',
+        'web_kanban_gauge',
     ],
     'data': [
         'data/mail_data.xml',
@@ -30,11 +30,20 @@ professional emails and reuse templates in a few clicks.
         'views/mass_mailing.xml',
         'views/res_config.xml',
         'views/email_template.xml',
-        'views/website_mass_mailing.xml',
-        'views/snippets.xml',
         'security/ir.model.access.csv',
         'views/mass_mailing.xml',
-        'views/unsubscribe.xml',
+        'views/editor_field_html.xml',
+        'views/snippets_themes.xml',
+        'views/snippets_themes_options.xml',
+        'views/theme_list.xml',
+        'views/theme/neopolitan_snippets.xml',
+        'views/theme/skyline_snippets.xml',
+        'views/theme/narrative_snippets.xml',
+        'views/theme/sunday_snippets.xml',
+        'views/theme/go_snippets.xml',
+        'views/theme/airmail_snippets.xml',
+        'views/theme/zenflat_snippets.xml',
+        'views/theme/cleave_snippets.xml',
     ],
     'qweb': [],
     'demo': [
diff --git a/addons/mass_mailing/controllers/__init__.py b/addons/mass_mailing/controllers/__init__.py
index fa333707c98..998faae89f3 100644
--- a/addons/mass_mailing/controllers/__init__.py
+++ b/addons/mass_mailing/controllers/__init__.py
@@ -1,4 +1,4 @@
 # -*- coding: utf-8 -*-
 
 import main
-import website
+import web_editor
diff --git a/addons/mass_mailing/controllers/main.py b/addons/mass_mailing/controllers/main.py
index d1e3b5a7657..035d22ef09d 100644
--- a/addons/mass_mailing/controllers/main.py
+++ b/addons/mass_mailing/controllers/main.py
@@ -19,70 +19,8 @@ class MassMailController(http.Controller):
 
         return response
 
-    @http.route(['/mail/mailing/<int:mailing_id>/unsubscribe'], type='http', auth='none', website=True)
-    def mailing(self, mailing_id, email=None, res_id=None, **post):
-        mailing = request.env['mail.mass_mailing'].sudo().browse(mailing_id)
-        if mailing.exists():
-            if mailing.mailing_model == 'mail.mass_mailing.contact':
-                contacts =request.env['mail.mass_mailing.contact'].sudo().search([('email', 'ilike', email)])
-                return request.website.render('mass_mailing.page_unsubscribe', {'contacts': contacts, 'email': email, 'mailing_id':mailing_id})
-            else:
-                mailing.update_opt_out(mailing_id, email, [res_id], True)
-                return request.website.render('mass_mailing.page_unsubscribed')
-
-    @http.route(['/mail/mailing/unsubscribe'], type='json', auth='none', website=True)
-    def unsubscribe(self, mailing_id, opt_in_ids, opt_out_ids, email):
-        mailing = request.env['mail.mass_mailing'].sudo().browse(mailing_id)
-        if mailing.exists():
-            mailing.update_opt_out(mailing_id, email, opt_in_ids, False)
-            mailing.update_opt_out(mailing_id, email, opt_out_ids, True) 
-
-    @http.route('/website_mass_mailing/is_subscriber', type='json', auth="public", website=True)
-    def is_subscriber(self, list_id, **post):
-        cr, uid, context = request.cr, request.uid, request.context
-        Contacts = request.registry['mail.mass_mailing.contact']
-        Users = request.registry['res.users']
-
-        is_subscriber = False
-        email = None
-        if uid != request.website.user_id.id:
-            email = Users.browse(cr, SUPERUSER_ID, uid, context).email
-        elif request.session.get('mass_mailing_email'):
-            email = request.session['mass_mailing_email']
-
-        if email:
-            contact_ids = Contacts.search(cr, SUPERUSER_ID, [('list_id', '=', int(list_id)), ('email', '=', email), ('opt_out', '=', False)], context=context)
-            is_subscriber = len(contact_ids) > 0
-
-        return {'is_subscriber': is_subscriber, 'email': email}
-
-    @http.route('/website_mass_mailing/subscribe', type='json', auth="public", website=True)
-    def subscribe(self, list_id, email, **post):
-        cr, uid, context = request.cr, request.uid, request.context
-        Contacts = request.registry['mail.mass_mailing.contact']
-
-        contact_ids = Contacts.search_read(cr, SUPERUSER_ID, [('list_id', '=', int(list_id)), ('email', '=', email)], ['opt_out'], context=context)
-        if not contact_ids:
-            Contacts.add_to_list(cr, SUPERUSER_ID, email, int(list_id), context=context)
-        else:
-            if contact_ids[0]['opt_out']:
-                Contacts.write(cr, SUPERUSER_ID, [contact_ids[0]['id']], {'opt_out': False}, context=context)
-        # add email to session
-        request.session['mass_mailing_email'] = email
-        return True
-
     @http.route('/r/<string:code>/m/<int:stat_id>', type='http', auth="none")
     def full_url_redirect(self, code, stat_id, **post):
         cr, uid, context = request.cr, request.uid, request.context
-        request.registry['website.links.click'].add_click(cr, uid, code, request.httprequest.remote_addr, request.session['geoip'].get('country_code'), stat_id=stat_id, context=context)
-        return werkzeug.utils.redirect(request.registry['website.links'].get_url_from_code(cr, uid, code, context=context), 301)
-
-    @http.route(['/website_mass_mailing/get_content'], type='json', auth="public", website=True)
-    def get_mass_mailing_content(self, newsletter_id, **post):
-        data = self.is_subscriber(newsletter_id, **post)
-        mass_mailing_list = request.registry['mail.mass_mailing.list'].browse(request.cr, SUPERUSER_ID, int(newsletter_id), request.context)
-        data.update({
-            'content': mass_mailing_list.popup_content,
-            'redirect_url': mass_mailing_list.popup_redirect_url
-            })
-        return data
+        request.registry['link.tracker.click'].add_click(cr, uid, code, request.httprequest.remote_addr, request.session['geoip'].get('country_code'), stat_id=stat_id, context=context)
+        return werkzeug.utils.redirect(request.registry['link.tracker'].get_url_from_code(cr, uid, code, context=context), 301)
diff --git a/addons/mass_mailing/controllers/web_editor.py b/addons/mass_mailing/controllers/web_editor.py
new file mode 100644
index 00000000000..a9cff910c69
--- /dev/null
+++ b/addons/mass_mailing/controllers/web_editor.py
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+
+from openerp import http
+from openerp.http import request
+from openerp.addons.web_editor.controllers.main import Web_Editor
+
+
+class Web_Editor(Web_Editor):
+
+    @http.route(["/website_mass_mailing/field/popup_content"], type='http', auth="user")
+    def mass_mailing_FieldTextHtmlPopupTemplate(self, model=None, res_id=None, field=None, callback=None, **kwargs):
+        kwargs['snippets'] = '/website/snippets'
+        kwargs['template'] = 'mass_mailing.FieldTextHtmlPopupContent'
+        return self.FieldTextHtml(model, res_id, field, callback, **kwargs)
+
+    @http.route('/mass_mailing/field/email_template', type='http', auth="user")
+    def mass_mailing_FieldTextHtmlEmailTemplate(self, model=None, res_id=None, field=None, callback=None, **kwargs):
+        kwargs['snippets'] = '/mass_mailing/snippets'
+        kwargs['template'] = 'mass_mailing.FieldTextHtmlInline'
+        return self.FieldTextHtmlInline(model, res_id, field, callback, **kwargs)
+
+    @http.route(['/mass_mailing/snippets'], type='json', auth="user", website=True)
+    def mass_mailing_snippets(self):
+        values = {'company_id': request.env['res.users'].browse(request.uid).company_id}
+        return request.registry["ir.ui.view"].render(request.cr, request.uid, 'mass_mailing.email_designer_snippets', values, context=request.context)
diff --git a/addons/mass_mailing/controllers/website.py b/addons/mass_mailing/controllers/website.py
deleted file mode 100644
index 4222128535b..00000000000
--- a/addons/mass_mailing/controllers/website.py
+++ /dev/null
@@ -1,14 +0,0 @@
-# -*- coding: utf-8 -*-
-
-from openerp import http
-from openerp.addons.website.controllers.main import Website
-
-
-class Website(Website):
-
-    @http.route(["/website_mass_mailing/field/popup_content"], type='http', auth="public", website=True)
-    def FieldTextHtmlPopupTemplate(self, model=None, res_id=None, field=None, callback=None, **kwargs):
-        kwargs['snippets'] = 'snippets' not in kwargs and '/website/snippets' or kwargs['snippets']
-        kwargs['dont_load_assets'] = False
-        kwargs['template'] = "mass_mailing.FieldTextHtmlPopupContent"
-        return self.FieldTextHtml(model, res_id, field, callback, **kwargs)
diff --git a/addons/mass_mailing/data/mass_mailing_demo.xml b/addons/mass_mailing/data/mass_mailing_demo.xml
index 1c76d41ebcd..72bce71b78d 100644
--- a/addons/mass_mailing/data/mass_mailing_demo.xml
+++ b/addons/mass_mailing/data/mass_mailing_demo.xml
@@ -39,40 +39,9 @@
             <field name="model_id" ref="mass_mailing.model_mail_mass_mailing_contact"/>
             <field name="use_default_to" eval="True"/>
             <field name="auto_delete" eval="True"/>
-            <field name="body_html"><![CDATA[<div>
-<div class="snippet_row" style="padding: 0px; width: 600px; margin: auto; color: rgb(119, 119, 119); height: 80px; overflow: hidden; background-color: rgb(255, 255, 255);">
-<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit" width="100%"><tbody><tr><td style="text-align:center;padding-bottom:10px"><span style="color:#000000;"><span style="font-size:36px"></span></span>
-
-            <h2 style="font-family: arial; color: rgb(51, 51, 51); text-align: center; padding: 0px 5px;">A Punchy Headline</h2>
-            <span style="color:#000000;"><span style="font-size:36px"></span></span></td>
-        </tr><tr><td style="font-size:20px; text-align:center; padding: 0 5px"><span style="color:#000000;"></span></td>
-        </tr></tbody></table></div>
-
-<div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
-<table cellpadding="0" cellspacing="0" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit" width="600"><tbody><tr><td align="left" class="col_mv color_picker" style="text-align:center"><img alt="image" src="/website/static/src/img/big_picture.png" style="height: auto; max-width: 600px; width: 535px;"></td>
-        </tr></tbody></table></div>
-
-<div class="snippet_row" style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#777777">
-<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit" width="100%"><tbody><tr><td style="text-align:center;padding-bottom:10px"><span style="font-size:36px"></span>
-
-            <h3 style="font-family: arial; color: rgb(51, 51, 51); text-align: center; padding: 0px 5px; margin-top:20px;">A Small Subtitle for ${object.name}</h3>
-            <span style="font-size:36px"></span></td>
-        </tr><tr><td style="font-size:20px; text-align:center; padding: 0 5px"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px; text-align: center;"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px; text-align: center;">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</span></span></td>
-        </tr></tbody></table></div>
-
-<div style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#000;color:#777777">
-<table cellpadding="0" cellspacing="0" style="width:100%;border-collapse:collapse;background:inherit;color:inherit">
-    <tbody>
-        <tr>
-            <td class="col_mv color_picker" style="padding:30px 15px;width:33%;text-align:center;background-color:#fff;color:#777777"><img alt="column2 image" src="/website/static/src/img/desert_thumb.jpg" style="height: auto; max-width: 600px; padding: 20px 0px 30px; width: 270px;"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 24px; line-height: 1.1;">Feature One</span>
-
-            <p style="text-align: left;"><span style="font-size:24px;font-weight:bold"></span><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px;">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</span></p>
-            </td>
-            <td class="col_mv color_picker" style="vertical-align:top; padding: 30px 15px; width:33%;text-align:center;background-color:#fff;color:#777777"><img alt="column3 image" src="/website/static/src/img/deers_thumb.jpg" style="height: auto; max-width: 600px; padding: 20px 0px 30px; width: 270px;"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 24px; line-height: 1.1;">Feature Two</span>
-            <p style="text-align: left;"><span style="font-size:24px;font-weight:bold"></span><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px;">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</span></p>
-            </td>
-        </tr></tbody></table></div>
-</div>]]></field>
+            <field name="body_html"><![CDATA[<div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #ffffff repeat top /100%">
+                <table cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%"><tbody><tr><td style="padding:10px 10px 10px 5px" valign="center" width="270"> <a style="text-decoration:none" href="http://www.example.com"><strong>Your Company</strong></a> </td><td style="padding:10px 15px 10px 10px;vertical-align:middle" valign="center" width="270"><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tbody><tr><td align="right"><a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a href="https://www.facebook.com/Odoo"><span class="fa fa-google-plus-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a href="https://www.facebook.com/Odoo"><span class="fa fa-linkedin-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a href="https://www.facebook.com/Odoo"><span class="fa fa-twitter-square fa-2x" style="color:#44B7B7;"></span></a></td></tr></tbody></table></td></tr></tbody></table></div><div style="padding:0px;width:600px;margin:auto;background-color:#44B7B7;color:#168484"><table cellpadding="0" cellspacing="0" style="width:100%;background-color:inherit;border-collapse:collapse;color:inherit"><tbody><tr><td class="col_mv bg-color" style="text-align:left; padding-left:20px;vertical-align:middle;font-size:14px"><p style="margin:0;font-size:20px;color:#fff">You get a 20% discount for signing up!</p><p style="margin:0">Discount Code: <strong>45A9E77DGW8455</strong></p></td><td class="col_mv bg-color" style="padding:20px;text-align:center;vertical-align:middle">  <span class="fa fa-6x fa-ticket"></span>  </td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#168484"><table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit"><tbody><tr><td style="padding:10px 30px;font-size:14px;line-height:20px"><p style="margin:0">Dear ${object.name}</p><p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br></p><p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p><p style="margin:0">Kind Regards,</p><p style="margin:0">Michael Fletcher</p></td></tr></tbody></table></div><div style="padding:0;width:600px;max-width:600px;margin:0 auto"><table style="width:100%;text-align:justify;margin:0 auto;background-color:inherit;border-collapse:collapse"><tbody><tr><td class="col_mv bg-color" style="padding:10px 0;background-color:#168484;color:#fff"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-check fa-3x"></span>  </td><td style="padding-left:10px;color:#fff;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 1:</p><p style="margin:0">Place Order</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-truck fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 2:</p><p style="margin:0">Shipping</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-dollar fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 3:</p><p style="margin:0">Payment</p></td></tr></tbody></table></td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7"><div style="padding:10px"><table cellpadding="0" cellspacing="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit"><tbody><tr><td style="text-align:center"> <a style="text-decoration: none;" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x"></span></a><a style="text-decoration: none;" href="https://plus.google.com/+Odooapps"><span class="fa fa-google-plus-square fa-2x"></span></a><a style="text-decoration: none;" href="https://www.linkedin.com/company/odoo"><span class="fa fa-linkedin-square fa-2x"></span></a><a style="text-decoration: none;" href="https://twitter.com/Odoo"><span class="fa fa-twitter-square fa-2x"></span></a> </td></tr><tr><td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px"> <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>|<a href="/page/contactus" style="color:#44B7B7">Contact</a> </td></tr></tbody></table></div>
+            </div>]]></field>
         </record>
 
         <!-- Create campaign and mailings -->
@@ -98,44 +67,9 @@
             <field name="mailing_domain">[('customer', '=', True)]</field>
             <field name="reply_to_mode">email</field>
             <field name="reply_to"><![CDATA[Info <info@yourcompany.example.com>]]></field>
-            <field name="body_html"><![CDATA[<div>
-<div class="snippet_row" style="padding: 0px; width: 600px; margin: auto; color: rgb(119, 119, 119); height: 80px; overflow: hidden; background-color: rgb(255, 255, 255);">
-<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit" width="100%"><tbody><tr><td style="text-align:center;padding-bottom:10px"><span style="color:#000000;"><span style="font-size:36px"></span></span>
-
-            <h2 style="font-family: arial; color: rgb(51, 51, 51); text-align: center; padding: 0px 5px;">A Punchy Headline</h2>
-            <span style="color:#000000;"><span style="font-size:36px"></span></span></td>
-        </tr><tr><td style="font-size:20px; text-align:center; padding: 0 5px"><span style="color:#000000;"></span></td>
-        </tr></tbody></table></div>
-
-<div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
-<table cellpadding="0" cellspacing="0" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit" width="600"><tbody><tr><td align="left" class="col_mv color_picker" style="text-align:center"><img alt="image" src="/website/static/src/img/big_picture.png" style="height: auto; max-width: 600px; width: 535px;"></td>
-        </tr></tbody></table></div>
-
-<div class="snippet_row" style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#777777">
-<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit" width="100%"><tbody><tr><td style="text-align:center;padding-bottom:10px"><span style="font-size:36px"></span>
-
-            <h3 style="font-family: arial; color: rgb(51, 51, 51); text-align: center; padding: 0px 5px; margin-top:20px;">A Small Subtitle for ${object.name}</h3>
-            <span style="font-size:36px"></span></td>
-        </tr><tr><td style="font-size:20px; text-align:center; padding: 0 5px"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px; text-align: center;"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px; text-align: center;">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</span></span></td>
-        </tr>
-    </tbody>
-</table></div>
-
-<div style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#000;color:#777777">
-<table cellpadding="0" cellspacing="0" style="width:100%;border-collapse:collapse;background:inherit;color:inherit">
-    <tbody>
-        <tr>
-            <td class="col_mv color_picker" style="padding:30px 15px;width:33%;text-align:center;background-color:#fff;color:#777777"><img alt="column2 image" src="/website/static/src/img/desert_thumb.jpg" style="height: auto; max-width: 600px; padding: 20px 0px 30px; width: 270px;"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 24px; line-height: 1.1;">Feature One</span>
-
-            <p style="text-align: left;"><span style="font-size:24px;font-weight:bold"></span><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px;">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</span></p>
-            </td>
-            <td class="col_mv color_picker" style="vertical-align:top; padding: 30px 15px; width:33%;text-align:center;background-color:#fff;color:#777777"><img alt="column3 image" src="/website/static/src/img/deers_thumb.jpg" style="height: auto; max-width: 600px; padding: 20px 0px 30px; width: 270px;"><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 24px; line-height: 1.1;">Feature Two</span>
-            <p style="text-align: left;"><span style="font-size:24px;font-weight:bold"></span><span style="color: rgb(51, 51, 51); font-family: arial; font-size: 12px; line-height: 17.142858505249px;">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</span></p>
-            </td>
-        </tr>
-    </tbody>
-</table></div>
-</div>]]></field>
+            <field name="body_html"><![CDATA[<div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #ffffff repeat top /100%">
+                <table cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%"><tbody><tr><td style="padding:10px 10px 10px 5px" valign="center" width="270"> <a style="text-decoration:none" href="http://www.example.com"><strong>Your Company</strong></a> </td><td style="padding:10px 15px 10px 10px;vertical-align:middle" valign="center" width="270"><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tbody><tr><td align="right"><a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a href="https://www.facebook.com/Odoo"><span class="fa fa-google-plus-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a href="https://www.facebook.com/Odoo"><span class="fa fa-linkedin-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a href="https://www.facebook.com/Odoo"><span class="fa fa-twitter-square fa-2x" style="color:#44B7B7;"></span></a></td></tr></tbody></table></td></tr></tbody></table></div><div style="padding:0px;width:600px;margin:auto;background-color:#44B7B7;color:#168484"><table cellpadding="0" cellspacing="0" style="width:100%;background-color:inherit;border-collapse:collapse;color:inherit"><tbody><tr><td class="col_mv bg-color" style="text-align:left; padding-left:20px;vertical-align:middle;font-size:14px"><p style="margin:0;font-size:20px;color:#fff">You get a 20% discount for signing up!</p><p style="margin:0">Discount Code: <strong>45A9E77DGW8455</strong></p></td><td class="col_mv bg-color" style="padding:20px;text-align:center;vertical-align:middle">  <span class="fa fa-6x fa-ticket"></span>  </td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#168484"><table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit"><tbody><tr><td style="padding:10px 30px;font-size:14px;line-height:20px"><p style="margin:0">Dear ${object.name}</p><p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br></p><p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p><p style="margin:0">Kind Regards,</p><p style="margin:0">Michael Fletcher</p></td></tr></tbody></table></div><div style="padding:0;width:600px;max-width:600px;margin:0 auto"><table style="width:100%;text-align:justify;margin:0 auto;background-color:inherit;border-collapse:collapse"><tbody><tr><td class="col_mv bg-color" style="padding:10px 0;background-color:#168484;color:#fff"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-check fa-3x"></span>  </td><td style="padding-left:10px;color:#fff;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 1:</p><p style="margin:0">Place Order</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-truck fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 2:</p><p style="margin:0">Shipping</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-dollar fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 3:</p><p style="margin:0">Payment</p></td></tr></tbody></table></td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7"><div style="padding:10px"><table cellpadding="0" cellspacing="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit"><tbody><tr><td style="text-align:center"> <a style="text-decoration: none;" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x"></span></a><a style="text-decoration: none;" href="https://plus.google.com/+Odooapps"><span class="fa fa-google-plus-square fa-2x"></span></a><a style="text-decoration: none;" href="https://www.linkedin.com/company/odoo"><span class="fa fa-linkedin-square fa-2x"></span></a><a style="text-decoration: none;" href="https://twitter.com/Odoo"><span class="fa fa-twitter-square fa-2x"></span></a> </td></tr><tr><td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px"> <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>|<a href="/page/contactus" style="color:#44B7B7">Contact</a> </td></tr></tbody></table></div>
+        </div>]]></field>
             <field name="attachment_ids" eval="[(4, ref('mass_mail_attach_1'))]"/>
         </record>
         <record id="mass_mail_2" model="mail.mass_mailing">
diff --git a/addons/mass_mailing/models/__init__.py b/addons/mass_mailing/models/__init__.py
index 1e9affea3e7..8ae20b69f90 100644
--- a/addons/mass_mailing/models/__init__.py
+++ b/addons/mass_mailing/models/__init__.py
@@ -6,4 +6,4 @@ import mail_mail
 import mail_thread
 import res_config
 import mass_mailing_report
-import website_links
+import link_tracker
diff --git a/addons/mass_mailing/models/website_links.py b/addons/mass_mailing/models/link_tracker.py
similarity index 71%
rename from addons/mass_mailing/models/website_links.py
rename to addons/mass_mailing/models/link_tracker.py
index f5e10a817d0..02de2ec4cd6 100644
--- a/addons/mass_mailing/models/website_links.py
+++ b/addons/mass_mailing/models/link_tracker.py
@@ -1,15 +1,15 @@
 from openerp import fields
 from openerp import models
 
-class website_links(models.Model):
-    _inherit = "website.links"
+class link_tracker(models.Model):
+    _inherit = "link.tracker"
 
     mass_mailing_id = fields.Many2one('mail.mass_mailing', string='Mass Mailing')
     mass_mailing_campaign_id = fields.Many2one('mail.mass_mailing.campaign', string='Mass Mailing Campaign')
 
-class website_links_click(models.Model):
-    _inherit = "website.links.click"
+class link_tracker_click(models.Model):
+    _inherit = "link.tracker.click"
 
     mail_stat_id = fields.Many2one('mail.mail.statistics', string='Mail Statistics')
     mass_mailing_id = fields.Many2one('mail.mass_mailing', string='Mass Mailing')
-    mass_mailing_campaign_id = fields.Many2one('mail.mass_mailing.campaign', string='Mass Mailing Campaign')
\ No newline at end of file
+    mass_mailing_campaign_id = fields.Many2one('mail.mass_mailing.campaign', string='Mass Mailing Campaign')
diff --git a/addons/mass_mailing/models/mass_mailing.py b/addons/mass_mailing/models/mass_mailing.py
index 8869092d302..05dd09ddfd9 100644
--- a/addons/mass_mailing/models/mass_mailing.py
+++ b/addons/mass_mailing/models/mass_mailing.py
@@ -208,7 +208,7 @@ class MassMailingCampaign(osv.Model):
         cr.execute("""
             SELECT COUNT(DISTINCT(stats.id)) AS nb_mails, COUNT(DISTINCT(clicks.mail_stat_id)) AS nb_clicks, stats.mass_mailing_campaign_id AS id 
             FROM mail_mail_statistics AS stats
-            LEFT OUTER JOIN website_links_click AS clicks ON clicks.mail_stat_id = stats.id
+            LEFT OUTER JOIN link_tracker_click AS clicks ON clicks.mail_stat_id = stats.id
             WHERE stats.mass_mailing_campaign_id IN %s
             GROUP BY stats.mass_mailing_campaign_id
         """, (tuple(ids), ))
@@ -436,7 +436,7 @@ class MassMailing(osv.Model):
         cr.execute("""
             SELECT COUNT(DISTINCT(stats.id)) AS nb_mails, COUNT(DISTINCT(clicks.mail_stat_id)) AS nb_clicks, stats.mass_mailing_id AS id 
             FROM mail_mail_statistics AS stats
-            LEFT OUTER JOIN website_links_click AS clicks ON clicks.mail_stat_id = stats.id
+            LEFT OUTER JOIN link_tracker_click AS clicks ON clicks.mail_stat_id = stats.id
             WHERE stats.mass_mailing_id IN %s
             GROUP BY stats.mass_mailing_id
         """, (tuple(ids), ))
@@ -479,7 +479,7 @@ class MassMailing(osv.Model):
         'create_date': fields.datetime('Creation Date'),
         'sent_date': fields.datetime('Sent Date', oldname='date', copy=False),
         'schedule_date': fields.datetime('Schedule in the Future'),
-        'body_html': fields.html('Body'),
+        'body_html': fields.html('Body', translate=True),
         'attachment_ids': fields.many2many(
             'ir.attachment', 'mass_mailing_ir_attachments_rel',
             'mass_mailing_id', 'attachment_id', 'Attachments'
@@ -583,7 +583,7 @@ class MassMailing(osv.Model):
 
     def mass_mailing_statistics_action(self, cr, uid, ids, context=None):
         res = self.pool['ir.actions.act_window'].for_xml_id(cr, uid, 'mass_mailing', 'action_view_mass_mailing_statistics', context=context)
-        link_click_ids = self.pool['website.links.click'].search(cr, uid, [('mass_mailing_id', 'in', ids)], context=context)
+        link_click_ids = self.pool['link.tracker.click'].search(cr, uid, [('mass_mailing_id', 'in', ids)], context=context)
         res['domain'] = [('id', 'in', link_click_ids)]
         return res
 
@@ -796,7 +796,7 @@ class MassMailing(osv.Model):
             if utm_mixin.medium_id:
                 vals['medium_id'] = utm_mixin.medium_id.id
 
-            res[mass_mailing.id] = self.pool['website.links'].convert_links(cr, uid, html, vals, blacklist=['/unsubscribe_from_list'], context=context)
+            res[mass_mailing.id] = self.pool['link.tracker'].convert_links(cr, uid, html, vals, blacklist=['/unsubscribe_from_list'], context=context)
 
         return res
 
diff --git a/addons/mass_mailing/models/mass_mailing_stats.py b/addons/mass_mailing/models/mass_mailing_stats.py
index 7d50e9ab42b..58ab233c4ae 100644
--- a/addons/mass_mailing/models/mass_mailing_stats.py
+++ b/addons/mass_mailing/models/mass_mailing_stats.py
@@ -78,7 +78,7 @@ class MailMailStats(osv.Model):
         'opened': fields.datetime('Opened', help='Date when the email has been opened the first time'),
         'replied': fields.datetime('Replied', help='Date when this email has been replied for the first time.'),
         'bounced': fields.datetime('Bounced', help='Date when this email has bounced.'),
-        'links_click_ids': fields.one2many('website.links.click', 'mail_stat_id', 'Links click'),
+        'links_click_ids': fields.one2many('link.tracker.click', 'mail_stat_id', 'Links click'),
         'state': fields.function(_compute_state, string='State', type="selection", multi="state",
                                  selection=[('outgoing', 'Outgoing'),
                                             ('exception', 'Exception'),
diff --git a/addons/website_mail/static/src/css/website_mail_iframe.css b/addons/mass_mailing/static/src/css/mass_mailing_editor.css
similarity index 67%
rename from addons/website_mail/static/src/css/website_mail_iframe.css
rename to addons/mass_mailing/static/src/css/mass_mailing_editor.css
index 6e8d6541c95..e2efcf87efa 100644
--- a/addons/website_mail/static/src/css/website_mail_iframe.css
+++ b/addons/mass_mailing/static/src/css/mass_mailing_editor.css
@@ -1,55 +1,3 @@
-body {
-    background-color: #fff;
-}
-p {
-    margin: initial;
-}
-a {
-    color: inherit;
-}
-a:hover {
-    color: inherit;
-}
-#wrapwrap .o_editable {
-    font: initial;
-    line-height: initial;
-    color: initial;
-}
-#oe_snippets ~ #wrapwrap .o_editable {
-    margin-bottom: 100px;
-}
-
-#wrapwrap > main > div:first-child {
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-}
-
-.editor_enable #wrapwrap > main > div:first-child:before, #wrapwrap > main > div:first-child:after {
-    content: " ";
-    display: block;
-    height: 100%;
-    position: fixed;
-    top: -4px;
-    width: 0;
-    overflow: hidden;
-}
-.editor_enable #wrapwrap > main > div:first-child:before {
-    border-right: 1px dashed #ccc;
-    margin-left: -5px;
-}
-.editor_enable #wrapwrap > main > div:first-child:after {
-    border-left: 1px dashed #ccc;
-    margin-left: 605px;
-}
-
-.note-color-palette .colorpicker {
-    display: none;
-}
-
-/***************************/
-
 #email_theme_list, #email_template_list {
     clear: both;
     text-align: center;
@@ -128,17 +76,21 @@ a:hover {
 /***************************/
 
 #templates{
+    margin-top: 50px;
     width: 98%;
 }
 #choose_template{
     display: none;
     margin: 5px;
-    padding: 1px 5px;
     position: fixed;
     top: 0;
-    right: 50px;
+    right: 28px;
     z-index: 2000;
 }
+#choose_template span{
+    padding: 1px 5px;
+    height: 24px;
+}
 #templates .template_preview_border{
     overflow: hidden !important;
     border: 2px solid grey;
@@ -161,4 +113,4 @@ a:hover {
 }
 .theme_thumbnail:hover>.template_preview{
     opacity:0.3;
-}
\ No newline at end of file
+}
diff --git a/addons/website_mail/static/src/css/snippets.css b/addons/mass_mailing/static/src/css/mass_mailing_editor_thumb.css
similarity index 59%
rename from addons/website_mail/static/src/css/snippets.css
rename to addons/mass_mailing/static/src/css/mass_mailing_editor_thumb.css
index c6e3ce1716f..f3e6a40454f 100644
--- a/addons/website_mail/static/src/css/snippets.css
+++ b/addons/mass_mailing/static/src/css/mass_mailing_editor_thumb.css
@@ -1,85 +1,85 @@
 /* ---- thumbnail ----  */
 .oe_snippet.o_mail_block_header_center_logo .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_header_center_logo.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_header_center_logo.png");
 }
 .oe_snippet.o_mail_block_header_center_text .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_header_center_text.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_header_center_text.png");
 }
 .oe_snippet.o_mail_block_header_social .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_header_social.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_header_social.png");
 }
 .oe_snippet.o_mail_block_header_text_social .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_header_text_social.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_header_text_social.png");
 }
 .oe_snippet.o_mail_block_text_image .oe_snippet_thumbnail_img {
-    background-image: url("/website/static/src/img/blocks/block_text_image.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_text-image.png");
 }
 .oe_snippet.o_mail_block_footer_copyright .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_footer_copyright.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_footer_copyright.png");
 }
 .oe_snippet.o_mail_block_footer_social .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_footer_social.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_footer_social.png");
 }
 .oe_snippet.o_mail_block_footer_text .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_footer_text.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_footer_text.png");
 }
 .oe_snippet.o_mail_block_footer_seprator .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_footer_seprator.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_footer_seprator.png");
 }
 .oe_snippet.o_mail_block_footer_tag_line .oe_snippet_thumbnail_img {
-    background-image: url("/website_mail/static/src/img/blocks/block_footer_tag_line.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_footer_tag_line.png");
 }
 .oe_snippet.o_mail_block_two_cols .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_two-column-img.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_two-column-img.png");
 }
 .oe_snippet.o_mail_block_two_cols_content .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_two-column.png");
+    background-image: url("/mass_mailing/static/src/img/blocks/block_two-column.png");
 }
 .oe_snippet.o_mail_block_title_text .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_title_text.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_title_text.png")
 }
 .oe_snippet.o_mail_block_title_sub .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_title.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_title.png")
 }
 .oe_snippet.o_mail_block_image_text .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_image-text.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_image-text.png")
 }
 .oe_snippet.o_mail_block_text_button .oe_snippet_thumbnail_img{
     background-image: url("/website/static/src/img/blocks/block_jumbotron.png")
 }
 .oe_snippet.o_mail_block_table_content .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_table.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_table.png")
 }
 .oe_snippet.o_mail_block_discount1 .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_discount.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_discount.png")
 }
 .oe_snippet.o_mail_block_discount2 .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_discount2.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_discount2.png")
 }
 .oe_snippet.o_mail_block_event .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_event.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_event.png")
 }
 .oe_snippet.o_mail_block_image .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_image_text.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_image_text.png")
 }
 .oe_snippet.o_mail_block_profile .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_user.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_user.png")
 }
 .oe_snippet.o_mail_block_four_cols .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_four_columns.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_four_columns.png")
 }
 .oe_snippet.o_mail_block_button .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_button.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_button.png")
 }
 .oe_snippet.o_mail_block_simple_text .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_simple_text.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_simple_text.png")
 }
 .oe_snippet.o_mail_block_three_cols .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_three_columns.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_three_columns.png")
 }
 .oe_snippet.o_mail_block_text_on_img .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_text_on_image.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_text_on_image.png")
 }
 .oe_snippet.o_mail_block_steps .oe_snippet_thumbnail_img{
-    background-image: url("/website_mail/static/src/img/blocks/block_steps.png")
+    background-image: url("/mass_mailing/static/src/img/blocks/block_steps.png")
 }
diff --git a/addons/mass_mailing/static/src/css/mass_mailing_popup.css b/addons/mass_mailing/static/src/css/mass_mailing_popup.css
index 084cc2a2ce6..9a81138b9c1 100644
--- a/addons/mass_mailing/static/src/css/mass_mailing_popup.css
+++ b/addons/mass_mailing/static/src/css/mass_mailing_popup.css
@@ -1,7 +1,7 @@
 /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
 .editor_enable [data-oe-placeholder]:empty:not(:focus):before {
-  content: attr(data-oe-placeholder);
-  opacity: 0.3;
+  content: " \00a0 " attr(data-oe-placeholder);
+  opacity: 0.4;
 }
 .o_popup_animated {
   -webkit-animation-duration: 1s;
diff --git a/addons/website_mail/static/src/img/blocks/block_button.png b/addons/mass_mailing/static/src/img/blocks/block_button.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_button.png
rename to addons/mass_mailing/static/src/img/blocks/block_button.png
diff --git a/addons/website_mail/static/src/img/blocks/block_discount.png b/addons/mass_mailing/static/src/img/blocks/block_discount.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_discount.png
rename to addons/mass_mailing/static/src/img/blocks/block_discount.png
diff --git a/addons/website_mail/static/src/img/blocks/block_discount2.png b/addons/mass_mailing/static/src/img/blocks/block_discount2.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_discount2.png
rename to addons/mass_mailing/static/src/img/blocks/block_discount2.png
diff --git a/addons/website_mail/static/src/img/blocks/block_event.png b/addons/mass_mailing/static/src/img/blocks/block_event.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_event.png
rename to addons/mass_mailing/static/src/img/blocks/block_event.png
diff --git a/addons/website_mail/static/src/img/blocks/block_footer_copyright.png b/addons/mass_mailing/static/src/img/blocks/block_footer_copyright.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_footer_copyright.png
rename to addons/mass_mailing/static/src/img/blocks/block_footer_copyright.png
diff --git a/addons/website_mail/static/src/img/blocks/block_footer_seprator.png b/addons/mass_mailing/static/src/img/blocks/block_footer_seprator.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_footer_seprator.png
rename to addons/mass_mailing/static/src/img/blocks/block_footer_seprator.png
diff --git a/addons/website_mail/static/src/img/blocks/block_footer_social.png b/addons/mass_mailing/static/src/img/blocks/block_footer_social.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_footer_social.png
rename to addons/mass_mailing/static/src/img/blocks/block_footer_social.png
diff --git a/addons/website_mail/static/src/img/blocks/block_footer_tag_line.png b/addons/mass_mailing/static/src/img/blocks/block_footer_tag_line.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_footer_tag_line.png
rename to addons/mass_mailing/static/src/img/blocks/block_footer_tag_line.png
diff --git a/addons/website_mail/static/src/img/blocks/block_footer_text.png b/addons/mass_mailing/static/src/img/blocks/block_footer_text.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_footer_text.png
rename to addons/mass_mailing/static/src/img/blocks/block_footer_text.png
diff --git a/addons/website_mail/static/src/img/blocks/block_four_columns.png b/addons/mass_mailing/static/src/img/blocks/block_four_columns.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_four_columns.png
rename to addons/mass_mailing/static/src/img/blocks/block_four_columns.png
diff --git a/addons/website_mail/static/src/img/blocks/block_header_center_logo.png b/addons/mass_mailing/static/src/img/blocks/block_header_center_logo.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_header_center_logo.png
rename to addons/mass_mailing/static/src/img/blocks/block_header_center_logo.png
diff --git a/addons/website_mail/static/src/img/blocks/block_header_center_text.png b/addons/mass_mailing/static/src/img/blocks/block_header_center_text.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_header_center_text.png
rename to addons/mass_mailing/static/src/img/blocks/block_header_center_text.png
diff --git a/addons/website_mail/static/src/img/blocks/block_header_social.png b/addons/mass_mailing/static/src/img/blocks/block_header_social.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_header_social.png
rename to addons/mass_mailing/static/src/img/blocks/block_header_social.png
diff --git a/addons/website_mail/static/src/img/blocks/block_header_text_social.png b/addons/mass_mailing/static/src/img/blocks/block_header_text_social.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_header_text_social.png
rename to addons/mass_mailing/static/src/img/blocks/block_header_text_social.png
diff --git a/addons/website_mail/static/src/img/blocks/block_image-text.png b/addons/mass_mailing/static/src/img/blocks/block_image-text.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_image-text.png
rename to addons/mass_mailing/static/src/img/blocks/block_image-text.png
diff --git a/addons/website_mail/static/src/img/blocks/block_image_text.png b/addons/mass_mailing/static/src/img/blocks/block_image_text.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_image_text.png
rename to addons/mass_mailing/static/src/img/blocks/block_image_text.png
diff --git a/addons/website_mail/static/src/img/blocks/block_simple_text.png b/addons/mass_mailing/static/src/img/blocks/block_simple_text.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_simple_text.png
rename to addons/mass_mailing/static/src/img/blocks/block_simple_text.png
diff --git a/addons/website_mail/static/src/img/blocks/block_steps.png b/addons/mass_mailing/static/src/img/blocks/block_steps.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_steps.png
rename to addons/mass_mailing/static/src/img/blocks/block_steps.png
diff --git a/addons/website_mail/static/src/img/blocks/block_table.png b/addons/mass_mailing/static/src/img/blocks/block_table.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_table.png
rename to addons/mass_mailing/static/src/img/blocks/block_table.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_text-image.png b/addons/mass_mailing/static/src/img/blocks/block_text-image.png
new file mode 100644
index 00000000000..edbf697a2d0
Binary files /dev/null and b/addons/mass_mailing/static/src/img/blocks/block_text-image.png differ
diff --git a/addons/website_mail/static/src/img/blocks/block_text_on_image.png b/addons/mass_mailing/static/src/img/blocks/block_text_on_image.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_text_on_image.png
rename to addons/mass_mailing/static/src/img/blocks/block_text_on_image.png
diff --git a/addons/website_mail/static/src/img/blocks/block_three_columns.png b/addons/mass_mailing/static/src/img/blocks/block_three_columns.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_three_columns.png
rename to addons/mass_mailing/static/src/img/blocks/block_three_columns.png
diff --git a/addons/website_mail/static/src/img/blocks/block_title.png b/addons/mass_mailing/static/src/img/blocks/block_title.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_title.png
rename to addons/mass_mailing/static/src/img/blocks/block_title.png
diff --git a/addons/website_mail/static/src/img/blocks/block_title_text.png b/addons/mass_mailing/static/src/img/blocks/block_title_text.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_title_text.png
rename to addons/mass_mailing/static/src/img/blocks/block_title_text.png
diff --git a/addons/website_mail/static/src/img/blocks/block_two-column-img.png b/addons/mass_mailing/static/src/img/blocks/block_two-column-img.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_two-column-img.png
rename to addons/mass_mailing/static/src/img/blocks/block_two-column-img.png
diff --git a/addons/website_mail/static/src/img/blocks/block_two-column.png b/addons/mass_mailing/static/src/img/blocks/block_two-column.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_two-column.png
rename to addons/mass_mailing/static/src/img/blocks/block_two-column.png
diff --git a/addons/website_mail/static/src/img/blocks/block_user.png b/addons/mass_mailing/static/src/img/blocks/block_user.png
similarity index 100%
rename from addons/website_mail/static/src/img/blocks/block_user.png
rename to addons/mass_mailing/static/src/img/blocks/block_user.png
diff --git a/addons/website_mail/static/src/img/theme_imgs/airmail.png b/addons/mass_mailing/static/src/img/theme_imgs/airmail.png
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/airmail.png
rename to addons/mass_mailing/static/src/img/theme_imgs/airmail.png
diff --git a/addons/website_mail/static/src/img/theme_imgs/skyline_bg.gif b/addons/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/skyline_bg.gif
rename to addons/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif
diff --git a/addons/website_mail/static/src/img/theme_imgs/social_facebook.png b/addons/mass_mailing/static/src/img/theme_imgs/social_facebook.png
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/social_facebook.png
rename to addons/mass_mailing/static/src/img/theme_imgs/social_facebook.png
diff --git a/addons/website_mail/static/src/img/theme_imgs/social_googleplus.png b/addons/mass_mailing/static/src/img/theme_imgs/social_googleplus.png
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/social_googleplus.png
rename to addons/mass_mailing/static/src/img/theme_imgs/social_googleplus.png
diff --git a/addons/website_mail/static/src/img/theme_imgs/social_linkedin.png b/addons/mass_mailing/static/src/img/theme_imgs/social_linkedin.png
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/social_linkedin.png
rename to addons/mass_mailing/static/src/img/theme_imgs/social_linkedin.png
diff --git a/addons/website_mail/static/src/img/theme_imgs/social_rss.png b/addons/mass_mailing/static/src/img/theme_imgs/social_rss.png
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/social_rss.png
rename to addons/mass_mailing/static/src/img/theme_imgs/social_rss.png
diff --git a/addons/website_mail/static/src/img/theme_imgs/social_twitter.png b/addons/mass_mailing/static/src/img/theme_imgs/social_twitter.png
similarity index 100%
rename from addons/website_mail/static/src/img/theme_imgs/social_twitter.png
rename to addons/mass_mailing/static/src/img/theme_imgs/social_twitter.png
diff --git a/addons/website_mail/static/src/js/website_email_designer.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
similarity index 50%
rename from addons/website_mail/static/src/js/website_email_designer.js
rename to addons/mass_mailing/static/src/js/mass_mailing_editor.js
index beafd4a6b5e..4974674ba3a 100644
--- a/addons/website_mail/static/src/js/website_email_designer.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -1,19 +1,20 @@
-odoo.define('website_mail.website_mail', function (require) {
+odoo.define('mass_mailing.editor', function (require) {
 "use strict";
 
 var Model = require('web.Model');
-var editor = require('website.editor');
-var snippets_editor = require('website.snippets.editor');
-
+var rte = require('web_editor.rte');
+var web_editor = require('web_editor.editor');
+var options = require('web_editor.snippets.options');
+var snippets_editor = require('web_editor.snippet.editor');
 
 // Snippet option for resizing  image and column width inline like excel
-snippets_editor.options["width-x"] = snippets_editor.Option.extend({
+options.registry["width-x"] = options.Class.extend({
     start: function () {
         this.container_width = 600;
         var parent = this.$target.closest('[data-max-width]');
         if( parent.length ){
             this.container_width = parseInt(parent.attr('data-max-width'));
-        }
+        } 
         var self = this;
         var offset, sib_offset, target_width, sib_width;
         this.is_image = false;
@@ -35,7 +36,7 @@ snippets_editor.options["width-x"] = snippets_editor.Option.extend({
                 if ($handle.hasClass(handler)) { compass = handler; }
             });
             if(self.is_image){ compass = "image"; }
-            self.BuildingBlock.editor_busy = true;
+            self.buildingBlock.editor_busy = true;
 
             var $body = $(document.body);
 
@@ -58,11 +59,11 @@ snippets_editor.options["width-x"] = snippets_editor.Option.extend({
                 if (compass === 'image'){
                     self.change_width(event, self.$target, target_width, offset ,'plus');
                 }
-            };
+            }
             var body_mouseup = function(){
                 $body.unbind('mousemove', body_mousemove);
                 $body.unbind('mouseup', body_mouseup);
-                self.BuildingBlock.editor_busy = false;
+                self.buildingBlock.editor_busy = false;
                 self.$target.removeClass("resize_editor_busy");
             };
             $body.mousemove(body_mousemove);
@@ -77,7 +78,7 @@ snippets_editor.options["width-x"] = snippets_editor.Option.extend({
             var width = offset + target_width - event.pageX;
         }
         target.css("width", width + "px");
-        self.BuildingBlock.cover_target(self.$overlay, self.$target);
+        self.buildingBlock.cover_target(self.$overlay, self.$target);
         return;
     },
     get_int_width: function ($el) {
@@ -89,7 +90,7 @@ snippets_editor.options["width-x"] = snippets_editor.Option.extend({
         var self = this;
         _.each($el.siblings(),function(sib){
             max_width +=  self.get_int_width($(sib));
-        });
+        })
         return this.container_width - max_width;
     },
     on_clone: function ($clone) {
@@ -99,13 +100,13 @@ snippets_editor.options["width-x"] = snippets_editor.Option.extend({
             _.each($table.find('tbody>tr'),function(row){
                 var clone_selector = 'td:eq(' + clone_index + ')';
                 var $col_to_clone = $(row).find(clone_selector);
-                if($col_to_clone.length !== 0){
+                if($col_to_clone.length != 0){
                     $col_to_clone.after($col_to_clone.clone());
                 }
             });
         }
         this._super($clone);
-        this.BuildingBlock.cover_target(this.$overlay, this.$target);
+        this.buildingBlock.cover_target(this.$overlay, this.$target);
     },
     on_remove: function () {
         var remove_index = $(this.$target).index();
@@ -117,7 +118,7 @@ snippets_editor.options["width-x"] = snippets_editor.Option.extend({
             });
         }
         this._super();
-        this.BuildingBlock.cover_target(this.$overlay, this.$target);
+        this.buildingBlock.cover_target(this.$overlay, this.$target);
     },
 });
 
@@ -128,31 +129,22 @@ $.summernote.eventHandler.popover.update = function ($popover, oStyle, isAirMode
     $("span.o_table_handler, div.note-table").remove();
 };
 
-editor.EditorBar.include({
+web_editor.Class.include({
     start: function () {
         var self = this;
         if (location.search.indexOf("enable_editor") !== -1) {
-            this.on('rte:ready', this, function () {
+            this.on('rte:start', this, function () {
                 $("#choose_template").off("click").on("click", _.bind(self.on_choose_template, self));
                 $(".theme_thumbnail [data-snippet-theme]").off("click").on("click", _.bind(self.on_set_snippet_theme, self));
-                $("#wrapwrap").on('click', function (event) {
-                    if ($(event.target).is("#wrapwrap")) {
-                        setTimeout(function () {
-                            var node = $("#wrapwrap .o_editable:first *")
-                                .filter(function () { return this.textContent.match(/\S|\u00A0/); })
-                                .add($("#wrapwrap .o_editable:first"))
-                                .last()[0];
-                            $.summernote.core.range.create(node, $.summernote.core.dom.nodeLength(node)).select();
-                        },0);
-                    }
-                });
+                var $editable = $("#editable_area");
+                $editable.html($editable.prop("innerHTML").replace(/^<p[^>]*>\s*<\/p>$/, ''));
             });
             this.on("snippets:ready", this, _.bind(self.display_theme_from_html, self));
         }
         return this._super.apply(this, arguments);
     },
     display_theme_from_html: function () {
-        var theme = $("#wrapwrap .o_editable:first [data-snippet-theme]").data("snippet-theme");
+        var theme = $("#editable_area [data-snippet-theme]").data("snippet-theme");
         if (theme) {
             $("#choose_template").show();
             this.set_snippet_theme(theme);
@@ -170,15 +162,18 @@ editor.EditorBar.include({
         if (event) {
             $("#choose_template").show();
         }
-        var $editable = $("#wrapwrap .o_editable:first");
+        var $editable = $("#editable_area");
         $(".o_table_handler").remove();
         $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
         $("#choose_template").children().toggleClass("hidden");
         $("body").trigger("resize");
         $(window.top).trigger('resize');
+        setTimeout(function () {
+            $(".note-popover").toggleClass("hidden", $("#templates").is(":visible"));
+        },0);
     },
     on_set_snippet_template: function (event) {
-        var $editable = $("#wrapwrap .o_editable:first");
+        var $editable = $("#editable_area");
         this.rte.historyRecordUndo($editable);
         $editable.html( $(event.target).closest(".theme_thumbnail").find(".js_content").html() );
         $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
@@ -201,7 +196,7 @@ editor.EditorBar.include({
     get_snippet_template: function (mailing_model) {
         var self = this;
         var domain = [['model', '=', mailing_model]];
-        new Model('mail.template').call('search_read', [domain]).then(function (datas) {
+        return new Model('mail.template').call('search_read', [domain]).then(function (datas) {
             var $template = $("#templates > div:last").addClass("hidden");
             var $tclone = $template.find("> div > div:first");
             $tclone.siblings().remove();
@@ -221,193 +216,33 @@ editor.EditorBar.include({
     }
 });
 
-var cache = {};
-var rulesCache = [];
-function getMatchedCSSRules(a) {
-    if(cache[a.tagName + "." +a.className]) {
-        return cache[a.tagName + "." +a.className];
-    }
-    if (!rulesCache.length) {
-        var sheets = document.styleSheets;
-        for(var i = 0; i < sheets.length; i++) {
-            var rules = sheets[i].rules || sheets[i].cssRules;
-            if (rules) {
-                for(var r = 0; r < rules.length; r++) {
-                    var selectorText = rules[r].selectorText;
-                    if (selectorText &&
-                            rules[r].cssText &&
-                            selectorText.indexOf(".") !== -1 &&
-                            selectorText.indexOf(":hover") === -1 &&
-                            selectorText.indexOf(":before") === -1 &&
-                            selectorText.indexOf(":after") === -1 &&
-                            selectorText.indexOf(":active") === -1 &&
-                            selectorText.indexOf(":link") === -1 &&
-                            selectorText.indexOf("::") === -1) {
-                        var st = selectorText.split(/\s*,\s*/);
-                        for (var k=0; k<st.length; k++) {
-                            rulesCache.push({
-                                'selector': st[k],
-                                'style': rules[r].style,
-                                'point': st[k].split(/\s+/).length
-                            });
-                        }
-                    }
-                }
-            }
-        }
-
-        rulesCache.sort(function (a,b) {
-            return a.point-b.point;
-        });
-    }
-
-    var css = [];
-    a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
-    for(var r = 0; r < rulesCache.length; r++) {
-        if (a.matches(rulesCache[r].selector)) {
-            var style = rulesCache[r].style;
-            if (style.parentRule) {
-                var style_obj = {};
-                for (var k=0, len=style.length; k<len; k++) {
-                    style_obj[style[k]] = style[style[k]];
-                }
-                rulesCache[r].style = style = style_obj;
-            }
-            css.push(style);
-        }
-    }
-
-    var style = {};
-    _.each(css, function (v,k) {
-        _.each(v, function (v,k) {
-            if (!style[k] || style[k].indexOf('important') === -1 || v.indexOf('important') !== -1) {
-                style[k] = v;
-            }
-        });
-    });
-
-    return cache[a.tagName + "." +a.className] = style;
-}
-
-$.fn.bindFirst = function(name, fn) {
-    this.bind(name, fn);
-    var handlers = $._data($(this).get(0), 'events')[name.split('.')[0]];
-    var handler = handlers.pop();
-    handlers.splice(0, 0, handler);
-};
-
-snippets_editor.BuildingBlock.include({
-    start: function () {
-        var self = this;
-        this._super();
-        setTimeout(function () {
-            self.img_to_font();
-            self.style_to_class();
-        });
-    },
-
+snippets_editor.Class.include({
     _get_snippet_url: function () {
         return snippets_url;
     },
     clean_for_save: function () {
         this._super();
-        this.class_to_style();
-        this.font_to_img();
-        var $editable = $("#wrapwrap .o_editable:first");
+        var $editable = $("#editable_area");
         var theme = ($("#o_left_bar .o_panel_body > div:not(.hidden)").attr("class") || "").replace(/^\s*|\s*o_mail_block[^\s]+\s*|\s*oe_snippet\s*|\s*ui-draggable\s*|\s*$/g, '');
-        var $theme = $("#wrapwrap .o_editable:first [data-snippet-theme]").removeAttr("data-snippet-theme").removeData("snippet-theme");
+        var $theme = $("#editable_area [data-snippet-theme]").removeAttr("data-snippet-theme").removeData("snippet-theme");
         $editable.children().first().attr("data-snippet-theme", theme);
-        $editable.find(":hidden").remove();
+        $editable.find(":not(br):hidden").remove();
     },
-    // convert font awsome into image
-    font_to_img: function () {
-        $("#wrapwrap .fa").each(function () {
-            var $font = $(this);
-            var content;
-            _.find(editor.fontIcons, function (font) {
-                return _.find(editor.getCssSelectors(font.parser), function (css) {
-                    if ($font.is(css[0].replace(/::?before$/, ''))) {
-                        content = css[1].match(/content:\s*['"](.)['"]/)[1];
-                        return true;
-                    }
-                });
-            });
-            if (content) {
-                var size = parseInt(parseFloat($font.css("font-size"))/parseFloat($font.parent().css("font-size")),10);
-                var src = _.str.sprintf('/website_mail/font_to_img/%s/%s/'+$font.width(), window.encodeURI(content), window.encodeURI($font.css("color")));
-                var $img = $("<img/>").attr("src", src)
-                    .attr("data-class", $font.attr("class"))
-                    .attr("style", $font.attr("style"))
-                    .css({"height": size+"em"}).css("font-size", "");
-                $font.replaceWith($img);
-            } else {
-                $font.remove();
-            }
-        });
-    },
-    // convert image into font awsome
-    img_to_font: function () {
-        $("#wrapwrap img[src*='/website_mail/font_to_img/']").each(function () {
-            var $img = $(this);
-            var $font = $("<span/>").attr("class", $img.data("class")).attr("style", $img.attr("style")).css("height", "");
-            $img.replaceWith($font);
-        });
-    },
-
-    class_to_style: function () {
-        var $editable = $("#wrapwrap .o_editable:first");
-        var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
-        $editable.find(selector).each(function () {
-            var $target = $(this);
-            var css = getMatchedCSSRules(this);
-            var style = $target.attr("style") || "";
-            _.each(css, function (v,k) {
-                if (style.indexOf(k) === -1) {
-                    style = k+":"+v+";"+style;
-                }
-            });
-            $target.attr("style", style);
-        });
-    },
-
-    style_to_class: function () {
-        var $editable = $("#wrapwrap .o_editable:first");
-        getMatchedCSSRules($editable[0]);
-        var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
-        var $c = $('<span/>').appendTo("body");
-        $editable.find(selector).each(function () {
-            var $target = $(this);
-            var css = getMatchedCSSRules(this);
-            var style = "";
-            _.each(css, function (v,k) {
-                if (style.indexOf(k) === -1) {
-                    style = k+":"+v+";"+style;
-                }
-            });
-            css = $c.attr("style", style).attr("style").split(/\s*;\s*/);
-            style = $target.attr("style") || "";
-            _.each(css, function (v) {
-                style = style.replace(v, '');
-            });
-            $target.attr("style", style.replace(/;+(\s;)*/g, ';').replace(/^;/g, ''));
-        });
-        $c.remove();
-    }
 });
 
-
-window.top.odoo[callback+"_set_value"] = function (value, fields_values, field_name) {
-    var $editable = $("#wrapwrap .o_editable:first");
-    var editor_enable = $('body').hasClass('editor_enable');
+var _set_value = window.top.odoo[callback+"_updown"];
+window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name) {
+    var $editable = $("#editable_area");
     var _val = $editable.prop("innerHTML");
+    var editor_enable = $('body').hasClass('editor_enable');
     value = value || "";
-
-    if(value !== _val) {
+    
+    if(value !==_val) {
         if (editor_enable) {
             if (value !== fields_values[field_name]) {
-                editor.editor_bar.rte.historyRecordUndo($editable, true);
+                rte.history.recordUndo($editable);
             }
-            editor.editor_bar.snippets.make_active(false);
+            snippets_editor.instance.make_active(false);
         }
         
         if (value.indexOf('on_change_model_and_list') === -1) {
@@ -415,11 +250,7 @@ window.top.odoo[callback+"_set_value"] = function (value, fields_values, field_n
             $editable.html(value);
 
             if (editor_enable) {
-                editor.editor_bar.snippets.img_to_font();
-                editor.editor_bar.snippets.style_to_class();
-                if (fields_values.mailing_model) {
-                    editor.editor_bar.display_theme_from_html();
-                }
+                web_editor.editor_bar.display_theme_from_html();
 
                 if (value !== fields_values[field_name]) {
                     $editable.trigger("content_changed");
@@ -428,17 +259,12 @@ window.top.odoo[callback+"_set_value"] = function (value, fields_values, field_n
         }
     }
 
-    if (fields_values.mailing_model) {
-        editor.editor_bar.get_snippet_template(fields_values.mailing_model);
+    if (fields_values.mailing_model && web_editor.editor_bar) {
+        web_editor.editor_bar.get_snippet_template(fields_values.mailing_model);
         if (value.indexOf('on_change_model_and_list') !== -1) {
             window.top.odoo[callback+"_downup"](_val);
         }
     }
 };
 
-
-return {
-    getMatchedCSSRules: getMatchedCSSRules
-};
-
 });
diff --git a/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
deleted file mode 100644
index 33fbbaa637f..00000000000
--- a/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
+++ /dev/null
@@ -1,110 +0,0 @@
-odoo.define('website_mass_mailing.editor', function (require) {
-'use strict';
-
-var ajax = require('web.ajax');
-var core = require('web.core');
-var editor = require('website.editor');
-var snippet_editor = require('website.snippet.editor');
-var website = require('website.website');
-
-var _t = core._t;
-
-snippet_editor.options.mailing_list_subscribe = snippet_editor.Option.extend({
-    choose_mailing_list: function (type, value) {
-        var self = this;
-        if (type !== "click") return;
-        return website.prompt({
-            id: "editor_new_mailing_list_subscribe_button",
-            window_title: _t("Add a Newsletter Subscribe Button"),
-            select: _t("Newsletter"),
-            init: function (field) {
-                return website.session.model('mail.mass_mailing.list')
-                        .call('name_search', ['', []], { context: website.get_context() });
-            },
-        }).then(function (mailing_list_id) {
-            self.$target.attr("data-list-id", mailing_list_id);
-        });
-    },
-    drop_and_build_snippet: function() {
-        var self = this;
-        this._super();
-        this.choose_mailing_list('click').fail(function () {
-            self.editor.on_remove($.Event( "click" ));
-        });
-    },
-    clean_for_save: function () {
-        this.$target.addClass("hidden");
-    },
-});
-
-website.snippet.options.newsletter_popup = website.snippet.Option.extend({
-    select_mailing_list: function (type) {
-        var self = this;
-        if (type !== "click") return;
-        return website.prompt({
-            id: "editor_new_mailing_list_subscribe_popup",
-            window_title: _t("Add a Newsletter Subscribe Popup"),
-            select: _t("Newsletter"),
-            init: function () {
-                return website.session.model('mail.mass_mailing.list')
-                        .call('name_search', [], { context: website.get_context() });
-            },
-        }).then(function (mailing_list_id) {
-            ajax.jsonRpc('/web/dataset/call', 'call', {
-                model: 'mail.mass_mailing.list',
-                method: 'read',
-                args: [[parseInt(mailing_list_id)], ['popup_content'], website.get_context()],
-            }).then(function (data) {
-                self.$target.find(".o_popup_content_dev").empty();
-                if (data && data[0].popup_content) {
-                    $(data[0].popup_content).appendTo(self.$target.find(".o_popup_content_dev"));
-                }
-            });
-            self.$target.attr("data-list-id", mailing_list_id);
-        });
-    },
-    drop_and_build_snippet: function() {
-        var self = this;
-        this._super();
-        this.select_mailing_list('click').fail(function () {
-            self.editor.on_remove($.Event( "click" ));
-        });
-    },
-});
-
-editor.EditorBar.include({
-    edit: function () {
-        this._super();
-        $('body').on('click','#edit_dialog',_.bind(this.edit_dialog, this.rte.editor));
-    },
-    save : function() {
-        var $target = $('#wrapwrap').find('#o_newsletter_popup');
-        if ($target && $target.length) {
-            $target.modal('hide');
-            $target.css("display", "none");
-            $('.o_popup_bounce_small').show();
-            if (!$target.find('.o_popup_content_dev').length) {
-                $target.find('.o_popup_modal_body').prepend($('<div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."></div>'));
-            }
-            var content = $('#wrapwrap .o_popup_content_dev').html();
-            var newsletter_id = $target.parent().attr('data-list-id');
-            ajax.jsonRpc('/web/dataset/call', 'call', {
-                model: 'mail.mass_mailing.list',
-                method: 'write',
-                args: [parseInt(newsletter_id),
-                   {'popup_content':content},
-                   website.get_context()],
-            });
-        }
-        return this._super();
-    },
-    edit_dialog : function() {
-        $('#wrapwrap').find('#o_newsletter_popup').modal('show');
-        $('.o_popup_bounce_small').hide();
-        $('.modal-backdrop').css("z-index", "0");
-    },
-});
-
-});
-
-
diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
new file mode 100644
index 00000000000..5cc26b0dab7
--- /dev/null
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+
+<!-- Template Choice page -->
+<template id="FieldTextHtmlInline" name="Editor layout">
+    
+    <t t-set="head">
+        <t t-if="enable_editor">
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor_thumb.css" type="text/css"/>
+            <script type="text/javascript" src="/mass_mailing/static/src/js/mass_mailing_editor.js"></script>
+        </t>
+    </t>
+
+    <t t-set="add_html">
+        <t t-if="enable_editor">
+            <span id="choose_template" class="o_not_editable o_css_editor">
+                <span class="btn btn-primary">Theme</span>
+                <span class="btn btn-primary hidden">Cancel selection</span>
+            </span>
+        </t>
+    </t>
+
+    <t t-call="web_editor.layout">
+        <div>
+            <div t-if="not edit_translations" id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
+            <div t-if="edit_translations" id="editable_area"><t t-raw="content"/></div>
+        </div>
+        <div id="templates" class="o_not_editable o_css_editor hidden" t-if="enable_editor">
+            <h1 class="page-header mt16 email_head panel-primary">
+                Select a theme 
+                <button type="button" class="btn btn-sm btn-default info_popover fa fa-info-circle" data-toggle="popover" data-trigger="focus" title="Help" data-content="Here you can design your own template from scratch by selecting your favorite theme."></button>
+            </h1>  
+            <t t-call="mass_mailing.mass_mail_theme_list"/>
+
+            <div class="hidden">
+                <h1 class="page-header mt16">
+                    Choose a Template
+                </h1>
+                <div id="email_template_list">
+                    <div class="hidden">
+                        <div class="theme_thumbnail">
+                            <div class="overlay text-center">
+                                <p>template</p>
+                                <a class="btn btn-primary btn-sm js_template_set"> Select </a>
+                            </div>
+                            <div class="template_preview js_content"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </t>
+</template>
+
+
+    </data>
+</openerp>
+
diff --git a/addons/mass_mailing/views/email_template.xml b/addons/mass_mailing/views/email_template.xml
index 377d3084362..36698ac6106 100644
--- a/addons/mass_mailing/views/email_template.xml
+++ b/addons/mass_mailing/views/email_template.xml
@@ -28,7 +28,7 @@
                         </group>
                         <notebook>
                             <page string="Body">
-                                <field name="body_html" nolabel="1" options="{'editor_url': '/website_mail/field/email_template'}" widget="html_frame"/>
+                                <field name="body_html" nolabel="1" widget="html_frame" options="{'editor_url': '/mass_mailing/field/email_template'}"/>
                                 <field name="attachment_ids" widget="many2many_binary"/>
                             </page>
                         </notebook>
diff --git a/addons/mass_mailing/views/mass_mailing.xml b/addons/mass_mailing/views/mass_mailing.xml
index c5414ec5026..a6b8d1f5099 100644
--- a/addons/mass_mailing/views/mass_mailing.xml
+++ b/addons/mass_mailing/views/mass_mailing.xml
@@ -264,7 +264,7 @@
                         </div>
                         <notebook>
                             <page string="Popup Content">
-                                <field name="popup_content" options="{'editor_url': '/website_mass_mailing/field/popup_content'}" widget="html_frame"/>
+                                <field name="popup_content" widget="html_frame" options="{'editor_url': '/website_mass_mailing/field/popup_content'}"/>
                             </page>
                         </notebook>
                     </sheet>
@@ -329,8 +329,8 @@
         </record>
 
         <record model="ir.ui.view" id="view_mail_mass_mailing_links_tree">
-            <field name="name">website.links.tree</field>
-            <field name="model">website.links</field>
+            <field name="name">link.tracker.tree</field>
+            <field name="model">link.tracker</field>
             <field name="priority">10</field>
             <field name="arch" type="xml">
                 <tree string="Mailing Statistics of Clicks">
@@ -342,9 +342,9 @@
         </record>
         
         <record model="ir.ui.view" id="view_mail_mass_mailing_links_search">
-            <field name="name">website.links.search</field>
-            <field name="model">website.links</field>
-            <field name="inherit_id" ref="website_links.view_website_links_filter"/>
+            <field name="name">link.tracker.search</field>
+            <field name="model">link.tracker</field>
+            <field name="inherit_id" ref="link_tracker.view_link_tracker_filter"/>
             <field name="arch" type="xml">
                <search string="Tracked Link">
                     <field name="mass_mailing_id"/>
@@ -355,7 +355,7 @@
 
         <record model="ir.actions.act_window" id="action_view_mass_mailing_links_statistics">
             <field name="name">Statistics of Clicks</field>
-            <field name="res_model">website.links</field>
+            <field name="res_model">link.tracker</field>
             <field name="view_mode">tree</field>
             <field name="context">{'search_default_mass_mailing_id': active_id}</field>
         </record>
@@ -444,7 +444,7 @@
                         </group>
                         <notebook>
                             <page string="Mail Body">
-                                <field name="body_html" options="{'editor_url': '/website_mail/field/email_template'}"  widget="html_frame"/>
+                                <field name="body_html" widget="html_frame" options="{'editor_url': '/mass_mailing/field/email_template'}"/>
                                 <field name="attachment_ids"  widget="many2many_binary" string="Attach a file"/>
                             </page>
                             <page string="Options">
@@ -709,7 +709,7 @@
 
         <record model="ir.actions.act_window" id="dropdb snipp">
             <field name="name">Statistics of Clicks</field>
-            <field name="res_model">website.links</field>
+            <field name="res_model">link.tracker</field>
             <field name="view_mode">tree</field>
             <field name="context">{'search_default_mass_mailing_campaign_id': active_id}</field>
         </record>
diff --git a/addons/mass_mailing/views/snippets.xml b/addons/mass_mailing/views/snippets.xml
deleted file mode 100644
index fa1982a20d6..00000000000
--- a/addons/mass_mailing/views/snippets.xml
+++ /dev/null
@@ -1,116 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
-
-<template id="mailing_list_subscribe" inherit_id="website.snippets" name="Subscribe to Newsletter">
-
-    <xpath expr="//div[@id='snippet_content']/div[@class='o_panel_body']" position="inside">
-        <div>
-            <div class="oe_snippet_thumbnail">
-                <img class="oe_snippet_thumbnail_img" src="/mass_mailing/static/src/img/blocks/button_newsletter.png"/>
-                <span class="oe_snippet_thumbnail_title">Newsletter</span>
-            </div>
-
-            <div class="oe_snippet_body input-group js_subscribe"
-                      data-list-id="0">
-                <input
-                      type="email"
-                      name="email"
-                      class="js_subscribe_email form-control"
-                      placeholder="your email..."/>
-                <span class="input-group-btn">
-                    <a href="#" class="btn btn-primary js_subscribe_btn">Subscribe</a>
-                    <a href="#" class="btn btn-success js_subscribed_btn hidden" disabled="disabled">Thanks</a>
-                </span>
-                <div class="alert alert-success hidden">Thanks for your subscription!</div>
-            </div>
-
-        </div>
-    </xpath>
-
-    <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-js='mailing_list_subscribe'
-            data-selector=".js_subscribe"
-            data-drop-near="p, h1, h2, h3, blockquote, .well, .panel">
-            <li data-choose_mailing_list=""><a>Change Newsletter</a></li>
-        </div>
-    </xpath>
-
-</template>
-
-        <template id="website_popup_snippet" name="popup snippet" inherit_id="website.snippets">
-            <xpath expr="//div[@id='snippet_feature']/div[@class='o_panel_body']" position="inside">
-                <div>
-                    <div class="oe_snippet_thumbnail">
-                        <img class="oe_snippet_thumbnail_img" src="/mass_mailing/static/src/img/blocks/bounce.png" />
-                        <span class="oe_snippet_thumbnail_title">Newsletter Popup</span>
-                    </div>
-
-                    <div class="o_newsletter_popup" data-list-id="0">
-                        <div class="alert alert-warning alert-dismissible fade in css_non_editable_mode_hidden o_not_editable" role="alert">
-                            <strong>Newsletter Popup!</strong> The newsletter popup snippet effect is active on this page. Click <a id="edit_dialog" href="#">Here To Edit Dialog Content</a>
-                        </div>
-                        <div class="modal modal-dialog modal-md fade fade-custom" id="o_newsletter_popup" tabindex="-1" role="dialog">
-                            <div class="modal-content o_popup_modal_content">
-                                <a href="#" class="o_popup_btn_close o_not_editable" data-dismiss="modal">&amp;times;</a>
-
-                                <div class="o_popup_modal_body text-center">
-                                    <div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."/>
-                                    <div class="input-group o_not_editable o_popup_animated o_popup_bounce_del500ms o_popup_bounce_small" >
-                                        <input type="email" name="email" class="popup_subscribe_email form-control" placeholder="your email..." autofocus="autofocus"/>
-                                        <span class="input-group-btn">
-                                            <a href="#" class="btn btn-success popup_subscribe_btn">Subscribe</a>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </xpath>
-        </template>
-
-        <template id="website_popup_options" name="Popup Options" inherit_id="website.snippet_options">
-            <xpath expr="//div" position="after">
-                <div data-js='newsletter_popup'
-                    data-selector=".o_newsletter_popup"
-                    data-drop-in=".oe_structure, [data-oe-type=html]">
-                    <li data-select_mailing_list=""><a>Change Newsletter</a></li>
-                </div>
-            </xpath>
-        </template>
-
-        <template id="FieldTextHtmlPopupContent" name="Editor layout">
-            <t t-set="head">
-                <link rel="stylesheet" href="/website_mail/static/src/css/snippets.css" type="text/css"/>
-                <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_popup.css" type="text/css"/>
-                <link rel="stylesheet" href="/website_mail/static/src/css/website_mail_iframe.css" type="text/css"/>
-             </t>
-            <t t-call="website.editor_layout">
-                <div class="modal-dialog modal-md show" id="o_newsletter_popup">
-                    <div class="modal-content o_popup_modal_content">
-                        <div class="o_popup_modal_body text-center">
-                            <div class="o_popup_content_dev">
-                                <div class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html">
-                                    <!-- Can be removed once default values are ok for the editor -->
-                                    <t t-raw="content">
-                                        <div class="o_popup_modal_header text-center">
-                                            <h3 class="o_popup_modal_title mt8">Odoo Presents</h3>
-                                        </div>
-                                        <div class="o_popup_message">
-                                            <font>7</font>
-                                            <strong>Business Hacks</strong>
-                                            <span> to<br/>boost your marketing</span>
-                                        </div>
-                                        <p class="o_message_paragraph">Join our Marketing newsletter and get <strong>this white paper instantly</strong></p>
-                                    </t>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </t>
-         </template>
-
-</data>
-</openerp>
diff --git a/addons/website_mail/views/snippets.xml b/addons/mass_mailing/views/snippets_themes.xml
similarity index 89%
rename from addons/website_mail/views/snippets.xml
rename to addons/mass_mailing/views/snippets_themes.xml
index e7606deb076..01ca28cbaf9 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -56,7 +56,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -74,7 +74,7 @@
                         <tr>
                             <td valign="center" style="text-align:center;font-size: 30px">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: inherit;">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit;">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -91,28 +91,28 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px;">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
                                 <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
                                 <tr>
                                     <td align="right">
-                                        <a t-att-href="(website.social_facebook) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/></a>
+                                        <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_twitter) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_googleplus) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_linkedin) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a href="#"><img src="/website_mail/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                 </tr>
                             </table>
@@ -128,28 +128,28 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px;font-size: 30px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: inherit">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
                                 <tr>
                                     <td align="right">
-                                        <a t-att-href="(website.social_facebook) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_twitter) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_googleplus) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_linkedin) or '#'"><img src="/website_mail/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                     <td align="right" style="padding-left:5px">
-                                        <a href="#"><img src="/website_mail/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                        <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
                                     </td>
                                 </tr>
                             </table>
@@ -343,7 +343,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;background:inherit;color:inherit;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -401,7 +401,7 @@
         </span> Footers
     </div>
     <div class="o_panel_body">
-        <div name="Social + Text" class="basic_theme o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="basic_theme o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
                 <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0">
                     <tbody>
@@ -412,27 +412,27 @@
                                         <td align="right">
                                             &amp;nbsp;
                                             <a t-att-href="(website.social_facebook) or '#'">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                         </td>
                                         <td align="right" style="padding-left:5px">
                                             <a t-att-href="(website.social_twitter) or '#'">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                         </td>
                                         <td align="right" style="padding-left:5px">
                                             <a t-att-href="(website.social_googleplus) or '#'">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                         </td>
                                         <td align="right" style="padding-left:5px">
                                             <a t-att-href="(website.social_linkedin) or '#'">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                         </td>
                                         <td align="right" style="padding-left:5px">
                                             <a href="#">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                             &amp;nbsp;
                                         </td>
@@ -459,7 +459,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding:10px">
                                 &amp;nbsp;
-                                <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:inherit" href="/page/contactus">Contact</a>
+                                <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a>
+                                <t t-if="website"> | <a style="color:inherit" href="/page/contactus">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -481,7 +482,13 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                     &amp;nbsp;
-                                    <a style="color:inherit" href="/page/contactus">Contact Us</a> | <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> | <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> | <a style="color:inherit" href="#">Support</a> | <a href="/unsubscribe_from_list" style="color:inherit">Unsubscribe</a>
+                                    <t t-if="website">
+                                        <a style="color:inherit" href="/page/contactus">Contact Us</a> | 
+                                        <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> | 
+                                        <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> | 
+                                        <a style="color:inherit" href="#">Support</a> | 
+                                    </t>
+                                    <a href="/unsubscribe_from_list" style="color:inherit">Unsubscribe</a>
                                     &amp;nbsp;
                                 </td>
                             </tr>
@@ -496,7 +503,8 @@
 </div>
 
 <div id="snippet_options" class="hidden">
-    <t t-call="website_mail.snippet_options"/>
+    <t t-call="web_editor.snippet_options"/>
+    <t t-call="mass_mailing.snippet_options"/>
 </div>
 </template>
 
diff --git a/addons/website_mail/views/snippet_options.xml b/addons/mass_mailing/views/snippets_themes_options.xml
similarity index 88%
rename from addons/website_mail/views/snippet_options.xml
rename to addons/mass_mailing/views/snippets_themes_options.xml
index 531579de333..7b2248b88c8 100644
--- a/addons/website_mail/views/snippet_options.xml
+++ b/addons/mass_mailing/views/snippets_themes_options.xml
@@ -9,11 +9,6 @@
         data-selector="img, .mv, .col_mv">
     </div>
 
-    <div data-js='media'
-        data-selector="img:not(.cke_iframe)">
-        <li data-edition="edition"><a>Change Image ...</a></li>
-    </div>
-
     <div data-js='table_row'
         data-selector=".row"
         data-drop-near=".row">
@@ -35,7 +30,6 @@
         data-drop-in="[data-oe-field='body_html']">
     </div>
 
-
     <div data-js='resize'
         data-selector="div.snippet_row"
         data-drop-in=".oe_structure, [data-oe-type=html]">
diff --git a/addons/website_mail/views/theme/airmail_snippets.xml b/addons/mass_mailing/views/theme/airmail_snippets.xml
similarity index 95%
rename from addons/website_mail/views/theme/airmail_snippets.xml
rename to addons/mass_mailing/views/theme/airmail_snippets.xml
index 22d31a416bd..3900402eca4 100644
--- a/addons/website_mail/views/theme/airmail_snippets.xml
+++ b/addons/mass_mailing/views/theme/airmail_snippets.xml
@@ -5,13 +5,13 @@
     <xpath expr="//div[@id='email_designer_default_headers']/div[2]" position="inside">
         <div name="Center Logo" class="airmail o_mail_block_header_center_logo">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #f9f8f8 repeat top /100%">
-                <div style=" width:600px; background-image: url('/website_mail/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px; background-position:-2% 0%; display:block"/>
+                <div style=" width:600px; background-image: url('/mass_mailing/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px; background-position:-2% 0%; display:block"/>
                 <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;width:600px;">
                     <tbody>
                       <tr>
                           <td width="100%" valign="top" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -24,13 +24,13 @@
 
         <div name="Center Text" class="airmail o_mail_block_header_center_text">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #f9f8f8 repeat top /100%;color: #464646">
-                <div style=" width:600px; background-image: url('/website_mail/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px; background-position:-2% 0%; display:block"/>
+                <div style=" width:600px; background-image: url('/mass_mailing/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px; background-position:-2% 0%; display:block"/>
                 <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;width:600px">
                     <tbody>
                         <tr>
                             <td width="100%" valign="top" style="text-align:center;font-size: 30px">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#464646">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#464646">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -43,18 +43,18 @@
 
         <div name="Logo - Social" class="airmail o_mail_block_header_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #f9f8f8 repeat top /100%;color: rgb(70,70,70)">
-                <div style=" width:600px; background-image: url('/website_mail/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px; background-position:-2% 0%; display:block"/>
+                <div style=" width:600px; background-image: url('/mass_mailing/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px; background-position:-2% 0%; display:block"/>
                 <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;width:600px">
                     <tr>
                         <td width="100%" valign="top" style="font-size: 30px;padding-left:5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                  <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -94,18 +94,18 @@
 
         <div name="Text - Social" class="airmail o_mail_block_header_text_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #f9f8f8 repeat top /100%;color:#464646">
-                <div style=" width:600px; background-image: url('/website_mail/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px;color: rgb(70,70,70); background-position:-2% 0%; display:block "/>
+                <div style=" width:600px; background-image: url('/mass_mailing/static/src/img/theme_imgs/airmail.png'); background-repeat: repeat-x; background-size: contain; height: 7px;color: rgb(70,70,70); background-position:-2% 0%; display:block "/>
                 <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
                     <tr>
                         <td width="100%" valign="top" style="vertical-align: middle;padding-left:5px;font-size: 30px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#464646">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#464646">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -267,7 +267,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -277,14 +277,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -482,7 +482,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -494,7 +494,7 @@
         </div>
 
         <div name="Background Image" class="airmail o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -602,7 +602,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="airmail o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="airmail o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #E5E5E5 repeat top /100%;color:#464646">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit">
@@ -653,7 +653,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding:10px;color:#464646">
                                 &amp;nbsp;
-                                <a href="/unsubscribe_from_list" style="color:#464646">Unsubscribe</a> | <a href="/page/contactus" style="color:#464646">Contact</a>
+                                <a href="/unsubscribe_from_list" style="color:#464646">Unsubscribe</a>
+                                <t t-if="website"> | <a href="/page/contactus" style="color:#464646">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -675,12 +676,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:10px;text-align:center">
                                     &amp;nbsp;
-                                    <a href="/page/contactus" style="padding-right:3px;color:#464646">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a t-att-href="website.social_facebook" style="padding-right:3px;color:#464646">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a t-att-href="website.social_twitter" style="padding-right:3px;color:#464646">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a href="/page/contactus" style="padding-right:3px;color:#464646">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a t-att-href="website.social_facebook" style="padding-right:3px;color:#464646">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a t-att-href="website.social_twitter" style="padding-right:3px;color:#464646">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#464646">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/cleave_snippets.xml b/addons/mass_mailing/views/theme/cleave_snippets.xml
similarity index 95%
rename from addons/website_mail/views/theme/cleave_snippets.xml
rename to addons/mass_mailing/views/theme/cleave_snippets.xml
index 94ec7dd08fd..f3a7725febe 100644
--- a/addons/website_mail/views/theme/cleave_snippets.xml
+++ b/addons/mass_mailing/views/theme/cleave_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -28,7 +28,7 @@
                         <tr>
                             <td style="font-size: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#414141">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#414141">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,13 +45,13 @@
                     <tr>
                         <td width="100%" valign="top" style="font-size: 30px;padding-left:5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                 <img src="/logo.png" style="height:auto;max-width:600px;width:200px;padding:10px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -95,13 +95,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #414141;font-size: 30px; text-align:center">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #414141;font-size: 30px; text-align:center">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -276,7 +276,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -286,14 +286,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -466,7 +466,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -478,7 +478,7 @@
         </div>
 
         <div name="Background Image" class="cleave o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style=" padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style=" padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -586,7 +586,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="cleave o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="cleave o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #E6E5E5 repeat top /100%;color:#414141">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit">
@@ -635,7 +635,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px">
                                 &amp;nbsp;
-                                <a href="/unsubscribe_from_list" style="color:#414141">Unsubscribe</a> | <a href="/page/contactus" style="color:#414141">Contact</a>
+                                <a href="/unsubscribe_from_list" style="color:#414141">Unsubscribe</a>
+                                <t t-if="website"> | <a href="/page/contactus" style="color:#414141">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -657,12 +658,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:10px;text-align:center">
                                     &amp;nbsp;
-                                    <a href="/page/contactus" style="color:#414141">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a t-att-href="website.social_facebook" style="color:#414141">Facebook</a> |
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a t-att-href="website.social_twitter" style="color:#414141">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a href="/page/contactus" style="color:#414141">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a t-att-href="website.social_facebook" style="color:#414141">Facebook</a> |
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a t-att-href="website.social_twitter" style="color:#414141">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#414141">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/go_snippets.xml b/addons/mass_mailing/views/theme/go_snippets.xml
similarity index 96%
rename from addons/website_mail/views/theme/go_snippets.xml
rename to addons/mass_mailing/views/theme/go_snippets.xml
index 125ecf8badd..6782cff526b 100644
--- a/addons/website_mail/views/theme/go_snippets.xml
+++ b/addons/mass_mailing/views/theme/go_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -28,7 +28,7 @@
                         <tr>
                             <td style="font-size: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#fff">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#fff">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,13 +45,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                 <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -95,13 +95,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px;font-size: 30px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #fff">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #fff">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -248,7 +248,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -258,14 +258,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -511,7 +511,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -523,7 +523,7 @@
         </div>
 
         <div name="Background Image" class="go o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style=" padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style=" padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -631,7 +631,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="go o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="go o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #2B934F repeat top /100%;color:#EEEEEE">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit">
@@ -682,7 +682,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding:10px;color:#fff">
                                 &amp;nbsp;
-                                <a style="color:#fff" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:#fff" href="/page/contactus">Contact</a>
+                                <a style="color:#fff" href="/unsubscribe_from_list">Unsubscribe</a>
+                                <t t-if="website"> | <a style="color:#fff" href="/page/contactus">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -704,12 +705,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                     &amp;nbsp;
-                                    <a style="color:#fff" href="/page/contactus">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a style="color:#fff" t-att-href="website.social_facebook">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a style="color:#fff" t-att-href="website.social_twitter">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a style="color:#fff" href="/page/contactus">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a style="color:#fff" t-att-href="website.social_facebook">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a style="color:#fff" t-att-href="website.social_twitter">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#fff">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/narrative_snippets.xml b/addons/mass_mailing/views/theme/narrative_snippets.xml
similarity index 92%
rename from addons/website_mail/views/theme/narrative_snippets.xml
rename to addons/mass_mailing/views/theme/narrative_snippets.xml
index 7acc4e825a4..f011b44d92f 100644
--- a/addons/website_mail/views/theme/narrative_snippets.xml
+++ b/addons/mass_mailing/views/theme/narrative_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -28,7 +28,7 @@
                         <tr>
                             <td style="font-size: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#fff">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#fff">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,39 +45,39 @@
                     <tr>
                         <td valign="center" width="270" style="padding-left:5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                 <img src="/logo.png" style="height:auto;max-width:600px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
                                             <a t-att-href="website.social_facebook">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/>
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_twitter">
                                         <td align="right" style="padding-left:7px">
                                             <a t-att-href="website.social_twitter">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon"/>
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon"/>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_googleplus">
                                         <td align="right" style="padding-left:7px">
                                             <a t-att-href="website.social_googleplus">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon"/>
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon"/>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_linkedin">
                                         <td align="right" style="padding-left:7px">
                                             <a t-att-href="website.social_linkedin">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon"/>
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon"/>
                                             </a>
                                         </td>
                                     </t>
@@ -95,39 +95,39 @@
                     <tr>
                         <td valign="center" width="270" style="padding-left:5px;font-size:30px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #fff">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #fff">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
                                             <a t-att-href="website.social_facebook">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_twitter">
                                         <td align="right" style="padding-left:7px">
                                             <a t-att-href="website.social_twitter">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" />
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_googleplus">
                                         <td align="right" style="padding-left:7px">
                                             <a t-att-href="website.social_googleplus">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon"/>
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon"/>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_linkedin">
                                         <td align="right" style="padding-left:7px">
                                             <a t-att-href="website.social_linkedin">
-                                                <img src="/website_mail/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon"/>
+                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon"/>
                                             </a>
                                         </td>
                                     </t>
@@ -314,7 +314,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -324,14 +324,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -483,7 +483,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -495,7 +495,7 @@
         </div>
 
         <div name="Background Image" class="narrative o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style=" padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style=" padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -603,7 +603,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="narrative o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="narrative o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #1F1F1F repeat top /100%;color:#fff">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:600px;border-collapse:collapse;color:inherit">
@@ -613,22 +613,22 @@
                                     &amp;nbsp;
                                     <t t-if="website.social_facebook">
                                         <a t-att-href="website.social_facebook">
-                                            <img src="/website_mail/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
+                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
                                         </a>
                                     </t>
                                     <t t-if="website.social_googleplus">
                                         <a t-att-href="website.social_googleplus">
-                                            <img src="/website_mail/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
+                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
                                         </a>
                                     </t>
                                     <t t-if="website.social_linkedin">
                                         <a t-att-href="website.social_linkedin">
-                                            <img src="/website_mail/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
+                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
                                         </a>
                                     </t>
                                     <t t-if="website.social_twitter">
                                         <a t-att-href="website.social_twitter">
-                                            <img src="/website_mail/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
+                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px;padding-right:6px" alt="social icon" />
                                         </a>
                                     </t>
                                     &amp;nbsp;
@@ -654,7 +654,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px;color:#fff">
                                 &amp;nbsp;
-                                <a href="/unsubscribe_from_list" style="color:#fff">Unsubscribe</a> | <a href="/page/contactus" style="color:#fff">Contact</a>
+                                <a href="/unsubscribe_from_list" style="color:#fff">Unsubscribe</a>
+                                <t t-if="website"> | <a href="/page/contactus" style="color:#fff">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -676,12 +677,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                     &amp;nbsp;
-                                    <a href="/page/contactus" style="color:#fff">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a t-att-href="website.social_facebook" style="color:#fff">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a t-att-href="website.social_twitter" style="color:#fff">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a href="/page/contactus" style="color:#fff">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a t-att-href="website.social_facebook" style="color:#fff">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a t-att-href="website.social_twitter" style="color:#fff">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#fff">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/neopolitan_snippets.xml b/addons/mass_mailing/views/theme/neopolitan_snippets.xml
similarity index 95%
rename from addons/website_mail/views/theme/neopolitan_snippets.xml
rename to addons/mass_mailing/views/theme/neopolitan_snippets.xml
index 1d97bb72b66..90b3315d33c 100644
--- a/addons/website_mail/views/theme/neopolitan_snippets.xml
+++ b/addons/mass_mailing/views/theme/neopolitan_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -28,7 +28,7 @@
                         <tr>
                             <td style="font-size: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#414141">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#414141">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,13 +45,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                 <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -62,21 +62,21 @@
                                     </t>
                                     <t t-if="website.social_googleplus">
                                         <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_facebook">
+                                            <a t-att-href="website.social_googleplus">
                                               <span style="color:#44B7B7;" class="fa fa-google-plus-square fa-2x"></span>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_linkedin">
                                         <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_facebook">
+                                            <a t-att-href="website.social_linkedin">
                                               <span style="color:#44B7B7;" class="fa fa-linkedin-square fa-2x"></span>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_twitter">
                                         <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_facebook">
+                                            <a t-att-href="website.social_twitter">
                                               <span style="color:#44B7B7;" class="fa fa-twitter-square fa-2x"></span>
                                             </a>
                                         </td>
@@ -95,13 +95,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #414141;font-size: 30px; text-align:center">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #414141;font-size: 30px; text-align:center">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -112,21 +112,21 @@
                                     </t>
                                     <t t-if="website.social_googleplus">
                                         <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_facebook">
+                                            <a t-att-href="website.social_googleplus">
                                               <span style="color:#44B7B7;" class="fa fa-google-plus-square fa-2x"></span>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_linkedin">
                                         <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_facebook">
+                                            <a t-att-href="website.social_linkedin">
                                               <span style="color:#44B7B7;" class="fa fa-linkedin-square fa-2x"></span>
                                             </a>
                                         </td>
                                     </t>
                                     <t t-if="website.social_twitter">
                                         <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_facebook">
+                                            <a t-att-href="website.social_twitter">
                                               <span style="color:#44B7B7;" class="fa fa-twitter-square fa-2x"></span>
                                             </a>
                                         </td>
@@ -246,7 +246,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -256,14 +256,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -450,7 +450,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px;line-height:20px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -462,7 +462,7 @@
         </div>
 
         <div name="Background Image" class="neopolitan o_mail_block_text_on_img">
-            <div class="snippet_row" style="padding:0px;width:600px;margin:auto;background:url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row" style="padding:0px;width:600px;margin:auto;background:url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -570,7 +570,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="neopolitan o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="neopolitan o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit">
@@ -621,7 +621,9 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding-top:10px;color:#44B7B7;padding-bottom:5px">
                                 &amp;nbsp;
-                                <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a> | <a href="/page/contactus" style="color:#44B7B7">Contact</a>&amp;nbsp;
+                                <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>
+                                <t t-if="website"> | <a href="/page/contactus" style="color:#44B7B7">Contact</a> </t>
+                                &amp;nbsp;
                             </td>
                         </tr>
                         <tr>
@@ -642,12 +644,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:10px;text-align:center">
                                     &amp;nbsp;
-                                    <a href="/page/contactus" style="color:#44B7B7">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a t-att-href="website.social_facebook" style="color:#44B7B7">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a t-att-href="website.social_twitter" style="color:#44B7B7">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a href="/page/contactus" style="color:#44B7B7">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a t-att-href="website.social_facebook" style="color:#44B7B7">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a t-att-href="website.social_twitter" style="color:#44B7B7">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/skyline_snippets.xml b/addons/mass_mailing/views/theme/skyline_snippets.xml
similarity index 95%
rename from addons/website_mail/views/theme/skyline_snippets.xml
rename to addons/mass_mailing/views/theme/skyline_snippets.xml
index 99d4eaa04c1..01bac988083 100644
--- a/addons/website_mail/views/theme/skyline_snippets.xml
+++ b/addons/mass_mailing/views/theme/skyline_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -28,7 +28,7 @@
                         <tr>
                             <td style="font-size: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#37302d">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#37302d">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,13 +45,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                         &amp;nbsp;
-                          <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                          <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                               <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                           </a>
                         &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -95,13 +95,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #37302d;font-size: 30px; text-align:center">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #37302d;font-size: 30px; text-align:center">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -243,7 +243,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -253,14 +253,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -465,7 +465,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;border-collapse:collapse;color:inherit">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px;line-height:20px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -477,7 +477,7 @@
         </div>
 
         <div name="Background Image" class="skyline o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -585,7 +585,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="skyline o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="skyline o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #C2C2C2 repeat top /100%;color:#37302d">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit">
@@ -636,7 +636,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding:10px;color:#37302D">
                                 &amp;nbsp;
-                                <a style="color:#37302D" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:#37302D" href="/page/contactus">Contact</a>
+                                <a style="color:#37302D" href="/unsubscribe_from_list">Unsubscribe</a>
+                                <t t-if="website"> | <a style="color:#37302D" href="/page/contactus">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -658,12 +659,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                     &amp;nbsp;
-                                    <a style="color:#37302D" href="/page/contactus">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a style="color:#37302D" t-att-href="website.social_facebook">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a style="color:#37302D" t-att-href="website.social_twitter">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a style="color:#37302D" href="/page/contactus">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a style="color:#37302D" t-att-href="website.social_facebook">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a style="color:#37302D" t-att-href="website.social_twitter">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#37302D">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/sunday_snippets.xml b/addons/mass_mailing/views/theme/sunday_snippets.xml
similarity index 95%
rename from addons/website_mail/views/theme/sunday_snippets.xml
rename to addons/mass_mailing/views/theme/sunday_snippets.xml
index ebe4f0727cc..f5171f1710a 100644
--- a/addons/website_mail/views/theme/sunday_snippets.xml
+++ b/addons/mass_mailing/views/theme/sunday_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -28,7 +28,7 @@
                         <tr>
                             <td style="font-size: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #414141">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #414141">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,13 +45,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                 <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -95,13 +95,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #414141;font-size: 30px; text-align:center">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #414141;font-size: 30px; text-align:center">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -246,7 +246,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -256,14 +256,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -466,7 +466,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;color:inherit;border-collapse:collapse">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -478,7 +478,7 @@
         </div>
 
         <div name="Background Image" class="sunday o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -586,7 +586,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="sunday o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="sunday o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #2F2F2F repeat top /100%;color:#EEEEEE">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit">
@@ -637,7 +637,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding:10px;color:#fff">
                                 &amp;nbsp;
-                                <a style="color:#fff" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:#fff" href="/page/contactus">Contact</a>
+                                <a style="color:#fff" href="/unsubscribe_from_list">Unsubscribe</a>
+                                <t t-if="website"> | <a style="color:#fff" href="/page/contactus">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -659,12 +660,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                     &amp;nbsp;
-                                    <a style="color:#fff" href="/page/contactus">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a style="color:#fff" t-att-href="website.social_facebook">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a style="color:#fff" t-att-href="website.social_twitter">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a style="color:#fff" href="/page/contactus">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a style="color:#fff" t-att-href="website.social_facebook">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a style="color:#fff" t-att-href="website.social_twitter">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#fff">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme/zenflat_snippets.xml b/addons/mass_mailing/views/theme/zenflat_snippets.xml
similarity index 95%
rename from addons/website_mail/views/theme/zenflat_snippets.xml
rename to addons/mass_mailing/views/theme/zenflat_snippets.xml
index 33b1343a892..a64f3809154 100644
--- a/addons/website_mail/views/theme/zenflat_snippets.xml
+++ b/addons/mass_mailing/views/theme/zenflat_snippets.xml
@@ -10,7 +10,7 @@
                         <tr>
                             <td valign="center" style="text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                     <img src="/logo.png" style="padding:10px;height:auto;max-width:600px" alt="Your Logo" />
                                 </a>
                                 &amp;nbsp;
@@ -26,9 +26,9 @@
                 <table cellspacing="0" cellpadding="0" style="margin: 0 auto;border-collapse:collapse;width:600px">
                     <tbody>
                         <tr>
-                            <td style="font-website_mail/font_to_img: 30px; text-align:center">
+                            <td style="font-web_editor/font_to_img: 30px; text-align:center">
                                 &amp;nbsp;
-                                <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color:#008000">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color:#008000">
                                     <strong>Your Company</strong>
                                 </a>
                                 &amp;nbsp;
@@ -45,13 +45,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding:10px 10px 10px 5px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none">
                                 <img src="/logo.png" style="padding:10px;height:auto;max-width:600px" alt="Your Logo" />
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -95,13 +95,13 @@
                     <tr>
                         <td valign="center" width="270" style="padding-left:5px;font-size:30px">
                             &amp;nbsp;
-                            <a t-att-href="(website.company_id.website) or '#'" style="text-decoration:none;color: #008000">
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: #008000">
                                 <strong>Your Company</strong>
                             </a>
                             &amp;nbsp;
                         </td>
                         <td valign="center" width="270" style="padding:10px 15px 10px 10px;vertical-align:middle">
-                            <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
+                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse">
                                 <tr>
                                     <t t-if="website.social_facebook">
                                         <td align="right">
@@ -249,7 +249,7 @@
                                         </ul>
                                     </td>
                                     <td style="width: 60px;vertical-align:middle;display: table-cell">
-                                        <ul style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
+                                        <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px">
                                             <t t-if="website.social_facebook">
                                                 <li style="width:33%;margin-left:0">
                                                     <a t-att-href="website.social_facebook">
@@ -259,14 +259,14 @@
                                             </t>
                                             <t t-if="website.social_twitter">
                                                 <li style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_twitter">
                                                       <span style="color: rgb(75,110,168);" class="fa fa-twitter-square fa-2x"></span>
                                                     </a>
                                                 </li>
                                             </t>
                                             <t t-if="website.social_googleplus">
                                                 <li style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
+                                                    <a t-att-href="website.social_googleplus">
                                                       <span style="color: rgb(221,75,57);" class="fa fa-google-plus-square fa-2x"></span>
                                                     </a>
                                                 </li>
@@ -486,7 +486,7 @@
                 <table style="width:100%;text-align:justify;margin:0 auto;color:#414141;border-collapse:collapse">
                     <tr>
                         <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear John</p>
+                            <p style="margin:0">Dear ${object.name}</p>
                             <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
                             <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                             <p style="margin:0">Kind Regards,</p>
@@ -498,7 +498,7 @@
         </div>
 
         <div name="Background Image" class="zenflat o_mail_block_text_on_img">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/website_mail/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
+            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: url('/mass_mailing/static/src/img/theme_imgs/skyline_bg.gif') top /cover;background-repeat:no-repeat;color:#fff">
                 <table cellspacing="0" cellpadding="0" style="width:600px;background:inherit;border-collapse:collapse;color:inherit">
                     <tbody>
                         <tr>
@@ -606,7 +606,7 @@
     </xpath>
 
     <xpath expr="//div[@id='email_designer_default_footer']/div[2]" position="inside">
-        <div name="Social + Text" class="zenflat o_mail_block_footer_social">
+        <div t-if="website" name="Social + Text" class="zenflat o_mail_block_footer_social">
             <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #EEEEEE repeat top /100%;color:#414141">
                 <div style="padding:10px">
                     <table cellspacing="0" cellpadding="0" style="margin: 0 auto;width:600px;border-collapse:collapse">
@@ -657,7 +657,8 @@
                         <tr>
                             <td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px;color:#414141">
                                 &amp;nbsp;
-                                <a style="color:#414141" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:#414141" href="/page/contactus">Contact</a>
+                                <a style="color:#414141" href="/unsubscribe_from_list">Unsubscribe</a>
+                                <t t-if="website"> | <a style="color:#414141" href="/page/contactus">Contact</a> </t>
                                 &amp;nbsp;
                             </td>
                         </tr>
@@ -679,12 +680,14 @@
                             <tr>
                                 <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                     &amp;nbsp;
-                                    <a style="color:#414141" href="/page/contactus">Contact Us</a> | 
-                                    <t t-if="website.social_facebook">
-                                        <a style="color:#414141" t-att-href="website.social_facebook">Facebook</a> | 
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <a style="color:#414141" t-att-href="website.social_twitter">Twitter</a> | 
+                                    <t t-if="website">
+                                        <a style="color:#414141" href="/page/contactus">Contact Us</a> | 
+                                        <t t-if="website.social_facebook">
+                                            <a style="color:#414141" t-att-href="website.social_facebook">Facebook</a> | 
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <a style="color:#414141" t-att-href="website.social_twitter">Twitter</a> | 
+                                        </t>
                                     </t>
                                     <a href="/unsubscribe_from_list" style="color:#414141">Unsubscribe</a>
                                     &amp;nbsp;
diff --git a/addons/website_mail/views/theme_list.xml b/addons/mass_mailing/views/theme_list.xml
similarity index 100%
rename from addons/website_mail/views/theme_list.xml
rename to addons/mass_mailing/views/theme_list.xml
diff --git a/addons/mass_mailing/views/website_mass_mailing.xml b/addons/mass_mailing/views/website_mass_mailing.xml
deleted file mode 100644
index 16fa20b86d3..00000000000
--- a/addons/mass_mailing/views/website_mass_mailing.xml
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<openerp>
-    <data>
-        <template id="assets_frontend" inherit_id="website.assets_frontend" name="wesbite_mass_mailing assets">
-            <xpath expr="." position="inside">
-    </xpath>
-</template>
-
-<template id="assets_frontend" inherit_id="website.assets_frontend" name="Mail Frontend Assets">
-    <xpath expr="." position="inside">
-                <link rel="stylesheet" type="text/css" href="/mass_mailing/static/src/css/mass_mailing_popup.css" />
-                <script type="text/javascript" src="/mass_mailing/static/src/js/website_mass_mailing.js"></script>
-            </xpath>
-        </template>
-
-        <template id="assets_editor" inherit_id="website.assets_editor" name="wesbite_mass_mailing Editor assets">
-            <xpath expr="/t" position="inside">
-                <script type="text/javascript" src="/mass_mailing/static/src/js/website_mass_mailing.editor.js" groups="base.group_website_publisher"></script>
-            </xpath>
-        </template>
-    </data>
-</openerp>
diff --git a/addons/note/static/src/css/note.css b/addons/note/static/src/css/note.css
index b55ff27cef0..9ceec3be3b1 100644
--- a/addons/note/static/src/css/note.css
+++ b/addons/note/static/src/css/note.css
@@ -10,11 +10,3 @@
   padding: 0px;
   width: 100%;
   min-height: 200px; }
-  .openerp .oe_form .oe_form_field.oe_memo .cleditorMain {
-    border: none;
-    padding: 0px; }
-
-.o-form-view.o_note_form_view .o_form_statusbar .o_statusbar_buttons, .o-form-view.o_note_form_view .o_form_statusbar .o_statusbar_status {
-  order: 1;
-}
-
diff --git a/addons/note/static/src/css/note.sass b/addons/note/static/src/css/note.sass
index 7c269d0d9f0..afc0d3c1467 100644
--- a/addons/note/static/src/css/note.sass
+++ b/addons/note/static/src/css/note.sass
@@ -24,11 +24,3 @@
       padding: 0px
       width: 100%
       min-height: 200px
-      .cleditorMain
-        border: none
-        padding: 0px
-
-.o-form-view.o_note_form_view
-  .o_form_statusbar
-    .o_statusbar_buttons, .o_statusbar_status
-      order: 1 // many2many tag before statusbar button div (no button)
diff --git a/addons/point_of_sale/static/src/js/gui.js b/addons/point_of_sale/static/src/js/gui.js
index 91da131e88a..ec64b5991a8 100644
--- a/addons/point_of_sale/static/src/js/gui.js
+++ b/addons/point_of_sale/static/src/js/gui.js
@@ -7,7 +7,7 @@ odoo.define('point_of_sale.gui', function (require) {
 // it is available to all pos objects trough the '.gui' field.
 
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 
 var _t = core._t;
 
diff --git a/addons/point_of_sale/static/src/js/models.js b/addons/point_of_sale/static/src/js/models.js
index 6823197df5c..45b7db18481 100644
--- a/addons/point_of_sale/static/src/js/models.js
+++ b/addons/point_of_sale/static/src/js/models.js
@@ -5,7 +5,7 @@ var BarcodeParser = require('barcodes.BarcodeParser');
 var PosDB = require('point_of_sale.DB');
 var devices = require('point_of_sale.devices');
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var time = require('web.time');
 var utils = require('web.utils');
diff --git a/addons/point_of_sale/static/src/js/screens.js b/addons/point_of_sale/static/src/js/screens.js
index 10e9ef66c1e..192d70cbeba 100644
--- a/addons/point_of_sale/static/src/js/screens.js
+++ b/addons/point_of_sale/static/src/js/screens.js
@@ -31,7 +31,7 @@ var PosBaseWidget = require('point_of_sale.BaseWidget');
 var gui = require('point_of_sale.gui');
 var models = require('point_of_sale.models');
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var utils = require('web.utils');
 var formats = require('web.formats');
 
diff --git a/addons/pos_restaurant/static/src/js/floors.js b/addons/pos_restaurant/static/src/js/floors.js
index 9009c89f69e..732db3cc9d8 100644
--- a/addons/pos_restaurant/static/src/js/floors.js
+++ b/addons/pos_restaurant/static/src/js/floors.js
@@ -7,7 +7,7 @@ var gui = require('point_of_sale.gui');
 var models = require('point_of_sale.models');
 var screens = require('point_of_sale.screens');
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 
 var QWeb = core.qweb;
 var _t = core._t;
diff --git a/addons/purchase_requisition/static/src/js/web_addons.js b/addons/purchase_requisition/static/src/js/web_addons.js
index 9e913df53ad..d67c8ec146d 100644
--- a/addons/purchase_requisition/static/src/js/web_addons.js
+++ b/addons/purchase_requisition/static/src/js/web_addons.js
@@ -2,7 +2,7 @@ odoo.define('purchase_requisition.purchase_requisition', function (require) {
 "use strict";
 
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var ListView = require('web.ListView');
 
 var QWeb = core.qweb;
diff --git a/addons/report/controllers/main.py b/addons/report/controllers/main.py
index 7be790f2ccf..7f72097b68d 100644
--- a/addons/report/controllers/main.py
+++ b/addons/report/controllers/main.py
@@ -28,22 +28,21 @@ class ReportController(Controller):
 
         if docids:
             docids = [int(i) for i in docids.split(',')]
-        options_data = None
         if data.get('options'):
-            options_data = simplejson.loads(data['options'])
+            data['options'] = simplejson.loads(data['options'])
         if data.get('context'):
             # Ignore 'lang' here, because the context in data is the one from the webclient *but* if
-            # the user explicitely wants to change the lang, this mechanism overwrites it. 
-            data_context = simplejson.loads(data['context'])
-            if data_context.get('lang'):
-                del data_context['lang']
-            context.update(data_context)
+            # the user explicitely wants to change the lang, this mechanism overwrites it.
+            data['context'] = simplejson.loads(data['context'])
+            if data['context'].get('lang'):
+                del data['context']['lang']
+            context.update(data['context'])
 
         if converter == 'html':
-            html = report_obj.get_html(cr, uid, docids, reportname, data=options_data, context=context)
+            html = report_obj.get_html(cr, uid, docids, reportname, data=data, context=context)
             return request.make_response(html)
         elif converter == 'pdf':
-            pdf = report_obj.get_pdf(cr, uid, docids, reportname, data=options_data, context=context)
+            pdf = report_obj.get_pdf(cr, uid, docids, reportname, data=data, context=context)
             pdfhttpheaders = [('Content-Type', 'application/pdf'), ('Content-Length', len(pdf))]
             return request.make_response(pdf, headers=pdfhttpheaders)
         else:
diff --git a/addons/report/models/report.py b/addons/report/models/report.py
index a6da089263c..6801cf3bdd9 100644
--- a/addons/report/models/report.py
+++ b/addons/report/models/report.py
@@ -120,6 +120,7 @@ class Report(osv.Model):
             if request.website is not None:
                 website = request.website
                 context = dict(context, translatable=context.get('lang') != request.website.default_lang_code)
+
         values.update(
             time=time,
             context_timestamp=lambda t: fields.datetime.context_timestamp(cr, uid, t, context),
diff --git a/addons/report/static/src/css/report.css b/addons/report/static/src/css/report.css
new file mode 100644
index 00000000000..c1ba5901d71
--- /dev/null
+++ b/addons/report/static/src/css/report.css
@@ -0,0 +1,33 @@
+body {
+    color: #000 !important;
+    word-wrap: break-word;
+}
+.border-black td {
+    border-top: 1px solid black !important;
+}
+.table-condensed > thead > tr > th {
+    border-bottom: 1px solid black !important;
+}
+.zero_min_height {
+    min-height: 0px !important;
+}
+
+/* To avoid broken snippets in report rendering */
+.jumbotron, .panel, .carousel, section{
+    page-break-inside: avoid;
+}
+/* Wkhtmltopdf don't support very well the media-print CSS (depends on the version) */
+.hidden-print{
+    display: none;
+}
+
+.o_editable:not(:empty)[data-oe-model="ir.ui.view"]:hover,
+.o_editable:not(:empty)[data-oe-model="ir.ui.view"] th:hover,
+.o_editable:not(:empty)[data-oe-model="ir.ui.view"] td:hover,
+.o_editable[data-oe-type][data-oe-model="ir.ui.view"]:hover,
+.o_editable[data-oe-type][data-oe-model="ir.ui.view"] th:hover,
+.o_editable[data-oe-type][data-oe-model="ir.ui.view"] td:hover {
+    -moz-box-shadow: #DDCC33 0 0 5px 2px inset;
+    -webkit-box-shadow: #DDCC33 0 0 5px 2px inset;
+    box-shadow: #DDCC33 0 0 5px 2px inset;
+}
diff --git a/addons/report/static/src/js/qwebactionmanager.js b/addons/report/static/src/js/qwebactionmanager.js
index 825ac47030a..1f7084aecd7 100644
--- a/addons/report/static/src/js/qwebactionmanager.js
+++ b/addons/report/static/src/js/qwebactionmanager.js
@@ -52,10 +52,11 @@ ActionManager.include({
             // particular: query string of action.data.form and context
             if (!('data' in action) || !(action.data)) {
                 if ('active_ids' in action.context) {
-                    report_url += "/" + action.context.active_ids.join(',');
+                    report_url += "/" + action.context.active_ids.join(',') + "?enable_editor=1";
                 }
             } else {
-                report_url += "?options=" + encodeURIComponent(JSON.stringify(action.data));
+                report_url += "?enable_editor=1";
+                report_url += "&options=" + encodeURIComponent(JSON.stringify(action.data));
                 report_url += "&context=" + encodeURIComponent(JSON.stringify(action.context));
             }
 
diff --git a/addons/report/static/src/js/report.editor.js b/addons/report/static/src/js/report.editor.js
new file mode 100644
index 00000000000..ea1e57d63ad
--- /dev/null
+++ b/addons/report/static/src/js/report.editor.js
@@ -0,0 +1,26 @@
+odoo.define('report.editor', function (require) {
+"use strict";
+
+var editor = require('web_editor.editor');
+var options = require('web_editor.snippets.options');
+
+editor.reload = function () {
+    location.hash = "scrollTop=" + window.document.body.scrollTop;
+    window.location.reload();
+};
+
+options.registry.many2one.include({
+    select_record: function (li) {
+        var self = this;
+        this._super(li);
+        if (this.$target.data('oe-field') === "partner_id") {
+            var $img = $('.header .row img:first');
+            var css = window.getComputedStyle($img[0]);
+            $img.css("max-height", css.height+'px');
+            $img.attr("src", "/web_editor/image/res.partner/"+self.ID+"/image");
+            setTimeout(function () { $img.removeClass('o_dirty'); },0);
+        }
+    }
+});
+
+});
\ No newline at end of file
diff --git a/addons/report/views/layouts.xml b/addons/report/views/layouts.xml
index 520bdd36e9b..695410b3907 100644
--- a/addons/report/views/layouts.xml
+++ b/addons/report/views/layouts.xml
@@ -1,25 +1,35 @@
 <?xml version="1.0" encoding="utf-8"?>
 <openerp>
 <data>
-<template id="layout" inherit_id="web.layout" primary="True">
-    <!-- Add report attributes -->
-    <xpath expr="//html" position="attributes">
-        <attribute name="t-att-data-report-margin-top">data_report_margin_top if data_report_margin_top else None</attribute>
-        <attribute name="t-att-data-report-header-spacing">data_report_header_spacing if data_report_header_spacing else None</attribute>
-        <attribute name="t-att-data-report-dpi">data_report_dpi if data_report_dpi else None</attribute>
-    </xpath>
-    <!-- Add report style -->
-    <xpath expr="//head" position="inside">
-        <link href="/web/static/lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
-        <link href="/website/static/src/css/website.css" rel="stylesheet"/>
-        <link href="/web/static/lib/fontawesome/css/font-awesome.css" rel="stylesheet"/>
-        <link href="/base/static/src/css/description.css" rel="stylesheet"/>
-        <style type="text/css">
-            <t t-call="report.style"/>
-        </style>
-    </xpath>
-    <!-- Remove conflicting style -->
-    <xpath expr="//head/link[@href='/web/static/src/css/full.css']" position="replace"></xpath>
+<template id="layout" name="Report layout">&lt;!DOCTYPE html&gt;
+    <html t-att-lang="lang and lang.replace('_', '-')"
+          t-att-data-editable="'1' if editable else None"
+          t-att-data-translatable="'1' if translatable else None"
+          t-att-data-edit_translations="'1' if edit_translations else None"
+          t-att-data-main-object="repr(main_object) if editable else None"
+          t-att-data-report-margin-top="data_report_margin_top"
+          t-att-data-report-header-spacing="data_report_header_spacing"
+          t-att-data-report-dpi="data_report_dpi">
+        <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="initial-scale=1"/>
+            <title><t t-esc="title or 'Odoo Report'"/></title>
+            <link rel='stylesheet' href='/report/static/src/css/report.css'/>
+            <link id="bootstrap_css" rel='stylesheet' href='/web/static/lib/bootstrap/css/bootstrap.css'/>
+            <t t-if="editable">
+                <t t-call-assets="web_editor.assets_editor"/>
+                <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
+                <script type="text/javascript" src='/report/static/src/js/report.editor.js' />
+            </t>
+        </head>
+        <body class="container" t-att-style="editable and 'margin-top: 40px;'">
+            <div id="wrapwrap">
+                <main>
+                    <t t-raw="0"/>
+                </main>
+            </div>
+        </body>
+    </html>
 </template>
 
 <template id="html_container">
@@ -29,22 +39,6 @@
     </t>
 </template>
 
-<template id="style" name="Report Style">
-    body {
-        color: #000 !important;
-        word-wrap: break-word;
-    }
-    .border-black td {
-        border-top: 1px solid black !important;
-    }
-    .table-condensed > thead > tr > th {
-        border-bottom: 1px solid black !important;
-    }
-    .zero_min_height {
-        min-height: 0px !important;
-    }
-</template>
-
 <template id="external_layout">
     <!-- Multicompany -->
     <t t-if="o and 'company_id' in o">
diff --git a/addons/sale/views/report_saleorder.xml b/addons/sale/views/report_saleorder.xml
index fb62ea40d8a..05cf41262a5 100644
--- a/addons/sale/views/report_saleorder.xml
+++ b/addons/sale/views/report_saleorder.xml
@@ -44,11 +44,11 @@
                 </div>
                 <div t-if="doc.user_id.name" class="col-xs-3">
                     <strong>Salesperson:</strong>
-                    <p t-field="doc.user_id.name"/>
+                    <p t-field="doc.user_id"/>
                 </div>
                 <div name="payment_term" t-if="doc.payment_term_id" class="col-xs-3">
                     <strong>Payment Term:</strong>
-                    <p t-field="doc.payment_term_id.name"/>
+                    <p t-field="doc.payment_term_id"/>
                 </div>
             </div>
 
diff --git a/addons/survey/wizard/survey_email_compose_message.xml b/addons/survey/wizard/survey_email_compose_message.xml
index bf89f69600a..d9a68b1e417 100644
--- a/addons/survey/wizard/survey_email_compose_message.xml
+++ b/addons/survey/wizard/survey_email_compose_message.xml
@@ -50,7 +50,7 @@
                             <field invisible="context.get('survey_resent_token')" name="multi_email" placeholder="Add list of email of recipients (will not converted in partner), separated by commas, semicolons or newline..." on_change="onchange_multi_email(multi_email)" />
                             <field name="subject" placeholder="Subject..."/>
                         </group>
-                        <field name="body" />
+                        <field name="body" options="{'style-inline': true}"/>
                         <group col="2">
                             <div>
                                 <label for="attachment_ids" />
diff --git a/addons/theme_bootswatch/static/src/less/amelia/fix.css b/addons/theme_bootswatch/static/src/less/amelia/fix.css
index 2f16ea5465c..e1c735adba3 100644
--- a/addons/theme_bootswatch/static/src/less/amelia/fix.css
+++ b/addons/theme_bootswatch/static/src/less/amelia/fix.css
@@ -1,4 +1,4 @@
-#website-top-navbar a.btn-link {
+#web_editor-top-edit a.btn-link {
     color: #ad1d28;
 }
 .oe_product section {
diff --git a/addons/theme_bootswatch/static/src/less/cosmo/fix.css b/addons/theme_bootswatch/static/src/less/cosmo/fix.css
index 907aa7bf757..134555c71b6 100644
--- a/addons/theme_bootswatch/static/src/less/cosmo/fix.css
+++ b/addons/theme_bootswatch/static/src/less/cosmo/fix.css
@@ -1,7 +1,7 @@
-#website-top-navbar button.btn-primary {
+#web_editor-top-edit button.btn-primary {
     color: #fff;
     border: 2px solid #0061c2;
 }
-#website-top-navbar a.btn-link {
+#web_editor-top-edit a.btn-link {
     color: #fff;
 }
\ No newline at end of file
diff --git a/addons/theme_bootswatch/static/src/less/flatly/fix.css b/addons/theme_bootswatch/static/src/less/flatly/fix.css
index c2d9500f5da..c4a016443a2 100644
--- a/addons/theme_bootswatch/static/src/less/flatly/fix.css
+++ b/addons/theme_bootswatch/static/src/less/flatly/fix.css
@@ -1,3 +1,3 @@
-#website-top-navbar a.btn-link {
+#web_editor-top-edit a.btn-link {
     color: #2c3e50;
 }
\ No newline at end of file
diff --git a/addons/theme_bootswatch/static/src/less/journal/fix.css b/addons/theme_bootswatch/static/src/less/journal/fix.css
index e9f41a33e8f..0631077cc05 100644
--- a/addons/theme_bootswatch/static/src/less/journal/fix.css
+++ b/addons/theme_bootswatch/static/src/less/journal/fix.css
@@ -1,6 +1,6 @@
-#website-top-navbar button.btn-primary {
+#web_editor-top-edit button.btn-primary {
     border: 2px solid #e4332e;
 }
-#website-top-navbar a.btn-link {
+#web_editor-top-edit a.btn-link {
     color: #fff;
 }
\ No newline at end of file
diff --git a/addons/theme_bootswatch/static/src/less/simplex/fix.css b/addons/theme_bootswatch/static/src/less/simplex/fix.css
index 56dbb1fdd5f..b57fda3a4d6 100644
--- a/addons/theme_bootswatch/static/src/less/simplex/fix.css
+++ b/addons/theme_bootswatch/static/src/less/simplex/fix.css
@@ -1,3 +1,3 @@
-#website-top-navbar a.btn-link {
+#web_editor-top-edit a.btn-link {
     color: #fff;
 }
\ No newline at end of file
diff --git a/addons/web/static/lib/cleditor/images/buttons.gif b/addons/web/static/lib/cleditor/images/buttons.gif
deleted file mode 100644
index 2e464d0c8c7..00000000000
Binary files a/addons/web/static/lib/cleditor/images/buttons.gif and /dev/null differ
diff --git a/addons/web/static/lib/cleditor/images/toolbar.gif b/addons/web/static/lib/cleditor/images/toolbar.gif
deleted file mode 100644
index e6eb2da5549..00000000000
Binary files a/addons/web/static/lib/cleditor/images/toolbar.gif and /dev/null differ
diff --git a/addons/web/static/lib/cleditor/jquery.cleditor.css b/addons/web/static/lib/cleditor/jquery.cleditor.css
deleted file mode 100644
index 19669406947..00000000000
--- a/addons/web/static/lib/cleditor/jquery.cleditor.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.cleditorMain {border:1px solid #999; padding:0 1px 1px; background-color:white}
-.cleditorMain iframe {border:none; margin:0; padding:0}
-.cleditorMain textarea {border:none; margin:0; padding:0; overflow-y:scroll; font:10pt Arial,Verdana; resize:none; outline:none /* webkit grip focus */}
-.cleditorToolbar {background: url('images/toolbar.gif') repeat}
-.cleditorGroup {float:left; height:26px}
-.cleditorButton {float:left; width:24px; height:24px; margin:1px 0 1px 0; background: url('images/buttons.gif')}
-.cleditorDisabled {opacity:0.3; filter:alpha(opacity=30)}
-.cleditorDivider {float:left; width:1px; height:23px; margin:1px 0 1px 0; background:#CCC}
-.cleditorPopup {border:solid 1px #999; background-color:white; color:#333333; position:absolute; font:10pt Arial,Verdana; cursor:default; z-index:10000}
-.cleditorList div {padding:2px 4px 2px 4px}
-.cleditorList p,
-.cleditorList h1,
-.cleditorList h2,
-.cleditorList h3,
-.cleditorList h4,
-.cleditorList h5,
-.cleditorList h6,
-.cleditorList font {padding:0; margin:0; background-color:Transparent}
-.cleditorColor {width:150px; padding:1px 0 0 1px}
-.cleditorColor div {float:left; width:14px; height:14px; margin:0 1px 1px 0}
-.cleditorPrompt {background-color:#F6F7F9; padding:4px; font-size:8.5pt}
-.cleditorPrompt input,
-.cleditorPrompt textarea {font:8.5pt Arial,Verdana;}
-.cleditorMsg {background-color:#FDFCEE; width:150px; padding:4px; font-size:8.5pt}
diff --git a/addons/web/static/lib/cleditor/jquery.cleditor.js b/addons/web/static/lib/cleditor/jquery.cleditor.js
deleted file mode 100644
index 5a30d29a191..00000000000
--- a/addons/web/static/lib/cleditor/jquery.cleditor.js
+++ /dev/null
@@ -1,1184 +0,0 @@
-/*!
- CLEditor WYSIWYG HTML Editor v1.4.4
- http://premiumsoftware.net/CLEditor
- requires jQuery v1.4.2 or later
-
- Copyright 2010, Chris Landowski, Premium Software, LLC
- Dual licensed under the MIT or GPL Version 2 licenses.
-*/
-
-(function ($) {
-
-  //==============
-  // jQuery Plugin
-  //==============
-
-  $.cleditor = {
-
-    // Define the defaults used for all new cleditor instances
-    defaultOptions: {
-      width:        'auto', // width not including margins, borders or padding
-      height:       250, // height not including margins, borders or padding
-      controls:     // controls to add to the toolbar
-                    "bold italic underline strikethrough subscript superscript | font size " +
-                    "style | color highlight removeformat | bullets numbering | outdent " +
-                    "indent | alignleft center alignright justify | undo redo | " +
-                    "rule image link unlink | cut copy paste pastetext | print source",
-      colors:       // colors in the color popup
-                    "FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " +
-                    "CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " +
-                    "BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " +
-                    "999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " +
-                    "666 900 C60 C93 990 090 399 33F 60C 939 " +
-                    "333 600 930 963 660 060 366 009 339 636 " +
-                    "000 300 630 633 330 030 033 006 309 303",    
-      fonts:        // font names in the font popup
-                    "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
-                    "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
-      sizes:        // sizes in the font size popup
-                    "1,2,3,4,5,6,7",
-      styles:       // styles in the style popup
-                    [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
-                    ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
-                    ["Header 6","<h6>"]],
-      useCSS:       true, // use CSS to style HTML when possible (not supported in ie)
-      docType:      // Document type contained within the editor
-                    '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
-      docCSSFile:   // CSS file used to style the document contained within the editor
-                    "", 
-      bodyStyle:    // style to assign to document body contained within the editor
-                    "margin:4px; color:#4c4c4c; font-size:13px; font-family:\"Lucida Grande\",Helvetica,Verdana,Arial,sans-serif; cursor:text"
-    },
-
-    // Define all usable toolbar buttons - the init string property is 
-    //   expanded during initialization back into the buttons object and 
-    //   separate object properties are created for each button.
-    //   e.g. buttons.size.title = "Font Size"
-    buttons: {
-      // name,title,command,popupName (""=use name)
-      init:
-      "bold,,|" +
-      "italic,,|" +
-      "underline,,|" +
-      "strikethrough,,|" +
-      "subscript,,|" +
-      "superscript,,|" +
-      "font,,fontname,|" +
-      "size,Font Size,fontsize,|" +
-      "style,,formatblock,|" +
-      "color,Font Color,forecolor,|" +
-      "highlight,Text Highlight Color,hilitecolor,color|" +
-      "removeformat,Remove Formatting,|" +
-      "bullets,,insertunorderedlist|" +
-      "numbering,,insertorderedlist|" +
-      "outdent,,|" +
-      "indent,,|" +
-      "alignleft,Align Text Left,justifyleft|" +
-      "center,,justifycenter|" +
-      "alignright,Align Text Right,justifyright|" +
-      "justify,,justifyfull|" +
-      "undo,,|" +
-      "redo,,|" +
-      "rule,Insert Horizontal Rule,inserthorizontalrule|" +
-      "image,Insert Image,insertimage,url|" +
-      "link,Insert Hyperlink,createlink,url|" +
-      "unlink,Remove Hyperlink,|" +
-      "cut,,|" +
-      "copy,,|" +
-      "paste,,|" +
-      "pastetext,Paste as Text,inserthtml,|" +
-      "print,,|" +
-      "source,Show Source"
-    },
-
-    // imagesPath - returns the path to the images folder
-    imagesPath: function() { return imagesPath(); }
-
-  };
-
-  // cleditor - creates a new editor for each of the matched textareas
-  $.fn.cleditor = function(options) {
-
-    // Create a new jQuery object to hold the results
-    var $result = $([]);
-
-    // Loop through all matching textareas and create the editors
-    this.each(function(idx, elem) {
-      if (elem.tagName.toUpperCase() === "TEXTAREA") {
-        var data = $.data(elem, CLEDITOR);
-        if (!data) data = new cleditor(elem, options);
-        $result = $result.add(data);
-      }
-    });
-
-    // return the new jQuery object
-    return $result;
-
-  };
-    
-  //==================
-  // Private Variables
-  //==================
-
-  var
-
-  // Misc constants
-  BACKGROUND_COLOR = "backgroundColor",
-  BLURRED          = "blurred",
-  BUTTON           = "button",
-  BUTTON_NAME      = "buttonName",
-  CHANGE           = "change",
-  CLEDITOR         = "cleditor",
-  CLICK            = "click",
-  DISABLED         = "disabled",
-  DIV_TAG          = "<div>",
-  FOCUSED          = "focused",
-  TRANSPARENT      = "transparent",
-  UNSELECTABLE     = "unselectable",
-
-  // Class name constants
-  MAIN_CLASS       = "cleditorMain",    // main containing div
-  TOOLBAR_CLASS    = "cleditorToolbar", // toolbar div inside main div
-  GROUP_CLASS      = "cleditorGroup",   // group divs inside the toolbar div
-  BUTTON_CLASS     = "cleditorButton",  // button divs inside group div
-  DISABLED_CLASS   = "cleditorDisabled",// disabled button divs
-  DIVIDER_CLASS    = "cleditorDivider", // divider divs inside group div
-  POPUP_CLASS      = "cleditorPopup",   // popup divs inside body
-  LIST_CLASS       = "cleditorList",    // list popup divs inside body
-  COLOR_CLASS      = "cleditorColor",   // color popup div inside body
-  PROMPT_CLASS     = "cleditorPrompt",  // prompt popup divs inside body
-  MSG_CLASS        = "cleditorMsg",     // message popup div inside body
-
-  // Browser detection
-  ua = navigator.userAgent.toLowerCase(),
-  ie = /msie/.test(ua),
-  ie6 = /msie\s6/.test(ua),
-  iege11 = /(trident)(?:.*rv:([\w.]+))?/.test(ua),
-  webkit = /webkit/.test(ua),
-
-  // Test for iPhone/iTouch/iPad
-  iOS = /iphone|ipad|ipod/i.test(ua),
-
-  // Popups are created once as needed and shared by all editor instances
-  popups = {},
-
-  // Used to prevent the document click event from being bound more than once
-  documentClickAssigned,
-
-  // Local copy of the buttons object
-  buttons = $.cleditor.buttons;
-
-  //===============
-  // Initialization
-  //===============
-
-  // Expand the buttons.init string back into the buttons object
-  //   and create seperate object properties for each button.
-  //   e.g. buttons.size.title = "Font Size"
-  $.each(buttons.init.split("|"), function(idx, button) {
-    var items = button.split(","), name = items[0];
-    buttons[name] = {
-      stripIndex: idx,
-      name: name,
-      title: items[1] === "" ? name.charAt(0).toUpperCase() + name.substr(1) : items[1],
-      command: items[2] === "" ? name : items[2],
-      popupName: items[3] === "" ? name : items[3]
-    };
-  });
-  delete buttons.init;
-
-  //============
-  // Constructor
-  //============
-
-  // cleditor - creates a new editor for the passed in textarea element
-  cleditor = function(area, options) {
-
-    var editor = this;
-
-    // Get the defaults and override with options
-    editor.options = options = $.extend({}, $.cleditor.defaultOptions, options);
-
-    // Hide the textarea and associate it with this editor
-    var $area = editor.$area = $(area)
-      .hide()
-      .data(CLEDITOR, editor)
-      .blur(function() {
-        // Update the iframe when the textarea loses focus
-        updateFrame(editor, true);
-      });
-
-    // Create the main container and append the textarea
-    var $main = editor.$main = $(DIV_TAG)
-      .addClass(MAIN_CLASS)
-      .width(options.width)
-      .height(options.height);
-
-    // Create the toolbar
-    var $toolbar = editor.$toolbar = $(DIV_TAG)
-      .addClass(TOOLBAR_CLASS)
-      .appendTo($main);
-
-    // Add the first group to the toolbar
-    var $group = $(DIV_TAG)
-      .addClass(GROUP_CLASS)
-      .appendTo($toolbar);
-
-    // Initialize the group width
-    var groupWidth = 0;
-    
-    // Add the buttons to the toolbar
-    $.each(options.controls.split(" "), function(idx, buttonName) {
-      if (buttonName === "") return true;
-
-      // Divider
-      if (buttonName === "|") {
-
-        // Add a new divider to the group
-        var $div = $(DIV_TAG)
-          .addClass(DIVIDER_CLASS)
-          .appendTo($group);
-
-        // Update the group width
-        $group.width(groupWidth + 1);
-        groupWidth = 0;
-
-        // Create a new group
-        $group = $(DIV_TAG)
-          .addClass(GROUP_CLASS)
-          .appendTo($toolbar);
-
-      }
-
-      // Button
-      else {
-        
-        // Get the button definition
-        var button = buttons[buttonName];
-
-        // Add a new button to the group
-        var $buttonDiv = $(DIV_TAG)
-          .data(BUTTON_NAME, button.name)
-          .addClass(BUTTON_CLASS)
-          .attr("title", button.title)
-          .bind(CLICK, $.proxy(buttonClick, editor))
-          .appendTo($group)
-          .hover(hoverEnter, hoverLeave);
-
-        // Update the group width
-        groupWidth += 24;
-        $group.width(groupWidth + 1);
-
-        // Prepare the button image
-        var map = {};
-        if (button.css) map = button.css;
-        else if (button.image) map.backgroundImage = imageUrl(button.image);
-        if (button.stripIndex) map.backgroundPosition = button.stripIndex * -24;
-        $buttonDiv.css(map);
-
-        // Add the unselectable attribute for ie
-        if (ie)
-          $buttonDiv.attr(UNSELECTABLE, "on");
-
-        // Create the popup
-        if (button.popupName)
-          createPopup(button.popupName, options, button.popupClass,
-            button.popupContent, button.popupHover);
-        
-      }
-
-    });
-
-    // Add the main div to the DOM and append the textarea
-    $main.insertBefore($area)
-      .append($area);
-
-    // Bind the document click event handler
-    if (!documentClickAssigned) {
-      $(document).click(function(e) {
-        // Dismiss all non-prompt popups
-        var $target = $(e.target);
-        if (!$target.add($target.parents()).is("." + PROMPT_CLASS))
-          hidePopups();
-      });
-      documentClickAssigned = true;
-    }
-
-    // Bind the window resize event when the width or height is auto or %
-    if (/auto|%/.test("" + options.width + options.height))
-      $(window).bind('resize.cleditor', function () {
-        //Forcefully blurred iframe contentWindow, chrome, IE, safari doesn't trigger blur on window resize and due to which text disappears
-        var contentWindow = editor.$frame[0].contentWindow;
-        if(!$.browser.mozilla && contentWindow){
-          $(contentWindow).trigger('blur');
-        }
-        // CHM Note MonkeyPatch: if the DOM is not remove, refresh the cleditor
-        if(editor.$main.parent().parent().size()) {
-          refresh(editor);
-        }
-      });
-    // Create the iframe and resize the controls
-    refresh(editor);
-
-  };
-
-  //===============
-  // Public Methods
-  //===============
-
-  var fn = cleditor.prototype,
-
-  // Expose the following private functions as methods on the cleditor object.
-  // The closure compiler will rename the private functions. However, the
-  // exposed method names on the cleditor object will remain fixed.
-  methods = [
-    ["clear", clear],
-    ["disable", disable],
-    ["execCommand", execCommand],
-    ["focus", focus],
-    ["hidePopups", hidePopups],
-    ["sourceMode", sourceMode, true],
-    ["refresh", refresh],
-    ["select", select],
-    ["selectedHTML", selectedHTML, true],
-    ["selectedText", selectedText, true],
-    ["showMessage", showMessage],
-    ["updateFrame", updateFrame],
-    ["updateTextArea", updateTextArea]
-  ];
-
-  $.each(methods, function(idx, method) {
-    fn[method[0]] = function() {
-      var editor = this, args = [editor];
-      // using each here would cast booleans into objects!
-      for(var x = 0; x < arguments.length; x++) {args.push(arguments[x]);}
-      var result = method[1].apply(editor, args);
-      if (method[2]) return result;
-      return editor;
-    };
-  });
-  
-  // blurred - shortcut for .bind("blurred", handler) or .trigger("blurred")
-  fn.blurred = function(handler) {
-    var $this = $(this);
-    return handler ? $this.bind(BLURRED, handler) : $this.trigger(BLURRED);
-  };
-
-  // change - shortcut for .bind("change", handler) or .trigger("change")
-  fn.change = function change(handler) {
-    var $this = $(this);
-    return handler ? $this.bind(CHANGE, handler) : $this.trigger(CHANGE);
-  };
-
-  // focused - shortcut for .bind("focused", handler) or .trigger("focused")
-  fn.focused = function(handler) {
-    var $this = $(this);
-    return handler ? $this.bind(FOCUSED, handler) : $this.trigger(FOCUSED);
-  };
-
-  //===============
-  // Event Handlers
-  //===============
-
-  // buttonClick - click event handler for toolbar buttons
-  function buttonClick(e) {
-
-    var editor = this,
-        buttonDiv = e.target,
-        buttonName = $.data(buttonDiv, BUTTON_NAME),
-        button = buttons[buttonName],
-        popupName = button.popupName,
-        popup = popups[popupName];
-
-    // Check if disabled
-    if (editor.disabled || $(buttonDiv).attr(DISABLED) === DISABLED)
-      return;
-
-    // Fire the buttonClick event
-    var data = {
-      editor: editor,
-      button: buttonDiv,
-      buttonName: buttonName,
-      popup: popup,
-      popupName: popupName,
-      command: button.command,
-      useCSS: editor.options.useCSS
-    };
-
-    if (button.buttonClick && button.buttonClick(e, data) === false)
-      return false;
-
-    // Toggle source
-    if (buttonName === "source") {
-
-      // Show the iframe
-      if (sourceMode(editor)) {
-        delete editor.range;
-        editor.$area.hide();
-        editor.$frame.show();
-        buttonDiv.title = button.title;
-      }
-
-      // Show the textarea
-      else {
-        editor.$frame.hide();
-        editor.$area.show();
-        buttonDiv.title = "Show Rich Text";
-      }
-
-      // Enable or disable the toolbar buttons
-      // IE requires the timeout
-      setTimeout(function() {refreshButtons(editor);}, 100);
-
-    }
-
-    // Check for rich text mode
-    else if (!sourceMode(editor)) {
-
-      // Handle popups
-      if (popupName) {
-        var $popup = $(popup);
-
-        // URL
-        if (popupName === "url") {
-
-          // Check for selection before showing the link url popup
-          if (buttonName === "link" && selectedText(editor) === "") {
-            showMessage(editor, "A selection is required when inserting a link.", buttonDiv);
-            return false;
-          }
-
-          // Wire up the submit button click event handler
-          $popup.children(":button")
-            .unbind(CLICK)
-            .bind(CLICK, function() {
-
-              // Insert the image or link if a url was entered
-              var $text = $popup.find(":text"),
-                url = $.trim($text.val());
-              if (url !== "")
-                execCommand(editor, data.command, url, null, data.button);
-
-              // Reset the text, hide the popup and set focus
-              $text.val("http://");
-              hidePopups();
-              focus(editor);
-
-            });
-
-        }
-
-        // Paste as Text
-        else if (popupName === "pastetext") {
-
-          // Wire up the submit button click event handler
-          $popup.children(":button")
-            .unbind(CLICK)
-            .bind(CLICK, function() {
-
-              // Insert the unformatted text replacing new lines with break tags
-              var $textarea = $popup.find("textarea"),
-                text = $textarea.val().replace(/\n/g, "<br />");
-              if (text !== "")
-                execCommand(editor, data.command, text, null, data.button);
-
-              // Reset the text, hide the popup and set focus
-              $textarea.val("");
-              hidePopups();
-              focus(editor);
-
-            });
-
-        }
-
-        // Show the popup if not already showing for this button
-        if (buttonDiv !== $.data(popup, BUTTON)) {
-          showPopup(editor, popup, buttonDiv);
-          return false; // stop propagination to document click
-        }
-
-        // propaginate to document click
-        return;
-
-      }
-
-      // Print
-      else if (buttonName === "print")
-        editor.$frame[0].contentWindow.print();
-
-      // All other buttons
-      else if (!execCommand(editor, data.command, data.value, data.useCSS, buttonDiv))
-        return false;
-
-    }
-
-    // Focus the editor
-    focus(editor);
-
-  }
-
-  // hoverEnter - mouseenter event handler for buttons and popup items
-  function hoverEnter(e) {
-    var $div = $(e.target).closest("div");
-    $div.css(BACKGROUND_COLOR, $div.data(BUTTON_NAME) ? "#FFF" : "#FFC");
-  }
-
-  // hoverLeave - mouseleave event handler for buttons and popup items
-  function hoverLeave(e) {
-    $(e.target).closest("div").css(BACKGROUND_COLOR, "transparent");
-  }
-
-  // popupClick - click event handler for popup items
-  function popupClick(e) {
-
-    var editor = this,
-        popup = e.data.popup,
-        target = e.target;
-
-    // Check for message and prompt popups
-    if (popup === popups.msg || $(popup).hasClass(PROMPT_CLASS))
-      return;
-
-    // Get the button info
-    var buttonDiv = $.data(popup, BUTTON),
-        buttonName = $.data(buttonDiv, BUTTON_NAME),
-        button = buttons[buttonName],
-        command = button.command,
-        value,
-        useCSS = editor.options.useCSS;
-
-    // Get the command value
-    if (buttonName === "font")
-      // Opera returns the fontfamily wrapped in quotes
-      value = target.style.fontFamily.replace(/"/g, "");
-    else if (buttonName === "size") {
-      if (target.tagName.toUpperCase() === "DIV")
-        target = target.children[0];
-      value = target.innerHTML;
-    }
-    else if (buttonName === "style")
-      value = "<" + target.tagName + ">";
-    else if (buttonName === "color")
-      value = hex(target.style.backgroundColor);
-    else if (buttonName === "highlight") {
-      value = hex(target.style.backgroundColor);
-      if (ie) command = 'backcolor';
-      else useCSS = true;
-    }
-
-    // Fire the popupClick event
-    var data = {
-      editor: editor,
-      button: buttonDiv,
-      buttonName: buttonName,
-      popup: popup,
-      popupName: button.popupName,
-      command: command,
-      value: value,
-      useCSS: useCSS
-    };
-
-    if (button.popupClick && button.popupClick(e, data) === false)
-      return;
-
-    // Execute the command
-    if (data.command && !execCommand(editor, data.command, data.value, data.useCSS, buttonDiv))
-      return false;
-
-    // Hide the popup and focus the editor
-    hidePopups();
-    focus(editor);
-
-  }
-
-  //==================
-  // Private Functions
-  //==================
-
-  // checksum - returns a checksum using the Adler-32 method
-  function checksum(text)
-  {
-    var a = 1, b = 0;
-    for (var index = 0; index < text.length; ++index) {
-      a = (a + text.charCodeAt(index)) % 65521;
-      b = (b + a) % 65521;
-    }
-    return (b << 16) | a;
-  }
-
-  // clear - clears the contents of the editor
-  function clear(editor) {
-    editor.$area.val("");
-    updateFrame(editor);
-  }
-
-  // createPopup - creates a popup and adds it to the body
-  function createPopup(popupName, options, popupTypeClass, popupContent, popupHover) {
-
-    // Check if popup already exists
-    if (popups[popupName])
-      return popups[popupName];
-
-    // Create the popup
-    var $popup = $(DIV_TAG)
-      .hide()
-      .addClass(POPUP_CLASS)
-      .appendTo("body");
-
-    // Add the content
-
-    // Custom popup
-    if (popupContent)
-      $popup.html(popupContent);
-
-    // Color
-    else if (popupName === "color") {
-      var colors = options.colors.split(" ");
-      if (colors.length < 10)
-        $popup.width("auto");
-      $.each(colors, function(idx, color) {
-        $(DIV_TAG).appendTo($popup)
-          .css(BACKGROUND_COLOR, "#" + color);
-      });
-      popupTypeClass = COLOR_CLASS;
-    }
-
-    // Font
-    else if (popupName === "font")
-      $.each(options.fonts.split(","), function(idx, font) {
-        $(DIV_TAG).appendTo($popup)
-          .css("fontFamily", font)
-          .html(font);
-      });
-
-    // Size
-    else if (popupName === "size")
-      $.each(options.sizes.split(","), function(idx, size) {
-        $(DIV_TAG).appendTo($popup)
-          .html('<font size="' + size + '">' + size + '</font>');
-      });
-
-    // Style
-    else if (popupName === "style")
-      $.each(options.styles, function(idx, style) {
-        $(DIV_TAG).appendTo($popup)
-          .html(style[1] + style[0] + style[1].replace("<", "</"));
-      });
-
-    // URL
-    else if (popupName === "url") {
-      $popup.html('Enter URL:<br /><input type="text" value="http://" size="35" /><br /><input type="button" value="Submit" />');
-      popupTypeClass = PROMPT_CLASS;
-    }
-
-    // Paste as Text
-    else if (popupName === "pastetext") {
-      $popup.html('Paste your content here and click submit.<br /><textarea cols="40" rows="3"></textarea><br /><input type="button" value="Submit" />');
-      popupTypeClass = PROMPT_CLASS;
-    }
-
-    // Add the popup type class name
-    if (!popupTypeClass && !popupContent)
-      popupTypeClass = LIST_CLASS;
-    $popup.addClass(popupTypeClass);
-
-    // Add the unselectable attribute to all items
-    if (ie) {
-      $popup.attr(UNSELECTABLE, "on")
-        .find("div,font,p,h1,h2,h3,h4,h5,h6")
-        .attr(UNSELECTABLE, "on");
-    }
-
-    // Add the hover effect to all items
-    if ($popup.hasClass(LIST_CLASS) || popupHover === true)
-      $popup.children().hover(hoverEnter, hoverLeave);
-
-    // Add the popup to the array and return it
-    popups[popupName] = $popup[0];
-    return $popup[0];
-
-  }
-
-  // disable - enables or disables the editor
-  function disable(editor, disabled) {
-
-    // Update the textarea and save the state
-    if (disabled) {
-      editor.$area.attr(DISABLED, DISABLED);
-      editor.disabled = true;
-    }
-    else {
-      editor.$area.removeAttr(DISABLED);
-      delete editor.disabled;
-    }
-
-    // Switch the iframe into design mode.
-    // ie6 does not support designMode.
-    // ie7 & ie8 do not properly support designMode="off".
-    try {
-      if (ie) editor.doc.body.contentEditable = !disabled;
-      else editor.doc.designMode = !disabled ? "on" : "off";
-    }
-    // Firefox 1.5 throws an exception that can be ignored
-    // when toggling designMode from off to on.
-    catch (err) {}
-
-    // Enable or disable the toolbar buttons
-    refreshButtons(editor);
-
-  }
-
-  // execCommand - executes a designMode command
-  function execCommand(editor, command, value, useCSS, button) {
-
-    // Restore the current ie selection
-    restoreRange(editor);
-
-    // Set the styling method
-    if (!ie) {
-      if (useCSS === undefined || useCSS === null)
-        useCSS = editor.options.useCSS;
-      editor.doc.execCommand("styleWithCSS", 0, useCSS.toString());
-    }
-
-    // Execute the command and check for error
-    var success = true, message;
-    if (ie && command.toLowerCase() === "inserthtml")
-      getRange(editor).pasteHTML(value);
-    else {
-      try { success = editor.doc.execCommand(command, 0, value || null); }
-      catch (err) { message = err.message; success = false; }
-      if (!success) {
-        if ("cutcopypaste".indexOf(command) > -1)
-          showMessage(editor, "For security reasons, your browser does not support the " +
-            command + " command. Try using the keyboard shortcut or context menu instead.",
-            button);
-        else
-          showMessage(editor,
-            (message ? message : "Error executing the " + command + " command."),
-            button);
-      }
-    }
-
-    // Enable the buttons and update the textarea
-    refreshButtons(editor);
-    updateTextArea(editor, true);
-    return success;
-
-  }
-
-  // focus - sets focus to either the textarea or iframe
-  function focus(editor) {
-    setTimeout(function() {
-      if (sourceMode(editor)) editor.$area.focus();
-      else editor.$frame[0].contentWindow.focus();
-      refreshButtons(editor);
-    }, 0);
-  }
-
-  // getRange - gets the current text range object
-  function getRange(editor) {
-    if (ie) return getSelection(editor).createRange();
-    return getSelection(editor).getRangeAt(0);
-  }
-
-  // getSelection - gets the current text range object
-  function getSelection(editor) {
-    if (ie) return editor.doc.selection;
-    return editor.$frame[0].contentWindow.getSelection();
-  }
-
-  // hex - returns the hex value for the passed in color string
-  function hex(s) {
-
-    // hex("rgb(255, 0, 0)") returns #FF0000
-    var m = /rgba?\((\d+), (\d+), (\d+)/.exec(s);
-    if (m) {
-      s = (m[1] << 16 | m[2] << 8 | m[3]).toString(16);
-      while (s.length < 6)
-        s = "0" + s;
-      return "#" + s;
-    }
-
-    // hex("#F00") returns #FF0000
-    var c = s.split("");
-    if (s.length === 4)
-      return "#" + c[1] + c[1] + c[2] + c[2] + c[3] + c[3];
-
-    // hex("#FF0000") returns #FF0000
-    return s;
-
-  }
-
-  // hidePopups - hides all popups
-  function hidePopups() {
-    $.each(popups, function(idx, popup) {
-      $(popup)
-        .hide()
-        .unbind(CLICK)
-        .removeData(BUTTON);
-    });
-  }
-
-  // imagesPath - returns the path to the images folder
-  function imagesPath() {
-    var href = $("link[href*=cleditor]").attr("href");
-    return href.replace(/^(.*\/)[^\/]+$/, '$1') + "images/";
-  }
-
-  // imageUrl - Returns the css url string for a filemane
-  function imageUrl(filename) {
-    return "url(" + imagesPath() + filename + ")";
-  }
-
-  // refresh - creates the iframe and resizes the controls
-  function refresh(editor) {
-
-    var $main = editor.$main,
-      options = editor.options;
-
-    // Remove the old iframe
-    if (editor.$frame) 
-      editor.$frame.remove();
-
-    // Create a new iframe
-    var $frame = editor.$frame = $('<iframe frameborder="0" src="javascript:true;" />')
-      .hide()
-      .appendTo($main);
-
-    // Load the iframe document content
-    var contentWindow = $frame[0].contentWindow,
-      doc = editor.doc = contentWindow.document,
-      $doc = $(doc);
-
-    doc.open();
-    doc.write(
-      options.docType +
-      '<html>' +
-      ((options.docCSSFile === '') ? '' : '<head><link rel="stylesheet" type="text/css" href="' + options.docCSSFile + '" /></head>') +
-      '<body style="' + options.bodyStyle + '"></body></html>'
-    );
-    doc.close();
-
-    // Work around for bug in IE which causes the editor to lose
-    // focus when clicking below the end of the document.
-    if (ie || iege11)
-      $doc.click(function() {focus(editor);});
-
-    // Load the content
-    updateFrame(editor);
-
-    // Bind the ie specific iframe event handlers
-    if (ie || iege11) {
-
-      // Save the current user selection. This code is needed since IE will
-      // reset the selection just after the beforedeactivate event and just
-      // before the beforeactivate event.
-      $doc.bind("beforedeactivate beforeactivate selectionchange keypress", function(e) {
-        
-        // Flag the editor as inactive
-        if (e.type === "beforedeactivate")
-          editor.inactive = true;
-
-          // Get rid of the bogus selection and flag the editor as active
-        else if (e.type === "beforeactivate") {
-          if (!editor.inactive && editor.range && editor.range.length > 1)
-            editor.range.shift();
-          delete editor.inactive;
-        }
-
-          // Save the selection when the editor is active
-        else if (!editor.inactive) {
-          if (!editor.range)
-            editor.range = [];
-          editor.range.unshift(getRange(editor));
-
-          // We only need the last 2 selections
-          while (editor.range.length > 2)
-            editor.range.pop();
-        }
-
-      });
-
-      // Restore the text range and trigger focused event when the iframe gains focus
-      $frame.focus(function() {
-        restoreRange(editor);
-        $(editor).triggerHandler(FOCUSED);
-      });
-
-      // Trigger blurred event when the iframe looses focus
-      $frame.blur(function() {
-        $(editor).triggerHandler(BLURRED);
-      });
-
-    }
-
-      // Trigger focused and blurred events for all other browsers
-    else {
-      $(editor.$frame[0].contentWindow)
-        .focus(function () { $(editor).triggerHandler(FOCUSED); })
-        .blur(function () { $(editor).triggerHandler(BLURRED); });
-    }
-
-    // Enable the toolbar buttons and update the textarea as the user types or clicks
-    $doc.click(hidePopups)
-      .bind("keyup mouseup", function() {
-        refreshButtons(editor);
-        updateTextArea(editor, true);
-      });
-
-    // Show the textarea for iPhone/iTouch/iPad or
-    // the iframe when design mode is supported.
-    if (iOS) editor.$area.show();
-    else $frame.show();
-
-    // Wait for the layout to finish - shortcut for $(document).ready()
-    $(function() {
-
-      var $toolbar = editor.$toolbar,
-          $group = $toolbar.children("div:last"),
-          wid = /%/.test("" + options.width) ? options.width : $main.width();
-
-      // Resize the toolbar
-      var hgt = $group.offset().top + $group.outerHeight() - $toolbar.offset().top + 1;
-      $toolbar.height(hgt);
-
-      // Resize the iframe
-      hgt = (/%/.test("" + options.height) ? $main.height() : parseInt(options.height, 10)) - hgt;
-      $frame.width(wid).height(hgt);
-
-      // Resize the textarea. IE6 textareas have a 1px top
-      // & bottom margin that cannot be removed using css.
-      editor.$area.width(wid).height(ie6 ? hgt - 2 : hgt);
-
-      // Switch the iframe into design mode if enabled
-      disable(editor, editor.disabled);
-
-      // Enable or disable the toolbar buttons
-      refreshButtons(editor);
-
-    });
-
-  }
-
-  // refreshButtons - enables or disables buttons based on availability
-  function refreshButtons(editor) {
-
-    // Webkit requires focus before queryCommandEnabled will return anything but false
-    if (!iOS && webkit && !editor.focused) {
-      editor.$frame[0].contentWindow.focus();
-      window.focus();
-      editor.focused = true;
-    }
-
-    // Get the object used for checking queryCommandEnabled
-    var queryObj = editor.doc;
-    if (ie) queryObj = getRange(editor);
-
-    // Loop through each button
-    var inSourceMode = sourceMode(editor);
-    $.each(editor.$toolbar.find("." + BUTTON_CLASS), function(idx, elem) {
-
-      var $elem = $(elem),
-        button = $.cleditor.buttons[$.data(elem, BUTTON_NAME)],
-        command = button.command,
-        enabled = true;
-
-      // Determine the state
-      if (editor.disabled)
-        enabled = false;
-      else if (button.getEnabled) {
-        var data = {
-          editor: editor,
-          button: elem,
-          buttonName: button.name,
-          popup: popups[button.popupName],
-          popupName: button.popupName,
-          command: button.command,
-          useCSS: editor.options.useCSS
-        };
-        enabled = button.getEnabled(data);
-        if (enabled === undefined)
-          enabled = true;
-      }
-      else if (((inSourceMode || iOS) && button.name !== "source") ||
-      (ie && (command === "undo" || command === "redo")))
-        enabled = false;
-      else if (command && command !== "print") {
-        if (ie && command === "hilitecolor")
-          command = "backcolor";
-        // IE does not support inserthtml, so it's always enabled
-        if (!ie || command !== "inserthtml") {
-          try {enabled = queryObj.queryCommandEnabled(command);}
-          catch (err) {enabled = false;}
-        }
-      }
-
-      // Enable or disable the button
-      if (enabled) {
-        $elem.removeClass(DISABLED_CLASS);
-        $elem.removeAttr(DISABLED);
-      }
-      else {
-        $elem.addClass(DISABLED_CLASS);
-        $elem.attr(DISABLED, DISABLED);
-      }
-
-    });
-  }
-
-  // restoreRange - restores the current ie selection
-  function restoreRange(editor) {
-    if (editor.range) {
-      if (ie)
-        editor.range[0].select();
-      else if (iege11)
-        getSelection(editor).addRange(editor.range[0]);
-    }
-  }
-
-  // select - selects all the text in either the textarea or iframe
-  function select(editor) {
-    setTimeout(function() {
-      if (sourceMode(editor)) editor.$area.select();
-      else execCommand(editor, "selectall");
-    }, 0);
-  }
-
-  // selectedHTML - returns the current HTML selection or and empty string
-  function selectedHTML(editor) {
-    restoreRange(editor);
-    var range = getRange(editor);
-    if (ie)
-      return range.htmlText;
-    var layer = $("<layer>")[0];
-    layer.appendChild(range.cloneContents());
-    var html = layer.innerHTML;
-    layer = null;
-    return html;
-  }
-
-  // selectedText - returns the current text selection or and empty string
-  function selectedText(editor) {
-    restoreRange(editor);
-    if (ie) return getRange(editor).text;
-    return getSelection(editor).toString();
-  }
-
-  // showMessage - alert replacement
-  function showMessage(editor, message, button) {
-    var popup = createPopup("msg", editor.options, MSG_CLASS);
-    popup.innerHTML = message;
-    showPopup(editor, popup, button);
-  }
-
-  // showPopup - shows a popup
-  function showPopup(editor, popup, button) {
-
-    var offset, left, top, $popup = $(popup);
-
-    // Determine the popup location
-    if (button) {
-      var $button = $(button);
-      offset = $button.offset();
-      left = --offset.left;
-      top = offset.top + $button.height();
-    }
-    else {
-      var $toolbar = editor.$toolbar;
-      offset = $toolbar.offset();
-      left = Math.floor(($toolbar.width() - $popup.width()) / 2) + offset.left;
-      top = offset.top + $toolbar.height() - 2;
-    }
-
-    // Position and show the popup
-    hidePopups();
-    $popup.css({left: left, top: top})
-      .show();
-
-    // Assign the popup button and click event handler
-    if (button) {
-      $.data(popup, BUTTON, button);
-      $popup.bind(CLICK, {popup: popup}, $.proxy(popupClick, editor));
-    }
-
-    // Focus the first input element if any
-    setTimeout(function() {
-      $popup.find(":text,textarea").eq(0).focus().select();
-    }, 100);
-
-  }
-
-  // sourceMode - returns true if the textarea is showing
-  function sourceMode(editor) {
-    return editor.$area.is(":visible");
-  }
-
-  // updateFrame - updates the iframe with the textarea contents
-  function updateFrame(editor, checkForChange) {
-    
-    var code = editor.$area.val(),
-      options = editor.options,
-      updateFrameCallback = options.updateFrame,
-      $body = $(editor.doc.body);
-
-    // Check for textarea change to avoid unnecessary firing
-    // of potentially heavy updateFrame callbacks.
-    if (updateFrameCallback) {
-      var sum = checksum(code);
-      if (checkForChange && editor.areaChecksum === sum)
-        return;
-      editor.areaChecksum = sum;
-    }
-
-    // Convert the textarea source code into iframe html
-    var html = updateFrameCallback ? updateFrameCallback(code) : code;
-
-    // Prevent script injection attacks by html encoding script tags
-    html = html.replace(/<(?=\/?script)/ig, "&lt;");
-
-    // Update the iframe checksum
-    if (options.updateTextArea)
-      editor.frameChecksum = checksum(html);
-
-    // Update the iframe and trigger the change event
-    if (html !== $body.html()) {
-      $body.html(html);
-      $(editor).triggerHandler(CHANGE);
-    }
-
-  }
-
-  // updateTextArea - updates the textarea with the iframe contents
-  function updateTextArea(editor, checkForChange) {
-
-    var html = $(editor.doc.body).html(),
-      options = editor.options,
-      updateTextAreaCallback = options.updateTextArea,
-      $area = editor.$area;
-
-    // Check for iframe change to avoid unnecessary firing
-    // of potentially heavy updateTextArea callbacks.
-    if (updateTextAreaCallback) {
-      var sum = checksum(html);
-      if (checkForChange && editor.frameChecksum === sum)
-        return;
-      editor.frameChecksum = sum;
-    }
-
-    // Convert the iframe html into textarea source code
-    var code = updateTextAreaCallback ? updateTextAreaCallback(html) : html;
-
-    // Update the textarea checksum
-    if (options.updateFrame)
-      editor.areaChecksum = checksum(code);
-
-    // Update the textarea and trigger the change event
-    if (code !== $area.val()) {
-      $area.val(code);
-      $(editor).triggerHandler(CHANGE);
-    }
-
-  }
-
-})(jQuery);
diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 2fce98dd145..37e68889f01 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset "utf-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
diff --git a/addons/web/static/src/js/compatibility.js b/addons/web/static/src/js/compatibility.js
index cc80915735a..09a01241f33 100644
--- a/addons/web/static/src/js/compatibility.js
+++ b/addons/web/static/src/js/compatibility.js
@@ -23,7 +23,7 @@ var form_widgets = require('web.form_widgets'); // necessary
 var framework = require('web.framework');
 var ListView = require('web.ListView');
 var Menu = require('web.Menu');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var Registry = require('web.Registry');
 var SearchView = require('web.SearchView');
diff --git a/addons/web/static/src/js/framework/ajax.js b/addons/web/static/src/js/framework/ajax.js
index dd1eee906c1..ce61f225524 100644
--- a/addons/web/static/src/js/framework/ajax.js
+++ b/addons/web/static/src/js/framework/ajax.js
@@ -275,11 +275,45 @@ function get_file(options) {
 };
 
 
+var loadXML = (function () {
+    var loading = false;
+    var urls = [];
+    var qwebs = [];
+    var templates_def = $.Deferred();
+
+    var load = function loadXML(url, qweb) {
+        if (url) {
+            urls.push(url);
+            qwebs.push(qweb);
+        }
+
+        if (!loading && urls.length) {
+            if (templates_def.state() === "resolved") {
+                templates_def = $.Deferred();
+            }
+
+            loading = true;
+            qwebs.shift().add_template(urls.shift(), function () {
+                loading = false;
+                if (!urls.length) {
+                    templates_def.resolve();
+                }
+                load(null);
+            });
+        }
+
+        return templates_def;
+    };
+
+    return load;
+})();
+
 return {
     jsonRpc: jsonRpc,
     jsonpRpc: jsonpRpc,
     loadCSS: loadCSS,
     loadJS: loadJS,
+    loadXML: loadXML,
     get_file: get_file,
 };
 
diff --git a/addons/web/static/src/js/framework/data_model.js b/addons/web/static/src/js/framework/data_model.js
new file mode 100644
index 00000000000..f722339167f
--- /dev/null
+++ b/addons/web/static/src/js/framework/data_model.js
@@ -0,0 +1,80 @@
+odoo.define('web.DataModel', function (require) {
+"use strict";
+
+var data = require('web.data');
+var Model = require('web.Model');
+var pyeval = require('web.pyeval');
+var session = require('web.session');
+
+Model.include({
+    /**
+     * Fetches a Query instance bound to this model, for searching
+     *
+     * @param {Array<String>} [fields] fields to ultimately fetch during the search
+     * @returns {instance.web.Query}
+     */
+    query: function (fields) {
+        return new data.Query(this, fields);
+    },
+    /**
+     * Fetches the model's domain, combined with the provided domain if any
+     *
+     * @param {Array} [domain] to combine with the model's internal domain
+     * @returns {instance.web.CompoundDomain} The model's internal domain, or the AND-ed union of the model's internal domain and the provided domain
+     */
+    domain: function (domain) {
+        if (!domain) { return this._domain; }
+        return new data.CompoundDomain(this._domain, domain);
+    },
+    /**
+     * Fetches the combination of the user's context and the domain context,
+     * combined with the provided context if any
+     *
+     * @param {Object} [context] to combine with the model's internal context
+     * @returns {instance.web.CompoundContext} The union of the user's context and the model's internal context, as well as the provided context if any. In that order.
+     */
+    context: function (context) {
+        return new data.CompoundContext(session.user_context, this._context, context || {});
+    },
+    /**
+     * Call a method (over RPC) on the bound OpenERP model.
+     *
+     * @param {String} method name of the method to call
+     * @param {Array} [args] positional arguments
+     * @param {Object} [kwargs] keyword arguments
+     * @param {Object} [options] additional options for the rpc() method
+     * @returns {jQuery.Deferred<>} call result
+     */
+    call: function (method, args, kwargs, options) {
+        args = args || [];
+        kwargs = kwargs || {};
+        if (!_.isArray(args)) {
+            // call(method, kwargs)
+            kwargs = args;
+            args = [];
+        }
+        pyeval.ensure_evaluated(args, kwargs);
+        var call_kw = '/web/dataset/call_kw/' + this.name + '/' + method;
+        return session.rpc(call_kw, {
+            model: this.name,
+            method: method,
+            args: args,
+            kwargs: kwargs
+        }, options);
+    },
+    call_button: function (method, args) {
+        pyeval.ensure_evaluated(args, {});
+        return session.rpc('/web/dataset/call_button', {
+            model: this.name,
+            method: method,
+            // Should not be necessary anymore. Integrate remote in this?
+            domain_id: null,
+            context_id: args.length - 1,
+            args: args || []
+        });
+    },
+
+});
+
+return Model;
+});
diff --git a/addons/web/static/src/js/framework/model.js b/addons/web/static/src/js/framework/model.js
index ca4c29452a3..2621ca490d4 100644
--- a/addons/web/static/src/js/framework/model.js
+++ b/addons/web/static/src/js/framework/model.js
@@ -109,83 +109,3 @@ var Model = Class.extend({
 
 return Model;
 });
-
-odoo.define('web.DataModel', function (require) {
-"use strict";
-
-var data = require('web.data');
-var Model = require('web.Model');
-var pyeval = require('web.pyeval');
-var session = require('web.session');
-
-Model.include({
-    /**
-     * Fetches a Query instance bound to this model, for searching
-     *
-     * @param {Array<String>} [fields] fields to ultimately fetch during the search
-     * @returns {instance.web.Query}
-     */
-    query: function (fields) {
-        return new data.Query(this, fields);
-    },
-    /**
-     * Fetches the model's domain, combined with the provided domain if any
-     *
-     * @param {Array} [domain] to combine with the model's internal domain
-     * @returns {instance.web.CompoundDomain} The model's internal domain, or the AND-ed union of the model's internal domain and the provided domain
-     */
-    domain: function (domain) {
-        if (!domain) { return this._domain; }
-        return new data.CompoundDomain(this._domain, domain);
-    },
-    /**
-     * Fetches the combination of the user's context and the domain context,
-     * combined with the provided context if any
-     *
-     * @param {Object} [context] to combine with the model's internal context
-     * @returns {instance.web.CompoundContext} The union of the user's context and the model's internal context, as well as the provided context if any. In that order.
-     */
-    context: function (context) {
-        return new data.CompoundContext(session.user_context, this._context, context || {});
-    },
-    /**
-     * Call a method (over RPC) on the bound OpenERP model.
-     *
-     * @param {String} method name of the method to call
-     * @param {Array} [args] positional arguments
-     * @param {Object} [kwargs] keyword arguments
-     * @param {Object} [options] additional options for the rpc() method
-     * @returns {jQuery.Deferred<>} call result
-     */
-    call: function (method, args, kwargs, options) {
-        args = args || [];
-        kwargs = kwargs || {};
-        if (!_.isArray(args)) {
-            // call(method, kwargs)
-            kwargs = args;
-            args = [];
-        }
-        pyeval.ensure_evaluated(args, kwargs);
-        var call_kw = '/web/dataset/call_kw/' + this.name + '/' + method;
-        return session.rpc(call_kw, {
-            model: this.name,
-            method: method,
-            args: args,
-            kwargs: kwargs
-        }, options);
-    },
-    call_button: function (method, args) {
-        pyeval.ensure_evaluated(args, {});
-        return session.rpc('/web/dataset/call_button', {
-            model: this.name,
-            method: method,
-            // Should not be necessary anymore. Integrate remote in this?
-            domain_id: null,
-            context_id: args.length - 1,
-            args: args || []
-        });
-    },
-
-});
-
-});
diff --git a/addons/web/static/src/js/framework/widget.js b/addons/web/static/src/js/framework/widget.js
index f606e8482ca..199568b727f 100644
--- a/addons/web/static/src/js/framework/widget.js
+++ b/addons/web/static/src/js/framework/widget.js
@@ -163,6 +163,18 @@ var Widget = core.Class.extend(mixins.PropertiesMixin, {
             self.$el.insertBefore(t);
         }, target);
     },
+    /**
+     * Attach the current widget to a dom element
+     *
+     * @param target A jQuery object or a Widget instance.
+     */
+    attachTo: function(target) {
+        var self = this;
+        this.setElement(target.$el || target);
+        return this.willStart().then(function() {
+            return self.start();
+        });
+    },
     /**
      * Renders the current widget and replaces the given jQuery object.
      *
diff --git a/addons/web/static/src/js/tour.js b/addons/web/static/src/js/tour.js
index 234b681f7d2..dd74ca42e9e 100644
--- a/addons/web/static/src/js/tour.js
+++ b/addons/web/static/src/js/tour.js
@@ -6,25 +6,6 @@ var core = require('web.core');
 var _t = core._t;
 var qweb = core.qweb;
 
-// make this work
-// raise an error in test mode if openerp don't exist
-// if (typeof openerp === "undefined") {
-//     var error = "openerp is undefined"
-//                 + "\nhref: " + window.location.href
-//                 + "\nreferrer: " + document.referrer
-//                 + "\nlocalStorage: " + window.localStorage.getItem("tour");
-//     if (typeof $ !== "undefined") {
-//         error += '\n\n' + $("body").html();
-//     }
-//     throw new Error(error);
-// }
-
-
-// // don't rewrite T in test mode
-// if (typeof openerp.Tour !== "undefined") {
-//     return;
-// }
-
 /////////////////////////////////////////////////
 
 
@@ -60,14 +41,65 @@ $.extend($.expr[':'],{
         return $(element).prop("value") && $(element).prop("value").indexOf(matches[3]) !== -1;
     },
 });
-$.ajaxSetup({
-    beforeSend:function(){
-        $.ajaxBusy = ($.ajaxBusy|0) + 1;
-    },
-    complete:function(){
-        $.ajaxBusy--;
-    }
-});
+
+$.fn.getHandlers = function () {
+    var results = [];
+
+    var $elementsToWatch = $(this).add($(this).parents());
+    var $allElements = $("*").add(document);
+
+    var addEventHandlerInfo = function (element, event, $elementsCovered) {
+        var extendedEvent = event;
+        if ($elementsCovered !== void 0 && $elementsCovered !== null) {
+            $.extend(extendedEvent, { targets: $elementsCovered.toArray() });
+        }
+        var eventInfo;
+        var eventsInfo = $.grep(results, function (evInfo, index) {
+            return element === evInfo.element;
+        });
+
+        if (eventsInfo.length === 0) {
+            eventInfo = {
+                element: element
+            };
+            eventInfo[extendedEvent.type] = [extendedEvent];
+            results.push(eventInfo);
+        } else {
+            eventInfo = eventsInfo[0];
+            if (!eventInfo[extendedEvent.type]) {
+                eventInfo[extendedEvent.type] = [];
+            }
+            eventInfo[extendedEvent.type].push(extendedEvent);
+        }
+    };
+
+    var checkEventHandler = function (element, ElementEvents) {
+        $.each(ElementEvents, function(i, event){
+            var isDelegateEvent = event.selector !== void 0 && event.selector !== null;
+            var $elementsCovered;
+            if (isDelegateEvent) {
+                $elementsCovered = $(event.selector, element); //only look at children of the element, since those are the only ones the handler covers
+            } else {
+                $elementsCovered = $(element); //just itself
+            }
+
+            if (_.intersection($elementsCovered, $elementsToWatch).length) {
+                addEventHandlerInfo(element, event, $elementsCovered);
+            }
+        });
+    };
+
+    $.each($allElements, function (elementIndex, element) {
+        var allElementEvents = $._data(element, "events");
+        if (allElementEvents) {
+            _.each(allElementEvents, function (ElementEvents) {
+                checkEventHandler(element, ElementEvents);
+            });
+        }
+    });
+
+    return results;
+};
 
 /////////////////////////////////////////////////
 
@@ -78,7 +110,7 @@ var Tour = {
     defaultDelay: 50,
     autoRunning: true,
     retryRunningDelay: 1000,
-    errorDelay: 5000,
+    errorDelay: 10000,
     state: null,
     $element: null,
     timer: null,
@@ -88,7 +120,13 @@ var Tour = {
         if (tour.mode !== "test") tour.mode = "tutorial";
         Tour.tours[tour.id] = tour;
     },
-    run: function (tour_id, mode) {
+    /*
+     * tour_id: string
+     * mode:    test or tutorial
+     * log:     null (alone log who display the html content)
+     *          'events' (add log for event handlers)
+     */
+    run: function (tour_id, mode, log) {
         var tour = Tour.tours[tour_id];
         if (!tour) {
             return Tour.error(null, "Can't run '"+tour_id+"' (tour undefined)");
@@ -105,11 +143,11 @@ var Tour = {
         this.time = new Date().getTime();
         if (tour.path && !window.location.href.match(new RegExp("("+Tour.getLang()+")?"+tour.path+"#?$", "i"))) {
             var href = Tour.getLang()+tour.path;
-            Tour.saveState(tour.id, mode || tour.mode, -1, 0);
+            Tour.saveState(tour.id, mode || tour.mode, -1, 0, 0, log || null);
             $(document).one("ajaxStop", Tour.running);
             window.location.href = href;
         } else {
-            Tour.saveState(tour.id, mode || tour.mode, 0, 0);
+            Tour.saveState(tour.id, mode || tour.mode, 0, 0, 0, log || null);
             Tour.running();
         }
     },
@@ -134,14 +172,14 @@ var Tour = {
             if (snippet) {
                 step.snippet = snippet[1];
             } else if (step.snippet) {
-                step.element = '#oe_snippets '+step.snippet+' .oe_snippet_thumbnail';
+                step.element = '#o_left_bar '+step.snippet+' .oe_snippet_thumbnail';
                 tour.steps.splice(index, 0, {
                     id: index,
                     waitNot: step.waitNot,
                     waitFor: step.waitFor,
                     title: _t("Move your mouse"),
                     content: _t("Move your mouse here to open the insert block"),
-                    element: '#oe_snippets',
+                    element: '#o_left_bar',
                     onend: function () {
                         $("#oe_snippets").addClass("o_open");
                     }
@@ -262,7 +300,7 @@ var Tour = {
             $("body").append('<div class="tour-backdrop"></div>');
         }
 
-        if (step.backdrop || $element.parents("#website-top-navbar, .oe_navbar, .modal").size()) {
+        if (step.backdrop || $element.parents("#web_editor-top-edit, .oe_navbar, .modal").size()) {
             $tip.css("z-index", 2010);
         }
 
@@ -360,7 +398,7 @@ var Tour = {
             };
             window.location.hash = "";
             Tour.log("Tour '"+state.id+"' Begin from url hash");
-            Tour.saveState(state.id, state.mode, state.step_id, 0);
+            Tour.saveState(state.id, state.mode, state.step_id, 0, state.log);
         }
         if (!state.id) {
             return;
@@ -379,7 +417,6 @@ var Tour = {
     },
     logError: function (step, message, all) {
         var state = Tour.getState();
-        console.log(state.tour.steps.slice());
         message += '\ntour: ' + state.id
             + (step ? '\nstep: ' + step.id + ": '" + (step._title || step.title) + "'" : '' )
             + (all ? '\nhref: ' + window.location.href : '' )
@@ -391,7 +428,7 @@ var Tour = {
             + (step ? '\nwaitFor: ' + ((!step.waitFor || $(step.waitFor).size()) ? 'true ' : 'false') : '' )
                 + (step && step.waitFor ? "   "+JSON.stringify(step.waitFor) : "")
             + (all ? "\nlocalStorage: " + JSON.stringify(localStorage) : '' )
-            + (all ? '\n\n' + $("body").html() : '' );
+            + (all && !state.log ? '\n\n' + $("body").html() : '' );
         Tour.log(message, true);
     },
     error: function (step, message) {
@@ -406,14 +443,15 @@ var Tour = {
         }
         return tour_ids;
     },
-    saveState: function (tour_id, mode, step_id, number, wait) {
+    saveState: function (tour_id, mode, step_id, number, wait, log) {
         localStorage.setItem("tour", JSON.stringify({
             "id":tour_id,
             "mode":mode,
             "step_id":step_id || 0,
             "time": this.time,
             "number": number+1,
-            "wait": wait || 0
+            "wait": wait || 0,
+            "log": log
         }));
     },
     reset: function () {
@@ -444,7 +482,7 @@ var Tour = {
             if (state.mode === "test" && state.wait >= 10) {
                 return Tour.error(state.step, "Tour '"+state.id+"' undefined");
             }
-            Tour.saveState(state.id, state.mode, state.step_id, state.number-1, state.wait+1);
+            Tour.saveState(state.id, state.mode, state.step_id, state.number-1, state.wait+1, state.log);
             //Tour.log("Tour '"+state.id+"' wait for running (tour undefined)");
             setTimeout(Tour.running, Tour.retryRunningDelay);
         }
@@ -477,7 +515,7 @@ var Tour = {
 
                 clearTimeout(Tour.currentTimer);
                 // use an other timeout for cke dom loading
-                Tour.saveState(state.id, state.mode, state.step.id, 0);
+                Tour.saveState(state.id, state.mode, state.step.id, 0, 0, state.log);
                 setTimeout(function () {
                     if (state.step.onend) {
                         try {
@@ -537,7 +575,7 @@ var Tour = {
         if (!state) return true;
         if (id_or_title === undefined) return false;
         var step = Tour.search_step(id_or_title);
-        Tour.saveState(state.id, state.mode, step.id, 0);
+        Tour.saveState(state.id, state.mode, step.id, 0, 0, state.log);
         Tour.nextStep(Tour.getState().step);
         return true;
     },
@@ -555,7 +593,7 @@ var Tour = {
             return Tour.error(next, "Cycling. Can't reach the next step");
         }
         
-        Tour.saveState(state.id, state.mode, step.id, state.number);
+        Tour.saveState(state.id, state.mode, step.id, state.number, 0, state.log);
 
         if (state.number === 1) {
             Tour.log("Tour '"+state.id+"' Step: '" + (step._title || step.title) + "' (" + (new Date().getTime() - this.time) + "ms)");
@@ -576,7 +614,7 @@ var Tour = {
 
         if (state.mode === "test") {
             setTimeout(function () {
-                Tour.autoNextStep(state.tour, step);
+                Tour.autoNextStep(state.tour, step, state);
                 if (next && Tour.getState()) {
                     Tour.waitNextStep();
                 }
@@ -600,7 +638,7 @@ var Tour = {
             Tour.log('error');
         }
     },
-    autoNextStep: function (tour, step) {
+    autoNextStep: function (tour, step, state) {
         clearTimeout(Tour.testtimer);
 
         function autoStep () {
@@ -616,6 +654,7 @@ var Tour = {
 
             var $element = $(step.element);
             if (!$element.size()) return;
+            if (state.log === "events") console.log("Event handlers:", $element[0], $element.getHandlers());
 
             var click_event = function(type) {
                 var evt = document.createEvent("MouseEvents");
@@ -700,7 +739,7 @@ var Tour = {
     },
     scrollIntoView: function ($element){
         // if element is not on window (screen) then it scroll down to get popup visible
-        if (!$element.is('body')){
+        if (!$element.is('body') && !$element.parents().filter(function () { return $(this).css("position") === "fixed";}).length){
             var element_top = $element.offset().top;
             var visible = ((element_top > $(window).scrollTop()) && (element_top < ($(window).scrollTop() + $(window).height())));
             if (!visible) {
@@ -709,14 +748,15 @@ var Tour = {
         }
     }
 };
-// openerp.Tour = Tour;
 
 /////////////////////////////////////////////////
 
 $(document).ready(function () {
-    if (Tour.autoRunning) {
-        Tour.running();
-    };
+    setTimeout(function () {
+        if (Tour.autoRunning) {
+            Tour.running();
+        }
+    }, 0);
 });
 
 return Tour;
diff --git a/addons/web/static/src/js/view_manager.js b/addons/web/static/src/js/view_manager.js
index d1722fcce32..9321b010dd1 100644
--- a/addons/web/static/src/js/view_manager.js
+++ b/addons/web/static/src/js/view_manager.js
@@ -4,7 +4,7 @@ odoo.define('web.ViewManager', function (require) {
 var ControlPanelMixin = require('web.ControlPanelMixin');
 var core = require('web.core');
 var data = require('web.data');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var SearchView = require('web.SearchView');
 var Widget = require('web.Widget');
diff --git a/addons/web/static/src/js/views/form_common.js b/addons/web/static/src/js/views/form_common.js
index 19737746b4a..4d8a302882d 100644
--- a/addons/web/static/src/js/views/form_common.js
+++ b/addons/web/static/src/js/views/form_common.js
@@ -630,6 +630,12 @@ var FieldInterface = {
         the field to save its value before reading it using get_value(). Must return a promise.
     */
     commit_value: function() {},
+    /*
+        The form view call before_save before save data and if before_save return a deferred, 
+        the form view wait that all deferred are resolve or fail.
+        If the deferred is rejected, the field is invalidate
+    */
+    before_save: function() {},
 };
 
 /**
diff --git a/addons/web/static/src/js/views/form_relational_widgets.js b/addons/web/static/src/js/views/form_relational_widgets.js
index 4513b206f33..3d53dd00675 100644
--- a/addons/web/static/src/js/views/form_relational_widgets.js
+++ b/addons/web/static/src/js/views/form_relational_widgets.js
@@ -8,7 +8,7 @@ var Dialog = require('web.Dialog');
 var common = require('web.form_common');
 var FormView = require('web.FormView');
 var ListView = require('web.ListView');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var utils = require('web.utils');
 var ViewManager = require('web.ViewManager');
diff --git a/addons/web/static/src/js/views/form_view.js b/addons/web/static/src/js/views/form_view.js
index 488ddae9e61..3286f34eff4 100644
--- a/addons/web/static/src/js/views/form_view.js
+++ b/addons/web/static/src/js/views/form_view.js
@@ -6,7 +6,7 @@ var crash_manager = require('web.crash_manager');
 var data = require('web.data');
 var Dialog = require('web.Dialog');
 var common = require('web.form_common');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var Sidebar = require('web.Sidebar');
 var utils = require('web.utils');
 var View = require('web.View');
@@ -837,68 +837,92 @@ var FormView = View.extend(common.FieldManagerMixin, {
     _process_save: function(save_obj) {
         var self = this;
         var prepend_on_create = save_obj.prepend_on_create;
+        var def_process_save = $.Deferred();
         try {
             var form_invalid = false,
                 values = {},
                 first_invalid_field = null,
-                readonly_values = {};
-            for (var f in self.fields) {
-                if (!self.fields.hasOwnProperty(f)) { continue; }
-                f = self.fields[f];
-                if (!f.is_valid()) {
-                    form_invalid = true;
-                    if (!first_invalid_field) {
-                        first_invalid_field = f;
-                    }
-                } else if (f.name !== 'id' && (!self.datarecord.id || f._dirty_flag)) {
-                    // Special case 'id' field, do not save this field
-                    // on 'create' : save all non readonly fields
-                    // on 'edit' : save non readonly modified fields
-                    if (!f.get("readonly")) {
-                        values[f.name] = f.get_value(true);
-                    } else {
-                        readonly_values[f.name] = f.get_value(true);
-                    }
+                readonly_values = {},
+                deferred = [];
+
+            _.each(self.fields, function (f) {
+                var res = f.before_save();
+                if (res) {
+                    deferred.push(res);
+                    res.fail(function () {
+                        form_invalid = true;
+                        if (!first_invalid_field) {
+                            first_invalid_field = f;
+                        }
+                    });
                 }
-            }
-            // Heuristic to assign a proper sequence number for new records that
-            // are added in a dataset containing other lines with existing sequence numbers
-            if (!self.datarecord.id && self.fields.sequence &&
-                !_.has(values, 'sequence') && !_.isEmpty(self.dataset.cache)) {
-                // Find current max or min sequence (editable top/bottom)
-                var current = _[prepend_on_create ? "min" : "max"](
-                    _.map(self.dataset.cache, function(o){return o.values.sequence})
-                );
-                values['sequence'] = prepend_on_create ? current - 1 : current + 1;
-            }
-            if (form_invalid) {
-                self.set({'display_invalid_fields': true});
-                first_invalid_field.focus();
-                self.on_invalid();
-                return $.Deferred().reject();
-            } else {
-                self.set({'display_invalid_fields': false});
-                var save_deferral;
-                if (!self.datarecord.id) {
-                    // Creation save
-                    save_deferral = self.dataset.create(values, {readonly_fields: readonly_values}).then(function(r) {
-                        return self.record_created(r, prepend_on_create);
-                    }, null);
-                } else if (_.isEmpty(values)) {
-                    // Not dirty, noop save
-                    save_deferral = $.Deferred().resolve({}).promise();
+            });
+
+            $.when.apply($, deferred).always(function () {
+
+                _.each(self.fields, function (f) {
+                    if (!f.is_valid()) {
+                        form_invalid = true;
+                        if (!first_invalid_field) {
+                            first_invalid_field = f;
+                        }
+                    } else if (f.name !== 'id' && (!self.datarecord.id || f._dirty_flag)) {
+                        // Special case 'id' field, do not save this field
+                        // on 'create' : save all non readonly fields
+                        // on 'edit' : save non readonly modified fields
+                        if (!f.get("readonly")) {
+                            values[f.name] = f.get_value(true);
+                        } else {
+                            readonly_values[f.name] = f.get_value(true);
+                        }
+                    }
+
+                });
+
+                // Heuristic to assign a proper sequence number for new records that
+                // are added in a dataset containing other lines with existing sequence numbers
+                if (!self.datarecord.id && self.fields.sequence &&
+                    !_.has(values, 'sequence') && !_.isEmpty(self.dataset.cache)) {
+                    // Find current max or min sequence (editable top/bottom)
+                    var current = _[prepend_on_create ? "min" : "max"](
+                        _.map(self.dataset.cache, function(o){return o.values.sequence})
+                    );
+                    values['sequence'] = prepend_on_create ? current - 1 : current + 1;
+                }
+                if (form_invalid) {
+                    self.set({'display_invalid_fields': true});
+                    first_invalid_field.focus();
+                    self.on_invalid();
+                    def_process_save.reject();
                 } else {
-                    // Write save
-                    save_deferral = self.dataset.write(self.datarecord.id, values, {readonly_fields: readonly_values}).then(function(r) {
-                        return self.record_saved(r);
-                    }, null);
+                    self.set({'display_invalid_fields': false});
+                    var save_deferral;
+                    if (!self.datarecord.id) {
+                        // Creation save
+                        save_deferral = self.dataset.create(values, {readonly_fields: readonly_values}).then(function(r) {
+                            return self.record_created(r, prepend_on_create);
+                        }, null);
+                    } else if (_.isEmpty(values)) {
+                        // Not dirty, noop save
+                        save_deferral = $.Deferred().resolve({}).promise();
+                    } else {
+                        // Write save
+                        save_deferral = self.dataset.write(self.datarecord.id, values, {readonly_fields: readonly_values}).then(function(r) {
+                            return self.record_saved(r);
+                        }, null);
+                    }
+                    save_deferral.then(function(result) {
+                        def_process_save.resolve(result);
+                    }).fail(function() {
+                        def_process_save.reject();
+                    });
                 }
-                return save_deferral;
-            }
+            });
         } catch (e) {
             console.error(e);
-            return $.Deferred().reject();
+            return def_process_save.reject();
         }
+        return def_process_save;
     },
     on_invalid: function() {
         var warnings = _(this.fields).chain()
@@ -1266,7 +1290,7 @@ var FormRenderingEngine = FormRenderingEngineInterface.extend({
             }
             var obj = self.fields_registry.get_any([$elem.attr('widget'), self.fvg.fields[name].type]);
             if (!obj) {
-                throw new Error(_.str.sprintf(_t("Widget type '%s' is not implemented"), $elem.attr('widget')));
+                throw new Error(_.str.sprintf(_t("Widget type '%s' is not implemented"), $elem.attr('widget') || self.fvg.fields[name].type ));
             }
             var w = new (obj)(self.view, utils.xml_to_json($elem[0]));
             var $label = self.labels[$elem.attr("name")];
diff --git a/addons/web/static/src/js/views/form_widgets.js b/addons/web/static/src/js/views/form_widgets.js
index 558a47d4e98..274d59b0ee3 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -10,7 +10,7 @@ var Dialog = require('web.Dialog');
 var common = require('web.form_common');
 var formats = require('web.formats');
 var framework = require('web.framework');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var session = require('web.session');
 var utils = require('web.utils');
@@ -612,61 +612,6 @@ var FieldText = common.AbstractField.extend(common.ReinitializeFieldMixin, {
     },
 });
 
-/**
- * FieldTextHtml Widget
- * Intended for FieldText widgets meant to display HTML content. This
- * widget will instantiate the CLEditor (see cleditor in static/src/lib)
- * To find more information about CLEditor configutation: go to
- * http://premiumsoftware.net/cleditor/docs/GettingStarted.html
- */
-var FieldTextHtml = common.AbstractField.extend(common.ReinitializeFieldMixin, {
-    template: 'FieldTextHtml',
-    init: function() {
-        this._super.apply(this, arguments);
-    },
-    initialize_content: function() {
-        var self = this;
-        if (! this.get("effective_readonly")) {
-            self._updating_editor = false;
-            this.$textarea = this.$el.find('textarea');
-            var width = ((this.node.attrs || {}).editor_width || 'calc(100% - 4px)');
-            var height = ((this.node.attrs || {}).editor_height || 250);
-            this.$textarea.cleditor({
-                width:      width, // width not including margins, borders or padding
-                height:     height, // height not including margins, borders or padding
-                controls:   // controls to add to the toolbar
-                            "bold italic underline strikethrough " +
-                            "| removeformat | bullets numbering | outdent " +
-                            "indent | link unlink | source",
-                bodyStyle:  // style to assign to document body contained within the editor
-                            "margin:4px; color:#4c4c4c; font-size:13px; font-family:'Lucida Grande',Helvetica,Verdana,Arial,sans-serif; cursor:text"
-            });
-            this.$cleditor = this.$textarea.cleditor()[0];
-            this.$cleditor.change(function() {
-                if (! self._updating_editor) {
-                    self.$cleditor.updateTextArea();
-                    self.internal_set_value(self.$textarea.val());
-                }
-            });
-            if (this.field.translate) {
-                var $img = $('<img class="oe_field_translate oe_input_icon" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>')
-                    .click(this.on_translate);
-                this.$cleditor.$toolbar.append($img);
-            }
-        }
-    },
-    render_value: function() {
-        if (! this.get("effective_readonly")) {
-            this.$textarea.val(this.get('value') || '');
-            this._updating_editor = true;
-            this.$cleditor.updateFrame();
-            this._updating_editor = false;
-        } else {
-            this.$el.html(this.get('value'));
-        }
-    },
-});
-
 var FieldBoolean = common.AbstractField.extend({
     template: 'FieldBoolean',
     start: function() {
@@ -1658,7 +1603,6 @@ core.form_widget_registry
     .add('email', FieldEmail)
     .add('url', FieldUrl)
     .add('text',FieldText)
-    .add('html', FieldTextHtml)
     .add('char_domain', FieldCharDomain)
     .add('date', FieldDate)
     .add('datetime', FieldDatetime)
diff --git a/addons/web/static/src/js/views/graph_view.js b/addons/web/static/src/js/views/graph_view.js
index 3d3e2e649d6..7f6f38ab05b 100644
--- a/addons/web/static/src/js/views/graph_view.js
+++ b/addons/web/static/src/js/views/graph_view.js
@@ -6,7 +6,7 @@ odoo.define('web.GraphView', function (require) {
 
 var core = require('web.core');
 var GraphWidget = require('web.GraphWidget');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var View = require('web.View');
 
 var _lt = core._lt;
diff --git a/addons/web/static/src/js/views/graph_widget.js b/addons/web/static/src/js/views/graph_widget.js
index 3f8a7566d97..e0f425ca4e9 100644
--- a/addons/web/static/src/js/views/graph_widget.js
+++ b/addons/web/static/src/js/views/graph_widget.js
@@ -2,7 +2,7 @@ odoo.define('web.GraphWidget', function (require) {
 "use strict";
 
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var Widget = require('web.Widget');
 
 var _t = core._t;
diff --git a/addons/web/static/src/js/views/list_view.js b/addons/web/static/src/js/views/list_view.js
index c5af8488cec..8b25776c9dd 100644
--- a/addons/web/static/src/js/views/list_view.js
+++ b/addons/web/static/src/js/views/list_view.js
@@ -7,7 +7,7 @@ var data = require('web.data');
 var DataExport = require('web.DataExport');
 var formats = require('web.formats');
 var common = require('web.list_common');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var session = require('web.session');
 var Sidebar = require('web.Sidebar');
diff --git a/addons/web/static/src/js/views/pivot_view.js b/addons/web/static/src/js/views/pivot_view.js
index 22b74ecbf15..40b3f59dcb8 100644
--- a/addons/web/static/src/js/views/pivot_view.js
+++ b/addons/web/static/src/js/views/pivot_view.js
@@ -8,7 +8,7 @@ var core = require('web.core');
 var crash_manager = require('web.crash_manager');
 var formats = require('web.formats');
 var framework = require('web.framework');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var Sidebar = require('web.Sidebar');
 var utils = require('web.utils');
diff --git a/addons/web/static/src/js/views/search_inputs.js b/addons/web/static/src/js/views/search_inputs.js
index 4127b020970..ce05c99eca2 100644
--- a/addons/web/static/src/js/views/search_inputs.js
+++ b/addons/web/static/src/js/views/search_inputs.js
@@ -4,7 +4,7 @@ odoo.define('web.search_inputs', function (require) {
 var core = require('web.core');
 var data = require('web.data');
 var formats = require('web.formats');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var time = require('web.time');
 var utils = require('web.utils');
diff --git a/addons/web/static/src/js/views/search_menus.js b/addons/web/static/src/js/views/search_menus.js
index 48a8cf65fe7..a2f6c8970ef 100644
--- a/addons/web/static/src/js/views/search_menus.js
+++ b/addons/web/static/src/js/views/search_menus.js
@@ -2,7 +2,7 @@ odoo.define('web.FavoriteMenu', function (require) {
 "use strict";
 
 var core = require('web.core');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var session = require('web.session');
 var Widget = require('web.Widget');
diff --git a/addons/web/static/src/js/views/search_view.js b/addons/web/static/src/js/views/search_view.js
index 3511bbca01c..1a44c6af953 100644
--- a/addons/web/static/src/js/views/search_view.js
+++ b/addons/web/static/src/js/views/search_view.js
@@ -6,7 +6,7 @@ var core = require('web.core');
 var FavoriteMenu = require('web.FavoriteMenu');
 var FilterMenu = require('web.FilterMenu');
 var GroupByMenu = require('web.GroupByMenu');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var pyeval = require('web.pyeval');
 var search_inputs = require('web.search_inputs');
 var utils = require('web.utils');
diff --git a/addons/web/static/src/js/web_client.js b/addons/web/static/src/js/web_client.js
index 496f83c7d3a..d3b27ae48dc 100644
--- a/addons/web/static/src/js/web_client.js
+++ b/addons/web/static/src/js/web_client.js
@@ -8,7 +8,7 @@ var data = require('web.data');
 var framework = require('web.framework');
 var Loading = require('web.Loading');
 var Menu = require('web.Menu');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var Notification = require('web.Notification');
 var session = require('web.session');
 var SystrayMenu = require('web.SystrayMenu');
diff --git a/addons/web/static/src/js/widgets/user_menu.js b/addons/web/static/src/js/widgets/user_menu.js
index ef2927d668f..94a47cfa4b0 100644
--- a/addons/web/static/src/js/widgets/user_menu.js
+++ b/addons/web/static/src/js/widgets/user_menu.js
@@ -4,7 +4,7 @@ odoo.define('web.UserMenu', function (require) {
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var framework = require('web.framework');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var Widget = require('web.Widget');
 
diff --git a/addons/web/static/test/data.js b/addons/web/static/test/data.js
index 413ccdaf353..968a787a65c 100644
--- a/addons/web/static/test/data.js
+++ b/addons/web/static/test/data.js
@@ -27,7 +27,7 @@ odoo.define_section('web.dataset', ['web.data'], function (test, mock) {
     });
 });
 
-odoo.define_section('data.model.group_by', ['web.Model'], function (test, mock) {
+odoo.define_section('data.model.group_by', ['web.DataModel'], function (test, mock) {
 
     var group_result = [
         { bar: 3, bar_count: 5, __context: {}, __domain: [['bar', '=', 3]], },
diff --git a/addons/web/static/test/evals.js b/addons/web/static/test/evals.js
index 27763ebd9a8..15cdf221a6a 100644
--- a/addons/web/static/test/evals.js
+++ b/addons/web/static/test/evals.js
@@ -385,7 +385,7 @@ odoo.define_section('eval.edc', ['web.pyeval', 'web.session'], function (test, m
             });
     });
 
-    test('empty, context altered', ['web.Model'], function (assert, pyeval, session, Model) {
+    test('empty, context altered', ['web.DataModel'], function (assert, pyeval, session, Model) {
         assert.expect(3);
         var lang = new Model('res.lang');
         var users = new Model('res.users');
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index df140e8ad1d..ec8ddd0bc92 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -10,6 +10,8 @@
 
             <!-- jQuery stuff -->
             <script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
+            <link rel="stylesheet" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
+            <script type="text/javascript" src="/web/static/lib/jquery.ui/jquery-ui.js"></script>
             <script type="text/javascript" src="/web/static/lib/jquery/jquery.browser.js"></script>
             <script type="text/javascript" src="/web/static/lib/jquery.blockUI/jquery.blockUI.js"></script>
             <script type="text/javascript" src="/web/static/lib/jquery.hotkeys/jquery.hotkeys.js"></script>
@@ -49,31 +51,7 @@
             <script type="text/javascript" src="/web/static/lib/select2/select2.js"></script>
         </template>
 
-        <template id="jqueryui_conflict" name="jquery.ui.conflict">
-            <!-- TODO: get rid of this hack once jQuery.ui is removed -->
-            <script type="text/javascript" charset="utf-8">
-                $.fn.bstooltip = $.fn.tooltip;
-                $.fn.bsbutton = $.fn.button;
-            </script>
-            <t t-raw="0"/>
-            <script type="text/javascript" charset="utf-8">
-                $.fn.tooltip = $.fn.bstooltip;
-                $.fn.button = $.fn.bsbutton;
-            </script>
-        </template>
-
-        <template id="web.assets_backend">
-            <!-- jQuery addons -->
-            <script type="text/javascript" src="/web/static/lib/jquery.validate/jquery.validate.js"></script>
-            <script type="text/javascript" src="/web/static/lib/autosize/autosize.js"></script>
-            <script type="text/javascript" src="/web/static/lib/jquery.scrollTo/jquery.scrollTo.js"></script>
-
-            <link rel="stylesheet" href="/web/static/lib/cleditor/jquery.cleditor.css"/>
-            <script type="text/javascript" src="/web/static/lib/cleditor/jquery.cleditor.js"></script>
-
-            <link rel="stylesheet" href="/web/static/lib/jquery.textext/jquery.textext.css"/>
-            <script type="text/javascript" src="/web/static/lib/jquery.textext/jquery.textext.js"></script>
-
+        <template id="web.bootstrap">
             <script src="/web/static/lib/bootstrap/js/affix.js"></script>
             <script src="/web/static/lib/bootstrap/js/alert.js"></script>
             <script src="/web/static/lib/bootstrap/js/button.js"></script>
@@ -86,13 +64,18 @@
             <script src="/web/static/lib/bootstrap/js/scrollspy.js"></script>
             <script src="/web/static/lib/bootstrap/js/tab.js"></script>
             <script src="/web/static/lib/bootstrap/js/transition.js"></script>
+        </template>
 
-            <!-- jQuery ui -->
-            <link rel="stylesheet" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
+        <template id="web.assets_backend">
+            <!-- jQuery addons -->
+            <script type="text/javascript" src="/web/static/lib/jquery.validate/jquery.validate.js"></script>
+            <script type="text/javascript" src="/web/static/lib/autosize/autosize.js"></script>
+            <script type="text/javascript" src="/web/static/lib/jquery.scrollTo/jquery.scrollTo.js"></script>
 
-            <t t-call="web.jqueryui_conflict">
-                <script type="text/javascript" src="/web/static/lib/jquery.ui/jquery-ui.js"></script>
-            </t>
+            <link rel="stylesheet" href="/web/static/lib/jquery.textext/jquery.textext.css"/>
+            <script type="text/javascript" src="/web/static/lib/jquery.textext/jquery.textext.js"></script>
+
+            <t t-call="web.bootstrap"/>
 
             <link rel="stylesheet" href="/web/static/lib/jquery.ui.notify/css/ui.notify.css"/>
             <script type="text/javascript" src="/web/static/lib/jquery.ui.notify/js/jquery.notify.js"></script>
@@ -123,6 +106,7 @@
             <!-- Special case: core.js declares $.browser needed by ba-bbq -->
             <script type="text/javascript" src="/web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js"></script>
 
+            <script type="text/javascript" src="/web/static/src/js/framework/data_model.js"></script>
             <script type="text/javascript" src="/web/static/src/js/framework/formats.js"></script>
             <script type="text/javascript" src="/web/static/src/js/framework/view.js"></script>
             <script type="text/javascript" src="/web/static/src/js/framework/pyeval.js"></script>
diff --git a/addons/web_calendar/static/src/js/web_calendar.js b/addons/web_calendar/static/src/js/web_calendar.js
index d2a57bab06a..b2909f23dc6 100644
--- a/addons/web_calendar/static/src/js/web_calendar.js
+++ b/addons/web_calendar/static/src/js/web_calendar.js
@@ -7,7 +7,7 @@ odoo.define('web_calendar.CalendarView', function (require) {
 var core = require('web.core');
 var data = require('web.data');
 var form_common = require('web.form_common');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var time = require('web.time');
 var View = require('web.View');
 var widgets = require('web_calendar.widgets');
diff --git a/addons/web_editor/__init__.py b/addons/web_editor/__init__.py
new file mode 100644
index 00000000000..03ab5da2fb6
--- /dev/null
+++ b/addons/web_editor/__init__.py
@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+import controllers
+import models
+import tests
diff --git a/addons/web_editor/__openerp__.py b/addons/web_editor/__openerp__.py
new file mode 100644
index 00000000000..66fdff08ce1
--- /dev/null
+++ b/addons/web_editor/__openerp__.py
@@ -0,0 +1,21 @@
+{
+    'name': 'Web Editor',
+    'category': 'Hidden',
+    'description': """
+Odoo Web Editor widget.
+==========================
+
+""",
+    'author': 'Odoo S.A.',
+    'depends': ['web'],
+    'data': [
+        'security/ir.model.access.csv',
+        'views/editor.xml',
+        'views/iframe.xml',
+        'views/snippets.xml',
+    ],
+    'qweb': [
+        'static/src/xml/*.xml',
+    ],
+    'auto_install': True
+}
diff --git a/addons/website_report/controllers/__init__.py b/addons/web_editor/controllers/__init__.py
similarity index 100%
rename from addons/website_report/controllers/__init__.py
rename to addons/web_editor/controllers/__init__.py
diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
new file mode 100644
index 00000000000..7d9b6206ae7
--- /dev/null
+++ b/addons/web_editor/controllers/main.py
@@ -0,0 +1,276 @@
+# -*- coding: utf-8 -*-
+from openerp.http import request, STATIC_CACHE
+from openerp.addons.web import http
+import json
+import io
+from PIL import Image, ImageFont, ImageDraw
+from openerp import tools
+import cStringIO
+import werkzeug.wrappers
+import time
+import logging
+logger = logging.getLogger(__name__)
+
+
+class Web_Editor(http.Controller):
+    #------------------------------------------------------
+    # Backend snippet
+    #------------------------------------------------------
+    @http.route('/web_editor/snippets', type='json', auth="user")
+    def snippets(self, **kwargs):
+        return request.registry["ir.ui.view"].render(request.cr, request.uid, 'web_editor.snippets', None, context=request.context)
+
+    #------------------------------------------------------
+    # Backend html field
+    #------------------------------------------------------
+    @http.route('/web_editor/field/html', type='http', auth="user")
+    def FieldTextHtml(self, model=None, res_id=None, field=None, callback=None, **kwargs):
+        cr, uid, context = request.cr, request.uid, request.context
+
+        kwargs.update(
+            model=model,
+            res_id=res_id,
+            field=field,
+            datarecord=json.loads(kwargs['datarecord']),
+            debug='debug' in kwargs)
+
+        for k in kwargs:
+            if isinstance(kwargs[k], basestring) and kwargs[k].isdigit():
+                kwargs[k] = int(kwargs[k])
+
+        trans = dict(
+            lang=kwargs.get('lang', context.get('lang')),
+            translatable=kwargs.get('translatable'),
+            edit_translations=kwargs.get('edit_translations'),
+            editable=kwargs.get('enable_editor'))
+
+        context.update(trans)
+        kwargs.update(trans)
+
+        record = None
+        if model and kwargs.get('res_id'):
+            record = request.registry[model].browse(cr, uid, kwargs.get('res_id'), context)
+
+        kwargs.update(content=record and getattr(record, field) or "")
+
+        return request.render(kwargs.get("template") or "web_editor.FieldTextHtml", kwargs, uid=request.uid)
+
+    #------------------------------------------------------
+    # Backend html field in inline mode
+    #------------------------------------------------------
+    @http.route('/web_editor/field/html/inline', type='http', auth="user")
+    def FieldTextHtmlInline(self, model=None, res_id=None, field=None, callback=None, **kwargs):
+        kwargs['inline_mode'] = True
+        kwargs['dont_load_assets'] = not kwargs.get('enable_editor') and not kwargs.get('edit_translations')
+        return self.FieldTextHtml(model, res_id, field, callback, **kwargs)
+
+    #------------------------------------------------------
+    # convert font into picture
+    #------------------------------------------------------
+    @http.route([
+        '/web_editor/font_to_img/<icon>',
+        '/web_editor/font_to_img/<icon>/<color>',
+        '/web_editor/font_to_img/<icon>/<color>/<int:size>',
+        '/web_editor/font_to_img/<icon>/<color>/<int:size>/<int:alpha>',
+        ], type='http', auth="none")
+    def export_icon_to_png(self, icon, color='#000', size=100, alpha=255, font='/web/static/lib/fontawesome/fonts/fontawesome-webfont.ttf'):
+        """ This method converts FontAwesom pictograms to Images and is Used only
+            for mass mailing becuase custom fonts are not supported in mail.
+            :param icon : character from FontAwesom cheatsheet
+            :param color : RGB code of the color
+            :param size : Pixels in integer
+            :param alpha : transparency of the image from 0 to 255
+            :param font : font path
+
+            :returns PNG image converted from given font
+        """
+        # Initialize font
+        addons_path = http.addons_manifest['web']['addons_path']
+        font_obj = ImageFont.truetype(addons_path + font, size)
+
+        # Determine the dimensions of the icon
+        image = Image.new("RGBA", (size, size), color=(0, 0, 0, 0))
+        draw = ImageDraw.Draw(image)
+
+        boxw, boxh = draw.textsize(icon, font=font_obj)
+        draw.text((0, 0), icon, font=font_obj)
+        left, top, right, bottom = image.getbbox()
+
+        # Create an alpha mask
+        imagemask = Image.new("L", (boxw, boxh), 0)
+        drawmask = ImageDraw.Draw(imagemask)
+        drawmask.text((-left, -top), icon, font=font_obj, fill=alpha)
+
+        # Create a solid color image and apply the mask
+        if color.startswith('rgba'):
+            color = color.replace('rgba', 'rgb')
+            color = ','.join(color.split(',')[:-1])+')'
+        iconimage = Image.new("RGBA", (boxw, boxh), color)
+        iconimage.putalpha(imagemask)
+
+        # Create output image
+        outimage = Image.new("RGBA", (boxw, size), (0, 0, 0, 0))
+        outimage.paste(iconimage, (left, top))
+
+        # output image
+        output = io.BytesIO()
+        outimage.save(output, format="PNG")
+        response = werkzeug.wrappers.Response()
+        response.mimetype = 'image/png'
+        response.data = output.getvalue()
+        response.headers['Cache-Control'] = 'public, max-age=604800'
+        response.headers['Access-Control-Allow-Origin'] = '*'
+        response.headers['Access-Control-Allow-Methods'] = 'GET, POST'
+        response.headers['Connection'] = 'close'
+        response.headers['Date'] = time.strftime("%a, %d-%b-%Y %T GMT", time.gmtime())
+        response.headers['Expires'] = time.strftime("%a, %d-%b-%Y %T GMT", time.gmtime(time.time()+604800*60))
+
+        return response
+
+    #------------------------------------------------------
+    # image route for browse record
+    #------------------------------------------------------
+    def placeholder(self, response):
+        return request.registry['ir.attachment']._image_placeholder(response)
+
+    @http.route([
+        '/web_editor/image',
+        '/web_editor/image/<xmlid>',
+        '/web_editor/image/<xmlid>/<int:max_width>x<int:max_height>',
+        '/web_editor/image/<xmlid>/<field>',
+        '/web_editor/image/<xmlid>/<field>/<int:max_width>x<int:max_height>',
+        '/web_editor/image/<model>/<id>/<field>',
+        '/web_editor/image/<model>/<id>/<field>/<int:max_width>x<int:max_height>'
+        ], type='http', auth="public")
+    def image(self, model=None, id=None, field=None, xmlid=None, max_width=None, max_height=None):
+        """ Fetches the requested field and ensures it does not go above
+        (max_width, max_height), resizing it if necessary.
+
+        If the record is not found or does not have the requested field,
+        returns a placeholder image via :meth:`~.placeholder`.
+
+        Sets and checks conditional response parameters:
+        * :mailheader:`ETag` is always set (and checked)
+        * :mailheader:`Last-Modified is set iif the record has a concurrency
+          field (``__last_update``)
+
+        The requested field is assumed to be base64-encoded image data in
+        all cases.
+
+        xmlid can be used to load the image. But the field image must by base64-encoded
+        """
+        if xmlid and "." in xmlid:
+            try:
+                record = request.env.ref(xmlid)
+                model, id = record._name, record.id
+            except:
+                raise werkzeug.exceptions.NotFound()
+            if model == 'ir.attachment' and not field:
+                if record.sudo().type == "url":
+                    field = "url"
+                else:
+                    field = "datas"
+
+        if not model or not id or not field:
+            raise werkzeug.exceptions.NotFound()
+
+        try:
+            idsha = str(id).split('_')
+            id = idsha[0]
+            response = werkzeug.wrappers.Response()
+            return request.registry['ir.attachment']._image(
+                request.cr, request.uid, model, id, field, response, max_width, max_height,
+                cache=STATIC_CACHE if len(idsha) > 1 else None)
+        except Exception:
+            logger.exception("Cannot render image field %r of record %s[%s] at size(%s,%s)",
+                             field, model, id, max_width, max_height)
+            response = werkzeug.wrappers.Response()
+            return self.placeholder(response)
+
+    #------------------------------------------------------
+    # add attachment (images or link)
+    #------------------------------------------------------
+    @http.route('/web_editor/attachment/add', type='http', auth='user', methods=['POST'])
+    def attach(self, func, upload=None, url=None, disable_optimization=None, **kwargs):
+        # the upload argument doesn't allow us to access the files if more than
+        # one file is uploaded, as upload references the first file
+        # therefore we have to recover the files from the request object
+        Attachments = request.registry['ir.attachment']  # registry for the attachment table
+
+        uploads = []
+        message = None
+        if not upload: # no image provided, storing the link and the image name
+            uploads.append({'website_url': url})
+            name = url.split("/").pop()                       # recover filename
+            attachment_id = Attachments.create(request.cr, request.uid, {
+                'name': name,
+                'type': 'url',
+                'url': url,
+                'res_model': 'ir.ui.view',
+            }, request.context)
+        else:                                                  # images provided
+            try:
+                attachment_ids = []
+                for c_file in request.httprequest.files.getlist('upload'):
+                    image_data = c_file.read()
+                    image = Image.open(cStringIO.StringIO(image_data))
+                    w, h = image.size
+                    if w*h > 42e6: # Nokia Lumia 1020 photo resolution
+                        raise ValueError(
+                            u"Image size excessive, uploaded images must be smaller "
+                            u"than 42 million pixel")
+
+                    if not disable_optimization and image.format in ('PNG', 'JPEG'):
+                        image_data = tools.image_save_for_web(image)
+
+                    attachment_id = Attachments.create(request.cr, request.uid, {
+                        'name': c_file.filename,
+                        'datas': image_data.encode('base64'),
+                        'datas_fname': c_file.filename,
+                        'res_model': 'ir.ui.view',
+                    }, request.context)
+                    attachment_ids.append(attachment_id)
+
+                uploads = Attachments.read(
+                    request.cr, request.uid, attachment_ids, ['website_url'],
+                    context=request.context)
+            except Exception, e:
+                logger.exception("Failed to upload image to attachment")
+                message = unicode(e)
+
+        return """<script type='text/javascript'>
+            window.parent['%s'](%s, %s);
+        </script>""" % (func, json.dumps(uploads), json.dumps(message))
+
+    #------------------------------------------------------
+    # remove attachment (images or link)
+    #------------------------------------------------------
+    @http.route('/web_editor/attachment/remove', type='json', auth='user')
+    def remove(self, ids, **kwargs):
+        """ Removes a web-based image attachment if it is used by no view (template)
+
+        Returns a dict mapping attachments which would not be removed (if any)
+        mapped to the views preventing their removal
+        """
+        cr, uid, context = request.cr, request.uid, request.context
+        Attachment = request.registry['ir.attachment']
+        Views = request.registry['ir.ui.view']
+
+        attachments_to_remove = []
+        # views blocking removal of the attachment
+        removal_blocked_by = {}
+
+        for attachment in Attachment.browse(cr, uid, ids, context=context):
+            # in-document URLs are html-escaped, a straight search will not
+            # find them
+            url = tools.html_escape(attachment.local_url)
+            ids = Views.search(cr, uid, ["|", ('arch_db', 'like', '"%s"' % url), ('arch_db', 'like', "'%s'" % url)], context=context)
+
+            if ids:
+                removal_blocked_by[attachment.id] = Views.read(
+                    cr, uid, ids, ['name'], context=context)
+            else:
+                attachments_to_remove.append(attachment.id)
+        if attachments_to_remove:
+            Attachment.unlink(cr, uid, attachments_to_remove, context=context)
+        return removal_blocked_by
diff --git a/addons/web_editor/models/__init__.py b/addons/web_editor/models/__init__.py
new file mode 100644
index 00000000000..e4dbfa5ad4f
--- /dev/null
+++ b/addons/web_editor/models/__init__.py
@@ -0,0 +1,8 @@
+# -*- coding: utf-8 -*-
+import ir_attachment
+import ir_qweb
+import ir_ui_view
+import ir_http
+import ir_translation
+
+import test_models
diff --git a/addons/web_editor/models/ir_attachment.py b/addons/web_editor/models/ir_attachment.py
new file mode 100644
index 00000000000..3068807b2ab
--- /dev/null
+++ b/addons/web_editor/models/ir_attachment.py
@@ -0,0 +1,149 @@
+# -*- coding: utf-8 -*-
+import openerp
+from openerp.osv import osv, fields
+
+import contextlib
+from sys import maxint
+from openerp.addons.web.http import request
+import datetime
+import hashlib
+import time
+import os
+
+from openerp.tools import html_escape as escape, ustr, image_resize_and_sharpen, image_save_for_web
+from PIL import Image
+import cStringIO
+
+import logging
+logger = logging.getLogger(__name__)
+
+
+class ir_attachment(osv.osv):
+
+    _inherit = "ir.attachment"
+
+    def _local_url_get(self, cr, uid, ids, name, arg, context=None):
+        result = {}
+        for attach in self.browse(cr, uid, ids, context=context):
+            if attach.url:
+                result[attach.id] = attach.url
+            else:
+                result[attach.id] = self.image_url(cr, uid, attach, 'datas')
+        return result
+
+    _columns = {
+        'local_url': fields.function(_local_url_get, string="Attachment URL", type='char'),
+    }
+
+    def _image_placeholder(self, response):
+        # file_open may return a StringIO. StringIO can be closed but are
+        # not context managers in Python 2 though that is fixed in 3
+        with contextlib.closing(openerp.tools.misc.file_open(
+                os.path.join('web', 'static', 'src', 'img', 'placeholder.png'),
+                mode='rb')) as f:
+            response.data = f.read()
+            return response.make_conditional(request.httprequest)
+
+    def _image(self, cr, uid, model, id_or_ids, field, response, max_width=maxint, max_height=maxint, cache=None, context=None):
+        """ Fetches the requested field and ensures it does not go above
+        (max_width, max_height), resizing it if necessary.
+
+        Resizing is bypassed if the object provides a $field_big, which will
+        be interpreted as a pre-resized version of the base field.
+
+        If the record is not found or does not have the requested field,
+        returns a placeholder image via :meth:`~._image_placeholder`.
+
+        Sets and checks conditional response parameters:
+        * :mailheader:`ETag` is always set (and checked)
+        * :mailheader:`Last-Modified is set iif the record has a concurrency
+          field (``__last_update``)
+
+        The requested field is assumed to be base64-encoded image data in
+        all cases.
+        """
+        Model = self.pool[model]
+        ids = isinstance(id_or_ids, (list, tuple)) and id_or_ids or [int(id_or_ids)]
+        ids = Model.search(cr, uid, [('id', 'in', ids)], context=context)
+
+        if not ids:
+            return self._image_placeholder(response)
+
+        concurrency = '__last_update'
+        [record] = Model.read(cr, openerp.SUPERUSER_ID, ids, [concurrency, field], context=context)
+
+        if concurrency in record:
+            server_format = openerp.tools.misc.DEFAULT_SERVER_DATETIME_FORMAT
+            try:
+                response.last_modified = datetime.datetime.strptime(
+                    record[concurrency], server_format + '.%f')
+            except ValueError:
+                # just in case we have a timestamp without microseconds
+                response.last_modified = datetime.datetime.strptime(
+                    record[concurrency], server_format)
+
+        # Field does not exist on model or field set to False
+        if not record.get(field):
+            # FIXME: maybe a field which does not exist should be a 404?
+            return self._image_placeholder(response)
+
+        response.set_etag(hashlib.sha1(record[field]).hexdigest())
+        response.make_conditional(request.httprequest)
+
+        if cache:
+            response.cache_control.max_age = cache
+            response.expires = int(time.time() + cache)
+
+        # conditional request match
+        if response.status_code == 304:
+            return response
+
+        if model == 'ir.attachment' and field == 'url' and field in record:
+            path = record[field].strip('/')
+
+            # Check that we serve a file from within the module
+            if os.path.normpath(path).startswith('..'):
+                return self._image_placeholder(response)
+
+            # Check that the file actually exists
+            path = path.split('/')
+            resource = openerp.modules.get_module_resource(*path)
+            if not resource:
+                return self._image_placeholder(response)
+
+            data = open(resource, 'rb').read()
+        else:
+            data = record[field].decode('base64')
+        image = Image.open(cStringIO.StringIO(data))
+        response.mimetype = Image.MIME[image.format]
+
+        filename = '%s_%s.%s' % (model.replace('.', '_'), ids[0], str(image.format).lower())
+        response.headers['Content-Disposition'] = 'inline; filename="%s"' % filename
+
+        if (not max_width) and (not max_height):
+            response.data = data
+            return response
+
+        w, h = image.size
+        max_w = int(max_width) if max_width else maxint
+        max_h = int(max_height) if max_height else maxint
+
+        if w < max_w and h < max_h:
+            response.data = data
+        else:
+            size = (max_w, max_h)
+            img = image_resize_and_sharpen(image, size, preserve_aspect_ratio=True)
+            image_save_for_web(img, response.stream, format=image.format)
+            # invalidate content-length computed by make_conditional as
+            # writing to response.stream does not do it (as of werkzeug 0.9.3)
+            del response.headers['Content-Length']
+
+        return response
+
+    def image_url(self, cr, uid, record, field, size=None, context=None):
+        """Returns a local url that points to the image field of a given browse record."""
+        model = record._name
+        sudo_record = record.sudo()
+        id = '%s_%s' % (record.id, hashlib.sha1(sudo_record.write_date or sudo_record.create_date or '').hexdigest()[0:7])
+        size = '' if size is None else '/%s' % size
+        return '/web_editor/image/%s/%s/%s%s' % (model, id, field, size)
diff --git a/addons/web_editor/models/ir_http.py b/addons/web_editor/models/ir_http.py
new file mode 100644
index 00000000000..c72fee55e83
--- /dev/null
+++ b/addons/web_editor/models/ir_http.py
@@ -0,0 +1,16 @@
+# -*- coding: utf-8 -*-
+from openerp.osv import orm
+from openerp.http import request
+
+
+class ir_http(orm.AbstractModel):
+    _inherit = 'ir.http'
+
+    def _dispatch(self):
+        if 'editable' in request.httprequest.args and 'editable' not in request.context:
+            request.context['editable'] = True
+        if 'edit_translations' in request.httprequest.args and 'edit_translations' not in request.context:
+            request.context['edit_translations'] = True
+        if request.context.get('lang') != "en_US" and 'translatable' not in request.context:
+            request.context['translatable'] = True
+        return super(ir_http, self)._dispatch()
diff --git a/addons/web_editor/models/ir_qweb.py b/addons/web_editor/models/ir_qweb.py
new file mode 100644
index 00000000000..9642a3c2881
--- /dev/null
+++ b/addons/web_editor/models/ir_qweb.py
@@ -0,0 +1,566 @@
+# -*- coding: utf-8 -*-
+"""
+Web_editor-context rendering needs to add some metadata to rendered and allow to edit fields,
+as well as render a few fields differently.
+
+Also, adds methods to convert values back to openerp models.
+"""
+
+import cStringIO
+import datetime
+import itertools
+import logging
+import os
+import urllib2
+import urlparse
+import re
+import simplejson
+
+import pytz
+from dateutil import parser
+from lxml import etree, html
+from PIL import Image as I
+import openerp.modules
+
+import openerp
+from openerp.osv import orm, fields
+from openerp.tools import ustr, DEFAULT_SERVER_DATE_FORMAT, DEFAULT_SERVER_DATETIME_FORMAT
+from openerp.tools import html_escape as escape
+from openerp.addons.base.ir import ir_qweb
+
+REMOTE_CONNECTION_TIMEOUT = 2.5
+
+logger = logging.getLogger(__name__)
+
+
+class QWeb(orm.AbstractModel):
+    """ QWeb object for rendering editor stuff
+    """
+    _name = 'ir.qweb'
+    _inherit = 'ir.qweb'
+
+    re_remove_spaces = re.compile('\s+')
+
+    def render_tag_snippet(self, element, template_attributes, generated_attributes, qwebcontext):
+        cr = qwebcontext['request'].cr
+        uid = qwebcontext['request'].uid
+        view_reg = self.pool['ir.ui.view']
+        page_xmlid = self.eval_format(template_attributes["snippet"], qwebcontext)
+        view = view_reg.browse(cr, uid, view_reg.search(cr, uid, [('key', '=', page_xmlid)]))
+        generated_attributes += " " + "".join([
+            'data-oe-name="%s"' % view.name,
+            'data-oe-type="snippet"',
+            'data-oe-thumbnail="%s"' % template_attributes.get('thumbnail', "oe-thumbnail")])
+
+        template_attributes['call'] = template_attributes['snippet']
+        return self.render_tag_call(element, template_attributes, generated_attributes, qwebcontext)
+
+    def get_converter_for(self, field_type):
+        return self.pool.get('ir.qweb.field.' + field_type, self.pool['ir.qweb.field'])
+
+
+#------------------------------------------------------
+# QWeb fields
+#------------------------------------------------------
+
+
+class Field(orm.AbstractModel):
+    _name = 'ir.qweb.field'
+    _inherit = 'ir.qweb.field'
+
+    def attributes(self, cr, uid, field_name, record, options,
+                   source_element, g_att, t_att, qweb_context, context=None):
+        if options is None:
+            options = {}
+        field = record._model._fields[field_name]
+        attrs = []
+
+        placeholder = options.get('placeholder') \
+                   or source_element.get('placeholder') \
+                   or getattr(field, 'placeholder', None)
+        if placeholder:
+            attrs.append(('placeholder', placeholder))
+
+        return itertools.chain(
+            super(Field, self).attributes(cr, uid, field_name, record, options,
+                                          source_element, g_att, t_att,
+                                          qweb_context, context=context),
+            attrs
+        )
+
+    def value_from_string(self, value):
+        return value
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        return self.value_from_string(element.text_content().strip())
+
+    def qweb_object(self):
+        return self.pool['ir.qweb']
+
+
+class Integer(orm.AbstractModel):
+    _name = 'ir.qweb.field.integer'
+    _inherit = ['ir.qweb.field']
+
+    value_from_string = int
+
+
+class Float(orm.AbstractModel):
+    _name = 'ir.qweb.field.float'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.float']
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        lang = self.user_lang(cr, uid, context=context)
+
+        value = element.text_content().strip()
+
+        return float(value.replace(lang.thousands_sep, '')
+                          .replace(lang.decimal_point, '.'))
+
+
+class ManyToOne(orm.AbstractModel):
+    _name = 'ir.qweb.field.many2one'
+    _inherit = ['ir.qweb.field.many2one']
+
+    def attributes(self, cr, uid, field_name, record, options,
+                   source_element, g_att, t_att, qweb_context,
+                   context=None):
+        attrs = super(ManyToOne, self).attributes(
+            cr, uid, field_name, record, options, source_element, g_att, t_att,
+            qweb_context, context=context)
+        many2one = getattr(record, field_name)
+        if many2one:
+            data = [('data-oe-many2one-id', many2one.id),
+                    ('data-oe-many2one-model', many2one._name)]
+            return itertools.chain(attrs, data)
+        else:
+            return attrs
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        Model = self.pool[element.get('data-oe-model')]
+        M2O = self.pool[field.comodel_name]
+        field_name = element.get('data-oe-field')
+        id = int(element.get('data-oe-id'))
+        many2one_id = int(element.get('data-oe-many2one-id'))
+
+        if many2one_id and M2O.exists(cr, uid, [many2one_id]):
+            # save the new id of the many2one
+            Model.write(cr, uid, [id], {
+                field_name: many2one_id
+            }, context=context)
+
+        # not necessary, but might as well be explicit about it
+        return None
+
+
+class Contact(orm.AbstractModel):
+    _name = 'ir.qweb.field.contact'
+    _inherit = ['ir.qweb.field.contact', 'ir.qweb.field.many2one']
+
+    def attributes(self, cr, uid, field_name, record, options,
+                   source_element, g_att, t_att, qweb_context,
+                   context=None):
+        attrs = super(Contact, self).attributes(
+            cr, uid, field_name, record, options, source_element, g_att, t_att,
+            qweb_context, context=context)
+        if getattr(record, field_name):
+            return itertools.chain(attrs, [('data-oe-contact-options', simplejson.dumps(options))])
+        else:
+            return attrs
+
+    # helper to call the rendering of contact field
+    def get_record_to_html(self, cr, uid, ids, options=None, context=None):
+        node = self.record_to_html(cr, uid, 'record', {
+            'record': self.pool['res.partner'].browse(cr, uid, ids[0], context=context)},
+            options=options, context=context)
+        return node and node.__html__()
+
+
+def parse_fuzzy(in_format, value):
+    day_first = in_format.find('%d') < in_format.find('%m')
+
+    if '%y' in in_format:
+        year_first = in_format.find('%y') < in_format.find('%d')
+    else:
+        year_first = in_format.find('%Y') < in_format.find('%d')
+
+    return parser.parse(value, dayfirst=day_first, yearfirst=year_first)
+
+
+class Date(orm.AbstractModel):
+    _name = 'ir.qweb.field.date'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.date']
+
+    def attributes(self, cr, uid, field_name, record, options,
+                   source_element, g_att, t_att, qweb_context,
+                   context=None):
+        attrs = super(Date, self).attributes(
+            cr, uid, field_name, record, options, source_element, g_att, t_att,
+            qweb_context, context=None)
+        return itertools.chain(attrs, [('data-oe-original', record[field_name])])
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        value = element.text_content().strip()
+        if not value:
+            return False
+
+        datetime.datetime.strptime(value, DEFAULT_SERVER_DATE_FORMAT)
+        return value
+
+
+class DateTime(orm.AbstractModel):
+    _name = 'ir.qweb.field.datetime'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.datetime']
+
+    def attributes(self, cr, uid, field_name, record, options,
+                   source_element, g_att, t_att, qweb_context,
+                   context=None):
+        value = record[field_name]
+        if isinstance(value, basestring):
+            value = datetime.datetime.strptime(
+                value, DEFAULT_SERVER_DATETIME_FORMAT)
+        if value:
+            # convert from UTC (server timezone) to user timezone
+            value = fields.datetime.context_timestamp(
+                cr, uid, timestamp=value, context=context)
+            value = value.strftime(DEFAULT_SERVER_DATETIME_FORMAT)
+
+        attrs = super(DateTime, self).attributes(
+            cr, uid, field_name, record, options, source_element, g_att, t_att,
+            qweb_context, context=None)
+        return itertools.chain(attrs, [
+            ('data-oe-original', value)
+        ])
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        if context is None:
+            context = {}
+        value = element.text_content().strip()
+        if not value:
+            return False
+
+        # parse from string to datetime
+        dt = datetime.datetime.strptime(value, DEFAULT_SERVER_DATETIME_FORMAT)
+
+        # convert back from user's timezone to UTC
+        tz_name = context.get('tz') \
+            or self.pool['res.users'].read(cr, openerp.SUPERUSER_ID, uid, ['tz'], context=context)['tz']
+        if tz_name:
+            try:
+                user_tz = pytz.timezone(tz_name)
+                utc = pytz.utc
+
+                dt = user_tz.localize(dt).astimezone(utc)
+            except Exception:
+                logger.warn(
+                    "Failed to convert the value for a field of the model"
+                    " %s back from the user's timezone (%s) to UTC",
+                    model, tz_name,
+                    exc_info=True)
+
+        # format back to string
+        return dt.strftime(DEFAULT_SERVER_DATETIME_FORMAT)
+
+
+class Text(orm.AbstractModel):
+    _name = 'ir.qweb.field.text'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.text']
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        return html_to_text(element)
+
+
+class Selection(orm.AbstractModel):
+    _name = 'ir.qweb.field.selection'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.selection']
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        record = self.browse(cr, uid, [], context=context)
+        value = element.text_content().strip()
+        selection = field.get_description(record.env)['selection']
+        for k, v in selection:
+            if isinstance(v, str):
+                v = ustr(v)
+            if value == v:
+                return k
+
+        raise ValueError(u"No value found for label %s in selection %s" % (
+                         value, selection))
+
+
+class HTML(orm.AbstractModel):
+    _name = 'ir.qweb.field.html'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.html']
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        content = []
+        if element.text:
+            content.append(element.text)
+        content.extend(html.tostring(child)
+                       for child in element.iterchildren(tag=etree.Element))
+        return '\n'.join(content)
+
+
+class Image(orm.AbstractModel):
+    """
+    Widget options:
+
+    ``class``
+        set as attribute on the generated <img> tag
+    """
+    _name = 'ir.qweb.field.image'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.image']
+
+    def to_html(self, cr, uid, field_name, record, options,
+                source_element, t_att, g_att, qweb_context, context=None):
+        assert source_element.tag != 'img',\
+            "Oddly enough, the root tag of an image field can not be img. " \
+            "That is because the image goes into the tag, or it gets the " \
+            "hose again."
+
+        return super(Image, self).to_html(
+            cr, uid, field_name, record, options,
+            source_element, t_att, g_att, qweb_context, context=context)
+
+    def record_to_html(self, cr, uid, field_name, record, options=None, context=None):
+        if options is None:
+            options = {}
+        aclasses = ['img', 'img-responsive'] + options.get('class', '').split()
+        classes = ' '.join(itertools.imap(escape, aclasses))
+
+        max_size = None
+        max_width, max_height = options.get('max_width', 0), options.get('max_height', 0)
+        if max_width or max_height:
+            max_size = '%sx%s' % (max_width, max_height)
+
+        src = self.pool['ir.attachment'].image_url(cr, uid, record, field_name, max_size)
+        if options.get('resize'):
+            src = "%s/%s" % (src, options.get('resize'))
+
+        img = '<img class="%s" src="%s" style="%s"/>' % (classes, src, options.get('style', ''))
+        return ir_qweb.HTMLSafe(img)
+
+    local_url_re = re.compile(r'^/(?P<module>[^]]+)/static/(?P<rest>.+)$')
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        url = element.find('img').get('src')
+
+        url_object = urlparse.urlsplit(url)
+        if url_object.path.startswith('/web_editor/image'):
+            # url might be /web_editor/image/<model>/<id>[_<checksum>]/<field>[/<width>x<height>]
+            fragments = url_object.path.split('/')
+            query = dict(urlparse.parse_qsl(url_object.query))
+            model = query.get('model', fragments[3])
+            oid = query.get('id', fragments[4].split('_')[0])
+            field = query.get('field', fragments[5])
+            item = self.pool[model].browse(cr, uid, int(oid), context=context)
+            return item[field]
+
+        if self.local_url_re.match(url_object.path):
+            return self.load_local_url(url)
+
+        return self.load_remote_url(url)
+
+    def load_local_url(self, url):
+        match = self.local_url_re.match(urlparse.urlsplit(url).path)
+
+        rest = match.group('rest')
+        for sep in os.sep, os.altsep:
+            if sep and sep != '/':
+                rest.replace(sep, '/')
+
+        path = openerp.modules.get_module_resource(
+            match.group('module'), 'static', *(rest.split('/')))
+
+        if not path:
+            return None
+
+        try:
+            with open(path, 'rb') as f:
+                # force complete image load to ensure it's valid image data
+                image = I.open(f)
+                image.load()
+                f.seek(0)
+                return f.read().encode('base64')
+        except Exception:
+            logger.exception("Failed to load local image %r", url)
+            return None
+
+    def load_remote_url(self, url):
+        try:
+            # should probably remove remote URLs entirely:
+            # * in fields, downloading them without blowing up the server is a
+            #   challenge
+            # * in views, may trigger mixed content warnings if HTTPS CMS
+            #   linking to HTTP images
+            # implement drag & drop image upload to mitigate?
+
+            req = urllib2.urlopen(url, timeout=REMOTE_CONNECTION_TIMEOUT)
+            # PIL needs a seekable file-like image, urllib result is not seekable
+            image = I.open(cStringIO.StringIO(req.read()))
+            # force a complete load of the image data to validate it
+            image.load()
+        except Exception:
+            logger.exception("Failed to load remote image %r", url)
+            return None
+
+        # don't use original data in case weird stuff was smuggled in, with
+        # luck PIL will remove some of it?
+        out = cStringIO.StringIO()
+        image.save(out, image.format)
+        return out.getvalue().encode('base64')
+
+
+class Monetary(orm.AbstractModel):
+    _name = 'ir.qweb.field.monetary'
+    _inherit = ['ir.qweb.field', 'ir.qweb.field.monetary']
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        lang = self.user_lang(cr, uid, context=context)
+
+        value = element.find('span').text.strip()
+
+        return float(value.replace(lang.thousands_sep, '')
+                          .replace(lang.decimal_point, '.'))
+
+
+class Duration(orm.AbstractModel):
+    _name = 'ir.qweb.field.duration'
+    _inherit = [
+        'ir.qweb.field.duration',
+        'ir.qweb.field.float',
+    ]
+
+    def attributes(self, cr, uid, field_name, record, options,
+                   source_element, g_att, t_att, qweb_context,
+                   context=None):
+        attrs = super(Duration, self).attributes(
+            cr, uid, field_name, record, options, source_element, g_att, t_att,
+            qweb_context, context=None)
+        return itertools.chain(attrs, [('data-oe-original', record[field_name])])
+
+    def from_html(self, cr, uid, model, field, element, context=None):
+        value = element.text_content().strip()
+
+        # non-localized value
+        return float(value)
+
+
+class RelativeDatetime(orm.AbstractModel):
+    _name = 'ir.qweb.field.relative'
+    _inherit = [
+        'ir.qweb.field.relative',
+        'ir.qweb.field.datetime',
+    ]
+
+    # get formatting from ir.qweb.field.relative but edition/save from datetime
+
+
+class QwebView(orm.AbstractModel):
+    _name = 'ir.qweb.field.qweb'
+    _inherit = ['ir.qweb.field.qweb']
+
+
+def html_to_text(element):
+    """ Converts HTML content with HTML-specified line breaks (br, p, div, ...)
+    in roughly equivalent textual content.
+
+    Used to replace and fixup the roundtripping of text and m2o: when using
+    libxml 2.8.0 (but not 2.9.1) and parsing HTML with lxml.html.fromstring
+    whitespace text nodes (text nodes composed *solely* of whitespace) are
+    stripped out with no recourse, and fundamentally relying on newlines
+    being in the text (e.g. inserted during user edition) is probably poor form
+    anyway.
+
+    -> this utility function collapses whitespace sequences and replaces
+       nodes by roughly corresponding linebreaks
+       * p are pre-and post-fixed by 2 newlines
+       * br are replaced by a single newline
+       * block-level elements not already mentioned are pre- and post-fixed by
+         a single newline
+
+    ought be somewhat similar (but much less high-tech) to aaronsw's html2text.
+    the latter produces full-blown markdown, our text -> html converter only
+    replaces newlines by <br> elements at this point so we're reverting that,
+    and a few more newline-ish elements in case the user tried to add
+    newlines/paragraphs into the text field
+
+    :param element: lxml.html content
+    :returns: corresponding pure-text output
+    """
+
+    # output is a list of str | int. Integers are padding requests (in minimum
+    # number of newlines). When multiple padding requests, fold them into the
+    # biggest one
+    output = []
+    _wrap(element, output)
+
+    # remove any leading or tailing whitespace, replace sequences of
+    # (whitespace)\n(whitespace) by a single newline, where (whitespace) is a
+    # non-newline whitespace in this case
+    return re.sub(
+        r'[ \t\r\f]*\n[ \t\r\f]*',
+        '\n',
+        ''.join(_realize_padding(output)).strip())
+
+_PADDED_BLOCK = set('p h1 h2 h3 h4 h5 h6'.split())
+# https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements minus p
+_MISC_BLOCK = set((
+    'address article aside audio blockquote canvas dd dl div figcaption figure'
+    ' footer form header hgroup hr ol output pre section tfoot ul video'
+).split())
+
+
+def _collapse_whitespace(text):
+    """ Collapses sequences of whitespace characters in ``text`` to a single
+    space
+    """
+    return re.sub('\s+', ' ', text)
+
+
+def _realize_padding(it):
+    """ Fold and convert padding requests: integers in the output sequence are
+    requests for at least n newlines of padding. Runs thereof can be collapsed
+    into the largest requests and converted to newlines.
+    """
+    padding = None
+    for item in it:
+        if isinstance(item, int):
+            padding = max(padding, item)
+            continue
+
+        if padding:
+            yield '\n' * padding
+            padding = None
+
+        yield item
+    # leftover padding irrelevant as the output will be stripped
+
+
+def _wrap(element, output, wrapper=u''):
+    """ Recursively extracts text from ``element`` (via _element_to_text), and
+    wraps it all in ``wrapper``. Extracted text is added to ``output``
+
+    :type wrapper: basestring | int
+    """
+    output.append(wrapper)
+    if element.text:
+        output.append(_collapse_whitespace(element.text))
+    for child in element:
+        _element_to_text(child, output)
+    output.append(wrapper)
+
+
+def _element_to_text(e, output):
+    if e.tag == 'br':
+        output.append(u'\n')
+    elif e.tag in _PADDED_BLOCK:
+        _wrap(e, output, 2)
+    elif e.tag in _MISC_BLOCK:
+        _wrap(e, output, 1)
+    else:
+        # inline
+        _wrap(e, output)
+
+    if e.tail:
+        output.append(_collapse_whitespace(e.tail))
diff --git a/addons/web_editor/models/ir_translation.py b/addons/web_editor/models/ir_translation.py
new file mode 100644
index 00000000000..d54591908bd
--- /dev/null
+++ b/addons/web_editor/models/ir_translation.py
@@ -0,0 +1,14 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from openerp import models, api
+
+class ir_translation(models.Model):
+    _inherit = 'ir.translation'
+
+    @api.model
+    def _get_terms_mapping(self, field, records):
+        if self._context.get('edit_translations'):
+            self.insert_missing(field, records)
+            return lambda data: '<span data-oe-translation-id="%(id)s" data-oe-translation-state="%(state)s">%(value)s</span>' % data
+        return super(ir_translation, self)._get_terms_mapping(field, records)
diff --git a/addons/web_editor/models/ir_ui_view.py b/addons/web_editor/models/ir_ui_view.py
new file mode 100644
index 00000000000..5946e7128bb
--- /dev/null
+++ b/addons/web_editor/models/ir_ui_view.py
@@ -0,0 +1,123 @@
+# -*- coding: utf-8 -*-
+import copy
+import openerp
+from openerp.exceptions import AccessError
+from openerp.osv import osv
+from lxml import etree, html
+
+
+class view(osv.osv):
+    _inherit = 'ir.ui.view'
+
+    def render(self, cr, uid, id_or_xml_id, values=None, engine='ir.qweb', context=None):
+        if not values:
+            values = {}
+        if values.get('editable'):
+            try:
+                if not isinstance(id_or_xml_id, (int, long)):
+                    if '.' not in id_or_xml_id:
+                        raise ValueError('Invalid template id: %r' % (id_or_xml_id,))
+                    id_or_xml_id = self.get_view_id(cr, uid, id_or_xml_id, context=context)
+
+                self.check_access_rule(cr, uid, [id_or_xml_id], 'write', context=context)
+
+            except AccessError:
+                values['editable'] = False
+
+        return super(view, self).render(cr, uid, id_or_xml_id, values=values, engine=engine, context=context)
+
+    #------------------------------------------------------
+    # Save from html
+    #------------------------------------------------------
+
+    def extract_embedded_fields(self, cr, uid, arch, context=None):
+        return arch.xpath('//*[@data-oe-model != "ir.ui.view"]')
+
+    def save_embedded_field(self, cr, uid, el, context=None):
+        Model = self.pool[el.get('data-oe-model')]
+        field = el.get('data-oe-field')
+
+        converter = self.pool['ir.qweb'].get_converter_for(el.get('data-oe-type'))
+        value = converter.from_html(cr, uid, Model, Model._fields[field], el)
+
+        if value is not None:
+            # TODO: batch writes?
+            Model.write(cr, uid, [int(el.get('data-oe-id'))], {
+                field: value
+            }, context=context)
+
+    def _pretty_arch(self, arch):
+        # remove_blank_string does not seem to work on HTMLParser, and
+        # pretty-printing with lxml more or less requires stripping
+        # whitespace: http://lxml.de/FAQ.html#why-doesn-t-the-pretty-print-option-reformat-my-xml-output
+        # so serialize to XML, parse as XML (remove whitespace) then serialize
+        # as XML (pretty print)
+        arch_no_whitespace = etree.fromstring(
+            etree.tostring(arch, encoding='utf-8'),
+            parser=etree.XMLParser(encoding='utf-8', remove_blank_text=True))
+        return etree.tostring(
+            arch_no_whitespace, encoding='unicode', pretty_print=True)
+
+    def replace_arch_section(self, cr, uid, view_id, section_xpath, replacement, context=None):
+        # the root of the arch section shouldn't actually be replaced as it's
+        # not really editable itself, only the content truly is editable.
+
+        [view] = self.browse(cr, uid, [view_id], context=context)
+        arch = etree.fromstring(view.arch.encode('utf-8'))
+        # => get the replacement root
+        if not section_xpath:
+            root = arch
+        else:
+            # ensure there's only one match
+            [root] = arch.xpath(section_xpath)
+
+        root.text = replacement.text
+        root.tail = replacement.tail
+        # replace all children
+        del root[:]
+        for child in replacement:
+            root.append(copy.deepcopy(child))
+
+        return arch
+
+    def to_field_ref(self, cr, uid, el, context=None):
+        # filter out meta-information inserted in the document
+        attributes = dict((k, v) for k, v in el.items()
+                          if not k.startswith('data-oe-'))
+        attributes['t-field'] = el.get('data-oe-expression')
+
+        out = html.html_parser.makeelement(el.tag, attrib=attributes)
+        out.tail = el.tail
+        return out
+
+    def save(self, cr, uid, res_id, value, xpath=None, context=None):
+        """ Update a view section. The view section may embed fields to write
+
+        :param str model:
+        :param int res_id:
+        :param str xpath: valid xpath to the tag to replace
+        """
+        res_id = int(res_id)
+
+        arch_section = html.fromstring(
+            value, parser=html.HTMLParser(encoding='utf-8'))
+
+        if xpath is None:
+            # value is an embedded field on its own, not a view section
+            self.save_embedded_field(cr, uid, arch_section, context=context)
+            return
+
+        for el in self.extract_embedded_fields(cr, uid, arch_section, context=context):
+            self.save_embedded_field(cr, uid, el, context=context)
+
+            # transform embedded field back to t-field
+            el.getparent().replace(el, self.to_field_ref(cr, uid, el, context=context))
+
+        arch = self.replace_arch_section(cr, uid, res_id, xpath, arch_section, context=context)
+        self.write(cr, uid, res_id, {
+            'arch': self._pretty_arch(arch)
+        }, context=context)
+
+        view = self.browse(cr, openerp.SUPERUSER_ID, res_id, context=context)
+        if view.model_data_id:
+            view.model_data_id.write({'noupdate': True})
diff --git a/addons/website/models/test_models.py b/addons/web_editor/models/test_models.py
similarity index 88%
rename from addons/website/models/test_models.py
rename to addons/web_editor/models/test_models.py
index 52e614ade4a..100b49b6448 100644
--- a/addons/website/models/test_models.py
+++ b/addons/web_editor/models/test_models.py
@@ -1,8 +1,9 @@
 # -*- coding: utf-8 -*-
 from openerp.osv import orm, fields
 
+
 class test_converter(orm.Model):
-    _name = 'website.converter.test'
+    _name = 'web_editor.converter.test'
 
     # disable translation export for those brilliant field labels and values
     _translate = False
@@ -12,7 +13,7 @@ class test_converter(orm.Model):
         'integer': fields.integer(),
         'float': fields.float(),
         'numeric': fields.float(digits=(16, 2)),
-        'many2one': fields.many2one('website.converter.test.sub'),
+        'many2one': fields.many2one('web_editor.converter.test.sub'),
         'binary': fields.binary(),
         'date': fields.date(),
         'datetime': fields.datetime(),
@@ -35,7 +36,7 @@ class test_converter(orm.Model):
 
 
 class test_converter_sub(orm.Model):
-    _name = 'website.converter.test.sub'
+    _name = 'web_editor.converter.test.sub'
 
     _columns = {
         'name': fields.char(),
diff --git a/addons/web_editor/security/ir.model.access.csv b/addons/web_editor/security/ir.model.access.csv
new file mode 100644
index 00000000000..a02dd5f1957
--- /dev/null
+++ b/addons/web_editor/security/ir.model.access.csv
@@ -0,0 +1,3 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_web_editor_converter_test,access_web_editor_converter_test,model_web_editor_converter_test,,1,1,1,1
+access_web_editor_converter_test_sub,access_web_editor_converter_test_sub,model_web_editor_converter_test_sub,,1,1,1,1
diff --git a/addons/website/static/lib/nearest/README.md b/addons/web_editor/static/lib/nearest/README.md
similarity index 100%
rename from addons/website/static/lib/nearest/README.md
rename to addons/web_editor/static/lib/nearest/README.md
diff --git a/addons/website/static/lib/nearest/bower.json b/addons/web_editor/static/lib/nearest/bower.json
similarity index 100%
rename from addons/website/static/lib/nearest/bower.json
rename to addons/web_editor/static/lib/nearest/bower.json
diff --git a/addons/website/static/lib/nearest/jquery.nearest.js b/addons/web_editor/static/lib/nearest/jquery.nearest.js
similarity index 100%
rename from addons/website/static/lib/nearest/jquery.nearest.js
rename to addons/web_editor/static/lib/nearest/jquery.nearest.js
diff --git a/addons/website/static/lib/nearest/jquery.nearest.min.js b/addons/web_editor/static/lib/nearest/jquery.nearest.min.js
similarity index 100%
rename from addons/website/static/lib/nearest/jquery.nearest.min.js
rename to addons/web_editor/static/lib/nearest/jquery.nearest.min.js
diff --git a/addons/website/static/lib/nearest/nearest.jquery.json b/addons/web_editor/static/lib/nearest/nearest.jquery.json
similarity index 100%
rename from addons/website/static/lib/nearest/nearest.jquery.json
rename to addons/web_editor/static/lib/nearest/nearest.jquery.json
diff --git a/addons/website/static/lib/summernote/src/js/EventHandler.js b/addons/web_editor/static/lib/summernote/src/js/EventHandler.js
similarity index 99%
rename from addons/website/static/lib/summernote/src/js/EventHandler.js
rename to addons/web_editor/static/lib/summernote/src/js/EventHandler.js
index 9d5174c6fe6..068ceff735f 100644
--- a/addons/website/static/lib/summernote/src/js/EventHandler.js
+++ b/addons/web_editor/static/lib/summernote/src/js/EventHandler.js
@@ -48,7 +48,7 @@ define([
       if ($target.is('.note-editor, .note-air-editor')) {
         $editor = $target;
       } else {
-        $editor = $('[data-note-id="' + list.last($target.attr('id')) + '"]');
+        $editor = $('[data-note-id="' + list.last($target.attr('id').split('-')) + '"]');
       }
 
       return dom.buildLayoutInfo($editor);
@@ -397,7 +397,7 @@ define([
     var hToolbarAndPopoverClick = function (event) {
       var $btn = $(event.target).closest('[data-event]');
 
-      if ($btn.length) {
+      if ($btn.length && !$btn.is(':disabled')) {
         var eventName = $btn.attr('data-event'),
             value = $btn.attr('data-value'),
             hide = $btn.attr('data-hide');
diff --git a/addons/website/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
similarity index 99%
rename from addons/website/static/lib/summernote/src/js/Renderer.js
rename to addons/web_editor/static/lib/summernote/src/js/Renderer.js
index 9d0f3c7c689..07584edc453 100644
--- a/addons/website/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -884,7 +884,7 @@ define([
     this.removeLayout = function ($holder, layoutInfo, options) {
       if (options.airMode) {
         $holder.removeClass('note-air-editor note-editable')
-               .removeAttr('id contentEditable');
+               .removeAttr('contentEditable');
 
         layoutInfo.popover.remove();
         layoutInfo.handle.remove();
diff --git a/addons/website/static/lib/summernote/src/js/app.js b/addons/web_editor/static/lib/summernote/src/js/app.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/app.js
rename to addons/web_editor/static/lib/summernote/src/js/app.js
diff --git a/addons/website/static/lib/summernote/src/js/core/agent.js b/addons/web_editor/static/lib/summernote/src/js/core/agent.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/core/agent.js
rename to addons/web_editor/static/lib/summernote/src/js/core/agent.js
diff --git a/addons/website/static/lib/summernote/src/js/core/async.js b/addons/web_editor/static/lib/summernote/src/js/core/async.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/core/async.js
rename to addons/web_editor/static/lib/summernote/src/js/core/async.js
diff --git a/addons/website/static/lib/summernote/src/js/core/dom.js b/addons/web_editor/static/lib/summernote/src/js/core/dom.js
similarity index 99%
rename from addons/website/static/lib/summernote/src/js/core/dom.js
rename to addons/web_editor/static/lib/summernote/src/js/core/dom.js
index 7ffd1a667db..ba55ae8fa01 100644
--- a/addons/website/static/lib/summernote/src/js/core/dom.js
+++ b/addons/web_editor/static/lib/summernote/src/js/core/dom.js
@@ -42,7 +42,7 @@ define([
 
       // air mode
       if ($editor.hasClass('note-air-editor')) {
-        var id = list.last($editor.attr('data-note-id'));
+        var id = list.last($editor.attr('data-note-id').split('-'));
         makeFinder = function (sIdPrefix) {
           return function () { return $(sIdPrefix + id); };
         };
diff --git a/addons/website/static/lib/summernote/src/js/core/func.js b/addons/web_editor/static/lib/summernote/src/js/core/func.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/core/func.js
rename to addons/web_editor/static/lib/summernote/src/js/core/func.js
diff --git a/addons/website/static/lib/summernote/src/js/core/key.js b/addons/web_editor/static/lib/summernote/src/js/core/key.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/core/key.js
rename to addons/web_editor/static/lib/summernote/src/js/core/key.js
diff --git a/addons/website/static/lib/summernote/src/js/core/list.js b/addons/web_editor/static/lib/summernote/src/js/core/list.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/core/list.js
rename to addons/web_editor/static/lib/summernote/src/js/core/list.js
diff --git a/addons/website/static/lib/summernote/src/js/core/range.js b/addons/web_editor/static/lib/summernote/src/js/core/range.js
similarity index 98%
rename from addons/website/static/lib/summernote/src/js/core/range.js
rename to addons/web_editor/static/lib/summernote/src/js/core/range.js
index aa72cd31e55..9611e09c72b 100644
--- a/addons/website/static/lib/summernote/src/js/core/range.js
+++ b/addons/web_editor/static/lib/summernote/src/js/core/range.js
@@ -474,9 +474,15 @@ define([
           return this.normalize();
         }
 
-        // if apply the editor to a P, LI...
-        if (dom.isText(sc) && /^P|^LI|^H[1-7]/.test(sc.parentNode.nodeName.toUpperCase())) {
-          return this.normalize();
+        // if apply the editor to a P, LI... or inside a P, LI...
+        if (dom.isText(sc)) {
+          var node = sc;
+          while (node.parentNode !== document) {
+            node = node.parentNode;
+            if (/^(P|LI|H[1-7]|BUTTON|A|SPAN)/.test(node.nodeName.toUpperCase())) {
+              return this.normalize();
+            }
+          }
         }
 
         // find inline top ancestor
diff --git a/addons/website/static/lib/summernote/src/js/editing/Bullet.js b/addons/web_editor/static/lib/summernote/src/js/editing/Bullet.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/editing/Bullet.js
rename to addons/web_editor/static/lib/summernote/src/js/editing/Bullet.js
diff --git a/addons/website/static/lib/summernote/src/js/editing/Editor.js b/addons/web_editor/static/lib/summernote/src/js/editing/Editor.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/editing/Editor.js
rename to addons/web_editor/static/lib/summernote/src/js/editing/Editor.js
diff --git a/addons/web_editor/static/lib/summernote/src/js/editing/History.js b/addons/web_editor/static/lib/summernote/src/js/editing/History.js
new file mode 100644
index 00000000000..89834d52cb1
--- /dev/null
+++ b/addons/web_editor/static/lib/summernote/src/js/editing/History.js
@@ -0,0 +1,101 @@
+define(['summernote/core/range', 'summernote/core/dom'], function (range, dom) {
+  /**
+   * History
+   * @class
+   */
+  var History = function ($editable) {
+    var stack = [], stackOffset = -1, hasUndo = false;
+    var editable = $editable[0];
+
+    var makeSnapshot = function () {
+      var rng = range.create();
+      var emptyBookmark = {s: {path: [0], offset: 0}, e: {path: [0], offset: 0}};
+
+      return {
+        contents: $editable.html(),
+        bookmark: (rng && dom.ancestor(rng.sc, dom.isEditable) ? rng.bookmark(editable) : emptyBookmark)
+      };
+    };
+
+    var applySnapshot = function (snapshot) {
+      if (snapshot.contents !== null) {
+        $editable.html(snapshot.contents);
+      }
+      if (snapshot.bookmark !== null) {
+        range.createFromBookmark(editable, snapshot.bookmark).select();
+      }
+    };
+
+    this.undo = function () {
+      if (0 < stackOffset || (stack.length - 1 === stackOffset && hasUndo)) {
+        if (stack.length - 1 === stackOffset) {
+          this.recordUndo();
+        }
+        stackOffset--;
+        applySnapshot(stack[stackOffset]);
+        hasUndo = !!stackOffset;
+      }
+    };
+
+    this.hasUndo = function () {
+        return 0 < stackOffset || hasUndo;
+    };
+
+    this.redo = function () {
+      if (stack.length - 1 > stackOffset) {
+        stackOffset++;
+        applySnapshot(stack[stackOffset]);
+      }
+    };
+
+    this.hasRedo = function () {
+        return stack.length - 1 > stackOffset;
+    };
+
+    var last;
+    this.recordUndo = function () {
+      // test event for firefox: remove stack of history because event doesn't exists
+      var key = typeof event !== 'undefined' ? event : false;
+      if (key && !event.metaKey && !event.ctrlKey && !event.altKey && event.type === "keydown") {
+        key = event.type + "-";
+        if (event.which === 8 || event.which === 46) key += 'delete';
+        else if (event.which === 13) key += 'enter';
+        else key += 'other';
+        if (key === last) return;
+        hasUndo = true;
+      }
+      last = key;
+
+      // Wash out stack after stackOffset
+      if (stack.length > stackOffset+1) {
+        stack = stack.slice(0, stackOffset+1);
+      }
+
+      if (stack[stackOffset] && stack[stackOffset].contents === $editable.html()) {
+        return;
+      }
+
+      stackOffset++;
+
+      // Create new snapshot and push it to the end
+      stack.push(makeSnapshot());
+      return true;
+    };
+
+    this.splitNext = function () {
+        last = false;
+    };
+
+    this.reset = function () {
+        last = false;
+        stack = [];
+        stackOffset = -1;
+        this.recordUndo();
+    };
+
+    // Create first undo stack
+    this.recordUndo();
+  };
+
+  return History;
+});
diff --git a/addons/website/static/lib/summernote/src/js/editing/Style.js b/addons/web_editor/static/lib/summernote/src/js/editing/Style.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/editing/Style.js
rename to addons/web_editor/static/lib/summernote/src/js/editing/Style.js
diff --git a/addons/website/static/lib/summernote/src/js/editing/Table.js b/addons/web_editor/static/lib/summernote/src/js/editing/Table.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/editing/Table.js
rename to addons/web_editor/static/lib/summernote/src/js/editing/Table.js
diff --git a/addons/website/static/lib/summernote/src/js/editing/Typing.js b/addons/web_editor/static/lib/summernote/src/js/editing/Typing.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/editing/Typing.js
rename to addons/web_editor/static/lib/summernote/src/js/editing/Typing.js
diff --git a/addons/website/static/lib/summernote/src/js/intro.js b/addons/web_editor/static/lib/summernote/src/js/intro.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/intro.js
rename to addons/web_editor/static/lib/summernote/src/js/intro.js
diff --git a/addons/website/static/lib/summernote/src/js/module/Button.js b/addons/web_editor/static/lib/summernote/src/js/module/Button.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/module/Button.js
rename to addons/web_editor/static/lib/summernote/src/js/module/Button.js
diff --git a/addons/website/static/lib/summernote/src/js/module/Dialog.js b/addons/web_editor/static/lib/summernote/src/js/module/Dialog.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/module/Dialog.js
rename to addons/web_editor/static/lib/summernote/src/js/module/Dialog.js
diff --git a/addons/website/static/lib/summernote/src/js/module/Handle.js b/addons/web_editor/static/lib/summernote/src/js/module/Handle.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/module/Handle.js
rename to addons/web_editor/static/lib/summernote/src/js/module/Handle.js
diff --git a/addons/website/static/lib/summernote/src/js/module/Popover.js b/addons/web_editor/static/lib/summernote/src/js/module/Popover.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/module/Popover.js
rename to addons/web_editor/static/lib/summernote/src/js/module/Popover.js
diff --git a/addons/website/static/lib/summernote/src/js/module/Toolbar.js b/addons/web_editor/static/lib/summernote/src/js/module/Toolbar.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/module/Toolbar.js
rename to addons/web_editor/static/lib/summernote/src/js/module/Toolbar.js
diff --git a/addons/website/static/lib/summernote/src/js/outro.js b/addons/web_editor/static/lib/summernote/src/js/outro.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/outro.js
rename to addons/web_editor/static/lib/summernote/src/js/outro.js
diff --git a/addons/website/static/lib/summernote/src/js/settings.js b/addons/web_editor/static/lib/summernote/src/js/settings.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/settings.js
rename to addons/web_editor/static/lib/summernote/src/js/settings.js
diff --git a/addons/website/static/lib/summernote/src/js/summernote.js b/addons/web_editor/static/lib/summernote/src/js/summernote.js
similarity index 100%
rename from addons/website/static/lib/summernote/src/js/summernote.js
rename to addons/web_editor/static/lib/summernote/src/js/summernote.js
diff --git a/addons/website/static/lib/summernote/src/less/elements.less b/addons/web_editor/static/lib/summernote/src/less/elements.less
similarity index 100%
rename from addons/website/static/lib/summernote/src/less/elements.less
rename to addons/web_editor/static/lib/summernote/src/less/elements.less
diff --git a/addons/website/static/lib/summernote/src/less/summernote.less b/addons/web_editor/static/lib/summernote/src/less/summernote.less
similarity index 100%
rename from addons/website/static/lib/summernote/src/less/summernote.less
rename to addons/web_editor/static/lib/summernote/src/less/summernote.less
diff --git a/addons/website/static/lib/summernote/summernote.css b/addons/web_editor/static/lib/summernote/summernote.css
similarity index 100%
rename from addons/website/static/lib/summernote/summernote.css
rename to addons/web_editor/static/lib/summernote/summernote.css
diff --git a/addons/web_editor/static/src/css/backend.css b/addons/web_editor/static/src/css/backend.css
new file mode 100644
index 00000000000..decaed2d593
--- /dev/null
+++ b/addons/web_editor/static/src/css/backend.css
@@ -0,0 +1,73 @@
+.oe_form_field_html_text .note-editable {
+    min-height: 180px;
+    font: initial !important;
+    line-height: initial !important;
+    color: initial !important;
+}
+.oe_form_field_html_text .note-editable p {
+    margin: initial;
+}
+.oe_form_field_html_text .note-editable a, .oe_form_field_html_text .note-editable a:hover {
+    color: initial;
+}
+
+.oe_form_field_html iframe {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-height: 300px;
+    min-height: -webkit-calc(100vh - 170px);
+    min-height: calc(100vh - 170px);
+}
+.o_form_FieldTextHtml_fullscreen .oe_form_field_html.o_form_fullscreen_ancestor iframe {
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    min-height: 100% !important;
+    z-index: 1001 !important;
+    border: 0;
+}
+
+.o_form_FieldTextHtml_fullscreen * {
+    display: none;
+}
+.o_form_FieldTextHtml_fullscreen .o_form_fullscreen_ancestor {
+    display: block !important;
+    position: static !important;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: visible !important;
+    width: auto !important;
+    overflow: hidden !important;
+}
+
+
+.openerp .oe_form .oe_form_field_html_translate textarea {
+    min-width: 60px;
+    width: 100%;
+    color: #4c4c4c;
+    font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+}
+.openerp .oe_form_readonly .oe_form .oe_form_field_html_translate textarea {
+    border:0;
+    background: #fff;
+}
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > button {
+    float: right;
+    margin: -6px -3px 0 0;
+}
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > .note-editable {
+    border: 1px solid #ccc;
+    min-height: 22px;
+    border-radius: 3px;
+}
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate .note-editable [contentEditable='true']:hover {
+    -moz-box-shadow: #DDCC33 0 0 5px 2px inset;
+    -webkit-box-shadow: #DDCC33 0 0 5px 2px inset;
+    box-shadow: #DDCC33 0 0 5px 2px inset;
+}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/css/common.sass b/addons/web_editor/static/src/css/common.sass
new file mode 100644
index 00000000000..264f0166c49
--- /dev/null
+++ b/addons/web_editor/static/src/css/common.sass
@@ -0,0 +1,4 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+@import "compass/support"
diff --git a/addons/web_editor/static/src/css/editor.css b/addons/web_editor/static/src/css/editor.css
new file mode 100644
index 00000000000..be264550f0f
--- /dev/null
+++ b/addons/web_editor/static/src/css/editor.css
@@ -0,0 +1,1183 @@
+/* ---- EDITOR BAR ---- {{{ */
+.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog {
+  /* button */
+  /* form */
+  /* col */
+  /* dropdown */
+  /* list-group */
+  /* tab */
+  /* pager */
+  /* add submenu css */
+  /* global */
+}
+.note-popover *, .o_css_editor *, .web_editor-dialog *, .note-image-dialog * {
+  box-sizing: border-box;
+}
+.note-popover a, .o_css_editor a, .web_editor-dialog a, .note-image-dialog a {
+  text-decoration: none;
+}
+.note-popover ul, .note-popover ol, .o_css_editor ul, .o_css_editor ol, .web_editor-dialog ul, .web_editor-dialog ol, .note-image-dialog ul, .note-image-dialog ol {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.note-popover .clearfix:before, .note-popover .clearfix:after, .note-popover .dl-horizontal dd:before, .note-popover .dl-horizontal dd:after, .note-popover .container:before, .note-popover .container:after, .note-popover .container-fluid:before, .note-popover .container-fluid:after, .note-popover .row:before, .note-popover .row:after, .note-popover .form-horizontal .form-group:before, .note-popover .form-horizontal .form-group:after, .note-popover .btn-toolbar:before, .note-popover .btn-toolbar:after, .note-popover .btn-group-vertical > .btn-group:before, .note-popover .btn-group-vertical > .btn-group:after, .note-popover .nav:before, .note-popover .nav:after, .note-popover .navbar:before, .note-popover .navbar:after, .note-popover .navbar-header:before, .note-popover .navbar-header:after, .note-popover .navbar-collapse:before, .note-popover .navbar-collapse:after, .note-popover .pager:before, .note-popover .pager:after, .note-popover .panel-body:before, .note-popover .panel-body:after, .note-popover .modal-footer:before, .note-popover .modal-footer:after, .o_css_editor .clearfix:before, .o_css_editor .clearfix:after, .o_css_editor .dl-horizontal dd:before, .o_css_editor .dl-horizontal dd:after, .o_css_editor .container:before, .o_css_editor .container:after, .o_css_editor .container-fluid:before, .o_css_editor .container-fluid:after, .o_css_editor .row:before, .o_css_editor .row:after, .o_css_editor .form-horizontal .form-group:before, .o_css_editor .form-horizontal .form-group:after, .o_css_editor .btn-toolbar:before, .o_css_editor .btn-toolbar:after, .o_css_editor .btn-group-vertical > .btn-group:before, .o_css_editor .btn-group-vertical > .btn-group:after, .o_css_editor .nav:before, .o_css_editor .nav:after, .o_css_editor .navbar:before, .o_css_editor .navbar:after, .o_css_editor .navbar-header:before, .o_css_editor .navbar-header:after, .o_css_editor .navbar-collapse:before, .o_css_editor .navbar-collapse:after, .o_css_editor .pager:before, .o_css_editor .pager:after, .o_css_editor .panel-body:before, .o_css_editor .panel-body:after, .o_css_editor .modal-footer:before, .o_css_editor .modal-footer:after, .web_editor-dialog .clearfix:before, .web_editor-dialog .clearfix:after, .web_editor-dialog .dl-horizontal dd:before, .web_editor-dialog .dl-horizontal dd:after, .web_editor-dialog .container:before, .web_editor-dialog .container:after, .web_editor-dialog .container-fluid:before, .web_editor-dialog .container-fluid:after, .web_editor-dialog .row:before, .web_editor-dialog .row:after, .web_editor-dialog .form-horizontal .form-group:before, .web_editor-dialog .form-horizontal .form-group:after, .web_editor-dialog .btn-toolbar:before, .web_editor-dialog .btn-toolbar:after, .web_editor-dialog .btn-group-vertical > .btn-group:before, .web_editor-dialog .btn-group-vertical > .btn-group:after, .web_editor-dialog .nav:before, .web_editor-dialog .nav:after, .web_editor-dialog .navbar:before, .web_editor-dialog .navbar:after, .web_editor-dialog .navbar-header:before, .web_editor-dialog .navbar-header:after, .web_editor-dialog .navbar-collapse:before, .web_editor-dialog .navbar-collapse:after, .web_editor-dialog .pager:before, .web_editor-dialog .pager:after, .web_editor-dialog .panel-body:before, .web_editor-dialog .panel-body:after, .web_editor-dialog .modal-footer:before, .web_editor-dialog .modal-footer:after, .note-image-dialog .clearfix:before, .note-image-dialog .clearfix:after, .note-image-dialog .dl-horizontal dd:before, .note-image-dialog .dl-horizontal dd:after, .note-image-dialog .container:before, .note-image-dialog .container:after, .note-image-dialog .container-fluid:before, .note-image-dialog .container-fluid:after, .note-image-dialog .row:before, .note-image-dialog .row:after, .note-image-dialog .form-horizontal .form-group:before, .note-image-dialog .form-horizontal .form-group:after, .note-image-dialog .btn-toolbar:before, .note-image-dialog .btn-toolbar:after, .note-image-dialog .btn-group-vertical > .btn-group:before, .note-image-dialog .btn-group-vertical > .btn-group:after, .note-image-dialog .nav:before, .note-image-dialog .nav:after, .note-image-dialog .navbar:before, .note-image-dialog .navbar:after, .note-image-dialog .navbar-header:before, .note-image-dialog .navbar-header:after, .note-image-dialog .navbar-collapse:before, .note-image-dialog .navbar-collapse:after, .note-image-dialog .pager:before, .note-image-dialog .pager:after, .note-image-dialog .panel-body:before, .note-image-dialog .panel-body:after, .note-image-dialog .modal-footer:before, .note-image-dialog .modal-footer:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.note-popover .caret, .o_css_editor .caret, .web_editor-dialog .caret, .note-image-dialog .caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  border-top: 4px solid;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+}
+.note-popover .btn.dropdown-toggle, .o_css_editor .btn.dropdown-toggle, .web_editor-dialog .btn.dropdown-toggle, .note-image-dialog .btn.dropdown-toggle {
+  position: relative;
+  float: left;
+}
+.note-popover .btn, .o_css_editor .btn, .web_editor-dialog .btn, .note-image-dialog .btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 4px;
+}
+.note-popover .btn .caret, .o_css_editor .btn .caret, .web_editor-dialog .btn .caret, .note-image-dialog .btn .caret {
+  margin-left: 0;
+}
+.note-popover .btn.disabled, .note-popover .btn[disabled], .note-popover .btn.disabled:hover, .note-popover .btn[disabled]:active, .o_css_editor .btn.disabled, .o_css_editor .btn[disabled], .o_css_editor .btn.disabled:hover, .o_css_editor .btn[disabled]:active, .web_editor-dialog .btn.disabled, .web_editor-dialog .btn[disabled], .web_editor-dialog .btn.disabled:hover, .web_editor-dialog .btn[disabled]:active, .note-image-dialog .btn.disabled, .note-image-dialog .btn[disabled], .note-image-dialog .btn.disabled:hover, .note-image-dialog .btn[disabled]:active {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.note-popover .btn-sm, .o_css_editor .btn-sm, .web_editor-dialog .btn-sm, .note-image-dialog .btn-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.note-popover .btn-group, .o_css_editor .btn-group, .web_editor-dialog .btn-group, .note-image-dialog .btn-group {
+  padding-top: 0;
+  margin-top: 0;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+.note-popover .btn-group > .btn, .o_css_editor .btn-group > .btn, .web_editor-dialog .btn-group > .btn, .note-image-dialog .btn-group > .btn {
+  position: relative;
+  float: left;
+}
+.note-popover .btn-group > .btn:first-child, .o_css_editor .btn-group > .btn:first-child, .web_editor-dialog .btn-group > .btn:first-child, .note-image-dialog .btn-group > .btn:first-child {
+  margin-left: 0;
+}
+.note-popover .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .o_css_editor .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .web_editor-dialog .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .note-image-dialog .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.note-popover .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .o_css_editor .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .web_editor-dialog .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .note-image-dialog .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+.note-popover .btn-group > .btn:last-child:not(:first-child), .note-popover .btn-group > .btn > .dropdown-toggle:not(:first-child), .o_css_editor .btn-group > .btn:last-child:not(:first-child), .o_css_editor .btn-group > .btn > .dropdown-toggle:not(:first-child), .web_editor-dialog .btn-group > .btn:last-child:not(:first-child), .web_editor-dialog .btn-group > .btn > .dropdown-toggle:not(:first-child), .note-image-dialog .btn-group > .btn:last-child:not(:first-child), .note-image-dialog .btn-group > .btn > .dropdown-toggle:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.note-popover .btn-group > .btn + .dropdown-toggle, .o_css_editor .btn-group > .btn + .dropdown-toggle, .web_editor-dialog .btn-group > .btn + .dropdown-toggle, .note-image-dialog .btn-group > .btn + .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.note-popover .btn-group > .btn.active, .o_css_editor .btn-group > .btn.active, .web_editor-dialog .btn-group > .btn.active, .note-image-dialog .btn-group > .btn.active {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.note-popover .btn-group .btn + .btn, .note-popover .btn-group .btn + .btn-group, .note-popover .btn-group + .btn, .note-popover .btn-group + .btn-group, .o_css_editor .btn-group .btn + .btn, .o_css_editor .btn-group .btn + .btn-group, .o_css_editor .btn-group + .btn, .o_css_editor .btn-group + .btn-group, .web_editor-dialog .btn-group .btn + .btn, .web_editor-dialog .btn-group .btn + .btn-group, .web_editor-dialog .btn-group + .btn, .web_editor-dialog .btn-group + .btn-group, .note-image-dialog .btn-group .btn + .btn, .note-image-dialog .btn-group .btn + .btn-group, .note-image-dialog .btn-group + .btn, .note-image-dialog .btn-group + .btn-group {
+  margin-left: -1px;
+}
+.note-popover .btn-link, .o_css_editor .btn-link, .web_editor-dialog .btn-link, .note-image-dialog .btn-link {
+  border-color: transparent;
+  color: #428bca;
+}
+.note-popover .btn-link:hover, .note-popover .btn-link:focus, .o_css_editor .btn-link:hover, .o_css_editor .btn-link:focus, .web_editor-dialog .btn-link:hover, .web_editor-dialog .btn-link:focus, .note-image-dialog .btn-link:hover, .note-image-dialog .btn-link:focus {
+  color: #2a6496;
+  text-decoration: underline;
+  background-color: transparent;
+}
+.note-popover .form-group, .o_css_editor .form-group, .web_editor-dialog .form-group, .note-image-dialog .form-group {
+  margin-bottom: 15px;
+}
+.note-popover .form-control, .o_css_editor .form-control, .web_editor-dialog .form-control, .note-image-dialog .form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.note-popover .form-horizontal .form-group, .o_css_editor .form-horizontal .form-group, .web_editor-dialog .form-horizontal .form-group, .note-image-dialog .form-horizontal .form-group {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.note-popover .form-group, .o_css_editor .form-group, .web_editor-dialog .form-group, .note-image-dialog .form-group {
+  margin-bottom: 15px;
+}
+.note-popover .form-control.select2-container, .o_css_editor .form-control.select2-container, .web_editor-dialog .form-control.select2-container, .note-image-dialog .form-control.select2-container {
+  height: auto !important;
+  padding: 0;
+}
+.note-popover label, .o_css_editor label, .web_editor-dialog label, .note-image-dialog label {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+.note-popover .col-sm-1, .note-popover .col-sm-2, .note-popover .col-sm-3, .note-popover .col-sm-4, .note-popover .col-sm-5, .note-popover .col-sm-6, .note-popover .col-sm-7, .note-popover .col-sm-8, .note-popover .col-sm-9, .note-popover .col-sm-10, .note-popover .col-sm-11, .note-popover .col-sm-12, .note-popover .col-lg-12, .o_css_editor .col-sm-1, .o_css_editor .col-sm-2, .o_css_editor .col-sm-3, .o_css_editor .col-sm-4, .o_css_editor .col-sm-5, .o_css_editor .col-sm-6, .o_css_editor .col-sm-7, .o_css_editor .col-sm-8, .o_css_editor .col-sm-9, .o_css_editor .col-sm-10, .o_css_editor .col-sm-11, .o_css_editor .col-sm-12, .o_css_editor .col-lg-12, .web_editor-dialog .col-sm-1, .web_editor-dialog .col-sm-2, .web_editor-dialog .col-sm-3, .web_editor-dialog .col-sm-4, .web_editor-dialog .col-sm-5, .web_editor-dialog .col-sm-6, .web_editor-dialog .col-sm-7, .web_editor-dialog .col-sm-8, .web_editor-dialog .col-sm-9, .web_editor-dialog .col-sm-10, .web_editor-dialog .col-sm-11, .web_editor-dialog .col-sm-12, .web_editor-dialog .col-lg-12, .note-image-dialog .col-sm-1, .note-image-dialog .col-sm-2, .note-image-dialog .col-sm-3, .note-image-dialog .col-sm-4, .note-image-dialog .col-sm-5, .note-image-dialog .col-sm-6, .note-image-dialog .col-sm-7, .note-image-dialog .col-sm-8, .note-image-dialog .col-sm-9, .note-image-dialog .col-sm-10, .note-image-dialog .col-sm-11, .note-image-dialog .col-sm-12, .note-image-dialog .col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+  width: 100%;
+}
+.note-popover .dropdown, .o_css_editor .dropdown, .web_editor-dialog .dropdown, .note-image-dialog .dropdown {
+  position: relative;
+}
+.note-popover .dropdown > .btn, .note-popover .btn-group > .btn, .o_css_editor .dropdown > .btn, .o_css_editor .btn-group > .btn, .web_editor-dialog .dropdown > .btn, .web_editor-dialog .btn-group > .btn, .note-image-dialog .dropdown > .btn, .note-image-dialog .btn-group > .btn {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+  text-decoration: none;
+}
+.note-popover .dropdown > .btn-primary, .note-popover .btn-group > .btn-primary, .o_css_editor .dropdown > .btn-primary, .o_css_editor .btn-group > .btn-primary, .web_editor-dialog .dropdown > .btn-primary, .web_editor-dialog .btn-group > .btn-primary, .note-image-dialog .dropdown > .btn-primary, .note-image-dialog .btn-group > .btn-primary {
+  color: #fff;
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+.note-popover .dropdown-menu, .o_css_editor .dropdown-menu, .web_editor-dialog .dropdown-menu, .note-image-dialog .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+}
+.note-popover .dropdown-menu > li > a, .o_css_editor .dropdown-menu > li > a, .web_editor-dialog .dropdown-menu > li > a, .note-image-dialog .dropdown-menu > li > a {
+  display: block !important;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  color: #666;
+  white-space: nowrap;
+  background: transparent;
+}
+.note-popover .dropdown-menu > li.active > a, .o_css_editor .dropdown-menu > li.active > a, .web_editor-dialog .dropdown-menu > li.active > a, .note-image-dialog .dropdown-menu > li.active > a {
+  color: #fff;
+  text-decoration: none;
+  background-color: #428bca;
+  outline: 0;
+}
+.note-popover .open > .dropdown-menu, .o_css_editor .open > .dropdown-menu, .web_editor-dialog .open > .dropdown-menu, .note-image-dialog .open > .dropdown-menu {
+  display: block;
+}
+.note-popover .list-group, .o_css_editor .list-group, .web_editor-dialog .list-group, .note-image-dialog .list-group {
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+.note-popover .list-group-item, .o_css_editor .list-group-item, .web_editor-dialog .list-group-item, .note-image-dialog .list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+.note-popover .list-group-item:first-child, .o_css_editor .list-group-item:first-child, .web_editor-dialog .list-group-item:first-child, .note-image-dialog .list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.note-popover .list-group-item:last-child, .o_css_editor .list-group-item:last-child, .web_editor-dialog .list-group-item:last-child, .note-image-dialog .list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.note-popover .list-group-item-heading, .o_css_editor .list-group-item-heading, .web_editor-dialog .list-group-item-heading, .note-image-dialog .list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.note-popover .list-group-item.active, .o_css_editor .list-group-item.active, .web_editor-dialog .list-group-item.active, .note-image-dialog .list-group-item.active {
+  z-index: 2;
+  color: #fff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+.note-popover .tab-content > .tab-pane, .o_css_editor .tab-content > .tab-pane, .web_editor-dialog .tab-content > .tab-pane, .note-image-dialog .tab-content > .tab-pane {
+  display: none;
+}
+.note-popover .tab-content > .active, .o_css_editor .tab-content > .active, .web_editor-dialog .tab-content > .active, .note-image-dialog .tab-content > .active {
+  display: block;
+}
+.note-popover .nav, .o_css_editor .nav, .web_editor-dialog .nav, .note-image-dialog .nav {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+.note-popover .nav > li, .o_css_editor .nav > li, .web_editor-dialog .nav > li, .note-image-dialog .nav > li {
+  position: relative;
+  display: block;
+}
+.note-popover .nav > li > a, .o_css_editor .nav > li > a, .web_editor-dialog .nav > li > a, .note-image-dialog .nav > li > a {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+}
+.note-popover .nav-tabs, .o_css_editor .nav-tabs, .web_editor-dialog .nav-tabs, .note-image-dialog .nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+.note-popover .nav-tabs > li, .o_css_editor .nav-tabs > li, .web_editor-dialog .nav-tabs > li, .note-image-dialog .nav-tabs > li {
+  float: left;
+  margin-bottom: -1px;
+}
+.note-popover .nav-tabs > li > a, .o_css_editor .nav-tabs > li > a, .web_editor-dialog .nav-tabs > li > a, .note-image-dialog .nav-tabs > li > a {
+  margin-right: 2px;
+  line-height: 1.42857;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+}
+.note-popover .nav-tabs > li.active > a, .note-popover .nav-tabs > li.active > a:hover, .note-popover .nav-tabs > li.active > a:focus, .o_css_editor .nav-tabs > li.active > a, .o_css_editor .nav-tabs > li.active > a:hover, .o_css_editor .nav-tabs > li.active > a:focus, .web_editor-dialog .nav-tabs > li.active > a, .web_editor-dialog .nav-tabs > li.active > a:hover, .web_editor-dialog .nav-tabs > li.active > a:focus, .note-image-dialog .nav-tabs > li.active > a, .note-image-dialog .nav-tabs > li.active > a:hover, .note-image-dialog .nav-tabs > li.active > a:focus {
+  color: #8c8c8c;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+.note-popover .pager, .o_css_editor .pager, .web_editor-dialog .pager, .note-image-dialog .pager {
+  padding-left: 0;
+  margin: 20px 0;
+  list-style: none;
+  text-align: center;
+}
+.note-popover .pager li, .o_css_editor .pager li, .web_editor-dialog .pager li, .note-image-dialog .pager li {
+  display: inline;
+}
+.note-popover .pager li > a, .note-popover .pager li > span, .o_css_editor .pager li > a, .o_css_editor .pager li > span, .web_editor-dialog .pager li > a, .web_editor-dialog .pager li > span, .note-image-dialog .pager li > a, .note-image-dialog .pager li > span {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+}
+.note-popover .pager .previous > a, .note-popover .pager .previous > span, .o_css_editor .pager .previous > a, .o_css_editor .pager .previous > span, .web_editor-dialog .pager .previous > a, .web_editor-dialog .pager .previous > span, .note-image-dialog .pager .previous > a, .note-image-dialog .pager .previous > span {
+  float: left;
+}
+.note-popover .pager .disabled > a, .note-popover .pager .disabled > a:hover, .note-popover .pager .disabled > a:focus, .note-popover .pager .disabled > span, .o_css_editor .pager .disabled > a, .o_css_editor .pager .disabled > a:hover, .o_css_editor .pager .disabled > a:focus, .o_css_editor .pager .disabled > span, .web_editor-dialog .pager .disabled > a, .web_editor-dialog .pager .disabled > a:hover, .web_editor-dialog .pager .disabled > a:focus, .web_editor-dialog .pager .disabled > span, .note-image-dialog .pager .disabled > a, .note-image-dialog .pager .disabled > a:hover, .note-image-dialog .pager .disabled > a:focus, .note-image-dialog .pager .disabled > span {
+  color: #b3b3b3;
+  background-color: #fff;
+  cursor: not-allowed;
+}
+.note-popover .dropdown-submenu, .o_css_editor .dropdown-submenu, .web_editor-dialog .dropdown-submenu, .note-image-dialog .dropdown-submenu {
+  position: relative;
+  z-index: 1000;
+}
+.note-popover .dropdown-submenu > .dropdown-menu, .o_css_editor .dropdown-submenu > .dropdown-menu, .web_editor-dialog .dropdown-submenu > .dropdown-menu, .note-image-dialog .dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
+.note-popover .dropdown-submenu:hover > .dropdown-menu, .o_css_editor .dropdown-submenu:hover > .dropdown-menu, .web_editor-dialog .dropdown-submenu:hover > .dropdown-menu, .note-image-dialog .dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.note-popover .dropdown-submenu:hover > a:after, .o_css_editor .dropdown-submenu:hover > a:after, .web_editor-dialog .dropdown-submenu:hover > a:after, .note-image-dialog .dropdown-submenu:hover > a:after {
+  border-left-color: #ffffff;
+}
+.note-popover .dropdown-submenu > a:after, .o_css_editor .dropdown-submenu > a:after, .web_editor-dialog .dropdown-submenu > a:after, .note-image-dialog .dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.note-popover .dropdown-submenu.pull-left, .o_css_editor .dropdown-submenu.pull-left, .web_editor-dialog .dropdown-submenu.pull-left, .note-image-dialog .dropdown-submenu.pull-left {
+  float: none;
+}
+.note-popover .dropdown-submenu.pull-left > .dropdown-menu, .o_css_editor .dropdown-submenu.pull-left > .dropdown-menu, .web_editor-dialog .dropdown-submenu.pull-left > .dropdown-menu, .note-image-dialog .dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}
+.note-popover .hidden, .o_css_editor .hidden, .web_editor-dialog .hidden, .note-image-dialog .hidden {
+  display: none !important;
+}
+.note-popover .img-responsive, .o_css_editor .img-responsive, .web_editor-dialog .img-responsive, .note-image-dialog .img-responsive {
+  display: block;
+  width: 100% \9;
+  max-width: 100%;
+  height: auto;
+}
+.note-popover .well, .o_css_editor .well, .web_editor-dialog .well, .note-image-dialog .well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+.note-popover .sr-only, .o_css_editor .sr-only, .web_editor-dialog .sr-only, .note-image-dialog .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.note-popover .text-center, .o_css_editor .text-center, .web_editor-dialog .text-center, .note-image-dialog .text-center {
+  text-align: center;
+}
+.note-popover .text-muted, .o_css_editor .text-muted, .web_editor-dialog .text-muted, .note-image-dialog .text-muted {
+  color: #b3b3b3;
+}
+
+.note-popover .btn {
+  height: 30px;
+}
+
+.note-popover, .o_css_editor {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857;
+  color: #666;
+}
+.note-popover button, .o_css_editor button {
+  margin: 0;
+}
+.note-popover a, .o_css_editor a {
+  color: #428bca;
+}
+.note-popover a:hover, .note-popover a:focus, .o_css_editor a:hover, .o_css_editor a:focus {
+  color: #2a6496;
+  text-decoration: underline;
+}
+.note-popover .popover, .o_css_editor .popover {
+  position: fixed !important;
+  top: 1px !important;
+  right: auto !important;
+  left: 300px !important;
+  margin-top: 0 !important;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  z-index: 1040;
+  padding: 1px;
+  text-align: left;
+  white-space: normal;
+  border-radius: 6px;
+  max-width: none;
+}
+.note-popover .popover .popover-content, .o_css_editor .popover .popover-content {
+  padding: 0;
+  margin: 0 0 0 6px;
+}
+.note-popover .popover .popover-content .note-para .dropdown-menu, .o_css_editor .popover .popover-content .note-para .dropdown-menu {
+  min-width: 148px !important;
+  padding: 5px 0 5px 5px !important;
+}
+.note-popover .popover .popover-content .note-ul .dropdown-menu, .o_css_editor .popover .popover-content .note-ul .dropdown-menu {
+  min-width: 150px !important;
+  padding: 5px 0 5px 5px !important;
+}
+.note-popover .popover .popover-content .note-ul .dropdown-menu .note-li, .o_css_editor .popover .popover-content .note-ul .dropdown-menu .note-li {
+  margin-right: 5px;
+}
+.note-popover .popover .popover-content .colorpicker, .o_css_editor .popover .popover-content .colorpicker {
+  margin: 0;
+}
+.note-popover .popover .popover-content .colorpicker td > *, .o_css_editor .popover .popover-content .colorpicker td > * {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  border: 1px solid #fff;
+}
+.note-popover .popover .popover-content .btn-group, .o_css_editor .popover .popover-content .btn-group {
+  margin: 0 5px 0 0;
+}
+.note-popover .popover .popover-content > a, .o_css_editor .popover .popover-content > a {
+  border-radius: 3px;
+  background-color: #fff;
+  border-color: #ccc;
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.note-popover .popover .popover-content > span, .o_css_editor .popover .popover-content > span {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  border-radius: 3px;
+  background-color: white;
+  border-color: #cccccc;
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.note-popover .arrow, .o_css_editor .arrow {
+  display: none;
+}
+
+.note-popover .btn-default, .o_css_editor .btn-default, .web_editor-dialog .modal-footer .btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+.note-popover .btn-primary, .o_css_editor .btn-primary, .web_editor-dialog .modal-footer .btn-primary {
+  color: #fff;
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+
+.web_editor-dialog, .note-image-dialog {
+  color: #666;
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1050;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+.web_editor-dialog .btn, .note-image-dialog .btn {
+  border-color: #ccc;
+}
+.web_editor-dialog .btn-link, .note-image-dialog .btn-link {
+  border-color: transparent;
+}
+.web_editor-dialog .btn-primary, .note-image-dialog .btn-primary {
+  color: #fff;
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+.web_editor-dialog .btn-danger, .note-image-dialog .btn-danger {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+.web_editor-dialog .modal-header a, .web_editor-dialog .modal-footer a, .note-image-dialog .modal-header a, .note-image-dialog .modal-footer a {
+  color: #428bca;
+}
+.web_editor-dialog .modal-header a:hover, .web_editor-dialog .modal-header a:focus, .web_editor-dialog .modal-footer a:hover, .web_editor-dialog .modal-footer a:focus, .note-image-dialog .modal-header a:hover, .note-image-dialog .modal-header a:focus, .note-image-dialog .modal-footer a:hover, .note-image-dialog .modal-footer a:focus {
+  color: #2a6496;
+  text-decoration: underline;
+}
+.web_editor-dialog .modal-header .btn, .web_editor-dialog .modal-footer .btn, .note-image-dialog .modal-header .btn, .note-image-dialog .modal-footer .btn {
+  border-color: #ccc;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857;
+  border-radius: 4px;
+}
+.web_editor-dialog .link-style .dropdown > .btn, .note-image-dialog .link-style .dropdown > .btn {
+  min-width: 160px;
+}
+.web_editor-dialog .link-style li, .note-image-dialog .link-style li {
+  text-align: center;
+}
+.web_editor-dialog .link-style li label, .note-image-dialog .link-style li label {
+  width: 100px;
+  margin: 0 5px;
+}
+.web_editor-dialog .link-style li label input.link-style, .note-image-dialog .link-style li label input.link-style {
+  display: none;
+}
+.web_editor-dialog .modal-title, .note-image-dialog .modal-title {
+  margin: 0;
+  line-height: 1.42857;
+}
+.web_editor-dialog .modal-dialog, .note-image-dialog .modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 10px;
+}
+.web_editor-dialog .modal-content, .note-image-dialog .modal-content {
+  position: relative;
+  background-color: #fff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  background-clip: padding-box;
+  outline: 0;
+}
+.web_editor-dialog .modal-header, .note-image-dialog .modal-header {
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+  min-height: 16.43px;
+}
+.web_editor-dialog .modal-header .close, .note-image-dialog .modal-header .close {
+  margin-top: -2px;
+}
+.web_editor-dialog .modal-body, .note-image-dialog .modal-body {
+  position: relative;
+  padding: 15px;
+}
+.web_editor-dialog .modal-footer, .note-image-dialog .modal-footer {
+  text-align: left;
+  padding: 15px;
+  border-top: 1px solid #e5e5e5;
+}
+.web_editor-dialog .close, .note-image-dialog .close {
+  float: right;
+  font-size: 21px;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+.web_editor-dialog button.close, .note-image-dialog button.close {
+  padding: 0;
+  cursor: pointer;
+  background: 0 0;
+  border: 0;
+  -webkit-appearance: none;
+}
+
+.note-image-dialog .btn {
+  height: 34px;
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  .web_editor-dialog .modal-dialog, .note-image-dialog .modal-dialog {
+    width: 600px;
+    margin: 30px auto;
+  }
+  .web_editor-dialog .modal-content, .note-image-dialog .modal-content {
+    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  }
+
+  .note-popover .col-sm-1, .note-popover .col-sm-2, .note-popover .col-sm-3, .note-popover .col-sm-4, .note-popover .col-sm-5, .note-popover .col-sm-6, .note-popover .col-sm-7, .note-popover .col-sm-8, .note-popover .col-sm-9, .note-popover .col-sm-10, .note-popover .col-sm-11, .note-popover .col-sm-12, .o_css_editor .col-sm-1, .o_css_editor .col-sm-2, .o_css_editor .col-sm-3, .o_css_editor .col-sm-4, .o_css_editor .col-sm-5, .o_css_editor .col-sm-6, .o_css_editor .col-sm-7, .o_css_editor .col-sm-8, .o_css_editor .col-sm-9, .o_css_editor .col-sm-10, .o_css_editor .col-sm-11, .o_css_editor .col-sm-12, .web_editor-dialog .col-sm-1, .web_editor-dialog .col-sm-2, .web_editor-dialog .col-sm-3, .web_editor-dialog .col-sm-4, .web_editor-dialog .col-sm-5, .web_editor-dialog .col-sm-6, .web_editor-dialog .col-sm-7, .web_editor-dialog .col-sm-8, .web_editor-dialog .col-sm-9, .web_editor-dialog .col-sm-10, .web_editor-dialog .col-sm-11, .web_editor-dialog .col-sm-12, .note-image-dialog .col-sm-1, .note-image-dialog .col-sm-2, .note-image-dialog .col-sm-3, .note-image-dialog .col-sm-4, .note-image-dialog .col-sm-5, .note-image-dialog .col-sm-6, .note-image-dialog .col-sm-7, .note-image-dialog .col-sm-8, .note-image-dialog .col-sm-9, .note-image-dialog .col-sm-10, .note-image-dialog .col-sm-11, .note-image-dialog .col-sm-12 {
+    float: left;
+  }
+  .note-popover .col-sm-12, .o_css_editor .col-sm-12, .web_editor-dialog .col-sm-12, .note-image-dialog .col-sm-12 {
+    width: 100%;
+  }
+  .note-popover .col-sm-11, .o_css_editor .col-sm-11, .web_editor-dialog .col-sm-11, .note-image-dialog .col-sm-11 {
+    width: 91.66667%;
+  }
+  .note-popover .col-sm-10, .o_css_editor .col-sm-10, .web_editor-dialog .col-sm-10, .note-image-dialog .col-sm-10 {
+    width: 83.33333%;
+  }
+  .note-popover .col-sm-9, .o_css_editor .col-sm-9, .web_editor-dialog .col-sm-9, .note-image-dialog .col-sm-9 {
+    width: 75%;
+  }
+  .note-popover .col-sm-8, .o_css_editor .col-sm-8, .web_editor-dialog .col-sm-8, .note-image-dialog .col-sm-8 {
+    width: 66.66667%;
+  }
+  .note-popover .col-sm-7, .o_css_editor .col-sm-7, .web_editor-dialog .col-sm-7, .note-image-dialog .col-sm-7 {
+    width: 58.33333%;
+  }
+  .note-popover .col-sm-6, .o_css_editor .col-sm-6, .web_editor-dialog .col-sm-6, .note-image-dialog .col-sm-6 {
+    width: 50%;
+  }
+  .note-popover .col-sm-5, .o_css_editor .col-sm-5, .web_editor-dialog .col-sm-5, .note-image-dialog .col-sm-5 {
+    width: 41.66667%;
+  }
+  .note-popover .col-sm-4, .o_css_editor .col-sm-4, .web_editor-dialog .col-sm-4, .note-image-dialog .col-sm-4 {
+    width: 33.33333%;
+  }
+  .note-popover .col-sm-3, .o_css_editor .col-sm-3, .web_editor-dialog .col-sm-3, .note-image-dialog .col-sm-3 {
+    width: 25%;
+  }
+  .note-popover .col-sm-2, .o_css_editor .col-sm-2, .web_editor-dialog .col-sm-2, .note-image-dialog .col-sm-2 {
+    width: 16.66667%;
+  }
+  .note-popover .col-sm-1, .o_css_editor .col-sm-1, .web_editor-dialog .col-sm-1, .note-image-dialog .col-sm-1 {
+    width: 8.33333%;
+  }
+  .note-popover .form-horizontal .control-label, .o_css_editor .form-horizontal .control-label, .web_editor-dialog .form-horizontal .control-label, .note-image-dialog .form-horizontal .control-label {
+    text-align: right;
+    margin-bottom: 0;
+    padding-top: 7px;
+  }
+  .note-popover .form-inline .form-group, .o_css_editor .form-inline .form-group, .web_editor-dialog .form-inline .form-group, .note-image-dialog .form-inline .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+}
+.modal-open .web_editor-dialog, .modal-open .note-image-dialog {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.editor_enable .modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: #000;
+}
+.editor_enable .modal-backdrop.in {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+
+.note-image-dialog .select-media {
+  width: 80%;
+}
+.note-image-dialog .existing-attachments .pager {
+  margin: 0;
+}
+.note-image-dialog .existing-attachments .pager .disabled {
+  display: none;
+}
+.note-image-dialog .existing-attachments .existing-attachment-cell {
+  position: relative;
+}
+.note-image-dialog .existing-attachments .existing-attachment-cell .img {
+  border: 1px solid #848490;
+}
+.note-image-dialog .existing-attachments .existing-attachment-cell .existing-attachment-remove {
+  position: absolute;
+  top: 0;
+  left: 15px;
+  cursor: pointer;
+  background: white;
+  padding: 2px;
+  border: 1px solid #848490;
+  border-top: none;
+  border-left: none;
+  -moz-border-radius-bottomright: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.note-image-dialog .existing-attachments .existing-attachment-cell.media_selected > i, .note-image-dialog .existing-attachments .existing-attachment-cell.media_selected > img {
+  border-width: 5px;
+  border-color: #00f8f8;
+}
+.note-image-dialog .image-preview {
+  margin-bottom: 0.5em;
+}
+.note-image-dialog .font-icons-icons {
+  font-size: 2em;
+  max-height: 9em;
+  overflow: auto;
+}
+.note-image-dialog .font-icons-icons .font-icons-icon {
+  display: inline-block;
+  width: 2em;
+  padding: 0.25em;
+  text-align: center;
+  cursor: pointer;
+}
+.note-image-dialog .font-icons {
+  position: relative;
+  display: block;
+}
+.note-image-dialog .font-icons:before {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  position: absolute;
+  top: 2px;
+  left: 3px;
+  font-size: 2em;
+}
+.note-image-dialog #icon-search {
+  padding-left: 2.5em;
+}
+.note-image-dialog .font-icons-selected {
+  background-color: #ddd;
+}
+.note-image-dialog.nosave .wait {
+  display: inline-block !important;
+  visibility: visible !important;
+}
+.note-image-dialog.nosave .modal-body .filepicker, .note-image-dialog.nosave .modal-body .image-preview {
+  display: none;
+}
+.note-image-dialog.nosave .modal-body .wait {
+  width: 100%;
+}
+.note-image-dialog.nosave .modal-footer .save {
+  display: none;
+}
+.note-image-dialog .preview-container {
+  text-align: center;
+  line-height: 100px;
+  height: 100px;
+}
+.note-image-dialog .preview-container > * {
+  max-height: 100px;
+  line-height: 100px;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+/* }}} */
+/* ---- Default values ----  {{{ */
+.tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+.tooltip.in {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+.tooltip.bottom {
+  margin-top: 3px;
+  padding: 5px 0;
+}
+.tooltip.bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #000;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip-inner {
+  max-width: 200px;
+  padding: 3px 8px;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  background-color: #000;
+  border-radius: 4px;
+}
+
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+.pull-right {
+  float: right;
+}
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.pull-left {
+  float: left;
+}
+
+.img-responsive {
+  display: block;
+  width: 100% \9;
+  max-width: 100%;
+  height: auto;
+}
+
+.img-rounded {
+  border-radius: 6px;
+}
+
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  width: 100% \9;
+  max-width: 100%;
+  height: auto;
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-responsive {
+  text-align: center;
+}
+
+img.shadow {
+  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+}
+
+.fa-1x {
+  font-size: 1em;
+}
+
+.fa-2x {
+  font-size: 2em;
+}
+
+.fa-3x {
+  font-size: 3em;
+}
+
+.fa-4x {
+  font-size: 4em;
+}
+
+.fa-5x {
+  font-size: 5em;
+}
+
+.fa-6x {
+  font-size: 6em;
+}
+
+.fa-7x {
+  font-size: 7em;
+}
+
+.fa-8x {
+  font-size: 8em;
+}
+
+.fa-9x {
+  font-size: 9em;
+}
+
+.fa-10x {
+  font-size: 10em;
+}
+
+.text-primary {
+  color: #428bca;
+}
+
+.text-success {
+  color: #3c763d;
+}
+
+.text-info {
+  color: #31708f;
+}
+
+.text-warning {
+  color: #8a6d3b;
+}
+
+.text-danger {
+  color: #a94442;
+}
+
+.bg-primary {
+  color: #fff;
+  background-color: #428bca;
+}
+
+.bg-success {
+  background-color: #dff0d8;
+}
+
+.bg-info {
+  background-color: #d9edf7;
+}
+
+.bg-warning {
+  background-color: #fcf8e3;
+}
+
+.bg-danger {
+  background-color: #f2dede;
+}
+
+.hidden {
+  display: none;
+}
+
+/* }}} */
+/* ---- COLOR-PICKER ----  {{{ */
+.colorpicker {
+  margin: 0 auto;
+  background: transparent;
+  border: 0;
+}
+.colorpicker td {
+  padding: 0;
+  background: transparent;
+}
+.colorpicker td > * {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  margin: 3px;
+  padding: 0;
+  border-width: 1px;
+  display: block;
+}
+.colorpicker .only-text {
+  display: none;
+}
+.colorpicker .automatic-color {
+  background: #fff;
+  border-left: 7px solid #f33;
+  border-top: 7px solid #0e0;
+  border-right: 8px solid #33f;
+  border-bottom: 8px solid #fe0;
+  margin: 4px 3px 3px 3px;
+  width: 0;
+  height: 0;
+}
+
+/* }}} */
+/* ---- TRANSLATIONS ---- {{{ */
+.oe_translate_examples li {
+  margin: 10px;
+  padding: 4px;
+}
+
+html[lang] > body.editor_enable [data-oe-translation-state] {
+  background: rgba(255, 255, 90, 0.5) !important;
+}
+html[lang] > body.editor_enable [data-oe-translation-state]:hover {
+  background: inherit !important;
+  cursor: text;
+}
+html[lang] > body.editor_enable [data-oe-translation-state="translated"] {
+  background: rgba(120, 215, 110, 0.5) !important
+}
+
+html[data-translatable] .oe_field_translate {
+  display: block;
+}
+
+html[data-translatable] .oe_field_translate {
+  display: none;
+}
+
+/* }}} */
+/* ---- editable ----  {{{ */
+.o_editable:not(:empty):not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover, .o_editable[data-oe-type]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
+  /* to do change into primary color in less */
+  -moz-box-shadow: #3071a9 0 0 5px 2px inset;
+  -webkit-box-shadow: #3071a9 0 0 5px 2px inset;
+  box-shadow: #3071a9 0 0 5px 2px inset;
+}
+.o_editable:focus, .o_editable[data-oe-type] {
+  min-height: 0.8em;
+  min-width: 8px;
+}
+.o_editable.o_is_inline_editable {
+  display: inline-block;
+}
+.o_editable:focus {
+  outline: none !important;
+}
+
+/* Prevent the text contents of draggable elements from being selectable. */
+[draggable] {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.o_editable .btn, .btn.o_editable {
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+  cursor: text !important;
+}
+
+.o_editable .fa {
+  cursor: pointer;
+}
+
+.img-responsive {
+  text-align: center;
+}
+
+.css_editable_display {
+  display: block !important;
+}
+
+.css_editable_hidden {
+  display: none !important;
+}
+
+.editor_enable [data-oe-readonly]:hover {
+  cursor: default;
+}
+.editor_enable .css_editable_mode_hidden {
+  display: none;
+}
+.editor_enable .css_non_editable_mode_hidden {
+  display: block !important;
+}
+.editor_enable .media_iframe_video .css_editable_mode_display {
+  display: block !important;
+}
+
+.oe_empty[data-oe-placeholder]:empty {
+  min-height: 220px !important;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.oe_empty[data-oe-placeholder]:empty:not(.o_editable) {
+  background-image: url("/web_editor/static/src/img/edit_here.png") !important;
+}
+.oe_empty[data-oe-placeholder]:empty:after, .oe_empty[data-oe-placeholder]:empty:before {
+  opacity: 0.4;
+  overflow: hidden;
+  z-index: -1;
+  min-height: 1em;
+}
+.oe_empty[data-oe-placeholder]:empty:after {
+  text-align: center;
+  padding-top: 160px;
+  display: block;
+  content: "  " attr(data-oe-placeholder);
+  font-size: 24px;
+}
+.oe_empty[data-oe-placeholder]:empty.o_no_placeholder_image {
+  background-image: none;
+  text-align: left;
+  padding-top: 0;
+}
+.oe_empty[data-oe-placeholder]:empty[data-oe-type=html]:after {
+  font-size: 16px;
+}
+
+.editor_has_snippets .oe_empty[data-oe-placeholder]:empty {
+  background-image: url("/web_editor/static/src/img/drag_here.png") !important;
+}
+
+#web_editor-top-edit {
+  width: 100%;
+  min-height: 34px;
+  height: 34px;
+  background-color: #222;
+  border-color: #080808;
+  border-width: 0 0 1px;
+  position: fixed;
+  border-radius: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+#web_editor-top-edit .btn-link {
+  color: #b3b3b3;
+}
+#web_editor-top-edit > ul > li {
+  margin: 0;
+}
+#web_editor-top-edit form {
+  padding: 0 10px 0 15px;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  margin: 0;
+}
+#web_editor-top-edit form button, #web_editor-top-edit form a {
+  padding: 4px 8px 4px 8px;
+  margin-top: 2px;
+  font-size: 13px;
+}
+
+#editable_area {
+  margin-top: 34px;
+}
+
+/* }}} */
+/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */
+.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
+  position: static;
+}
+
+.css_editable_display {
+  display: none;
+}
+
+.oe_carlos_danger {
+  outline: 1px solid red !important;
+  background-color: #ffd9dd !important;
+}
+
+/* }}} */
diff --git a/addons/web_editor/static/src/css/editor.sass b/addons/web_editor/static/src/css/editor.sass
new file mode 100644
index 00000000000..da05b02145e
--- /dev/null
+++ b/addons/web_editor/static/src/css/editor.sass
@@ -0,0 +1,984 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+@import "compass/support"
+
+
+/* ---- EDITOR BAR ---- {{{ */
+
+.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog
+    *
+        box-sizing: border-box
+    a
+        text-decoration: none
+    ul, ol
+        margin-top: 0
+        margin-bottom: 10px
+
+    .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after
+        content: " "
+        display: table
+        clear: both
+
+    .caret
+        display: inline-block
+        width: 0
+        height: 0
+        vertical-align: middle
+        border-top: 4px solid
+        border-right: 4px solid transparent
+        border-left: 4px solid transparent
+
+    /* button */
+
+    .btn.dropdown-toggle
+        position: relative
+        float: left
+    .btn
+        display: inline-block
+        margin-bottom: 0
+        font-weight: 400
+        text-align: center
+        vertical-align: middle
+        cursor: pointer
+        background-image: none
+        border: 1px solid transparent
+        white-space: nowrap
+        -webkit-user-select: none
+        -moz-user-select: none
+        -ms-user-select: none
+        user-select: none
+        border-radius: 4px
+        .caret
+            margin-left: 0
+        &.disabled, &[disabled], &.disabled:hover, &[disabled]:active
+            cursor: not-allowed
+            pointer-events: none
+            opacity: .65
+            filter: alpha(opacity=65)
+            -webkit-box-shadow: none
+            box-shadow: none
+    .btn-sm
+        padding: 5px 10px
+        font-size: 12px
+        line-height: 1.5
+        border-radius: 3px
+    .btn-group
+        padding-top: 0
+        margin-top: 0
+        position: relative
+        display: inline-block
+        vertical-align: middle
+        > .btn
+            position: relative
+            float: left
+            &:first-child
+                margin-left: 0
+            &:first-child:not(:last-child):not(.dropdown-toggle)
+                border-top-right-radius: 0
+                border-bottom-right-radius: 0
+            &:not(:first-child):not(:last-child):not(.dropdown-toggle)
+                border-radius: 0
+            &:last-child:not(:first-child), >.dropdown-toggle:not(:first-child)
+                border-bottom-left-radius: 0
+                border-top-left-radius: 0
+            &+.dropdown-toggle
+                padding-left: 8px
+                padding-right: 8px
+            &.active
+                color: #333
+                background-color: #e6e6e6
+                border-color: #adadad
+        .btn+.btn, .btn+.btn-group, +.btn, +.btn-group
+            margin-left: -1px
+    .btn-link
+        border-color: transparent
+        color: #428bca
+        &:hover, &:focus
+            color: #2a6496
+            text-decoration: underline
+            background-color: transparent
+
+    /* form */
+
+    .form-group
+        margin-bottom: 15px
+    .form-control
+        display: block
+        width: 100%
+        height: 34px
+        padding: 6px 12px
+        font-size: 14px
+        line-height: 1.42857143
+        color: #555
+        background-color: #fff
+        background-image: none
+        border: 1px solid #ccc
+        border-radius: 4px
+        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
+    .form-horizontal .form-group
+        margin-left: -15px
+        margin-right: -15px
+    .form-group
+        margin-bottom: 15px
+    .form-control.select2-container
+        height: auto !important
+        padding: 0
+    label
+        display: inline-block
+        max-width: 100%
+        margin-bottom: 5px
+        font-weight: 700
+
+    /* col */
+
+    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-lg-12
+        position: relative
+        min-height: 1px
+        padding-left: 15px
+        padding-right: 15px
+        width: 100%
+
+    /* dropdown */
+
+    .dropdown
+        position: relative
+    .dropdown, .btn-group
+        > .btn
+            color: #333
+            background-color: #fff
+            border-color: #ccc
+            text-decoration: none
+        > .btn-primary
+            color: #fff
+            background-color: #428bca
+            border-color: #357ebd
+    .dropdown-menu
+        position: absolute
+        top: 100%
+        left: 0
+        z-index: 1000
+        display: none
+        float: left
+        min-width: 160px
+        padding: 5px 0
+        margin: 2px 0 0
+        list-style: none
+        font-size: 14px
+        text-align: left
+        background-color: #fff
+        border: 1px solid #ccc
+        border: 1px solid rgba(0,0,0,.15)
+        border-radius: 4px
+        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175)
+        box-shadow: 0 6px 12px rgba(0,0,0,.175)
+        background-clip: padding-box
+        > li > a
+            display: block !important
+            padding: 3px 20px
+            clear: both
+            font-weight: normal
+            color: #666
+            white-space: nowrap
+            background: transparent
+        > li.active > a
+            color: #fff
+            text-decoration: none
+            background-color: #428bca
+            outline: 0
+    .open > .dropdown-menu
+        display: block
+
+    /* list-group */
+
+    .list-group
+        margin-bottom: 20px
+        padding-left: 0
+    .list-group-item
+        position: relative
+        display: block
+        padding: 10px 15px
+        margin-bottom: -1px
+        background-color: #fff
+        border: 1px solid #ddd
+    .list-group-item:first-child
+        border-top-right-radius: 4px
+        border-top-left-radius: 4px
+    .list-group-item:last-child
+        margin-bottom: 0
+        border-bottom-right-radius: 4px
+        border-bottom-left-radius: 4px
+    .list-group-item-heading
+        margin-top: 0
+        margin-bottom: 5px
+    .list-group-item.active
+        z-index: 2
+        color: #fff
+        background-color: #428bca
+        border-color: #428bca
+
+    /* tab */
+
+    .tab-content > .tab-pane
+        display: none
+    .tab-content > .active
+        display: block
+    .nav
+        margin-bottom: 0
+        padding-left: 0
+        list-style: none
+    .nav > li
+        position: relative
+        display: block
+    .nav > li > a
+        position: relative
+        display: block
+        padding: 10px 15px
+    .nav-tabs
+        border-bottom: 1px solid #ddd
+    .nav-tabs > li
+        float: left
+        margin-bottom: -1px
+    .nav-tabs > li > a
+        margin-right: 2px
+        line-height: 1.42857143
+        border: 1px solid transparent
+        border-radius: 4px 4px 0 0
+    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
+        color: #8c8c8c
+        background-color: #fff
+        border: 1px solid #ddd
+        border-bottom-color: transparent
+        cursor: default
+
+    /* pager */
+
+    .pager
+        padding-left: 0
+        margin: 20px 0
+        list-style: none
+        text-align: center
+        li
+            display: inline
+        li > a, li > span
+            display: inline-block
+            padding: 5px 14px
+            background-color: #fff
+            border: 1px solid #ddd
+            border-radius: 15px
+        .previous > a, .previous > span
+            float: left
+        .disabled > a, .disabled > a:hover, .disabled > a:focus, .disabled > span
+            color: #b3b3b3
+            background-color: #fff
+            cursor: not-allowed
+
+    /* add submenu css */
+
+    .dropdown-submenu
+        position: relative
+        z-index: 1000
+    .dropdown-submenu
+        &>.dropdown-menu
+            top: 0
+            left: 100%
+            margin-top: -6px
+            margin-left: -1px
+            -webkit-border-radius: 0 6px 6px 6px
+            -moz-border-radius: 0 6px 6px 6px
+            border-radius: 0 6px 6px 6px
+        &:hover
+            &>.dropdown-menu
+                display: block
+            &>a:after
+                border-left-color: #ffffff
+        &>a:after
+            display: block
+            content: " "
+            float: right
+            width: 0
+            height: 0
+            border-color: transparent
+            border-style: solid
+            border-width: 5px 0 5px 5px
+            border-left-color: #cccccc
+            margin-top: 5px
+            margin-right: -10px
+        &.pull-left
+            float: none
+            &>.dropdown-menu
+                left: -100%
+                margin-left: 10px
+                -webkit-border-radius: 6px 0 6px 6px
+                -moz-border-radius: 6px 0 6px 6px
+                border-radius: 6px 0 6px 6px
+
+    /* global */
+
+    .hidden
+        display: none !important
+    .img-responsive
+        display: block
+        width: 100% \9
+        max-width: 100%
+        height: auto
+    .well
+        min-height: 20px
+        padding: 19px
+        margin-bottom: 20px
+        background-color: #f5f5f5
+        border: 1px solid #e3e3e3
+        border-radius: 4px
+        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05)
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.05)
+    .sr-only
+        position: absolute
+        width: 1px
+        height: 1px
+        margin: -1px
+        padding: 0
+        overflow: hidden
+        clip: rect(0,0,0,0)
+        border: 0
+    .text-center
+        text-align: center
+    .text-muted
+        color: #b3b3b3
+
+.note-popover .btn
+    height: 30px
+.note-popover, .o_css_editor
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
+    font-size: 14px
+    line-height: 1.42857143
+    color: #666
+    button
+        margin: 0
+    a
+        color: #428bca
+        &:hover, &:focus
+            color: #2a6496
+            text-decoration: underline
+
+    .popover
+        position: fixed !important
+        top: 1px !important
+        right: auto !important
+        left: 300px !important
+        margin-top: 0 !important
+        border: 0
+        background: transparent
+        box-shadow: none
+        -webkit-box-shadow: none
+        z-index: 1040
+        padding: 1px
+        text-align: left
+        white-space: normal
+        border-radius: 6px
+        max-width: none
+        .popover-content
+            padding: 0
+            margin: 0 0 0 6px
+            .note-para .dropdown-menu
+                min-width: 148px !important
+                padding: 5px 0 5px 5px !important
+            .note-ul .dropdown-menu
+                min-width: 150px !important
+                padding: 5px 0 5px 5px !important
+                .note-li
+                    margin-right: 5px
+            .colorpicker
+                margin: 0
+                td > *
+                    width: 20px
+                    height: 20px
+                    padding: 0
+                    margin: 0
+                    border: 1px solid #fff
+            .btn-group
+                margin: 0 5px 0 0
+            > a
+                border-radius: 3px
+                background-color: #fff
+                border-color: #ccc
+                padding: 4px 10px
+                font-size: 14px
+                line-height: 1.5
+            > span
+                display: inline-block
+                max-width: 200px
+                overflow: hidden
+                text-overflow: ellipsis
+                white-space: nowrap
+                vertical-align: middle
+                border-radius: 3px
+                background-color: white
+                border-color: #cccccc
+                padding: 4px 10px
+                font-size: 14px
+                line-height: 1.5
+    .arrow
+        display: none
+
+.note-popover, .o_css_editor, .web_editor-dialog .modal-footer
+    .btn-default
+        color: #333
+        background-color: #fff
+        border-color: #ccc
+    .btn-primary
+        color: #fff
+        background-color: #428bca
+        border-color: #357ebd
+
+.web_editor-dialog, .note-image-dialog
+    color: #666
+    display: none
+    overflow: hidden
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: 1050
+    -webkit-overflow-scrolling: touch
+    outline: 0
+    .btn
+        border-color: #ccc
+    .btn-link
+        border-color: transparent
+    .btn-primary
+        color: #fff
+        background-color: #428bca
+        border-color: #357ebd
+    .btn-danger
+        color: #fff
+        background-color: #d9534f
+        border-color: #d43f3a
+    .modal-header, .modal-footer
+        a
+            color: #428bca
+            &:hover, &:focus
+                color: #2a6496
+                text-decoration: underline
+        .btn
+            border-color: #ccc
+            padding: 6px 12px
+            font-size: 14px
+            line-height: 1.42857143
+            border-radius: 4px
+    .link-style
+        .dropdown > .btn
+            min-width: 160px
+        li
+            text-align: center
+            label
+                width: 100px
+                margin: 0 5px
+                input.link-style
+                    display: none
+    .modal-title
+        margin: 0
+        line-height: 1.42857143
+    .modal-dialog 
+        position: relative
+        width: auto
+        margin: 10px
+    .modal-content
+        position: relative
+        background-color: #fff
+        border: 1px solid #999
+        border: 1px solid rgba(0,0,0,.2)
+        border-radius: 6px
+        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5)
+        box-shadow: 0 3px 9px rgba(0,0,0,.5)
+        background-clip: padding-box
+        outline: 0
+    .modal-header
+        padding: 15px
+        border-bottom: 1px solid #e5e5e5
+        min-height: 16.43px
+        .close
+            margin-top: -2px
+    .modal-body
+        position: relative
+        padding: 15px
+    .modal-footer
+        text-align: left
+        padding: 15px
+        border-top: 1px solid #e5e5e5
+    .close
+        float: right
+        font-size: 21px
+        font-weight: 700
+        line-height: 1
+        color: #000
+        text-shadow: 0 1px 0 #fff
+        opacity: .2
+        filter: alpha(opacity=20)
+    button.close
+        padding: 0
+        cursor: pointer
+        background: 0 0
+        border: 0
+        -webkit-appearance: none
+
+.note-image-dialog .btn
+    height: 34px
+    font-size: 14px
+
+@media (min-width: 768px)
+    .web_editor-dialog, .note-image-dialog
+        .modal-dialog
+            width: 600px
+            margin: 30px auto
+        .modal-content
+            -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5)
+            box-shadow: 0 5px 15px rgba(0,0,0,.5)
+    .note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog
+        .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
+            float: left
+        .col-sm-12
+            width: 100%
+        .col-sm-11
+            width: 91.66666667%
+        .col-sm-10
+            width: 83.33333333%
+        .col-sm-9
+            width: 75%
+        .col-sm-8
+            width: 66.66666667%
+        .col-sm-7
+            width: 58.33333333%
+        .col-sm-6
+            width: 50%
+        .col-sm-5
+            width: 41.66666667%
+        .col-sm-4
+            width: 33.33333333%
+        .col-sm-3
+            width: 25%
+        .col-sm-2
+            width: 16.66666667%
+        .col-sm-1
+            width: 8.33333333%
+        .form-horizontal .control-label
+            text-align: right
+            margin-bottom: 0
+            padding-top: 7px
+        .form-inline .form-group
+            display: inline-block
+            margin-bottom: 0
+            vertical-align: middle
+
+.modal-open
+    .web_editor-dialog, .note-image-dialog
+        overflow-x: hidden
+        overflow-y: auto
+.editor_enable
+    .modal-backdrop
+        position: fixed
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        z-index: 1040
+        background-color: #000
+    .modal-backdrop.in
+        opacity: .5
+        filter: alpha(opacity=50)
+
+$attachment-border-color: #848490
+.note-image-dialog
+    .select-media
+        width: 80%
+
+    .existing-attachments .pager
+        margin: 0
+    .existing-attachments
+        .pager .disabled
+            display: none
+
+        .existing-attachment-cell
+            position: relative
+            .img
+                border: 1px solid $attachment-border-color
+            .existing-attachment-remove
+                position: absolute
+                top: 0
+                left: 15px // padding-left on col-*
+
+                cursor: pointer
+                background: white
+                padding: 2px
+                border: 1px solid $attachment-border-color
+                border-top: none
+                border-left: none
+                +border-bottom-right-radius(8px)
+            &.media_selected
+                > i, > img 
+                    border-width: 5px
+                    border-color: rgb(0, 248, 248)
+
+    .image-preview
+        margin-bottom: 0.5em
+    .font-icons-icons
+        font-size: 2em
+        max-height: 9em
+        overflow: auto
+        .font-icons-icon
+            display: inline-block
+            width: 2em
+            padding: 0.25em
+            text-align: center
+            cursor: pointer
+    .font-icons
+        position: relative
+        display: block
+
+        &:before
+            +opacity(0.7)
+            position: absolute
+            top: 2px
+            left: 3px
+            font-size: 2em
+    #icon-search
+        padding-left: 2.5em
+    .font-icons-selected
+        background-color: #ddd
+    &.nosave
+        .wait
+            display: inline-block !important
+            visibility: visible !important
+        .modal-body
+            .filepicker, .image-preview
+                display: none
+            .wait
+                width: 100%
+        .modal-footer .save
+            display: none
+    .preview-container
+        text-align: center
+        line-height: 100px
+        height: 100px
+        > *
+            max-height: 100px
+            line-height: 100px
+            margin: 0 auto
+            display: inline-block
+
+/* }}} */
+
+/* ---- Default values ----  {{{ */
+
+.tooltip
+    position: absolute
+    z-index: 1070
+    display: block
+    visibility: visible
+    font-size: 12px
+    line-height: 1.4
+    opacity: 0
+    filter: alpha(opacity=0)
+    &.in
+        opacity: .9
+        filter: alpha(opacity=90)
+    &.bottom
+        margin-top: 3px
+        padding: 5px 0
+        .tooltip-arrow
+            top: 0
+            left: 50%
+            margin-left: -5px
+            border-width: 0 5px 5px
+            border-bottom-color: #000
+.tooltip-arrow
+    position: absolute
+    width: 0
+    height: 0
+    border-color: transparent
+    border-style: solid
+.tooltip-inner
+    max-width: 200px
+    padding: 3px 8px
+    color: #fff
+    text-align: center
+    text-decoration: none
+    background-color: #000
+    border-radius: 4px
+.fade
+    opacity: 0
+    -webkit-transition: opacity .15s linear
+    -o-transition: opacity .15s linear
+    transition: opacity .15s linear
+.fade.in
+    opacity: 1
+.pull-right
+    float: right
+.center-block
+    display: block
+    margin-left: auto
+    margin-right: auto
+.pull-left 
+    float: left
+.img-responsive
+    display: block
+    width: 100% \9
+    max-width: 100%
+    height: auto
+.img-rounded
+    border-radius: 6px
+.img-thumbnail
+    padding: 4px
+    line-height: 1.42857143
+    background-color: #fff
+    border: 1px solid #ddd
+    border-radius: 4px
+    -webkit-transition: all .2s ease-in-out
+    -o-transition: all .2s ease-in-out
+    transition: all .2s ease-in-out
+    display: inline-block
+    width: 100% \9
+    max-width: 100%
+    height: auto
+.img-circle
+    border-radius: 50%
+.img-responsive
+    text-align: center
+img.shadow
+    -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
+    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
+.fa-1x
+    font-size: 1em
+.fa-2x
+    font-size: 2em
+.fa-3x
+    font-size: 3em
+.fa-4x
+    font-size: 4em
+.fa-5x
+    font-size: 5em
+.fa-6x
+    font-size: 6em
+.fa-7x
+    font-size: 7em
+.fa-8x
+    font-size: 8em
+.fa-9x
+    font-size: 9em
+.fa-10x
+    font-size: 10em
+.text-primary
+    color: #428bca
+.text-success
+    color: #3c763d
+.text-info
+    color: #31708f
+.text-warning
+    color: #8a6d3b
+.text-danger
+    color: #a94442
+.bg-primary
+    color: #fff
+    background-color: #428bca
+.bg-success
+    background-color: #dff0d8
+.bg-info
+    background-color: #d9edf7
+.bg-warning
+    background-color: #fcf8e3
+.bg-danger
+    background-color: #f2dede
+.hidden
+    display: none
+
+/* }}} */
+
+/* ---- COLOR-PICKER ----  {{{ */
+
+.colorpicker
+    margin: 0 auto
+    background: transparent
+    border: 0
+    td
+        padding: 0
+        background: transparent
+        > *
+            width: 16px
+            height: 16px
+            border-radius: 2px
+            margin: 3px
+            padding: 0
+            border-width: 1px
+            display: block
+    .only-text
+        display: none
+    .automatic-color
+        background: #fff
+        border-left: 7px solid #f33
+        border-top: 7px solid #0e0
+        border-right: 8px solid #33f
+        border-bottom: 8px solid #fe0
+        margin: 4px 3px 3px 3px
+        width: 0
+        height: 0
+
+/* }}} */
+
+/* ---- TRANSLATIONS ---- {{{ */
+
+o_translatable_translated
+
+.oe_translate_examples li
+    margin: 10px
+    padding: 4px
+html[lang] > body.editor_enable
+    [data-oe-translation-state]
+        background: rgba(255, 255, 90, 0.5) !important
+        &:hover
+            background: inherit !important
+            cursor: text
+    [data-oe-translation-state="translated"]
+        background: rgba(120, 215, 110, 0.5) !important
+html[data-translatable] .oe_field_translate
+    display: block
+html[data-translatable] .oe_field_translate
+    display: none
+
+/* }}} */
+
+/* ---- editable ----  {{{ */
+
+.o_editable
+    &:not(:empty),&[data-oe-type]
+        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover
+            /* to do change into primary color in less */
+            -moz-box-shadow: #3071a9 0 0 5px 2px inset
+            -webkit-box-shadow: #3071a9 0 0 5px 2px inset
+            box-shadow: #3071a9 0 0 5px 2px inset
+    &:focus,&[data-oe-type]
+        min-height: 0.8em
+        min-width: 8px
+    &.o_is_inline_editable
+        display: inline-block
+    &:focus
+        outline: none !important
+
+/* Prevent the text contents of draggable elements from being selectable. */
+[draggable]
+    -moz-user-select: none
+    -khtml-user-select: none
+    -webkit-user-select: none
+    user-select: none
+
+// bootstrap makes .btn elements unselectable -> RTE double-click can't know
+// about them either
+.o_editable .btn, .btn.o_editable
+    -webkit-user-select: auto
+    -moz-user-select: auto
+    -ms-user-select: auto
+    user-select: auto
+    cursor: text !important
+.o_editable .fa
+    cursor: pointer
+
+.img-responsive
+    text-align: center
+
+.css_editable_display
+    display: block !important
+
+.css_editable_hidden
+    display: none !important
+
+.editor_enable
+    [data-oe-readonly]:hover
+        cursor: default
+    .css_editable_mode_hidden
+        display: none
+    .css_non_editable_mode_hidden
+        display: block !important
+    .media_iframe_video .css_editable_mode_display
+        display: block !important
+ 
+.oe_empty[data-oe-placeholder]:empty
+    min-height: 220px !important
+    background-repeat: no-repeat
+    background-position: center
+
+    &:not(.o_editable)
+        background-image: url('/web_editor/static/src/img/edit_here.png') !important
+
+    &:after, &:before
+        opacity: 0.4
+        overflow: hidden
+        z-index: -1
+        min-height: 1em
+
+    &:after
+        text-align: center
+        padding-top: 160px
+        display: block
+        content: " \00a0 " attr(data-oe-placeholder)
+        font-size: 24px
+
+    &.o_no_placeholder_image
+        background-image: none
+        text-align: left
+        padding-top: 0
+
+    &[data-oe-type=html]
+        &:after
+            font-size: 16px
+.editor_has_snippets .oe_empty[data-oe-placeholder]:empty
+    background-image: url('/web_editor/static/src/img/drag_here.png') !important
+
+#web_editor-top-edit
+    width: 100%
+    min-height: 34px
+    height: 34px
+    background-color: #222
+    border-color: #080808
+    border-width: 0 0 1px
+    position: fixed
+    border-radius: 0
+    top: 0
+    right: 0
+    left: 0
+    z-index: 1030
+    -webkit-transform: translate3d(0,0,0)
+    transform: translate3d(0,0,0)
+    .btn-link
+        color: #b3b3b3
+    > ul > li
+        margin: 0
+    form
+        padding: 0 10px 0 15px
+        border-top: 1px solid transparent
+        border-bottom: 1px solid transparent
+        margin: 0
+        button, a
+            padding: 4px 8px 4px 8px
+            margin-top: 2px
+            font-size: 13px
+
+#editable_area
+    margin-top: 34px
+
+/* }}} */
+
+
+/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */
+
+.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
+    position: static
+
+.css_editable_display
+    display: none
+
+.oe_carlos_danger
+    outline: 1px solid red !important
+    background-color: #ffd9dd !important
+
+/* }}} */
diff --git a/addons/web_editor/static/src/css/inline.css b/addons/web_editor/static/src/css/inline.css
new file mode 100644
index 00000000000..61e995fa3fa
--- /dev/null
+++ b/addons/web_editor/static/src/css/inline.css
@@ -0,0 +1,64 @@
+body {
+    background-color: #fff;
+}
+#editable_area p {
+    margin: initial;
+}
+#editable_area a {
+    color: inherit;
+}
+#editable_area a:hover {
+    color: inherit;
+}
+#editable_area {
+    margin-top: 0 !important;
+    font: inherit !important;
+    line-height: inherit !important;
+    color: inherit !important;
+}
+#oe_snippets ~ #wrapwrap #editable_area {
+    margin-bottom: 100px;
+}
+
+#wrapwrap > main > div:first-child {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+}
+
+.editor_enable #wrapwrap > main > div:first-child {
+    border-top: 1px dashed #888;
+    margin-top: 50px;
+}
+
+.editor_enable #wrapwrap > main > div:first-child:before, #wrapwrap > main > div:first-child:after {
+    content: " ";
+    display: block;
+    height: 100%;
+    vertical-align: top;
+    position: fixed;
+    top: -4px;
+    overflow: hidden;
+    z-index: -1;
+    margin-top: 54px;
+}
+.editor_enable #wrapwrap > main > div:first-child[data-oe-placeholder]:empty:before {
+    content: " \00a0 " attr(data-oe-placeholder);
+}
+
+.editor_enable #wrapwrap > main > div:first-child:before {
+    border-left: 1px dashed #000;
+    opacity: 0.4;
+    margin-left: -5px;
+}
+.editor_enable #wrapwrap > main > div:first-child:after {
+    border-left: 1px dashed #000;
+    opacity: 0.4;
+    margin-left: 605px;
+    width: 0;
+}
+
+.note-color-palette .colorpicker {
+    display: none;
+}
diff --git a/addons/web_editor/static/src/css/snippets.css b/addons/web_editor/static/src/css/snippets.css
new file mode 100644
index 00000000000..ca2ba0c6deb
--- /dev/null
+++ b/addons/web_editor/static/src/css/snippets.css
@@ -0,0 +1,490 @@
+/* ---- SNIPPET EDITOR ---- {{{ */
+#oe_snippets #o_left_bar, #oe_snippets #o_arrow {
+  position: fixed;
+  top: 34px;
+  left: 0px;
+  bottom: 0;
+  background: #282828;
+  -moz-box-shadow: 0px 10px 10px -10px black inset;
+  -webkit-box-shadow: 0px 10px 10px -10px black inset;
+  box-shadow: 0px 10px 10px -10px black inset;
+}
+#oe_snippets #o_arrow {
+  z-index: 1009;
+  width: 24px;
+  opacity: 0.75;
+}
+#oe_snippets #o_arrow > * {
+  position: absolute;
+  color: white;
+}
+#oe_snippets #o_arrow div {
+  -moz-transform: translateX(-36%) rotate(-90deg);
+  -ms-transform: translateX(-36%) rotate(-90deg);
+  -webkit-transform: translateX(-36%) rotate(-90deg);
+  transform: translateX(-36%) rotate(-90deg);
+  top: 50%;
+  white-space: nowrap;
+}
+#oe_snippets #o_arrow .fa {
+  width: 100%;
+  left: 40%;
+}
+#oe_snippets #o_left_bar {
+  left: -228px;
+  z-index: 1010;
+  width: 208px;
+  -moz-transition: all 500ms ease;
+  -o-transition: all 500ms ease;
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+}
+#oe_snippets #o_left_bar ul {
+  text-align: center;
+  margin: 0;
+  padding: 6px 0;
+  list-style-type: none;
+}
+#oe_snippets #o_left_bar ul li {
+  display: inline-block;
+  padding: 0 3px;
+}
+#oe_snippets #o_left_bar ul li a {
+  color: #aaa;
+}
+#oe_snippets #o_left_bar ul li .fa-stack {
+  overflow: hidden;
+}
+#oe_snippets #o_left_bar ul li.active a.fa, #oe_snippets #o_left_bar ul li.active .fa-stack-1x {
+  color: #428bca;
+}
+#oe_snippets.o_open #o_left_bar {
+  left: 0;
+}
+#oe_snippets .o_panel {
+  margin: 0;
+  border: 0;
+  width: 208px;
+}
+#oe_snippets .o_panel_header {
+  background: #dff0d8;
+  padding: 1px 8px;
+  color: #414141;
+  text-align: center;
+}
+#oe_snippets .o_panel_header .fa-stack {
+  overflow: hidden;
+  font-size: 1em;
+}
+#oe_snippets .o_panel_body {
+  white-space: normal;
+  background: black;
+  padding: 7px 3px;
+}
+#oe_snippets .o_panel_body > div {
+  background: black;
+}
+#oe_snippets .o_panel_body > div label {
+  width: 44px;
+  color: #fff;
+  padding-left: 10px;
+}
+#oe_snippets .o_panel_body > div label div {
+  width: 100px;
+  text-align: center;
+  -moz-transform: translate(-39px, 44px);
+  -webkit-transform: translate(-39px, 44px);
+  transform: translate(-39px, 44px);
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+
+.oe_snippet {
+  display: inline-block;
+  vertical-align: top;
+  width: 93px;
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-top: 1px;
+  position: relative;
+  overflow: hidden;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: move;
+}
+.oe_snippet .oe_snippet_thumbnail {
+  text-align: center;
+  height: 100%;
+  background: transparent;
+  color: white;
+  position: relative;
+}
+.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
+  -moz-transform: scale(0.95, 0.95);
+  -ms-transform: scale(0.95, 0.95);
+  -webkit-transform: scale(0.95, 0.95);
+  transform: scale(0.95, 0.95);
+}
+.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
+  font-size: 12px;
+  display: block;
+  text-shadow: 0 0 2px black;
+}
+.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
+  height: 74px;
+  width: 92px;
+  background-size: cover;
+  -moz-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  transform: scale(1, 1);
+}
+.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
+  line-height: 18px;
+}
+.oe_snippet > :not(.oe_snippet_thumbnail) {
+  display: none !important;
+}
+.oe_snippet.disable .oe_snippet_thumbnail {
+  background-color: rgba(255, 0, 0, 0.75);
+}
+.oe_snippet.disable .oe_snippet_thumbnail_img {
+  opacity: 0.8;
+}
+
+#oe_snippets .oe_snippet_thumbnail {
+  background: #747474, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+}
+
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
+.oe_drop_zone.oe_insert {
+  display: block;
+  height: 48px;
+  margin: 0px;
+  margin-top: -4px;
+  margin-bottom: -44px;
+  -moz-transition: margin 250ms linear;
+  -o-transition: margin 250ms linear;
+  -webkit-transition: margin 250ms linear;
+  transition: margin 250ms linear;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
+}
+.oe_drop_zone.oe_insert: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 {
+  border-top: dashed 2px rgba(116, 255, 161, 0.72);
+}
+.oe_drop_zone.oe_insert.oe_vertical {
+  width: 48px;
+  float: left;
+  position: relative;
+  margin: 0px -24px !important;
+}
+.oe_drop_zone.oe_insert.oe_vertical_text {
+  width: 48px;
+  float: none;
+  display: inline-block;
+  position: relative;
+  margin: 0px -24px !important;
+}
+.oe_drop_zone.oe_insert.oe_overlay {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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);
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
+  background: rgba(0, 255, 133, 0.3);
+  z-index: 1001;
+}
+
+.oe_drop_zone_style {
+  color: white;
+  height: 48px;
+  margin-bottom: 32px;
+  padding-top: 12px;
+}
+
+/* ---- SNIPPET MANIPULATOR ----  {{{ */
+.resize_editor_busy {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.oe_overlay {
+  display: none;
+  height: 0;
+  position: absolute;
+  background: transparent;
+  z-index: 1001;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-transition: opacity 100ms linear;
+  -o-transition: opacity 100ms linear;
+  -webkit-transition: opacity 100ms linear;
+  transition: opacity 100ms linear;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.oe_overlay.oe_active {
+  display: block;
+}
+.oe_overlay .oe_handle {
+  display: block !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin: -2px;
+}
+.oe_overlay .oe_handle > div {
+  z-index: 1;
+  position: absolute;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: #666666;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+}
+.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
+  z-index: 2;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: block;
+  background: white;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  width: 18px;
+  height: 18px;
+  margin: -9px;
+  padding-left: 1px;
+  font-size: 14px;
+  line-height: 14px;
+  font-family: FontAwesome;
+  color: rgba(0, 0, 0, 0.5);
+  -moz-transition: background 100ms linear;
+  -o-transition: background 100ms linear;
+  -webkit-transition: background 100ms linear;
+  transition: background 100ms linear;
+}
+.oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+}
+.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w {
+  top: 4px;
+  height: 100%;
+}
+.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
+  content: "";
+  line-height: 16px;
+}
+.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
+  width: 0;
+  height: 100%;
+  top: 2px;
+  left: 8px;
+}
+.oe_overlay .oe_handle.e {
+  left: auto;
+  right: -6px;
+  cursor: w-resize;
+}
+.oe_overlay .oe_handle.w {
+  left: -6px;
+  cursor: e-resize;
+}
+.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+}
+.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
+  content: "";
+  text-align: center;
+  padding: 1px;
+}
+.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
+  width: 100%;
+  height: 0;
+  top: 7px;
+  left: 1px;
+}
+.oe_overlay .oe_handle.s {
+  top: auto;
+  cursor: n-resize;
+}
+.oe_overlay .oe_handle.n {
+  cursor: s-resize;
+}
+.oe_overlay .oe_handle.n > div {
+  top: 5px;
+}
+.oe_overlay .oe_handle.size {
+  z-index: 3;
+  top: auto;
+  left: 50%;
+  bottom: -6px;
+  margin-left: -50px;
+}
+.oe_overlay .oe_handle.size .oe_handle_button {
+  position: relative;
+  z-index: 3;
+  text-align: center;
+  margin-left: -52px;
+  margin-top: -10px;
+  left: 0px;
+}
+.oe_overlay .oe_handle.size .oe_handle_button:hover {
+  background: rgba(30, 30, 30, 0.8);
+  color: #fff;
+  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+}
+.oe_overlay .oe_handle.size .size {
+  position: absolute;
+  width: 64px;
+  cursor: row-resize;
+  top: 9px;
+  margin-left: 52px;
+  padding: 0 5px;
+}
+.oe_overlay .oe_handle.size .auto_size {
+  position: absolute;
+  width: 100px;
+  top: 9px;
+  cursor: pointer;
+}
+.oe_overlay .oe_handle.readonly {
+  cursor: auto !important;
+}
+.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size {
+  display: none !important;
+}
+.oe_overlay .icon.btn {
+  display: inline-block;
+}
+.oe_overlay .oe_overlay_options {
+  position: absolute;
+  left: 50% !important;
+  text-align: center;
+  top: -20px;
+  z-index: 1002;
+}
+.oe_overlay .oe_overlay_options > .btn-group {
+  left: -50%;
+  white-space: nowrap;
+}
+.oe_overlay .oe_overlay_options > .btn-group > a {
+  cursor: pointer;
+  display: inline-block;
+  float: none;
+  margin: 0 -3px;
+}
+.oe_overlay .oe_overlay_options > .btn-group > div {
+  float: left;
+}
+.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
+  cursor: pointer;
+}
+.oe_overlay .oe_overlay_options .dropdown {
+  display: inline-block;
+}
+.oe_overlay .oe_overlay_options .dropdown-menu {
+  text-align: left;
+  min-width: 180px;
+}
+.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
+  display: block;
+}
+.oe_overlay.block-w-left .w:before {
+  content: "" !important;
+}
+.oe_overlay.block-w-right .w:before {
+  content: "" !important;
+}
+.oe_overlay.block-w-left.block-w-right .w:before {
+  display: none !important;
+}
+.oe_overlay.block-e-left .e:before {
+  content: "" !important;
+}
+.oe_overlay.block-e-right .e:before {
+  content: "" !important;
+}
+.oe_overlay.block-e-left.block-e-right .e:before {
+  display: none !important;
+}
+.oe_overlay.block-s-top .s:before {
+  content: "" !important;
+}
+.oe_overlay.block-s-bottom .s:before {
+  content: "" !important;
+}
+.oe_overlay.block-n-top .n:before {
+  content: "" !important;
+}
+.oe_overlay.block-n-bottom .n:before {
+  content: "" !important;
+}
+.oe_overlay.o_keypress {
+  opacity: 0;
+  -webkit-transition: 0.8s;
+  -moz-transition: 0.8s;
+  -o-transition: 0.8s;
+  -transition: 0.8s;
+}
+
+.s-resize-important, .s-resize-important * {
+  cursor: s-resize !important;
+}
+
+.n-resize-important, .n-resize-important * {
+  cursor: n-resize !important;
+}
+
+.e-resize-important, .e-resize-important * {
+  cursor: e-resize !important;
+}
+
+.w-resize-important, .w-resize-important * {
+  cursor: w-resize !important;
+}
+
+.move-important, .move-important * {
+  cursor: move !important;
+}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/css/snippets.sass b/addons/web_editor/static/src/css/snippets.sass
new file mode 100644
index 00000000000..752dabafc78
--- /dev/null
+++ b/addons/web_editor/static/src/css/snippets.sass
@@ -0,0 +1,376 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+
+
+/* ---- SNIPPET EDITOR ---- {{{ */
+
+#oe_snippets
+    #o_left_bar, #o_arrow
+        position: fixed
+        top: 34px
+        left: 0px
+        bottom: 0
+        background: rgb(40,40,40)
+        +box-shadow(0px 10px 10px -10px black inset)
+    #o_arrow
+        z-index: 1009
+        width: 24px
+        opacity: 0.75
+        > *
+            position: absolute
+            color: white
+        div
+            @include transform( translateX(-36%) rotate(-90deg) )
+            top: 50%
+            white-space: nowrap
+        .fa
+            width: 100%
+            left: 40%
+    #o_left_bar
+        left:  -228px
+        z-index: 1010
+        width: 208px
+        @include transition(all 500ms ease)
+        ul
+            text-align: center
+            margin: 0
+            padding: 6px 0
+            list-style-type: none
+            li
+                display: inline-block
+                padding: 0 3px
+                a
+                    color: #aaa
+                .fa-stack
+                    overflow: hidden
+            li.active a.fa, li.active .fa-stack-1x
+                color: #428bca
+
+    &.o_open #o_left_bar
+        left: 0
+    .o_panel
+        margin: 0
+        border: 0
+        width: 208px
+    .o_panel_header
+        background: #dff0d8
+        padding: 1px 8px
+        color: #414141
+        text-align: center
+        .fa-stack
+            overflow: hidden
+            font-size: 1em
+    .o_panel_body
+        white-space: normal
+        background: black
+        padding: 7px 3px
+        > div
+            background: rgb(0,0,0)
+            label
+                width: 44px
+                color: #fff
+                padding-left: 10px
+
+                div
+                    width: 100px
+                    text-align: center
+                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
+                    @include transform-origin(50%)
+
+.oe_snippet
+    display: inline-block
+    vertical-align: top
+    width: 93px
+    margin-left: 3px
+    margin-right: 3px
+    margin-top: 1px
+    position: relative
+    overflow: hidden
+    +user-select(none)
+    cursor: move
+    .oe_snippet_thumbnail
+        text-align: center
+        height: 100%
+        background: transparent
+        color: white
+        position: relative
+        &:hover
+            .oe_snippet_thumbnail_img
+                @include transform( scale(.95,.95))
+        .oe_snippet_thumbnail_title
+            font-size: 12px
+            display: block
+            +text-shadow(0 0 2px rgb(0,0,0))
+        .oe_snippet_thumbnail_img
+            height: 74px
+            width: 92px
+            background-size: cover
+            @include transform( scale(1,1))
+        span, div
+            line-height: 18px
+    & > :not(.oe_snippet_thumbnail)
+        display: none !important
+    &.disable
+        .oe_snippet_thumbnail
+            background-color: rgba(255, 0, 0, 0.75)
+        .oe_snippet_thumbnail_img
+            opacity: 0.8
+#oe_snippets .oe_snippet_thumbnail
+    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
+
+// }}}}
+
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
+
+.oe_drop_zone.oe_insert
+    display: block
+    height: 48px
+    margin: 0px
+    margin-top: -4px
+    margin-bottom: -44px
+    @include transition(margin 250ms linear)
+    width: 100%
+    position: absolute
+    z-index: 1000
+    &:not(.oe_vertical):before
+        content: ""
+        display: block
+        border-top: dashed 2px rgba(209, 178, 255, 0.72)
+        position: relative
+        top: 0px
+    &.oe_hover:before
+        border-top: dashed 2px rgba(116, 255, 161, 0.72)
+    &.oe_vertical
+        width: 48px
+        float: left
+        position: relative
+        margin: 0px -24px !important
+    &.oe_vertical_text
+        width: 48px
+        float: none
+        display: inline-block
+        position: relative
+        margin: 0px -24px !important
+    &.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_zone_style
+    color: white
+    height: 48px
+    margin-bottom: 32px
+    padding-top: 12px
+
+// }}}
+
+/* ---- SNIPPET MANIPULATOR ----  {{{ */
+
+.resize_editor_busy
+    background-color: rgba(0,0,0,0.3)
+
+.oe_overlay
+    display: none
+    height: 0
+    position: absolute
+    background: transparent
+    z-index: 1001
+    //@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)
+    &.oe_active
+        display: block
+    .oe_handle
+        display: block !important
+        position: absolute
+        top: 50%
+        left: 50%
+        +box-sizing(border-box)
+        width: 16px
+        height: 16px
+        margin: -2px
+        > div
+            z-index: 1
+            position: absolute
+            border-style: dashed
+            border-width: 1px
+            border-color: #666666
+            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
+        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            z-index: 2
+            position: relative
+            top: 50%
+            left: 50%
+            display: block
+            background: rgba(255, 255, 255, 1)
+            border: solid 1px rgba(0, 0, 0, .2)
+            +border-radius(5px)
+            width: 18px
+            height: 18px
+            margin: -9px
+            padding-left: 1px
+            font-size: 14px
+            line-height: 14px
+            font-family: FontAwesome
+            color: rgba(0,0,0,.5)
+            @include transition(background 100ms linear)
+        &.e, &.w, &.s, &.n
+            &:hover:before
+                background: rgba(0, 0, 0, .5)
+                color: #fff
+                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+        &.e, &.w
+            top: 4px
+            height: 100%
+            &:before
+                content: "\f07e"
+                line-height: 16px
+            > div
+                width: 0
+                height: 100%
+                top: 2px
+                left: 8px
+        &.e
+            left: auto
+            right: -6px
+            cursor: w-resize
+        &.w
+            left: -6px
+            cursor: e-resize
+        &.s, &.n
+            left: 2px
+            width: 100%
+            &:before
+                content: "\f07d"
+                text-align: center
+                padding: 1px
+            > div
+                width: 100%
+                height: 0
+                top: 7px
+                left: 1px
+        &.s
+            top: auto
+            cursor: n-resize
+        &.n
+            cursor: s-resize
+            > div
+                top: 5px
+        &.size
+            z-index: 3
+            top: auto
+            left: 50%
+            bottom: -6px
+            margin-left: -50px
+            .oe_handle_button
+                position: relative
+                z-index: 3
+                text-align: center
+                margin-left: -52px
+                margin-top: -10px
+                left: 0px
+                &:hover
+                    background: rgba(30, 30, 30, .8)
+                    color: #fff
+                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+            .size
+                position: absolute
+                width: 64px
+                cursor: row-resize
+                top: 9px
+                margin-left: 52px
+                padding: 0 5px
+            .auto_size
+                position: absolute
+                width: 100px
+                top: 9px
+                cursor: pointer
+        &.readonly
+            cursor: auto !important
+            &:before, &.size
+                display: none !important
+
+    .icon.btn
+        display: inline-block
+
+    .oe_overlay_options
+        position: absolute
+        left: 50% !important
+        text-align: center
+        top: -20px
+        z-index: 1002
+        > .btn-group
+            left: -50%
+            white-space: nowrap
+            > a
+                cursor: pointer
+                display: inline-block
+                float: none
+                margin: 0 -3px
+            > div
+                float: left
+        .btn, a
+            cursor: pointer
+        .dropdown
+            display: inline-block
+        .dropdown-menu
+            text-align: left
+            min-width: 180px
+        .dropdown-menu select,.dropdown-menu input
+            display: block
+
+    &.block-w-left .w:before
+        content: "\F061" !important
+    &.block-w-right .w:before
+        content: "\F060" !important
+    &.block-w-left.block-w-right .w:before
+        display: none !important
+    &.block-e-left .e:before
+        content: "\F061" !important
+    &.block-e-right .e:before
+        content: "\F060" !important
+    &.block-e-left.block-e-right .e:before
+        display: none !important
+
+    &.block-s-top .s:before
+        content: "\F063" !important
+    &.block-s-bottom .s:before
+        content: "\f062" !important
+    &.block-n-top .n:before
+        content: "\F063" !important
+    &.block-n-bottom .n:before
+        content: "\f062" !important
+
+    &.o_keypress
+        opacity: 0
+        -webkit-transition: .8s
+        -moz-transition: .8s
+        -o-transition: .8s
+        -transition: .8s
+
+
+.s-resize-important, .s-resize-important *
+    cursor: s-resize !important
+.n-resize-important, .n-resize-important *
+    cursor: n-resize !important
+.e-resize-important, .e-resize-important *
+    cursor: e-resize !important
+.w-resize-important, .w-resize-important *
+    cursor: w-resize !important
+.move-important, .move-important *
+    cursor: move !important
+
+// }}}
diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/css/web_editor.css
new file mode 100644
index 00000000000..e61e5244e40
--- /dev/null
+++ b/addons/web_editor/static/src/css/web_editor.css
@@ -0,0 +1,266 @@
+@charset "utf-8";
+/* ----- EDITOR ----- */
+.css_non_editable_mode_hidden {
+  display: none !important;
+}
+
+/* ----- Editor (for public user, like forum) ----- */
+.note-toolbar {
+  margin-left: 0 !important;
+}
+
+.note-popover .popover > .arrow {
+  display: none;
+}
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+
+.hidden {
+  display: none !important;
+}
+
+/* table */
+table.table {
+  table-layout: fixed;
+}
+
+td {
+  min-width: 20px;
+}
+
+/* Vertical Spacing */
+.mt128 {
+  margin-top: 128px !important;
+}
+
+.mt92 {
+  margin-top: 92px !important;
+}
+
+.mt64 {
+  margin-top: 64px !important;
+}
+
+.mt48 {
+  margin-top: 48px !important;
+}
+
+.mt32 {
+  margin-top: 32px !important;
+}
+
+.mt16 {
+  margin-top: 16px !important;
+}
+
+.mt8 {
+  margin-top: 8px !important;
+}
+
+.mt4 {
+  margin-top: 4px !important;
+}
+
+.mt0 {
+  margin-top: 0px !important;
+}
+
+.mb128 {
+  margin-bottom: 128px !important;
+}
+
+.mb92 {
+  margin-bottom: 92px !important;
+}
+
+.mb64 {
+  margin-bottom: 64px !important;
+}
+
+.mb48 {
+  margin-bottom: 48px !important;
+}
+
+.mb32 {
+  margin-bottom: 32px !important;
+}
+
+.mb16 {
+  margin-bottom: 16px !important;
+}
+
+.mb8 {
+  margin-bottom: 8px !important;
+}
+
+.mb4 {
+  margin-bottom: 4px !important;
+}
+
+.mb0 {
+  margin-bottom: 0px !important;
+}
+
+.ml8 {
+  margin-left: 8px !important;
+}
+
+.ml4 {
+  margin-left: 4px !important;
+}
+
+.ml0 {
+  margin-left: 0px !important;
+}
+
+.mr8 {
+  margin-right: 8px !important;
+}
+
+.mr4 {
+  margin-right: 4px !important;
+}
+
+.mr0 {
+  margin-right: 0px !important;
+}
+
+/* Media */
+img.shadow {
+  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+}
+
+img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
+  padding: 4px;
+}
+img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
+  padding: 8px;
+}
+img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
+  padding: 16px;
+}
+img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
+  padding: 32px;
+}
+
+div.media_iframe_video.padding-small iframe {
+  padding: 4px;
+}
+div.media_iframe_video.padding-medium iframe {
+  padding: 8px;
+}
+div.media_iframe_video.padding-large iframe {
+  padding: 16px;
+}
+div.media_iframe_video.padding-xl iframe {
+  padding: 32px;
+}
+
+/* font awsome */
+.fa-6x {
+  font-size: 6em;
+}
+
+.fa-7x {
+  font-size: 7em;
+}
+
+.fa-8x {
+  font-size: 8em;
+}
+
+.fa-9x {
+  font-size: 9em;
+}
+
+.fa-10x {
+  font-size: 10em;
+}
+
+.fa.center-block {
+  text-align: center;
+}
+
+/* video */
+div.media_iframe_video {
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+div.media_iframe_video iframe {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  position: absolute;
+  margin: 0 auto;
+  margin-left: -50%;
+}
+div.media_iframe_video .media_iframe_video_size {
+  padding-bottom: 66.5%;
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+div.media_iframe_video .css_editable_mode_display {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: none;
+  z-index: 2;
+}
+
+html[data-browser^="msie"] div.media_iframe_video iframe {
+  margin-left: 0;
+}
+
+/* Mobile view */
+@media (max-width: 768px) {
+  img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
+    -webkit-transform: none !important;
+    -moz-transform: none !important;
+    -ms-transform: none !important;
+    -o-transform: none !important;
+    transform: none !important;
+  }
+}
+/* ---- fields --- */
+address .fa.fa-mobile-phone {
+  margin: 0 3px 0 2px;
+}
+address .fa.fa-file-text-o {
+  margin-right: 1px;
+}
+
+span[data-oe-type="monetary"] {
+  white-space: nowrap;
+}
+
+/* ---- MENU ---- {{{ */
+div.oe_menu_buttons {
+  top: -8px;
+  right: -8px;
+}
+
+ul.oe_menu_editor .fa-home {
+  display: none;
+}
+ul.oe_menu_editor > li:first-child > div > span > .fa-home {
+  display: block;
+}
+ul.oe_menu_editor .oe_menu_placeholder {
+  outline: 1px dashed #4183C4;
+}
+ul.oe_menu_editor ul {
+  list-style: none;
+}
+ul.oe_menu_editor li div {
+  cursor: move;
+}
+ul.oe_menu_editor .disclose {
+  cursor: pointer;
+  width: 10px;
+  display: none;
+}
diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass
new file mode 100644
index 00000000000..75b4ad6c781
--- /dev/null
+++ b/addons/web_editor/static/src/css/web_editor.sass
@@ -0,0 +1,195 @@
+@charset "utf-8"
+@import "common"
+
+/* ----- EDITOR ----- */
+
+.css_non_editable_mode_hidden
+    display: none !important
+
+/* ----- Editor (for public user, like forum) ----- */
+
+.note-toolbar
+    margin-left: 0 !important
+
+.note-popover .popover > .arrow
+    display: none
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+
+.hidden
+    display: none !important
+
+/* table */
+
+table.table
+    table-layout: fixed
+
+td
+    min-width: 20px
+
+/* Vertical Spacing */
+
+.mt128
+    margin-top: 128px !important
+.mt92
+    margin-top: 92px !important
+.mt64
+    margin-top: 64px !important
+.mt48
+    margin-top: 48px !important
+.mt32
+    margin-top: 32px !important
+.mt16
+    margin-top: 16px !important
+.mt8
+    margin-top: 8px !important
+.mt4
+    margin-top: 4px !important
+.mt0
+    margin-top: 0px !important
+
+.mb128
+    margin-bottom: 128px !important
+.mb92
+    margin-bottom: 92px !important
+.mb64
+    margin-bottom: 64px !important
+.mb48
+    margin-bottom: 48px !important
+.mb32
+    margin-bottom: 32px !important
+.mb16
+    margin-bottom: 16px !important
+.mb8
+    margin-bottom: 8px !important
+.mb4
+    margin-bottom: 4px !important
+.mb0
+    margin-bottom: 0px !important
+
+.ml8
+    margin-left: 8px !important
+.ml4
+    margin-left: 4px !important
+.ml0
+    margin-left: 0px !important
+
+.mr8
+    margin-right: 8px !important
+.mr4
+    margin-right: 4px !important
+.mr0
+    margin-right: 0px !important
+
+/* Media */
+
+img.shadow
+    +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
+
+img, .img, span.fa, iframe
+    &.padding-small
+        padding: 4px
+    &.padding-medium
+        padding: 8px
+    &.padding-large
+        padding: 16px
+    &.padding-xl
+        padding: 32px
+div.media_iframe_video
+    &.padding-small iframe
+        padding: 4px
+    &.padding-medium iframe
+        padding: 8px
+    &.padding-large iframe
+        padding: 16px
+    &.padding-xl iframe
+        padding: 32px
+
+/* font awsome */
+
+.fa-6x
+    font-size: 6em
+.fa-7x
+    font-size: 7em
+.fa-8x
+    font-size: 8em
+.fa-9x
+    font-size: 9em
+.fa-10x
+    font-size: 10em
+.fa.center-block
+    text-align: center
+
+/* video */
+
+div.media_iframe_video
+    margin: 0 auto
+    text-align: center
+    position: relative
+    overflow: hidden
+    iframe
+        width: 100%
+        height: 100%
+        top: 0
+        position: absolute
+        margin: 0 auto
+        margin-left: -50%
+    .media_iframe_video_size
+        padding-bottom: 66.5%
+        position: relative
+        width: 100%
+        height: 0
+    .css_editable_mode_display
+        position: absolute
+        width: 100%
+        height: 100%
+        display: none
+        z-index: 2
+
+html[data-browser^="msie"] div.media_iframe_video iframe
+    margin-left: 0
+
+/* Mobile view */
+
+@media (max-width: 768px)
+    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
+        -webkit-transform: none !important
+        -moz-transform: none !important
+        -ms-transform: none !important
+        -o-transform: none !important
+        transform: none !important
+
+/* ---- fields --- */
+
+address
+    .fa.fa-mobile-phone
+        margin: 0 3px 0 2px
+    .fa.fa-file-text-o
+        margin-right: 1px
+
+span[data-oe-type="monetary"]
+    white-space: nowrap
+
+/* ---- MENU ---- {{{ */
+
+div.oe_menu_buttons
+    top: -8px
+    right: -8px
+
+ul.oe_menu_editor
+    .fa-home
+        display: none
+    > li:first-child > div > span > .fa-home
+        display: block
+    .oe_menu_placeholder
+        outline: 1px dashed #4183C4
+    ul
+        list-style: none
+    li div
+        cursor: move
+    .disclose
+        cursor: pointer
+        width: 10px
+        display: none
+
+// }}}
diff --git a/addons/website/static/src/img/drag_here.png b/addons/web_editor/static/src/img/drag_here.png
similarity index 100%
rename from addons/website/static/src/img/drag_here.png
rename to addons/web_editor/static/src/img/drag_here.png
diff --git a/addons/website/static/src/img/edit_here.png b/addons/web_editor/static/src/img/edit_here.png
similarity index 100%
rename from addons/website/static/src/img/edit_here.png
rename to addons/web_editor/static/src/img/edit_here.png
diff --git a/addons/web_editor/static/src/js/backend.js b/addons/web_editor/static/src/js/backend.js
new file mode 100644
index 00000000000..c58d70ff389
--- /dev/null
+++ b/addons/web_editor/static/src/js/backend.js
@@ -0,0 +1,322 @@
+odoo.define('web_editor.backend', function (require) {
+'use strict';
+
+var core = require('web.core');
+var session = require('web.session');
+var Model = require('web.DataModel');
+var common = require('web.form_common');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
+var summernote = require('web_editor.summernote');
+var transcoder = require('web_editor.transcoder');
+
+var QWeb = core.qweb;
+var _t = core._t;
+
+/**
+ * FieldTextHtml Widget
+ * Intended for FieldText widgets meant to display HTML content. This
+ * widget will instantiate an iframe with the editor summernote improved by odoo
+ */
+
+var widget = common.AbstractField.extend(common.ReinitializeFieldMixin);
+
+var FieldTextHtmlSimple = widget.extend({
+    template: 'web_editor.FieldTextHtmlSimple',
+    _config: function () {
+        var self = this;
+        return {
+            'focus': false,
+            'height': 180,
+            'toolbar': [
+                ['style', ['style']],
+                ['font', ['bold', 'italic', 'underline', 'clear']],
+                ['fontsize', ['fontsize']],
+                ['color', ['color']],
+                ['para', ['ul', 'ol', 'paragraph']],
+                ['table', ['table']],
+                ['insert', ['link', 'picture']],
+                ['history', ['undo', 'redo']]
+            ],
+            'styleWithSpan': false,
+            'inlinemedia': ['p'],
+            'lang': "odoo",
+            'onChange': function (value) {
+                self.internal_set_value(value);
+                self.trigger('changed_value');
+            }
+        };
+    },
+    initialize_content: function() {
+        var self = this;
+        this.$textarea = this.$("textarea").val(this.get('value') || "<p><br/></p>");
+
+        if (this.get("effective_readonly")) {
+            this.$textarea.hide().after('<div class="note-editable"/>');
+        } else {
+            this.$textarea.summernote(this._config());
+
+            if (this.field.translate && this.view) {
+                $(QWeb.render('web_editor.FieldTextHtml.button.translate', {'widget': this}))
+                    .appendTo(this.$('.note-toolbar'))
+                    .on('click', this.on_translate);
+            }
+
+            var reset = _.bind(this.reset_history, this);
+            this.view.on('load_record', this, reset);
+            setTimeout(reset, 0);
+        }
+        this.$content = this.$('.note-editable:first');
+
+        $(".oe-view-manager-content").on("scroll", function () {
+            $('.o_table_handler').remove();
+        });
+        this._super();
+    },
+    reset_history: function () {
+        var history = this.$content.data('NoteHistory');
+        if (history) {
+            history.reset();
+            self.$('.note-toolbar').find('button[data-event="undo"]').attr('disabled', true);
+        }
+    },
+    text_to_html: function (text) {
+        var value = text || "";
+        if (value.match(/^\s*$/)) {
+            value = '<p><br/></p>';
+        } else {
+            value = "<p>"+value.split(/<br\/?>/).join("</p><p>")+"</p>";
+            value = value.replace('<p><p>', '<p>').replace('</p></p>', '</p>');
+        }
+        return value;
+    },
+    render_value: function() {
+        var value = this.get('value');
+        this.$textarea.val(value || '');
+        this.$content.html(this.text_to_html(value));
+        this.$content.focusInEnd();
+        var history = this.$content.data('NoteHistory');
+        if (history && history.recordUndo()) {
+            this.$('.note-toolbar').find('button[data-event="undo"]').attr('disabled', false);
+        }
+    },
+    is_false: function() {
+        return !this.get('value') || this.get('value') === "<p><br/></p>" || !this.get('value').match(/\S/);
+    },
+    before_save: function() {
+        if (this.options['style-inline']) {
+            transcoder.class_to_style(this.$content);
+            transcoder.font_to_img(this.$content);
+            this.internal_set_value(this.$content.html());
+        }
+    },
+    destroy_content: function () {
+        $(".oe-view-manager-content").off("scroll");
+        this.$textarea.destroy();
+        this._super();
+    }
+});
+
+var FieldTextHtml = widget.extend({
+    template: 'web_editor.FieldTextHtml',
+    willStart: function () {
+        var self = this;
+        return new Model('res.lang').call("search_read", [[['code', '!=', 'en_US']], ["name", "code"]]).then(function (res) {
+            self.languages = res;
+        });
+    },
+    start: function () {
+        var self = this;
+
+        this.callback = _.uniqueId('FieldTextHtml_');
+        window.odoo[this.callback+"_editor"] = function (EditorBar) {
+            setTimeout(function () {
+                self.on_editor_loaded(EditorBar);
+            },0);
+        };
+        window.odoo[this.callback+"_content"] = function (EditorBar) {
+            self.on_content_loaded();
+        };
+        window.odoo[this.callback+"_updown"] = null;
+        window.odoo[this.callback+"_downup"] = function (value) {
+            self.internal_set_value(value);
+            self.trigger('changed_value');
+            self.resize();
+        };
+
+        // init jqery objects
+        this.$iframe = this.$el.find('iframe');
+        this.document = null;
+        this.$body = $();
+        this.$content = $();
+
+        this.$iframe.css('min-height', 'calc(100vh - 360px)');
+
+        // init resize
+        this.resize = function resize() {
+            if (self.get('effective_readonly')) { return; }
+            if ($("body").hasClass("o_form_FieldTextHtml_fullscreen")) {
+                self.$iframe.css('height', (document.body.clientHeight - self.$iframe.offset().top) + 'px');
+            } else {
+                self.$iframe.css("height", (self.$body.find("#oe_snippets").length ? 500 : 300) + "px");
+            }
+        };
+        $(window).on('resize', self.resize);
+
+        return this._super();
+    },
+    get_url: function (_attr) {
+        var src = this.options.editor_url ? this.options.editor_url+"?" : "/web_editor/field/html?";
+        var datarecord = this.view.get_fields_values();
+
+        var attr = {
+            'model': this.view.model,
+            'field': this.name,
+            'res_id': datarecord.id || '',
+            'callback': this.callback
+        };
+        _attr = _attr || {};
+
+        if (this.options['style-inline']) {
+            attr.inline_mode = 1;
+        }
+        if (this.options.snippets) {
+            attr.snippets = this.options.snippets;
+        }
+        if (!this.get("effective_readonly")) {
+            attr.enable_editor = 1;
+        }
+        if (this.field.translate) {
+            attr.translatable = 1;
+        }
+        if (session.debug) {
+            attr.debug = 1;
+        }
+
+        attr.lang = attr.enable_editor ? 'en_US' : this.session.user_context.lang;
+
+        for (var k in _attr) {
+            attr[k] = _attr[k];
+        }
+
+        for (var k in attr) {
+            if (attr[k] !== null) {
+                src += "&"+k+"="+(_.isBoolean(attr[k]) ? +attr[k] : attr[k]);
+            }
+        }
+
+        delete datarecord[this.name];
+        src += "&datarecord="+ encodeURIComponent(JSON.stringify(datarecord));
+
+        return src;
+    },
+    initialize_content: function() {
+        this.$el.closest('.modal-body').css('max-height', 'none');
+        this.$iframe = this.$el.find('iframe');
+        this.document = null;
+        this.$body = $();
+        this.$content = $();
+        this.editor = false;
+        window.odoo[this.callback+"_updown"] = null;
+        this.$iframe.attr("src", this.get_url());
+    },
+    on_content_loaded: function () {
+        var self = this;
+        this.document = this.$iframe.contents()[0];
+        this.$body = $("body", this.document);
+        this.$content = this.$body.find("#editable_area");
+        this.lang = this.$iframe.attr('src').match(/[?&]lang=([^&]+)/);
+        this.lang = this.lang ? this.lang[1] : this.view.dataset.context.lang;
+        this._dirty_flag = false;
+        this.render_value();
+        setTimeout(function () {
+            self.add_button();
+            setTimeout(self.resize,0);
+        }, 0);
+    },
+    on_editor_loaded: function (EditorBar) {
+        var self = this;
+        this.editor = EditorBar;
+        if (this.get('value') && window.odoo[self.callback+"_updown"] && !(this.$content.html()||"").length) {
+            this.render_value();
+        }
+        setTimeout(function () {
+            setTimeout(self.resize,0);
+        }, 0);
+    },
+    add_button: function () {
+        var self = this;
+        var $to = this.$body.find("#web_editor-top-edit, #wrapwrap").first();
+
+        $(QWeb.render('web_editor.FieldTextHtml.translate', {'widget': this}))
+            .appendTo($to)
+            .on('change', 'select', function () {
+                var lang = $(this).val();
+                var edit = !self.get("effective_readonly");
+                var trans = lang !== 'en_US';
+                self.$iframe.attr("src", self.get_url({
+                    'edit_translations': edit && trans,
+                    'enable_editor': edit && !trans,
+                    'lang': lang
+                }));
+            });
+
+        $(QWeb.render('web_editor.FieldTextHtml.fullscreen'))
+            .appendTo($to)
+            .on('click', '.o_fullscreen', function () {
+                $("body").toggleClass("o_form_FieldTextHtml_fullscreen");
+                var full = $("body").hasClass("o_form_FieldTextHtml_fullscreen");
+                self.$iframe.parents().toggleClass('o_form_fullscreen_ancestor', full);
+                self.resize();
+            });
+
+        this.$body.on('click', '[data-action="cancel"]', function (event) {
+            event.preventDefault();
+            self.initialize_content();
+        });
+    },
+    render_value: function() {
+        if (this.lang !== this.view.dataset.context.lang || this.$iframe.attr('src').match(/[?&]edit_translations=1/)) {
+            return;
+        }
+        var value = (this.get('value') || "").replace(/^<p[^>]*>(\s*|<br\/?>)<\/p>$/, '');
+        if (!this.$content) {
+            return;
+        }
+        if (!this.get("effective_readonly")) {
+            if(window.odoo[this.callback+"_updown"]) {
+                window.odoo[this.callback+"_updown"](value, this.view.get_fields_values(), this.name);
+                this.resize();
+            }
+        } else {
+            this.$content.html(value);
+            this.$iframe.css("height", (this.$body.height()+20) + "px");
+        }
+    },
+    is_false: function() {
+        return this.get('value') === false || !this.$content.html() || !this.$content.html().match(/\S/);
+    },
+    before_save: function () {
+        if (this.lang !== 'en_US' && this.$body.find('.o_dirty').length) {
+            this.internal_set_value( this.view.datarecord[this.name] );
+            this._dirty_flag = false;
+            return this.editor.save();
+        } else if (this._dirty_flag && this.editor && this.editor.buildingBlock) {
+            this.editor.buildingBlock.clean_for_save();
+            this.internal_set_value( this.$content.html() );
+        }
+    },
+    destroy: function () {
+        $(window).off('resize', self.resize);
+        delete window.odoo[this.callback+"_editor"];
+        delete window.odoo[this.callback+"_content"];
+        delete window.odoo[this.callback+"_updown"];
+        delete window.odoo[this.callback+"_downup"];
+    }
+});
+
+core.form_widget_registry
+    .add('html', FieldTextHtmlSimple)
+    .add('html_frame', FieldTextHtml);
+
+});
diff --git a/addons/web_editor/static/src/js/base.js b/addons/web_editor/static/src/js/base.js
new file mode 100644
index 00000000000..7046332289a
--- /dev/null
+++ b/addons/web_editor/static/src/js/base.js
@@ -0,0 +1,75 @@
+odoo.define('web_editor.base', function (require) {
+"use strict";
+
+var core = require('web.core');
+var ajax = require('web.ajax');
+var qweb = core.qweb;
+var _t = core._t;
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+var get_context = function (dict) {
+    var html = document.documentElement;
+    return _.extend({
+        'lang': (html.getAttribute('lang') || '').replace('-', '_'),
+    }, dict);
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* ----------------------------------------------------
+   Async Ready and Template loading
+   ---------------------------------------------------- */
+var dom_ready = $.Deferred();
+$(document).ready(function () {
+    dom_ready.resolve();
+    // fix for ie
+    if($.fn.placeholder) $('input, textarea').placeholder();
+});
+
+
+// todo: remove and load a bundle of translated templates
+var all_ready;
+var ready = function() {
+    if (!all_ready) {
+        all_ready = $.when(dom_ready, ajax.loadXML()).then(translations);
+    } else if(all_ready.state() === "resolved") { // can add async template
+        all_ready = $.when(dom_ready, ajax.loadXML());
+    }
+    return all_ready;
+};
+
+function translations() {
+    function translate_node(node){
+        if(node.nodeType === 3) { // TEXT_NODE
+            if(node.nodeValue.match(/\S/)){
+                var space = node.nodeValue.match(/^([\s]*)([\s\S]*?)([\s]*)$/);
+                node.nodeValue = space[1] + $.trim(_t(space[2])) + space[3];
+            }
+        }
+        else if(node.nodeType === 1 && node.hasChildNodes()) { // ELEMENT_NODE
+            _.each(node.childNodes, translate_node);
+        }
+    }
+    return ajax.jsonRpc(data.url_translations, 'call', {
+            'mods': ['web_editor'],
+            'lang': data.get_context().lang
+        })
+        .then(function(trans) {
+            _t.database.set_bundle(trans);
+        }).then(function () {
+            var keys = _.keys(qweb.templates);
+            for (var i = 0; i < keys.length; i++){
+                translate_node(qweb.templates[keys[i]]);
+            }
+        }).promise();
+}
+
+var data = {
+    'get_context': get_context,
+    'url_translations': '/web/webclient/translations',
+    'dom_ready': dom_ready,
+    'ready': ready,
+};
+return data;
+
+});
diff --git a/addons/web_editor/static/src/js/editor.js b/addons/web_editor/static/src/js/editor.js
new file mode 100644
index 00000000000..2958d045d0f
--- /dev/null
+++ b/addons/web_editor/static/src/js/editor.js
@@ -0,0 +1,164 @@
+odoo.define('web_editor.editor', function (require) {
+"use strict";
+
+var ajax = require('web.ajax');
+var Widget = require('web.Widget');
+var core = require('web.core');
+var base = require('web_editor.base');
+var rte = require('web_editor.rte');
+
+var qweb = core.qweb;
+var _t = core._t;
+var editor = {};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+editor.dummy = function () {return true;}; // used for snippets, options...
+
+editor.editable = !!$('html').data('editable');
+
+ajax.loadXML('/web_editor/static/src/xml/editor.xml', qweb);
+
+base.dom_ready.done(function () {
+    $(document).on('click', '.note-editable', function (ev) {
+        ev.preventDefault();
+    });
+
+    $(document).on('submit', '.note-editable form .btn', function (ev) {
+        // Disable form submition in editable mode
+        ev.preventDefault();
+    });
+
+    $(document).on('hide.bs.dropdown', '.dropdown', function (ev) {
+        // Prevent dropdown closing when a contenteditable children is focused
+        if (ev.originalEvent
+                && $(ev.target).has(ev.originalEvent.target).length
+                && $(ev.originalEvent.target).is('[contenteditable]')) {
+            ev.preventDefault();
+        }
+    });
+});
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+editor.reload = function () {
+    location.hash = "scrollTop=" + window.document.body.scrollTop;
+    if (location.search.indexOf("enable_editor") > -1) {
+        window.location.href = window.location.href.replace(/&?enable_editor(=[^&]*)?/g, '');
+    } else {
+        window.location.reload();
+    }
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+/* ----- TOP EDITOR BAR FOR ADMIN ---- */
+
+base.ready().then(function () {
+    if (editor.editable && location.search.indexOf("enable_editor") >= 0) {
+        editor.editor_bar = new editor.Class();
+        editor.editor_bar.prependTo(document.body);
+    }
+});
+
+editor.Class = Widget.extend({
+    template: 'web_editor.editorbar',
+    events: {
+        'click button[data-action=save]': 'save',
+        'click a[data-action=cancel]': 'cancel',
+    },
+    init: function(parent) {
+        var self = this;
+        var res = this._super.apply(this, arguments);
+        this.parent = parent;
+        this.rte = new rte.Class(this);
+        this.rte.on('rte:start', this, function () {
+            self.trigger('rte:start');
+        });
+        return res;
+    },
+    start: function() {
+        var self = this;
+
+        this.$('button[data-action=save]').prop('disabled', true);
+        $('.dropdown-toggle').dropdown();
+
+        this.display_placeholder();
+
+        this.rte.on('change', this, this.proxy('rte_changed'));
+        this.rte.start();
+
+        var flag = false;
+        window.onbeforeunload = function(event) {
+            if (rte.history.getEditableHasUndo().length && !flag) {
+                flag = true;
+                setTimeout(function () {flag=false;},0);
+                return _t('This document is not saved!');
+            }
+        };
+        return this._super();
+    },
+    display_placeholder: function () {
+        var $area = $("#wrapwrap").find("[data-oe-model] .oe_structure.oe_empty, [data-oe-model].oe_structure.oe_empty, [data-oe-type=html]")
+            .addClass("oe_empty")
+            .attr("data-oe-placeholder", _t("Press The Top-Left Edit Button"));
+
+        this.on('rte:start', this, function () {
+            $area.attr("data-oe-placeholder", _t("Write Your Text Here"));
+        });
+        this.on("snippets:ready", this, function () {
+            if ($("body").hasClass("editor_has_snippets")) {
+                $area.attr("data-oe-placeholder", _t("Write Your Text or Drag a Block Here"));
+            }
+        });
+
+        $(document).on("keyup", function (event) {
+            if((event.keyCode === 8 || event.keyCode === 46)) {
+                var $target = $(event.target).closest(".o_editable");
+                if(!$target.is(":has(*:not(p):not(br))") && !$target.text().match(/\S/)) {
+                    $target.empty();
+                }
+            }
+        });
+    },
+    rte_changed: function () {
+        // todo: use !rte.history.getEditableHasUndo().length (but phantomjs unknow error)
+        this.$('button[data-action=save]').prop('disabled', !$('.o_dirty').length);
+    },
+    save: function () {
+        return this.rte.save().then(function () {
+            editor.reload();
+        });
+    },
+    /**
+     * Saves an RTE content, which always corresponds to a view section (?).
+     */
+    save_without_reload: function () {
+        return this.rte.save();
+    },
+    cancel: function () {
+        new $.Deferred(function (d) {
+            if (!rte.history.getEditableHasUndo().length) {
+                return d.resolve();
+            }
+            var $dialog = $(qweb.render('web_editor.discard')).appendTo(document.body);
+            $dialog.on('click', '.btn-danger', function () {
+                d.resolve();
+            }).on('hidden.bs.modal', function () {
+                d.reject();
+            });
+            d.always(function () {
+                $dialog.remove();
+            });
+            $dialog.modal('show');
+        }).then(function () {
+            window.onbeforeunload = null;
+            editor.reload();
+        });
+    },
+});
+
+return editor;
+
+});
+
diff --git a/addons/web_editor/static/src/js/iframe.js b/addons/web_editor/static/src/js/iframe.js
new file mode 100644
index 00000000000..8b287064b7c
--- /dev/null
+++ b/addons/web_editor/static/src/js/iframe.js
@@ -0,0 +1,78 @@
+odoo.define('web_editor.iframe', function (require) {
+'use strict';
+
+var editor = require('web_editor.editor');
+var translator = require('web_editor.translate');
+var rte = require('web_editor.rte');
+var snippet_editor = require('web_editor.snippet.editor');
+
+window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name) {
+    var $editable = $("#editable_area");
+    if(value !== $editable.prop("innerHTML")) {
+        if ($('body').hasClass('editor_enable')) {
+            if (value !== fields_values[field_name]) {
+                rte.history.recordUndo($editable);
+            }
+            snippet_editor.instance.make_active(false);
+        }
+        
+        $editable.html(value);
+
+        if ($('body').hasClass('editor_enable') && value !== fields_values[field_name]) {
+            $editable.trigger("content_changed");
+        }
+    }
+};
+
+editor.Class.include({
+    start: function () {
+        this.on('rte:start', this, function () {
+            this.$('form').hide();
+
+            if (window.top.odoo[callback+"_editor"]) {
+                window.top.odoo[callback+"_editor"](this);
+            }
+
+            var $editable = $("#editable_area");
+            setTimeout(function () {
+                $($editable.find("*").filter(function () {return !this.children.length;}).first()[0] || $editable)
+                    .focusIn().trigger("mousedown").trigger("keyup");
+            },0);
+
+            $editable.on('content_changed', this, function () {
+                if (window.top.odoo[callback+"_downup"]) {
+                    window.top.odoo[callback+"_downup"]($editable.prop('innerHTML'));
+                }
+            });
+        });
+
+        this.on("snippets:ready", this, function () {
+            $(window.top).trigger("resize");
+        });
+        return this._super();
+    }
+});
+
+snippet_editor.Class.include({
+    _get_snippet_url: function () {
+        return snippets_url;
+    }
+});
+
+translator.Class.include({
+    start: function () {
+        var self = this;
+        return this._super().then(function () {
+            $('button[data-action=save]').hide();
+            if (window.top.odoo[callback+"_editor"]) {
+                window.top.odoo[callback+"_editor"](self);
+            }
+        });
+    }
+});
+
+});
+
+$(function () {
+    odoo.init();
+});
diff --git a/addons/web_editor/static/src/js/inline.js b/addons/web_editor/static/src/js/inline.js
new file mode 100644
index 00000000000..c5fd2cfd924
--- /dev/null
+++ b/addons/web_editor/static/src/js/inline.js
@@ -0,0 +1,77 @@
+odoo.define('web_editor.inline', function (require) {
+'use strict';
+
+var editor = require('web_editor.editor');
+var rte = require('web_editor.rte');
+var widget = require('web_editor.widget');
+var transcoder = require('web_editor.transcoder');
+var snippet_editor = require('web_editor.snippet.editor');
+
+widget.MediaDialog.include({
+    start: function () {
+        this._super();
+        this.$('[href="#editor-media-video"]').addClass('hidden');
+    }
+});
+
+editor.Class.include({
+    start: function () {
+        var self = this;
+        if (location.search.indexOf("enable_editor") !== -1) {
+            this.on('rte:start', this, function () {
+                // move the caret at the end of the text when click after all content
+                $("#wrapwrap").on('click', function (event) {
+                    if ($(event.target).is("#wrapwrap") || $(event.target).is("#editable_area:empty")) {
+                        setTimeout(function () {
+                            var node = $("#editable_area *")
+                                .filter(function () { return this.textContent.match(/\S|\u00A0/); })
+                                .add($("#editable_area"))
+                                .last()[0];
+                            $.summernote.core.range.create(node, $.summernote.core.dom.nodeLength(node)).select();
+                        },0);
+                    }
+                });
+            });
+        }
+        return this._super.apply(this, arguments);
+    },
+});
+
+snippet_editor.Class.include({
+    start: function () {
+        var self = this;
+        this._super();
+        setTimeout(function () {
+            var $editable = $("#editable_area");
+            transcoder.img_to_font($editable);
+            transcoder.style_to_class($editable);
+        });
+    },
+    clean_for_save: function () {
+        this._super();
+        var $editable = $("#editable_area");
+        transcoder.class_to_style($editable);
+        transcoder.font_to_img($editable);
+    },
+
+});
+
+window.top.odoo[callback+"_updown"] = function (value, fields_values) {
+    var $editable = $("#editable_area");
+    value = value || "";
+    if (value.indexOf('on_change_model_and_list') === -1 && value !== $editable.html()) {
+        rte.history.recordUndo($editable, null, true);
+        if (snippet_editor.instance) {
+            snippet_editor.instance.make_active(false);
+        }
+        
+        $editable.html(value);
+
+        transcoder.img_to_font($editable);
+        transcoder.style_to_class($editable);
+    } else {
+        $editable.trigger("content_changed");
+    }
+};
+
+});
\ No newline at end of file
diff --git a/addons/web_editor/static/src/js/rte.js b/addons/web_editor/static/src/js/rte.js
new file mode 100644
index 00000000000..c8d5655cbd6
--- /dev/null
+++ b/addons/web_editor/static/src/js/rte.js
@@ -0,0 +1,597 @@
+odoo.define('web_editor.rte', function (require) {
+'use strict';
+
+var ajax = require('web.ajax');
+var core = require('web.core');
+var utils = require('web.utils');
+var Widget = require('web.Widget');
+var summernote = require('web_editor.summernote');
+var base = require('web_editor.base');
+
+var _t = core._t;
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* Summernote Lib (neek change to make accessible: method and object) */
+
+var dom = summernote.core.dom;
+var range = summernote.core.range;
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* Change History to have a global History for all summernote instances */
+
+var History = function History ($editable) {
+    var aUndo = [];
+    var pos = 0;
+
+    this.makeSnap = function (event, rng) {
+        rng = rng || range.create();
+        var elEditable = $(rng.sc).closest('.o_editable')[0];
+        if (!elEditable) {
+            return false;
+        }
+        return {
+            event: event,
+            editable: elEditable,
+            contents: elEditable.innerHTML,
+            bookmark: rng && rng.bookmark(elEditable),
+            scrollTop: $(elEditable).scrollTop()
+        };
+    };
+
+    this.applySnap = function (oSnap) {
+        var $editable = $(oSnap.editable);
+
+        if (!!document.documentMode) {
+            $editable.removeAttr("contentEditable").removeProp("contentEditable");
+        }
+
+        $editable.html(oSnap.contents).scrollTop(oSnap.scrollTop);
+        $(".oe_overlay").remove();
+        $(".note-control-selection").hide();
+        
+        $editable.trigger("content_changed");
+
+        if (!oSnap.bookmark || oSnap.event === "blur") {
+            return;
+        }
+
+        try {
+            var r = oSnap.editable.innerHTML === "" ? range.create(oSnap.editable, 0) : range.createFromBookmark(oSnap.editable, oSnap.bookmark);
+            r.select();
+        } catch(e) {
+            console.error(e);
+            return;
+        }
+
+        $(document).trigger("click");
+        $(".o_editable *").filter(function () {
+            var $el = $(this);
+            if($el.data('snippet-editor')) {
+                $el.removeData();
+            }
+        });
+
+
+        setTimeout(function () {
+            var target = dom.isBR(r.sc) ? r.sc.parentNode : dom.node(r.sc);
+            if (!target) {
+                return;
+            }
+
+            $editable.trigger("applySnap");
+
+            var evt = document.createEvent("MouseEvents");
+            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, target);
+            target.dispatchEvent(evt);
+
+            $editable.trigger("keyup");
+        },0);
+    };
+
+    this.undo = function () {
+        if (!pos) { return; }
+        var _toSnap = toSnap;
+        if (_toSnap) {
+            this.saveSnap();
+        }
+        if (!aUndo[pos] && (!aUndo[pos] || aUndo[pos].event !== 'undo')) {
+            var temp = this.makeSnap('undo');
+            if (temp && (!pos || temp.contents !== aUndo[pos-1].contents)) {
+                aUndo[pos] = temp;
+            } else {
+               pos--;
+            }
+        } else if (_toSnap) {
+            pos--;
+        }
+        this.applySnap(aUndo[Math.max(--pos,0)]);
+        while (pos && (aUndo[pos].event === "blur" || aUndo[pos].event === "activate")) {
+            this.applySnap(aUndo[--pos]);
+        }
+    };
+    this.hasUndo = function () {
+        return (toSnap && (toSnap.event !== "blur" && toSnap.event !== "activate" && toSnap.event !== "undo")) ||
+            !!_.find(aUndo.slice(0, pos+1), function (undo) {
+                return undo.event !== "blur" && undo.event !== "activate" && undo.event !== "undo";
+            });
+    };
+
+    this.getEditableHasUndo = function () {
+        var editable = [];
+        if ((toSnap && (toSnap.event !== "blur" && toSnap.event !== "activate" && toSnap.event !== "undo"))) {
+            editable.push(toSnap.editable);
+        }
+        _.each(aUndo.slice(0, pos+1), function (undo) {
+            if (undo.event !== "blur" && undo.event !== "activate" && undo.event !== "undo") {
+                editable.push(undo.editable);
+            }
+        });
+        return _.uniq(editable);
+    };
+
+    this.redo = function () {
+        if (!aUndo[pos+1]) { return; }
+        this.applySnap(aUndo[++pos]);
+        while (aUndo[pos+1] && (aUndo[pos].event === "blur" || aUndo[pos].event === "activate" || aUndo[pos].event === "undo")) {
+            this.applySnap(aUndo[Math.max(++pos,aUndo.length-1)]);
+        }
+    };
+    this.hasRedo = function () {
+        return aUndo.length > pos+1;
+    };
+
+    var toSnap, split;
+    this.recordUndo = function ($editable, event, internal_history) {
+        var self = this;
+        if (!$editable) {
+            $editable = $(range.create().sc).closest(".o_editable");
+        }
+
+        if (aUndo[pos] && (event === "applySnap" || event === "activate")) {
+            return;
+        }
+
+        if (!internal_history) {
+            if (!event || !toSnap || !aUndo[pos-1] || toSnap.event === "activate") { // don't trigger change for all keypress
+                setTimeout(function () {
+                    $editable.trigger("content_changed");
+                },0);
+            }
+        }
+
+        if (aUndo[pos]) {
+            pos = Math.min(pos, aUndo.length);
+            aUndo.splice(Math.max(pos,1), aUndo.length);
+        }
+
+        // => make a snap when the user change editable zone (because: don't make snap for each keydown)
+        if (toSnap && (toSnap.split || !event || toSnap.event !== event || toSnap.editable !== $editable[0])) {
+            this.saveSnap();
+        }
+
+        if (pos && aUndo[pos-1].editable !== $editable[0]) {
+            var snap = this.makeSnap('blur', range.create(aUndo[pos-1].editable, 0));
+            pos++;
+            aUndo.push(snap);
+        }
+
+        if (range.create()) {
+            toSnap = self.makeSnap(event);
+        } else {
+            toSnap = false;
+        }
+    };
+
+    this.splitNext = function () {
+        if (toSnap) {
+            toSnap.split = true;
+        }
+    };
+
+    this.saveSnap = function () {
+        if (toSnap) {
+            if (!aUndo[pos]) {
+                pos++;
+            }
+            aUndo.push(toSnap);
+            delete toSnap.split;
+            toSnap = null;
+        }
+    };
+};
+var history = new History();
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+// add focusIn to jQuery to allow to move caret into a div of a contentEditable area
+
+$.extend($.expr[':'],{
+    o_editable: function(node,i,m){
+        while (node) {
+            if (node.className) {
+                if (node.className.indexOf('o_not_editable')!==-1 ) {
+                    return false;
+                }
+                if (node.className.indexOf('o_editable')!==-1 ) {
+                    return true;
+                }
+            }
+            node = node.parentNode;
+        }
+        return false;
+    }
+});
+
+$.fn.extend({
+    focusIn: function () {
+        if (this.length) {
+            range.create(dom.firstChild(this[0]), 0).select();
+        }
+        return this;
+    },
+    focusInEnd: function () {
+        if (this.length) {
+            var last = dom.lastChild(this[0]);
+            range.create(last, dom.nodeLength(last)).select();
+        }
+        return this;
+    },
+    selectContent: function () {
+        if (this.length) {
+            var next = dom.lastChild(this[0]);
+            range.create(dom.firstChild(this[0]), 0, next, next.textContent.length).select();
+        }
+        return this;
+    }
+});
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+/* ----- RICH TEXT EDITOR ---- */
+
+var RTE = Widget.extend({
+    init: function (EditorBar, config) {
+        var self = this;
+        this.EditorBar = EditorBar;
+        data.rte = this;
+        this._super.apply(this, arguments);
+
+        this.init_bootstrap_carousel = $.fn.carousel;
+        this.edit_bootstrap_carousel = function () {
+            var res = self.init_bootstrap_carousel.apply(this, arguments);
+            // off bootstrap keydown event to remove event.preventDefault()
+            // and allow to change cursor position
+            $(this).off('keydown.bs.carousel');
+            return res;
+        };
+
+        if (config) {
+            this.config = config;
+        }
+    },
+    /**
+     * Add a record undo to history
+     * @param {DOM} target where the dom is changed is editable zone
+     */
+    historyRecordUndo: function ($target, event, internal_history) {
+        var rng = range.create();
+        var $editable = $(rng && rng.sc).closest(".o_editable");
+        if (!rng || !$editable.length) {
+            $editable = $($target).closest(".o_editable");
+            rng = range.create($target.closest("*")[0],0);
+        } else {
+            rng = $editable.data('range') || rng;
+        }
+        rng.select();
+        history.recordUndo($editable, event, internal_history);
+    },
+    /**
+     * 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: function () {
+        var self = this;
+
+        this.saving_mutex = new utils.Mutex();
+
+        $.fn.carousel = this.edit_bootstrap_carousel;
+
+        $(document).on('keydown', this, this.onKeydown);
+        $(document).on('mousedown activate', this, this.onMousedown);
+        $(document).on('mouseup', this, this.onMouseup);
+
+        $('.o_not_editable').attr("contentEditable", false);
+
+        var $editable = this.editable();
+
+        $editable.addClass('o_editable').data('rte', self);
+
+        $editable.each(function () {
+            var $node = $(this);
+
+            // add class to display inline-block for empty t-field
+            if(window.getComputedStyle(this).display === "inline" && $node.data('oe-type') !== "image") {
+                $node.addClass('o_is_inline_editable');
+            }
+
+            // start element observation
+            $node.one('content_changed', function () {
+                $(this).addClass('o_dirty');
+            });
+
+            $node.data('initInnerHTML', $node.html());
+        });
+
+        $(document).on('content_changed', '.o_editable', function () {
+            self.trigger('change', this);
+        });
+
+        $('#wrapwrap, .o_editable').on('click', '*', this, this.onClick);
+
+        $('body').addClass("editor_enable");
+
+        $(document)
+            .tooltip({
+                selector: '[data-oe-readonly]',
+                container: 'body',
+                trigger: 'hover',
+                delay: { "show": 1000, "hide": 100 },
+                placement: 'bottom',
+                title: _t("Readonly field")
+            })
+            .on('click', function () {
+                $(this).tooltip('hide');
+            });
+
+        $(document).trigger('mousedown');
+        self.trigger('rte:start');
+    },
+
+    save: function (context) {
+        var self = this;
+
+        this.__saved = {}; // list of allready saved views and data
+
+        var editables = history.getEditableHasUndo();
+
+        var defs = $('.o_dirty')
+            .removeAttr('contentEditable')
+            .removeClass('o_dirty oe_carlos_danger o_is_inline_editable')
+            .map(function () {
+                var $el = $(this);
+
+                $el.find('[class]').filter(function () {
+                    if (!this.className.match(/\S/)) {
+                        this.removeAttribute("class");
+                    }
+                });
+
+                // 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, context)
+                        .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('o_dirty oe_carlos_danger ' + id);
+                            return $.Deferred().reject({
+                                id: id,
+                                error: response.data,
+                            });
+                        });
+                });
+            }).get();
+
+        return $.when.apply(null, defs).then(function () {
+            window.onbeforeunload = null;
+        }, function (failed) {
+            // If there were errors, re-enable edition
+            self.stop();
+            self.start();
+            // jquery's deferred being a pain in the ass
+            if (!_.isArray(failed)) { failed = [failed]; }
+
+            _(failed).each(function (failure) {
+                var html = failure.error.exception_type === "except_osv";
+                if (html) {
+                    var msg = $("<div/>").text(failure.error.message).html();
+                    var data = msg.substring(3,msg.length-2).split(/', u'/);
+                    failure.error.message = '<b>' + data[0] + '</b>' + data[1];
+                }
+                $('.o_editable.' + failure.id)
+                    .removeClass(failure.id)
+                    .popover({
+                        html: html,
+                        trigger: 'hover',
+                        content: failure.error.message,
+                        placement: 'auto top',
+                    })
+                    // Force-show popovers so users will notice them.
+                    .popover('show');
+            });
+        });
+    },
+
+    saveElement: function ($el, context) {
+        // remove multi edition
+        if ($el.data('oe-model')) {
+            var key =  $el.data('oe-model')+":"+$el.data('oe-id')+":"+$el.data('oe-field')+":"+$el.data('oe-type')+":"+$el.data('oe-expression');
+            if (this.__saved[key]) return true;
+            this.__saved[key] = true;
+        }
+
+        return ajax.jsonRpc('/web/dataset/call', 'call', {
+            model: 'ir.ui.view',
+            method: 'save',
+            args: [
+                $el.data('oe-id'),
+                $el.prop('outerHTML'),
+                $el.data('oe-xpath') || null,
+                context || base.get_context()
+            ],
+        });
+    },
+
+    stop: function () {
+        if (this.$last) {
+            this.$last.destroy();
+            this.$last = null;
+        }
+
+        $.fn.carousel = this.init_bootstrap_carousel;
+
+        $(document).off('keydown', this.onKeydown);
+        $(document).off('mousedown applySnap', this.onMousedown);
+        $(document).off('mouseup', this.onMouseup);
+        $('.o_not_editable').removeAttr("contentEditable");
+        $(document).off('content_changed').removeClass('o_is_inline_editable').removeData('rte');
+        $('#wrapwrap, .o_editable').off('click', this.onClick);
+        $(document).tooltip('destroy');
+        $('body').removeClass("editor_enable");
+        this.trigger('rte:stop');
+    },
+
+    cancel: function () {
+        $('.o_editable').each(function () {
+            var $node = $(this);
+            $node.data('initInnerHTML', $node.html());
+        });
+        this.stop();
+    },
+
+    onClick: function (event) {
+        event.preventDefault();
+    },
+
+    // handler for cancel editor
+    onKeydown: function (event) {
+        if (event.keyCode === 27 && !$('.modal-content:visible').length) {
+            setTimeout(function () {
+                $('#editor-top-navbar [data-action="cancel"]').click();
+                var $modal = $('.modal-content > .modal-body').parents(".modal:first");
+                $modal.off('keyup.dismiss.bs.modal');
+                setTimeout(function () {
+                    $modal.on('keyup.dismiss.bs.modal', function () {
+                        $(this).modal('hide');
+                    });
+                },500);
+            },0);
+        }
+    },
+
+    // activate editor
+    onMousedown: function (event) {
+        var $target = $(event.target);
+        var $editable = $target.closest('.o_editable');
+
+        if (!$editable.size()) {
+            return;
+        }
+
+        var rte = $editable.data('rte') || event.data;
+
+        if (rte && rte.$last && (!$editable.size() || rte.$last[0] != $editable[0])) {
+            var $destroy = rte.$last;
+            history.splitNext();
+
+            setTimeout(function () {
+                var id = $destroy.data('note-id');
+                $destroy.destroy().removeData('note-id').removeAttr('data-note-id');
+                $('#note-popover-'+id+', #note-handle-'+id+', #note-dialog-'+id+'').remove();
+            },150); // setTimeout to remove flickering when change to editable zone (re-create an editor)
+            rte.$last = null;
+        }
+        if ($editable.size() && (!rte.$last || rte.$last[0] != $editable[0]) &&
+                ($target.closest('[contenteditable]').attr('contenteditable') || "").toLowerCase() !== 'false') {
+
+            $editable.summernote(rte.config($editable));
+
+            $editable.data('NoteHistory', history);
+            rte.$last = $editable;
+
+            // firefox & IE fix
+            try {
+                document.execCommand('enableObjectResizing', false, false);
+                document.execCommand('enableInlineTableEditing', false, false);
+                document.execCommand( '2D-position', false, false);
+            } catch (e) {}
+            document.body.addEventListener('resizestart', function (evt) {evt.preventDefault(); return false;});
+            document.body.addEventListener('movestart', function (evt) {evt.preventDefault(); return false;});
+            document.body.addEventListener('dragstart', function (evt) {evt.preventDefault(); return false;});
+
+            if (!range.create()) {
+                $editable.focusIn();
+            }
+
+            if (dom.isImg($target[0])) {
+                $target.trigger('mousedown'); // for activate selection on picture
+            }
+        }
+    },
+
+    onMouseup: function (event) {
+        var $target = $(event.target);
+        var $editable = $target.closest('.o_editable');
+
+        if (!$editable.size()) {
+            return;
+        }
+
+        var rte = event.data;
+        setTimeout(function () {
+            rte.historyRecordUndo($target, 'activate',  true);
+        },0);
+    },
+
+    editable: function () {
+        return $('#wrapwrap [data-oe-model]')
+            .not('.o_not_editable')
+            .filter(function () {
+                return !$(this).closest('.o_not_editable').length;
+            })
+            .not('link, script')
+            .not('[data-oe-readonly]')
+            .not('img[data-oe-field="arch"], br[data-oe-field="arch"], input[data-oe-field="arch"]')
+            .not('.oe_snippet_editor')
+            .add('.o_editable');
+    },
+
+    config: function ($editable) {
+        return {
+            'airMode' : true,
+            'focus': false,
+            'airPopover': [
+                ['style', ['style']],
+                ['font', ['bold', 'italic', 'underline', 'clear']],
+                ['fontsize', ['fontsize']],
+                ['color', ['color']],
+                ['para', ['ul', 'ol', 'paragraph']],
+                ['table', ['table']],
+                ['insert', ['link', 'picture']],
+                ['history', ['undo', 'redo']],
+            ],
+            'styleWithSpan': false,
+            'inlinemedia' : ['p'],
+            'lang': "odoo",
+            'onChange': function (html, $editable) {
+                $editable.trigger("content_changed");
+            }
+        };
+    },
+});
+
+
+var data = {
+    'history': history,
+    'Class': RTE
+};
+return data;
+
+});
diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
new file mode 100644
index 00000000000..c5e5dd6dd51
--- /dev/null
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -0,0 +1,787 @@
+odoo.define('web_editor.rte.summernote', function (require) {
+'use strict';
+
+var core = require('web.core');
+var ajax = require('web.ajax');
+var base = require('web_editor.base');
+var widgets = require('web_editor.widget');
+var rte = require('web_editor.rte');
+
+var QWeb = core.qweb;
+var _t = core._t;
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ajax.jsonRpc('/web/dataset/call', 'call', {
+    'model': 'ir.ui.view',
+    'method': 'read_template',
+    'args': ['web_editor.colorpicker', base.get_context()]
+}).done(function (data) {
+    QWeb.add_template(data);
+});
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* Summernote Lib (neek change to make accessible: method and object) */
+
+var dom = $.summernote.core.dom;
+var range = $.summernote.core.range;
+var eventHandler = $.summernote.eventHandler;
+var renderer = $.summernote.renderer;
+var options = $.summernote.options;
+
+var tplButton = renderer.getTemplate().button;
+var tplIconButton = renderer.getTemplate().iconButton;
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* update and change the popovers content, and add history button */
+
+var fn_createPalette = renderer.createPalette;
+renderer.createPalette = function ($container, options) {
+    fn_createPalette.call(this, $container, options);
+
+    if (!QWeb.has_template('web_editor.colorpicker')) {
+        return;
+    }
+
+    var $color = $container.find('.note-color');
+    var html = QWeb.render('web_editor.colorpicker');
+    $color.find('.note-color-palette').prepend(html);
+    var $bg = $color.find('.colorpicker:first button');
+    var $fore = $color.find('.colorpicker:last button');
+
+    $bg.each(function () { $(this).attr('data-event', 'backColor').attr('data-value', $(this).attr('class')); });
+    $fore.each(function () { $(this).attr('data-event', 'foreColor').attr('data-value', $(this).attr('class').replace(/bg-/, 'text-')); });
+};
+
+var fn_tplPopovers = renderer.tplPopovers;
+renderer.tplPopovers = function (lang, options) {
+    var $popover = $(fn_tplPopovers.call(this, lang, options));
+
+    var $imagePopover = $popover.find('.note-image-popover');
+    var $linkPopover = $popover.find('.note-link-popover');
+    var $airPopover = $popover.find('.note-air-popover');
+
+    if (window === window.top) {
+        $popover.children().addClass("hidden-xs");
+    }
+
+    //////////////// image popover
+
+    // add center button for images
+    var $centerbutton = $(tplIconButton('fa fa-align-center', {
+            title: _t('Center'),
+            event: 'floatMe',
+            value: 'center'
+        })).insertAfter($imagePopover.find('[data-event="floatMe"][data-value="left"]'));
+    $imagePopover.find('button[data-event="removeMedia"]').parent().remove();
+    $imagePopover.find('button[data-event="floatMe"][data-value="none"]').remove();
+
+    var $alt = $('<div class="btn-group"/>');
+    $alt.prependTo($imagePopover.find('.popover-content'));
+    $alt.append('<button class="btn btn-default btn-sm btn-small" data-event="alt"><strong>Alt: </strong><span class="o_image_alt"></span></button>');
+
+    // padding button
+    var $padding = $('<div class="btn-group"/>');
+    $padding.insertBefore($imagePopover.find('.btn-group:first'));
+    var $button = $(tplIconButton('fa fa-plus-square-o', {
+            title: _t('Padding'),
+            dropdown: true
+        })).appendTo($padding);
+    var $ul = $('<ul class="dropdown-menu"/>').insertAfter($button);
+    $ul.append('<li><a data-event="padding" href="#" data-value="">'+_t('None')+'</a></li>');
+    $ul.append('<li><a data-event="padding" href="#" data-value="small">'+_t('Small')+'</a></li>');
+    $ul.append('<li><a data-event="padding" href="#" data-value="medium">'+_t('Medium')+'</a></li>');
+    $ul.append('<li><a data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>');
+    $ul.append('<li><a data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>');
+
+    // circle, boxed... options became toggled
+    $imagePopover.find('[data-event="imageShape"]:not([data-value])').remove();
+    var $button = $(tplIconButton('fa fa-sun-o', {
+            title: _t('Shadow'),
+            event: 'imageShape',
+            value: 'shadow'
+        })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-circle"]'));
+
+    // add spin for fa
+    var $spin = $('<div class="btn-group hidden only_fa"/>').insertAfter($button.parent());
+    $(tplIconButton('fa fa-refresh', {
+            title: _t('Spin'),
+            event: 'imageShape',
+            value: 'fa-spin'
+        })).appendTo($spin);
+
+    // resize for fa
+    var $resizefa = $('<div class="btn-group hidden only_fa"/>')
+        .insertAfter($imagePopover.find('.btn-group:has([data-event="resize"])'));
+    for (var size=1; size<=5; size++) {
+        $(tplButton('<span class="note-fontsize-10">'+size+'x</span>', {
+          title: size+"x",
+          event: 'resizefa',
+          value: size+''
+        })).appendTo($resizefa);
+    }
+    var $colorfa = $airPopover.find('.note-color').clone();
+    $colorfa.find(".btn-group:first").remove();
+    $colorfa.find("ul.dropdown-menu").css('min-width', '172px');
+    $colorfa.find('button[data-event="color"]').attr('data-value', '{"foreColor": "#f00"}')
+        .find("i").css({'background': '', 'color': '#f00'});
+    $resizefa.after($colorfa);
+
+    // show dialog box and delete
+    var $imageprop = $('<div class="btn-group"/>');
+    $imageprop.appendTo($imagePopover.find('.popover-content'));
+    $(tplIconButton('fa fa-picture-o', {
+            title: _t('Edit'),
+            event: 'showImageDialog'
+        })).appendTo($imageprop);
+    $(tplIconButton('fa fa-trash-o', {
+            title: _t('Remove'),
+            event: 'delete'
+        })).appendTo($imageprop);
+
+    $imagePopover.find('.popover-content').append($airPopover.find(".note-history").clone());
+
+    $imagePopover.find('[data-event="showImageDialog"]').before($airPopover.find('[data-event="showLinkDialog"]').clone());
+    
+    //////////////// link popover
+
+    $linkPopover.find('.popover-content').append($airPopover.find(".note-history").clone());
+
+    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fa fa-link");
+    $linkPopover.find('button[data-event="unlink"]').before($airPopover.find('button[data-event="showImageDialog"]').clone());
+
+    //////////////// text/air popover
+
+    //// highlight the text format
+    $airPopover.find('.note-style').on('mousedown', function () {
+        var $format = $airPopover.find('[data-event="formatBlock"]');
+        var node = range.create().sc;
+        var formats = $format.map(function () { return $(this).data("value"); }).get();
+        while (node && (!node.tagName || (!node.tagName || formats.indexOf(node.tagName.toLowerCase()) === -1))) {
+            node = node.parentNode;
+        }
+        $format.parent().removeClass('active');
+        $format.filter('[data-value="'+(node ? node.tagName.toLowerCase() : "p")+'"]')
+            .parent().addClass("active");
+    });
+
+    //////////////// tooltip
+
+    $airPopover.add($linkPopover).add($imagePopover).find("button")
+        .tooltip('destroy')
+        .tooltip({
+            container: 'body',
+            trigger: 'hover',
+            placement: 'bottom'
+        }).on('click', function () {$(this).tooltip('hide');});
+
+    return $popover;
+};
+
+var fn_boutton_update = eventHandler.popover.button.update;
+eventHandler.popover.button.update = function ($container, oStyle) {
+    // stop animation when edit content
+    var previous = $(".note-control-selection").data('target');
+    if (previous) {
+        $(previous).css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
+    }
+    if (oStyle.image) {
+        $(oStyle.image).css({"-webkit-animation": "none", "animation": "none"});
+    }
+    // end
+
+    fn_boutton_update.call(this, $container, oStyle);
+
+    if (oStyle.image) {
+        $container.find('[data-event]').parent().removeClass("active");
+
+        $container.find('a[data-event="padding"][data-value="small"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-small"));
+        $container.find('a[data-event="padding"][data-value="medium"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-medium"));
+        $container.find('a[data-event="padding"][data-value="large"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-large"));
+        $container.find('a[data-event="padding"][data-value="xl"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-xl"));
+        $container.find('a[data-event="padding"][data-value=""]').parent().toggleClass("active", !$container.find('.active a[data-event="padding"]').length);
+
+        if (dom.isImgFont(oStyle.image)) {
+
+            $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-event="imageShape"])').addClass("hidden");
+            $container.find('.only_fa').removeClass("hidden");
+            $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
+            $container.find('button[data-event="resizefa"][data-value="3"]').toggleClass("active", $(oStyle.image).hasClass("fa-3x"));
+            $container.find('button[data-event="resizefa"][data-value="4"]').toggleClass("active", $(oStyle.image).hasClass("fa-4x"));
+            $container.find('button[data-event="resizefa"][data-value="5"]').toggleClass("active", $(oStyle.image).hasClass("fa-5x"));
+            $container.find('button[data-event="resizefa"][data-value="1"]').toggleClass("active", !$container.find('.active[data-event="resizefa"]').length);
+
+            $container.find('button[data-event="imageShape"][data-value="fa-spin"]').toggleClass("active", $(oStyle.image).hasClass("fa-spin"));
+            
+            $container.find('.note-color').removeClass("hidden");
+
+        } else {
+
+            $container.find('.hidden:not(.only_fa)').removeClass("hidden");
+            $container.find('.only_fa').addClass("hidden");
+            var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/);
+            if (width) {
+                width = width[2];
+            }
+            $container.find('button[data-event="resize"][data-value="1"]').toggleClass("active", width === "100%");
+            $container.find('button[data-event="resize"][data-value="0.5"]').toggleClass("active", width === "50%");
+            $container.find('button[data-event="resize"][data-value="0.25"]').toggleClass("active", width === "25%");
+
+            $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
+            
+            if (!$(oStyle.image).is("img")) {
+                $container.find('.btn-group:has(button[data-event="imageShape"])').addClass("hidden");
+            }
+
+            $container.find('.note-color').addClass("hidden");
+
+        }
+
+        $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("pull-left"));
+        $container.find('button[data-event="floatMe"][data-value="center"]').toggleClass("active", $(oStyle.image).hasClass("center-block"));
+        $container.find('button[data-event="floatMe"][data-value="right"]').toggleClass("active", $(oStyle.image).hasClass("pull-right"));
+
+        $(oStyle.image).trigger('attributes_change');
+    }
+};
+
+var fn_popover_update = eventHandler.popover.update;
+eventHandler.popover.update = function ($popover, oStyle, isAirMode) {
+    var $imagePopover = $popover.find('.note-image-popover');
+    var $linkPopover = $popover.find('.note-link-popover');
+    var $airPopover = $popover.find('.note-air-popover');
+
+    fn_popover_update.call(this, $popover, oStyle, isAirMode);
+
+    if (!isAirMode || $(oStyle.range.sc).closest('[data-oe-model]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"])').length) {
+        $imagePopover.hide();
+        $linkPopover.hide();
+        $airPopover.hide();
+        return;
+    }
+
+    if (oStyle.image) {
+        if (oStyle.image.parentNode.className.match(/(^|\s)media_iframe_video(\s|$)/i)) {
+            oStyle.image = oStyle.image.parentNode;
+        }
+        var alt =  $(oStyle.image).attr("alt");
+
+        $imagePopover.find('.o_image_alt').text( (alt || "").replace(/&quot;/g, '"') ).parent().toggle(oStyle.image.tagName === "IMG");
+        $imagePopover.show();
+
+        range.createFromNode(dom.firstChild(oStyle.image)).select();
+    } else {
+        $(".note-control-selection").hide();
+    }
+
+    if (oStyle.image || (!oStyle.range.isCollapsed() || (oStyle.range.sc.tagName && !dom.isAnchor(oStyle.range.sc)) || (oStyle.image && !$(oStyle.image).closest('a').length))) {
+        $linkPopover.hide();
+        oStyle.anchor = false;
+    }
+
+    if (oStyle.image || oStyle.anchor || !$(oStyle.range.sc).closest('.note-editable').length) {
+        $airPopover.hide();
+    } else {
+        $airPopover.show();
+    }
+};
+
+eventHandler.handle.update = function ($handle, oStyle, isAirMode) {
+    $handle.toggle(!!oStyle.image);
+    if (oStyle.image) {
+        var $selection = $handle.find('.note-control-selection');
+        var $image = $(oStyle.image);
+        var szImage = {
+          w: parseInt($image.outerWidth(true), 10),
+          h: parseInt($image.outerHeight(true), 10)
+        };
+        $selection.data('target', oStyle.image); // save current image element.
+        var sSizing = szImage.w + 'x' + szImage.h;
+        $selection.find('.note-control-selection-info').text(szImage.h > 50 ? sSizing : "");
+
+        $selection.find('.note-control-sizing').toggleClass('note-control-sizing note-control-holder').css({
+                'border-top': 0,
+                'border-left': 0
+            });
+    }
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* hack for image and link editor */
+
+function getImgTarget () {
+  return $(".note-control-selection").data('target');
+}
+eventHandler.editor.padding = function ($editable, sValue) {
+    var $target = $(getImgTarget());
+    var paddings = "small medium large xl".split(/\s+/);
+    $editable.data('NoteHistory').recordUndo();
+    if (sValue.length) {
+        paddings.splice(paddings.indexOf(sValue),1);
+        $target.toggleClass('padding-'+sValue);
+    }
+    $target.removeClass("padding-" + paddings.join(" padding-"));
+};
+eventHandler.editor.resize = function ($editable, sValue) {
+    var $target = $(getImgTarget());
+    $editable.data('NoteHistory').recordUndo();
+    var width = ($target.attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+)%/);
+    if (width) {
+        width = width[2]/100;
+    }
+    $(getImgTarget()).css('width', width != sValue ? (sValue * 100) + '%' : '');
+};
+eventHandler.editor.resizefa = function ($editable, sValue) {
+    var $target = $(getImgTarget());
+    $editable.data('NoteHistory').recordUndo();
+    $target.attr('class', $target.attr('class').replace(/\s*fa-[0-9]+x/g, ''));
+    if (+sValue > 1) {
+        $target.addClass('fa-'+sValue+'x');
+    }
+};
+eventHandler.editor.floatMe = function ($editable, sValue) {
+    var $target = $(getImgTarget());
+    $editable.data('NoteHistory').recordUndo();
+    switch (sValue) {
+        case 'center': $target.toggleClass('center-block').removeClass('pull-right pull-left'); break;
+        case 'left': $target.toggleClass('pull-left').removeClass('pull-right center-block'); break;
+        case 'right': $target.toggleClass('pull-right').removeClass('pull-left center-block'); break;
+    }
+};
+eventHandler.editor.imageShape = function ($editable, sValue) {
+    var $target = $(getImgTarget());
+    $editable.data('NoteHistory').recordUndo();
+    $target.toggleClass(sValue);
+};
+
+eventHandler.dialog.showLinkDialog = function ($editable, $dialog, linkInfo) {
+    $editable.data('range').select();
+    $editable.data('NoteHistory').recordUndo();
+    
+    var editor = new widgets.LinkDialog($editable, linkInfo);
+    editor.appendTo(document.body);
+
+    var def = new $.Deferred();
+    editor.on("save", this, function (linkInfo) {
+        linkInfo.range.select();
+        $editable.data('range', linkInfo.range);
+        def.resolve(linkInfo);
+        $editable.trigger('keyup');
+        $('.note-popover .note-link-popover').show();
+    });
+    editor.on("cancel", this, function () {
+        def.reject();
+    });
+    return def;
+};
+eventHandler.dialog.showImageDialog = function ($editable) {
+    var r = $editable.data('range');
+    if (r.sc.tagName && r.sc.childNodes.length) {
+        r.sc = r.sc.childNodes[r.so];
+    }
+    var editor = new widgets.MediaDialog($editable, dom.isImg(r.sc) ? r.sc : null);
+    editor.appendTo(document.body);
+    return new $.Deferred().reject();
+};
+$.summernote.pluginEvents.alt = function (event, editor, layoutInfo, sorted) {
+    var $editable = layoutInfo.editable();
+    var $selection = layoutInfo.handle().find('.note-control-selection');
+    var media = $selection.data('target');
+    new widgets.alt($editable, media).appendTo(document.body);
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+dom.isVoid = function (node) {
+    return node && /^BR|^IMG|^HR/.test(node.nodeName.toUpperCase()) || dom.isImg(node);
+};
+dom.isImg = function (node) {
+    return dom.isImgFont(node) || (node && (node.nodeName === "IMG" || (node.className && node.className.match(/(^|\s)media_iframe_video(\s|$)/i)) ));
+};
+dom.isForbiddenNode = function (node) {
+    return $(node).is(".media_iframe_video, .fa, img");
+};
+
+dom.isImgFont = function (node) {
+    var nodeName = node && node.nodeName.toUpperCase();
+    var className = (node && node.className || "");
+    if (node && (nodeName === "SPAN" || nodeName === "I") && className.length) {
+        var classNames = className.split(/\s+/);
+        for (var k=0; k<widgets.fontIcons.length; k++) {
+            if (_.intersection(widgets.fontIcons[k].icons, classNames).length) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+// re-overwrite font to include theme icons
+var isFont = dom.isFont;
+dom.isFont = function (node) {
+    return dom.isImgFont(node) || isFont(node);
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+var fn_visible = $.summernote.pluginEvents.visible;
+$.summernote.pluginEvents.visible = function (event, editor, layoutInfo) {
+    var res = fn_visible.call(this, event, editor, layoutInfo);
+    var $node = $(dom.node(range.create().sc));
+    if (($node.is('[data-oe-type="html"]') || $node.is('[data-oe-field="arch"]')) &&
+        $node.hasClass("o_editable") &&
+        !$node[0].children.length &&
+        "h1 h2 h3 h4 h5 h6 p b bold i u code sup strong small pre th td".toUpperCase().indexOf($node[0].nodeName) === -1) {
+        var p = $('<p><br/></p>')[0];
+        $node.append( p );
+        range.createFromNode(p.firstChild).select();
+    }
+    return res;
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* fix ie and re-range to don't break snippet*/
+
+var initial_data = {};
+function reRangeSelectKey (event) {
+    initial_data.range = null;
+    if (event.shiftKey && event.keyCode >= 37 && event.keyCode <= 40 && !$(event.target).is("input, textarea, select")) {
+        var r = range.create();
+        if (r) {
+            var rng = r.reRange(event.keyCode <= 38);
+            if (r !== rng) {
+                rng.select();
+            }
+        }
+    }
+}
+function reRangeSelect (event, dx, dy) {
+    var r = range.create();
+    if (!r || r.isCollapsed()) return;
+
+    // check if the user move the caret on up or down
+    var data = r.reRange(dy < 0 || (dy === 0 && dx < 0));
+
+    if (data.sc !== r.sc || data.so !== r.so || data.ec !== r.ec || data.eo !== r.eo) {
+        setTimeout(function () {
+            data.select();
+            $(data.sc.parentNode).closest('.note-popover');
+        },0);
+    }
+
+    $(data.sc).closest('.o_editable').data('range', r);
+    return r;
+}
+function summernote_mouseup (event) {
+    if ($(event.target).closest("#web_editor-top-navbar, .note-popover").length) {
+        return;
+    }
+    // don't rerange if simple click
+    if (initial_data.event) {
+        var dx = event.clientX - (event.shiftKey ? initial_data.rect.left : initial_data.event.clientX);
+        var dy = event.clientY - (event.shiftKey ? initial_data.rect.top : initial_data.event.clientY);
+        if (10 < Math.pow(dx, 2)+Math.pow(dy, 2)) {
+            reRangeSelect(event, dx, dy);
+        }
+    }
+
+    if (!$(event.target).closest(".o_editable").length) {
+        return;
+    }
+    if (!initial_data.range || !event.shiftKey) {
+        setTimeout(function () {
+            initial_data.range = range.create();
+        },0);
+    }
+}
+var remember_selection;
+function summernote_mousedown (event) {
+    rte.history.splitNext();
+
+    var $editable = $(event.target).closest(".o_editable, .note-editor");
+    
+    if (!!document.documentMode) {
+        summernote_ie_fix(event, function (node) { return node.tagName === "DIV" || node.tagName === "IMG" || (node.dataset && node.dataset.oeModel); });
+    } else if (last_div && event.target !== last_div) {
+        if (last_div.tagName === "A") {
+            summernote_ie_fix(event, function (node) { return node.dataset && node.dataset.oeModel; });
+        } else if ($editable.length) {
+            if (summernote_ie_fix(event, function (node) { return node.tagName === "A"; })) {
+                r = range.create();
+                r.select();
+            }
+        }
+    }
+
+    // remember_selection when click on non editable area
+    var r = range.create();
+    if ($(r ? dom.node(r.sc) : event.srcElement || event.target).closest('#web_editor-top-navbar, #oe_main_menu_navbar, .note-popover, .note-toolbar, .modal').length) {
+        if (!$(event.target).is('input, select, label, button, a')) {
+            if (!remember_selection && $editable[0]) {
+                remember_selection = range.create(dom.firstChild($editable[0]), 0);
+            }
+            if (!remember_selection && $editable[0]) {
+                try {
+                    remember_selection.select();
+                } catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    } else if (r && $(dom.node(r.sc)).closest('.o_editable, .note-editable').length) {
+        remember_selection = r;
+    }
+
+    initial_data.event = event;
+
+    // keep selection when click with shift
+    if (event.shiftKey && $editable.length) {
+        if (initial_data.range) {
+            initial_data.range.select();
+        }
+        var rect = r && r.getClientRects();
+        initial_data.rect = rect && rect.length ? rect[0] : { top: 0, left: 0 };
+    }
+}
+
+var last_div;
+var last_div_change;
+var last_editable;
+function summernote_ie_fix (event, pred) {
+    var editable;
+    var div;
+    var node = event.target;
+    while(node.parentNode) {
+        if (!div && pred(node)) {
+            div = node;
+        }
+        if(last_div !== node && (node.getAttribute('contentEditable')==='false' || node.className && (node.className.indexOf('o_not_editable') !== -1))) {
+            break;
+        }
+        if (node.className && node.className.indexOf('o_editable') !== -1) {
+            if (!div) {
+                div = node;
+            }
+            editable = node;
+            break;
+        }
+        node = node.parentNode;
+    }
+
+    if (!editable) {
+        $(last_div_change).removeAttr("contentEditable").removeProp("contentEditable");
+        $(last_editable).attr("contentEditable", "true").prop("contentEditable", "true");
+        last_div_change = null;
+        last_editable = null;
+        return;
+    }
+
+    if (div === last_div) {
+        return;
+    }
+
+    last_div = div;
+
+    $(last_div_change).removeAttr("contentEditable").removeProp("contentEditable");
+
+    if (last_editable !== editable) {
+        if ($(editable).is("[contentEditable='true']")) {
+           $(editable).removeAttr("contentEditable").removeProp("contentEditable");
+            last_editable = editable;
+        } else {
+            last_editable = null;
+        }
+    }
+    if (!$(div).attr("contentEditable") && !$(div).is("[data-oe-type='many2one'], [data-oe-type='contact']")) {
+        $(div).attr("contentEditable", "true").prop("contentEditable", "true");
+        last_div_change = div;
+    } else {
+        last_div_change = null;
+    }
+    return editable !== div ? div : null;
+}
+
+var fn_attach = eventHandler.attach;
+eventHandler.attach = function (oLayoutInfo, options) {
+    fn_attach.call(this, oLayoutInfo, options);
+    oLayoutInfo.editor.on('dragstart', 'img', function (e) { e.preventDefault(); });
+    $(document).on('mousedown', summernote_mousedown);
+    $(document).on('mouseup', summernote_mouseup);
+    oLayoutInfo.editor.off('click').on('click', function (e) {e.preventDefault();}); // if the content editable is a link
+    oLayoutInfo.editor.on('dblclick', 'img, .media_iframe_video, span.fa, i.fa, span.fa', function (event) {
+        if (!$(event.target).closest(".note-toolbar").length) { // prevent icon edition of top bar for default summernote
+            new widgets.MediaDialog(oLayoutInfo.editor, event.target).appendTo(document.body);
+        }
+    });
+    $(document).on("keyup", reRangeSelectKey);
+    
+    var clone_data = false;
+    var $node = oLayoutInfo.editor;
+    if ($node.data('oe-model') || $node.data('oe-translation-id')) {
+        $node.on('content_changed', function () {
+            var $nodes = $('[data-oe-model], [data-oe-translation-id]')
+                .filter(function () { return this != $node[0];});
+
+            if ($node.data('oe-model')) {
+                $nodes = $nodes.filter('[data-oe-model="'+$node.data('oe-model')+'"]')
+                    .filter('[data-oe-id="'+$node.data('oe-id')+'"]')
+                    .filter('[data-oe-field="'+$node.data('oe-field')+'"]');
+            }
+            if ($node.data('oe-translation-id')) $nodes = $nodes.filter('[data-oe-translation-id="'+$node.data('oe-translation-id')+'"]');
+            if ($node.data('oe-type')) $nodes = $nodes.filter('[data-oe-type="'+$node.data('oe-type')+'"]');
+            if ($node.data('oe-expression')) $nodes = $nodes.filter('[data-oe-expression="'+$node.data('oe-expression')+'"]');
+            if ($node.data('oe-xpath')) $nodes = $nodes.filter('[data-oe-xpath="'+$node.data('oe-xpath')+'"]');
+            if ($node.data('oe-contact-options')) $nodes = $nodes.filter('[data-oe-contact-options="'+$node.data('oe-contact-options')+'"]');
+
+            var nodes = $node.get();
+
+            if ($node.data('oe-type') === "many2one") {
+                $nodes = $nodes.add($('[data-oe-model]')
+                    .filter(function () { return this != $node[0] && nodes.indexOf(this) === -1; })
+                    .filter('[data-oe-many2one-model="'+$node.data('oe-many2one-model')+'"]')
+                    .filter('[data-oe-many2one-id="'+$node.data('oe-many2one-id')+'"]')
+                    .filter('[data-oe-type="many2one"]'));
+
+                $nodes = $nodes.add($('[data-oe-model]')
+                    .filter(function () { return this != $node[0] && nodes.indexOf(this) === -1; })
+                    .filter('[data-oe-model="'+$node.data('oe-many2one-model')+'"]')
+                    .filter('[data-oe-id="'+$node.data('oe-many2one-id')+'"]')
+                    .filter('[data-oe-field="name"]'));
+            }
+
+            if (!clone_data) {
+                clone_data = true;
+                $nodes.html(this.innerHTML);
+                clone_data = false;
+            }
+        });
+    }
+
+    var $toolbar = $(oLayoutInfo.popover).add(oLayoutInfo.toolbar);
+    $('button[data-event="undo"], button[data-event="redo"]', $toolbar).attr('disabled', true);
+
+    $(oLayoutInfo.editor)
+        .add(oLayoutInfo.handle)
+        .add(oLayoutInfo.popover)
+        .add(oLayoutInfo.toolbar)
+        .on('click keyup', function () {
+            $('button[data-event="undo"]', $toolbar).attr('disabled', !oLayoutInfo.editable.data('NoteHistory').hasUndo());
+            $('button[data-event="redo"]', $toolbar).attr('disabled', !oLayoutInfo.editable.data('NoteHistory').hasRedo());
+        });
+};
+var fn_detach = eventHandler.detach;
+eventHandler.dettach = function (oLayoutInfo, options) {
+    fn_detach.call(this, oLayoutInfo, options);
+    oLayoutInfo.editor.off("dragstart");
+    $(document).off('mousedown', summernote_mousedown);
+    $(document).off('mouseup', summernote_mouseup);
+    oLayoutInfo.editor.off("dblclick");
+    $(document).off("keyup", reRangeSelectKey);
+};
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+/* Translation for odoo */
+
+$.summernote.lang.odoo = {
+    font: {
+      bold: _t('Bold'),
+      italic: _t('Italic'),
+      underline: _t('Underline'),
+      strikethrough: _t('Strikethrough'),
+      subscript: _t('Subscript'),
+      superscript: _t('Superscript'),
+      clear: _t('Remove Font Style'),
+      height: _t('Line Height'),
+      name: _t('Font Family'),
+      size: _t('Font Size')
+    },
+    image: {
+      image: _t('Picture'),
+      insert: _t('Insert Image'),
+      resizeFull: _t('Resize Full'),
+      resizeHalf: _t('Resize Half'),
+      resizeQuarter: _t('Resize Quarter'),
+      floatLeft: _t('Float Left'),
+      floatRight: _t('Float Right'),
+      floatNone: _t('Float None'),
+      dragImageHere: _t('Drag an image here'),
+      selectFromFiles: _t('Select from files'),
+      url: _t('Image URL'),
+      remove: _t('Remove Image')
+    },
+    link: {
+      link: _t('Link'),
+      insert: _t('Insert Link'),
+      unlink: _t('Unlink'),
+      edit: _t('Edit'),
+      textToDisplay: _t('Text to display'),
+      url: _t('To what URL should this link go?'),
+      openInNewWindow: _t('Open in new window')
+    },
+    video: {
+      video: _t('Video'),
+      videoLink: _t('Video Link'),
+      insert: _t('Insert Video'),
+      url: _t('Video URL?'),
+      providers: _t('(YouTube, Vimeo, Vine, Instagram, DailyMotion or Youku)')
+    },
+    table: {
+      table: _t('Table')
+    },
+    hr: {
+      insert: _t('Insert Horizontal Rule')
+    },
+    style: {
+      style: _t('Style'),
+      normal: _t('Normal'),
+      blockquote: _t('Quote'),
+      pre: _t('Code'),
+      h1: _t('Header 1'),
+      h2: _t('Header 2'),
+      h3: _t('Header 3'),
+      h4: _t('Header 4'),
+      h5: _t('Header 5'),
+      h6: _t('Header 6')
+    },
+    lists: {
+      unordered: _t('Unordered list'),
+      ordered: _t('Ordered list')
+    },
+    options: {
+      help: _t('Help'),
+      fullscreen: _t('Full Screen'),
+      codeview: _t('Code View')
+    },
+    paragraph: {
+      paragraph: _t('Paragraph'),
+      outdent: _t('Outdent'),
+      indent: _t('Indent'),
+      left: _t('Align left'),
+      center: _t('Align center'),
+      right: _t('Align right'),
+      justify: _t('Justify full')
+    },
+    color: {
+      recent: _t('Recent Color'),
+      more: _t('More Color'),
+      background: _t('Background Color'),
+      foreground: _t('Foreground Color'),
+      transparent: _t('Transparent'),
+      setTransparent: _t('Set transparent'),
+      reset: _t('Reset'),
+      resetToDefault: _t('Reset to default')
+    },
+    shortcut: {
+      shortcuts: _t('Keyboard shortcuts'),
+      close: _t('Close'),
+      textFormatting: _t('Text formatting'),
+      action: _t('Action'),
+      paragraphFormatting: _t('Paragraph formatting'),
+      documentStyle: _t('Document Style')
+    },
+    history: {
+      undo: _t('Undo'),
+      redo: _t('Redo')
+    }
+};
+
+});
diff --git a/addons/web_editor/static/src/js/snippets.animation.js b/addons/web_editor/static/src/js/snippets.animation.js
new file mode 100644
index 00000000000..bb67d026e3c
--- /dev/null
+++ b/addons/web_editor/static/src/js/snippets.animation.js
@@ -0,0 +1,82 @@
+odoo.define('web_editor.snippets.animation', function (require) {
+'use strict';
+
+var Class = require('web.Class');
+var base = require('web_editor.base');
+
+var registry = {};
+var ready = [];
+
+var Animation = Class.extend({
+    selector: false,
+    $: function () {
+        return this.$el.find.apply(this.$el, arguments);
+    },
+    init: function (dom, editable_mode) {
+        this.$el = this.$target = $(dom);
+        this.start(editable_mode);
+    },
+    /*
+    *  start
+    *  This method is called after init
+    */
+    start: function (editable_mode) {
+    },
+    /*
+    *  stop
+    *  This method is called to stop the animation (e.g.: when rte is launch)
+    */
+    stop: function () {
+    },
+});
+
+var start = function (editable_mode, $target) {
+    for (var k in registry) {
+        var Animation = registry[k];
+        var selector = "";
+        if (Animation.prototype.selector) {
+            if (selector != "") selector += ", " 
+            selector += Animation.prototype.selector;
+        }
+        if ($target) {
+            if ($target.is(selector)) selector = $target;
+            else continue;
+        }
+
+        $(selector).each(function() {
+            var $snipped_id = $(this);
+            if (    !$snipped_id.parents("#oe_snippets").length &&
+                    !$snipped_id.parent("body").length &&
+                    !$snipped_id.data("snippet-view")) {
+                ready.push($snipped_id);
+                $snipped_id.data("snippet-view", new Animation($snipped_id, editable_mode));
+            } else if ($snipped_id.data("snippet-view")) {
+                $snipped_id.data("snippet-view").start(editable_mode);
+            }
+        });
+    }
+};
+
+var stop = function () {
+    $(ready).each(function() {
+        var $snipped_id = $(this);
+        if ($snipped_id.data("snippet-view")) {
+            $snipped_id.data("snippet-view").stop();
+        }
+    });
+};
+
+base.ready().always(function () {
+    setTimeout(function () {
+        start();
+    },0);
+});
+
+return {
+    'Class': Animation,
+    'registry': registry,
+    'start': start,
+    'stop': stop
+};
+
+});
\ No newline at end of file
diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js
new file mode 100644
index 00000000000..9d37a9f84c8
--- /dev/null
+++ b/addons/web_editor/static/src/js/snippets.editor.js
@@ -0,0 +1,1137 @@
+odoo.define('web_editor.snippet.editor', function (require) {
+'use strict';
+
+var Class = require('web.Class');
+var ajax = require('web.ajax');
+var core = require('web.core');
+var Widget = require('web.Widget');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
+var animation = require('web_editor.snippets.animation');
+var options = require('web_editor.snippets.options');
+
+var qweb = core.qweb;
+var dummy = editor.dummy;
+
+/* ----- SNIPPET SELECTOR ---- */
+
+ajax.loadXML('/web_editor/static/src/xml/snippets.xml', qweb);
+
+editor.Class.include({
+    init: function() {
+        var self = this;
+        var res = this._super.apply(this, arguments);
+        var $editable = this.rte.editable();
+        this.buildingBlock = new BuildingBlock(this, $editable);
+        this.buildingBlock.on("snippets:ready", this, function () {
+            self.trigger("snippets:ready");
+        });
+        return res;
+    },
+    start: function () {
+        var self = this;
+        animation.stop();
+        this.buildingBlock.insertAfter(this.$el);
+        animation.start(true);
+
+        this.rte.editable().find("*").off('mousedown mouseup click');
+        return this._super();
+    },
+    save: function () {
+        this.buildingBlock.clean_for_save();
+        this._super();
+    },
+});
+
+/* ----- SNIPPET SELECTOR ---- */
+
+$.extend($.expr[':'],{
+    hasData: function(node,i,m){
+        return !!_.toArray(node.dataset).length;
+    },
+    data: function(node,i,m){
+        return $(node).data(m[3]);
+    }
+});
+
+var globalSelector = {
+    closest: function () { return $(); },
+    all: function () { return $(); },
+    is: function () { return false; },
+};
+
+/* ----- Jquery activate block ---- */
+
+$.fn.extend({
+    activateBlock: function () {
+        var target = globalSelector.closest($(this))[0] || (dom.isBR(this) ? this.parentNode : dom.node(this));
+        var evt = document.createEvent("MouseEvents");
+        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, target);
+        target.dispatchEvent(evt);
+        return this;
+    }
+});
+
+/* ----- BuildingBlock (managment of drag&drop and focus/blur snippets) ---- */
+
+var BuildingBlock = Widget.extend({
+    template: 'web_editor.snippets',
+    activeSnippets: [],
+    init: function (parent, $editable) {
+        this.parent = parent;
+        this.$editable = $editable;
+
+        this._super.apply(this, arguments);
+        if(!$('#oe_manipulators').length){
+            $("<div id='oe_manipulators' class='o_css_editor'></div>").appendTo('body');
+        }
+        this.$active_snipped_id = false;
+        this.snippets = [];
+        
+        data.instance = this;
+    },
+    start: function() {
+        var self = this;
+        this.$snippet = $("#oe_snippets");
+
+        this.$el
+            .on("mouseenter", function () { self.show(); })
+            .on("mouseleave", function (event) { if (event.clientX>0 && event.clientY>0) self.hide(); });
+
+        $(window).resize(function () {
+            setTimeout('$(document).click()',0);
+        });
+
+        this.fetch_snippet_templates();
+        this.bind_snippet_click_editor();
+
+        $(document).on('click', '.dropdown-submenu a[tabindex]', function (e) {
+            e.preventDefault();
+        });
+
+        var _isNotBreakable = $.summernote.core.dom.isNotBreakable;
+        $.summernote.core.dom.isNotBreakable = function (node) {
+            return _isNotBreakable(node) || $(node).is('div') || globalSelector.is($(node));
+        };
+
+        $(window).on('resize', function () {
+            if (self.$active_snipped_id && self.$active_snipped_id.data("snippet-editor")) {
+                self.cover_target(self.$active_snipped_id.data("snippet-editor").$overlay, self.$active_snipped_id);
+            }
+        });
+
+        $(document).on('mousemove', function () {
+            if (self.$active_snipped_id && self.$active_snipped_id.data("snippet-editor")) {
+                self.$active_snipped_id.data("snippet-editor").$overlay.removeClass('o_keypress');
+            }
+        });
+        $(document).on('keydown', function (event) {
+            if (self.$active_snipped_id && self.$active_snipped_id.data("snippet-editor")) {
+                self.$active_snipped_id.data("snippet-editor").$overlay.addClass('o_keypress');
+            }
+            if ((event.metaKey || (event.ctrlKey && !event.altKey)) && event.shiftKey && event.keyCode >= 48 && event.keyCode <= 57) {
+                self.$snippet.find('.scroll:first > ul li:eq('+(event.keyCode-49)+') a').trigger("click");
+                self.show();
+                event.preventDefault();
+            }
+        });
+    },
+
+    _get_snippet_url: function () {
+        return '/web_editor/snippets';
+    },
+    _add_check_selector : function (selector, no_check) {
+        var self = this;
+        var selector = selector.split(/\s*,/).join(":not(.o_snippet_not_selectable), ") + ":not(.o_snippet_not_selectable)";
+
+        if (no_check) {
+            return {
+                closest: function ($from, parentNode) {
+                    return $from.closest(selector, parentNode);
+                },
+                all: function ($from) {
+                    return $from ? $from.find(selector) : $(selector);
+                },
+                is: function ($from) {
+                    return $from.is(selector);
+                }
+            };
+        } else {
+            var selector = selector.split(/\s*,/).join(":o_editable, ") + ":o_editable";
+            return {
+                closest: function ($from, parentNode) {
+                    var parents = self.$editable.get();
+                    return $from.closest(selector, parentNode).filter(function () {
+                        var node = this;
+                        while (node.parentNode) {
+                            if (parents.indexOf(node)!==-1) {
+                                return true;
+                            }
+                            node = node.parentNode;
+                        }
+                        return false;
+                    });
+                },
+                all: function ($from) {
+                    return $from ? $from.find(selector) : self.$editable.filter(selector).add(self.$editable.find(selector));
+                },
+                is: function ($from) {
+                    return $from.is(selector);
+                }
+            };
+        }
+    },
+
+    fetch_snippet_templates: function () {
+        var self = this;
+        var url = this._get_snippet_url();
+        if (!url || !url.length) {
+            this.$snippet.detach();
+            return;
+        }
+        this.$el.find("#o_left_bar").addClass("hidden");
+        return ajax.jsonRpc(url, 'call', {}).then(function (html) {
+            self.compute_snippet_templates(html);
+            self.trigger("snippets:ready");
+        });
+    },
+    compute_snippet_templates: function (html) {
+        var self = this;
+        var $html = $(html);
+        var $left_bar = this.$el.find("#o_left_bar");
+        var $ul = $html.siblings("ul");
+        var $scroll = $html.siblings("#o_scroll");
+
+        if (!$scroll.length) {
+            throw new Error("Wrong snippets xml definition");
+        }
+
+        $ul.children().tooltip({
+                delay: { "show": 500, "hide": 100 },
+                container: 'body',
+                title: function () {
+                    return (navigator.appVersion.indexOf('Mac') > -1 ? 'CMD' : 'CTRL')+'+SHIFT+'+($(this).index()+1);
+                },
+                trigger: 'hover',
+                placement: 'top'
+            }).on('click', function () {$(this).tooltip('hide');});
+
+        // t-snippet
+        $html.find('[data-oe-type="snippet"][data-oe-name]').each(function () {
+            var $div = $('<div/>').insertAfter(this).append(this).attr('name', $(this).data('oe-name'));
+        });
+        // end
+
+        self.templateOptions = [];
+        var selector = [];
+        var $styles = $html.find("[data-js], [data-selector]");
+        $styles.each(function () {
+            var $style = $(this);
+            var no_check = $style.data('no-check');
+            var option_id = $style.data('js');
+            var option = {
+                'option' : option_id,
+                'base_selector': $style.data('selector'),
+                'selector': self._add_check_selector($style.data('selector'), no_check),
+                '$el': $style,
+                'drop-near': $style.data('drop-near') && self._add_check_selector($style.data('drop-near'), no_check),
+                'drop-in': $style.data('drop-in') && self._add_check_selector($style.data('drop-in'), no_check),
+                'data': $style.data()
+            };
+            self.templateOptions.push(option);
+            selector.push(option.selector);
+        });
+
+        $styles.addClass("hidden");
+        globalSelector = {
+            closest: function ($from) {
+                var $temp;
+                var $target;
+                var len = selector.length;
+                for (var i = 0; i<len; i++) {
+                    $temp = selector[i].closest($from, $target && $target[0]);
+                    if (!$target || $temp.length) {
+                        $target = $temp;
+                    }
+                }
+                return $target;
+            },
+            all: function ($from) {
+                var $target;
+                var len = selector.length;
+                for (var i = 0; i<len; i++) {
+                    if (!$target) $target = selector[i].all($from);
+                    else $target = $target.add(selector[i].all($from));
+                }
+                return $target;
+            },
+            is: function ($from) {
+                var len = selector.length;
+                for (var i = 0; i<len; i++) {
+                    if (selector[i].is($from)) {
+                        return true;
+                    }
+                }
+                return false;
+            },
+        };
+
+        var number = 0;
+
+        // oe_snippet_body
+        self.$snippets = $scroll.find(".o_panel_body").children()
+            .addClass("oe_snippet")
+            .each(function () {
+                if (!$('.oe_snippet_thumbnail', this).size()) {
+                    var $div = $(
+                        '<div class="oe_snippet_thumbnail">'+
+                            '<div class="oe_snippet_thumbnail_img"/>'+
+                            '<span class="oe_snippet_thumbnail_title"></span>'+
+                        '</div>');
+                    $div.find('span').text($(this).attr("name"));
+                    $(this).prepend($div);
+
+                    // from t-snippet
+                    var thumbnail = $("[data-oe-thumbnail]", this).data("oe-thumbnail");
+                    if (thumbnail) {
+                        $div.find('.oe_snippet_thumbnail_img').css('background-image', 'url(' + thumbnail + ')');
+                    }
+                    // end
+                }
+                if (!$(this).data("selector")) {
+                    $("> *:not(.oe_snippet_thumbnail)", this).addClass('oe_snippet_body');
+                }
+                number++;
+            });
+
+        // hide scroll if no snippets defined
+        if (!number) {
+            this.$snippet.detach();
+        } else {
+            this.$el.find("#o_left_bar").removeClass("hidden");
+        }
+        $("body").toggleClass("editor_has_snippets", !!number);
+
+        // select all default text to edit (if snippet default text)
+        /*self.$snippets.find('.oe_snippet_body, .oe_snippet_body *')
+            .contents()
+            .filter(function() {
+                return this.nodeType === 3 && this.textContent.match(/\S/);
+            }).parent().addClass("o_default_snippet_text");*/
+        $(document).on("mouseup", ".o_default_snippet_text", function (event) {
+            $(event.target).selectContent();
+        });
+        $(document).on("keyup", function (event) {
+            var r = $.summernote.core.range.create();
+            $(r && r.sc).closest(".o_default_snippet_text").removeClass("o_default_snippet_text");
+        });
+        // end
+
+        // clean t-oe
+        $html.find('[data-oe-model], [data-oe-type]').each(function () {
+            for (var k=0; k<this.attributes.length; k++) {
+                if (this.attributes[k].name.indexOf('data-oe-') === 0) {
+                    $(this).removeAttr(this.attributes[k].name);
+                    k--;
+                }
+            }
+        });
+        // end
+
+        $html.find('.o_not_editable').attr("contentEditable", false);
+
+        $left_bar.append($html);
+
+        // animate for list of snippet blocks
+        $left_bar.on('click', '.scroll-link', function (event) {
+            event.preventDefault();
+            var targetOffset =  $($(this).attr("href")).position().top - $ul.outerHeight() + $scroll[0].scrollTop;
+            $scroll.animate({'scrollTop': targetOffset}, 750);
+        });
+        $scroll.on('scroll', function () {
+            var middle = $scroll.height()/4;
+            var $li = $ul.find("a").parent().removeClass('active');
+            var last;
+            for (var k=0; k<$li.length; k++) {
+                var li = $($li[k]);
+                if (!li.data('target')) {
+                    li.data('target', $($("a", li).attr("href")));
+                }
+                if (li.data('target').position().top > middle) {
+                    break;
+                }
+                last = $li[k];
+            }
+            $(last).addClass("active");
+        });
+        // end
+
+        // display scrollbar
+        $(window).on('resize', function () {
+            $scroll.css("overflow", "");
+            var height = $left_bar.height() - $ul.outerHeight();
+            $scroll.css("height", height);
+            var $last = $scroll.children(":visible").last().children(".o_panel_body");
+            $last.css({'min-height': (height-$last.prev().outerHeight())+'px'});
+            if ($scroll[0].scrollHeight + $ul[0].scrollHeight > document.body.clientHeight) {
+                $scroll.css("overflow", "auto").css("width", "226px");
+            } else {
+                $scroll.css("width", "");
+            }
+        }).trigger('resize');
+        // end
+
+        self.make_snippet_draggable(self.$snippets);
+    },
+
+    cover_target: function ($el, $target){
+        if($el.data('not-cover_target')) return;
+        var pos = $target.offset();
+        var mt = parseInt($target.css("margin-top") || 0);
+        var mb = parseInt($target.css("margin-bottom") || 0);
+        var width = $target.outerWidth();
+        var bigger = pos.left+width > $("body").outerWidth()-8;
+        $el.css({
+            'width': width,
+            'top': pos.top - mt - 5,
+            'left': pos.left-1
+        });
+        $el.find(".oe_handle.e,.oe_handle.w").css({'height': $target.outerHeight() + mt + mb+1});
+        if (bigger) {
+            $el.find(".oe_handle.e").css({right: 0, margin: 0})
+                .find("div").css({right: 0, left: 'auto'});
+        } else {
+            $el.find(".oe_handle.e").css({right: "", margin: ""})
+                .find("div").css({right: "", left: ""});
+        }
+        $el.find(".oe_handle.s").css({'top': $target.outerHeight() + mt + mb});
+        $el.find(".oe_handle.size").css({'top': $target.outerHeight() + mt});
+        $el.find(".oe_handle.s,.oe_handle.n").css({'width': width-2});
+    },
+
+    show_blocks: function () {
+        var self = this;
+        var cache = {};
+        this.$snippet.find(".o_panel").each(function () {
+            var catcheck = false;
+            var $category = $(this);
+            $category.find(".oe_snippet_body").each(function () {
+                var $snippet = $(this);
+
+                var check = false;
+
+                for (var k in self.templateOptions) {
+                    var option = self.templateOptions[k];
+                    if ($snippet.is(option.base_selector)) {
+
+                        cache[k] = cache[k] || {
+                            'drop-near': option['drop-near'] ? option['drop-near'].all() : [],
+                            'drop-in': option['drop-in'] ? option['drop-in'].all() : []
+                        };
+
+                        if (cache[k]['drop-near'].length || cache[k]['drop-in'].length) {
+                            catcheck = true;
+                            check = true;
+                            break;
+                        }
+                    }
+                }
+
+                if (check) {
+                    $snippet.closest(".oe_snippet").removeClass("disable");
+                } else {
+                    $snippet.closest(".oe_snippet").addClass("disable");
+                }
+            });
+
+            $('#oe_snippets .scroll a[data-toggle="tab"][href="#' + $category.attr("id") + '"]').toggle(catcheck);
+        });
+    },
+    show: function () {
+        var self = this;
+        this.make_active(false);
+        this.$el.addClass("o_open");
+        this.show_blocks();
+    },
+    hide: function () {
+        this.$el.removeClass("o_open");
+    },
+    bind_snippet_click_editor: function () {
+        var self = this;
+        var snipped_event_flag;
+        $(document).on('click', '*', function (event) {
+            var srcElement = event.srcElement || (event.originalEvent && (event.originalEvent.originalTarget || event.originalEvent.target) || event.target);
+            if (self.editor_busy || snipped_event_flag===srcElement || !srcElement) {
+                return;
+            }
+            snipped_event_flag = srcElement;
+
+            setTimeout(function () {snipped_event_flag = false;}, 0);
+            var $target = $(srcElement);
+
+            if ($target.closest(".oe_overlay, .note-popover").length) {
+                return;
+            }
+
+            if (!globalSelector.is($target)) {
+                $target = globalSelector.closest($target);
+            }
+
+            if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
+                return;
+            }
+            self.make_active($target);
+        });
+    },
+    snippet_blur: function ($snippet) {
+        if ($snippet) {
+            if ($snippet.data("snippet-editor")) {
+                $snippet.data("snippet-editor").on_blur();
+            }
+        }
+    },
+    snippet_focus: function ($snippet) {
+        if ($snippet) {
+            if ($snippet.data("snippet-editor")) {
+                $snippet.data("snippet-editor").on_focus();
+            }
+        }
+    },
+    clean_for_save: function () {
+        var self = this;
+        var opt = options.registry;
+        var template = self.templateOptions;
+        for (var k in template) {
+            var Option = opt[template[k]['option']];
+            if (Option && Option.prototype.clean_for_save !== dummy) {
+                template[k].selector.all().filter(".o_dirty").each(function () {
+                    new Option(self, null, $(this), k).clean_for_save();
+                });
+            }
+        }
+        this.$editable.find("*[contentEditable], *[attributeEditable]")
+            .removeAttr('contentEditable')
+            .removeProp('contentEditable')
+            .removeAttr('attributeEditable')
+            .removeProp('attributeEditable');
+    },
+    make_active: function ($snippet) {
+        if ($snippet && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snippet.get(0)) {
+            return;
+        }
+        if (this.$active_snipped_id) {
+            this.snippet_blur(this.$active_snipped_id);
+            this.$active_snipped_id = false;
+        }
+        if ($snippet && $snippet.length) {
+            if(_.indexOf(this.snippets, $snippet.get(0)) === -1) {
+                this.snippets.push($snippet.get(0));
+            }
+            this.$active_snipped_id = $snippet;
+            this.create_overlay(this.$active_snipped_id);
+            this.snippet_focus($snippet);
+        }
+        this.$snippet.trigger('snippet-activated', $snippet);
+        if ($snippet) {
+            $snippet.trigger('snippet-activated', $snippet);
+        }
+    },
+    create_overlay: function ($snippet) {
+        if (typeof $snippet.data("snippet-editor") === 'undefined') {
+            var $targets = this.activate_overlay_zones($snippet);
+            if (!$targets.length) return;
+            $snippet.data("snippet-editor", new Editor(this, $snippet));
+        }
+        this.cover_target($snippet.data('overlay'), $snippet);
+    },
+
+    // activate drag and drop for the snippets in the snippet toolbar
+    make_snippet_draggable: function($snippets){
+        var self = this;
+        var $tumb = $snippets.find(".oe_snippet_thumbnail_img:first");
+        var left = $tumb.outerWidth()/2;
+        var top = $tumb.outerHeight()/2;
+        var $toInsert, dropped, $snippet, action, snipped_id;
+
+        $snippets.draggable({
+            greedy: true,
+            helper: 'clone',
+            zIndex: '1000',
+            appendTo: 'body',
+            cursor: "move",
+            handle: ".oe_snippet_thumbnail",
+            cursorAt: {
+                'left': left,
+                'top': top
+            },
+            start: function(){
+                self.hide();
+                dropped = false;
+                // snippet_selectors => to get drop-near, drop-in
+                $snippet = $(this);
+                var $base_body = $snippet.find('.oe_snippet_body');
+                var $selector_siblings = $();
+                var $selector_children = $();
+                var vertical = false;
+                var temp = self.templateOptions;
+                for (var k in temp) {
+                    if ($base_body.is(temp[k].base_selector)) {
+                        if (temp[k]['drop-near']) {
+                            if (!$selector_siblings) $selector_siblings = temp[k]['drop-near'].all();
+                            else $selector_siblings = $selector_siblings.add(temp[k]['drop-near'].all());
+                        }
+                        if (temp[k]['drop-in']) {
+                            if (!$selector_children) $selector_children = temp[k]['drop-in'].all();
+                            else $selector_children = $selector_children.add(temp[k]['drop-in'].all());
+                        }
+                    }
+                }
+
+                $toInsert = $base_body.clone();
+
+                if (!$selector_siblings.length && !$selector_children.length) {
+                    console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: data-drop-near or data-drop-in");
+                    return;
+                }
+
+                self.activate_insertion_zones($selector_siblings, $selector_children);
+
+                $('.oe_drop_zone').droppable({
+                    over:   function(){
+                        dropped = true;
+                        $(this).first().after($toInsert);
+                    },
+                    out:    function(){
+                        var prev = $toInsert.prev();
+                        if(this === prev[0]){
+                            dropped = false;
+                            $toInsert.detach();
+                        }
+                    }
+                });
+            },
+            stop: function(ev, ui){
+                $toInsert.removeClass('oe_snippet_body');
+                
+                if (! dropped && self.$editable.find('.oe_drop_zone') && ui.position.top > 3) {
+                    var el = self.$editable.find('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first();
+                    if (el.length) {
+                        el.after($toInsert);
+                        dropped = true;
+                    }
+                }
+
+                self.$editable.find('.oe_drop_zone').droppable('destroy').remove();
+                
+                if (dropped) {
+
+                    var prev = $toInsert.first()[0].previousSibling;
+                    var next = $toInsert.last()[0].nextSibling;
+                    var rte = self.parent.rte;
+
+                    if (prev) {
+                        $toInsert.detach();
+                        rte.historyRecordUndo($(prev));
+                        $toInsert.insertAfter(prev);
+                    } else if (next) {
+                        $toInsert.detach();
+                        rte.historyRecordUndo($(next));
+                        $toInsert.insertBefore(next);
+                    } else {
+                        var $parent = $toInsert.parent();
+                        $toInsert.detach();
+                        rte.historyRecordUndo($parent);
+                        $parent.prepend($toInsert);
+                    }
+
+                    $toInsert.closest(".o_editable").trigger("content_changed");
+
+                    var $target = false;
+                    $target = $toInsert;
+
+                    setTimeout(function () {
+                        self.$snippet.trigger('snippet-dropped', $target);
+
+                        animation.start(true, $target);
+
+                        // drop_and_build_snippet
+                        self.create_overlay($target);
+                        if ($target.data("snippet-editor")) {
+                            $target.data("snippet-editor").drop_and_build_snippet();
+                        }
+                        for (var k in self.templateOptions) {
+                            self.templateOptions[k].selector.all($target).each(function () {
+                                var $snippet = $(this);
+                                self.create_overlay($snippet);
+                                if ($snippet.data("snippet-editor")) {
+                                    $snippet.data("snippet-editor").drop_and_build_snippet();
+                                }
+                            });
+                        }
+                        $target.closest(".o_editable").trigger("content_changed");
+                        // end
+
+                        self.make_active($target);
+                    },0);
+                } else {
+                    $toInsert.remove();
+                }
+            },
+        });
+    },
+
+    // return the original snippet in the editor bar from a snippet id (string)
+    get_snippet_from_id: function(id){
+        return $('.oe_snippet').filter(function(){
+                return $(this).data('option') === id;
+            }).first();
+    },
+
+    // Create element insertion drop zones. two css selectors can be provided
+    // selector.children -> will insert drop zones as direct child of the selected elements
+    //   in case the selected elements have children themselves, dropzones will be interleaved
+    //   with them.
+    // selector.siblings -> will insert drop zones after and before selected elements
+    activate_insertion_zones: function($selector_siblings, $selector_children){
+        var self = this;
+        var zone_template = $("<div class='oe_drop_zone oe_insert'></div>");
+
+        if ($selector_children) {
+            $selector_children.each(function (){
+                var $zone = $(this);
+                var css = window.getComputedStyle(this);
+                var float = css.float || css.cssFloat;
+                var $drop = zone_template.clone();
+
+                $zone.append($drop);
+                var node = $drop[0].previousSibling;
+                var test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === "BR"));
+                if (test) {
+                    $drop.addClass("oe_vertical oe_vertical_text").css({
+                            'height': parseInt(window.getComputedStyle($zone[0]).lineHeight),
+                            'float': 'none',
+                            'display': 'inline-block'
+                        });
+                } else if (float === "left" || float === "right") {
+                    $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().last().outerHeight()), 30));
+                }
+
+                $drop = $drop.clone();
+
+                $zone.prepend($drop);
+                var node = $drop[0].nextSibling;
+                var test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === "BR"));
+                if (test) {
+                    $drop.addClass("oe_vertical oe_vertical_text").css({
+                            'height': parseInt(window.getComputedStyle($zone[0]).lineHeight),
+                            'float': 'none',
+                            'display': 'inline-block'
+                        });
+                } else if (float === "left" || float === "right") {
+                    $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().first().outerHeight()), 30));
+                }
+                if (test) {
+                    $drop.css({'float': 'none', 'display': 'inline-block'});
+                }
+            });
+
+            // add children near drop zone
+            $selector_siblings = $(_.uniq(($selector_siblings || $()).add($selector_children.children()).get()));
+        }
+
+        if ($selector_siblings) {
+            $selector_siblings.filter(':not(.oe_drop_zone):not(.oe_drop_clone)').each(function (){
+                var $zone = $(this);
+                var $drop;
+                var css = window.getComputedStyle(this);
+                var float = css.float || css.cssFloat;
+
+                if($zone.prev('.oe_drop_zone:visible').length === 0){
+                    $drop = zone_template.clone();
+                    if (float === "left" || float === "right") {
+                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
+                    }
+                    $zone.before($drop);
+                }
+                if($zone.next('.oe_drop_zone:visible').length === 0){
+                    $drop = zone_template.clone();
+                    if (float === "left" || float === "right") {
+                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
+                    }
+                    $zone.after($drop);
+                }
+            });
+        }
+
+        var count;
+        do {
+            count = 0;
+            $zones = self.$editable.find('.oe_drop_zone > .oe_drop_zone').remove();   // no recursive zones
+            count += $zones.length;
+            $zones.remove();
+        } while (count > 0);
+
+        // Cleaning consecutive zone and up zones placed between floating or inline elements. We do not like these kind of zones.
+        var $zones = self.$editable.find('.oe_drop_zone:not(.oe_vertical)');
+        $zones.each(function (){
+            var zone = $(this);
+            var prev = zone.prev();
+            var next = zone.next();
+            // remove consecutive zone
+            if (prev.is('.oe_drop_zone') || next.is('.oe_drop_zone')) {
+                zone.remove();
+                return;
+            }
+            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();
+            }else if( !( disp_prev === null
+                      || disp_next === null
+                      || disp_prev === 'block'
+                      || disp_next === 'block' )){
+                zone.remove();
+            }
+        });
+    },
+
+    // generate drop zones covering the elements selected by the selector
+    // we generate overlay drop zones only to get an idea of where the snippet are, the drop
+    activate_overlay_zones: function($targets){
+        var self = this;
+
+        function is_visible($el){
+            return     $el.css('display')    != 'none'
+                    && $el.css('opacity')    != '0'
+                    && $el.css('visibility') != 'hidden';
+        }
+
+        // filter out invisible elements
+        $targets = $targets.filter(function(){ return is_visible($(this)); });
+
+        // filter out elements with invisible parents
+        $targets = $targets.filter(function(){
+            var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
+            return parents.length === 0;
+        });
+
+        $targets.each(function () {
+            var $target = $(this);
+            if (!$target.data('overlay')) {
+                var $zone = $(qweb.render('web_editor.snippet_overlay'));
+
+                // fix for pointer-events: none with ie9
+                if (document.body && document.body.addEventListener) {
+                    $zone.on("click mousedown mousedown", function passThrough(event) {
+                        event.preventDefault();
+                        $target.each(function() {
+                           // check if clicked point (taken from event) is inside element
+                            event.srcElement = this;
+                            $(this).trigger(event.type);
+                        });
+                        return false;
+                    });
+                }
+
+                $zone.appendTo('#oe_manipulators');
+                $zone.data('target',$target);
+                $target.data('overlay',$zone);
+
+                var timer;
+                $target.closest('.o_editable').on("content_changed", function (event) {
+                    if ($target.data('overlay') && $target.data('overlay').hasClass("oe_active")) {
+                        clearTimeout(timer);
+                        timer = setTimeout(function () {
+                            if ($target.data('overlay')) {
+                                self.cover_target($target.data('overlay'), $target);
+                            }
+                        },50);
+                    }
+                 });
+
+                var resize = function () {
+                    if ($zone.parent().length) {
+                        self.cover_target($zone, $target);
+                    } else {
+                        $('body').off("resize", resize);
+                    }
+                };
+                $('body').on("resize", resize);
+            }
+            self.cover_target($target.data('overlay'), $target);
+        });
+        return $targets;
+    }
+});
+
+/* ----- Editor (object who contain overlay and the option list) ---- */
+
+var Editor = Class.extend({
+    init: function (BuildingBlock, dom) {
+        this.buildingBlock = BuildingBlock;
+        this.$target = $(dom);
+        this.$overlay = this.$target.data('overlay');
+        this.load_style_options();
+        this.get_parent_block();
+        this.start();
+    },
+
+    // activate drag and drop for the snippets in the snippet toolbar
+    _drag_and_drop: function(){
+        var self = this;
+        this.dropped = false;
+        this.$overlay.draggable({
+            greedy: true,
+            appendTo: 'body',
+            cursor: "move",
+            handle: ".oe_snippet_move",
+            cursorAt: {
+                left: 18,
+                top: 14
+            },
+            helper: function() {
+                var $clone = $(this).clone().css({width: "24px", height: "24px", border: 0});
+                $clone.find(".oe_overlay_options >:not(:contains(.oe_snippet_move)), .oe_handle").remove();
+                $clone.find(":not(.glyphicon)").css({position: 'absolute', top: 0, left: 0});
+                $clone.appendTo("body").removeClass("hidden");
+                return $clone;
+            },
+            start: _.bind(self._drag_and_drop_start, self),
+            stop: _.bind(self._drag_and_drop_stop, self)
+        });
+    },
+    _drag_and_drop_after_insert_dropzone: function (){},
+    _drag_and_drop_active_drop_zone: function ($zones){
+        var self = this;
+        $zones.droppable({
+            over:   function(){
+                $(".oe_drop_zone.hide").removeClass("hide");
+                $(this).addClass("hide").first().after(self.$target);
+                self.dropped = true;
+            },
+            out:    function(){
+                $(this).removeClass("hide");
+                self.$target.detach();
+                self.dropped = false;
+            },
+        });
+    },
+    _drag_and_drop_start: function (){
+        var self = this;
+        self.buildingBlock.hide();
+        self.buildingBlock.editor_busy = true;
+        self.size = {
+            width: self.$target.width(),
+            height: self.$target.height()
+        };
+        self.$target.after("<div class='oe_drop_clone' style='display: none;'/>");
+        self.$target.detach();
+        self.$overlay.addClass("hidden");
+
+        var $selector_siblings;
+        for (var i=0; i<self.selector_siblings.length; i++) {
+            if (!$selector_siblings) $selector_siblings = self.selector_siblings[i].all();
+            else $selector_siblings = $selector_siblings.add(self.selector_siblings[i].all());
+        }
+        var $selector_children;
+        for (var i=0; i<self.selector_children.length; i++) {
+            if (!$selector_children) $selector_children = self.selector_children[i].all();
+            else $selector_children = $selector_children.add(self.selector_children[i].all());
+        }
+
+        self.buildingBlock.activate_insertion_zones($selector_siblings, $selector_children);
+
+        $("body").addClass('move-important');
+
+        self._drag_and_drop_after_insert_dropzone();
+        self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
+    },
+    _drag_and_drop_stop: function (){
+        var self = this;
+        var $dropzone = this.$target.prev();
+        var prev = $dropzone.length && $dropzone[0].previousSibling;
+        var next = this.$target.last()[0].nextSibling;
+        var $parent = this.$target.parent();
+
+        $(".oe_drop_clone").after(this.$target);
+
+        this.$overlay.removeClass("hidden");
+        $("body").removeClass('move-important');
+        $('.oe_drop_zone').droppable('destroy').remove();
+        $(".oe_drop_clone, .oe_drop_to_remove").remove();
+
+        if (this.dropped) {
+            this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
+
+            if (prev) {
+                this.$target.insertAfter(prev);
+            } else if (next) {
+                this.$target.insertBefore(next);
+            } else {
+                $parent.prepend(this.$target);
+            }
+
+            for (var i in this.styles){
+                this.styles[i].on_move();
+            }
+        }
+
+        self.buildingBlock.editor_busy = false;
+
+        self.get_parent_block();
+        setTimeout(function () {self.buildingBlock.create_overlay(self.$target);},0);
+    },
+
+    load_style_options: function () {
+        var self = this;
+        var $styles = this.$overlay.find('.oe_options');
+        var $ul = $styles.find('ul:first');
+        this.styles = {};
+        this.selector_siblings = [];
+        this.selector_children = [];
+        _.each(this.buildingBlock.templateOptions, function (val, option_id) {
+            if (!val.selector.is(self.$target)) {
+                return;
+            }
+            if (val['drop-near']) self.selector_siblings.push(val['drop-near']);
+            if (val['drop-in']) self.selector_children.push(val['drop-in']);
+
+            var option = val['option'];
+            var Editor = options.registry[option] || options.Class;
+            var editor = self.styles[option] = new Editor(self.buildingBlock, self, self.$target, option_id);
+            $ul.append(editor.$el.addClass("snippet-option-" + option));
+            editor.start();
+        });
+
+        if (!this.selector_siblings.length && !this.selector_children.length) {
+            this.$overlay.find(".oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove").addClass('hidden');
+        }
+
+        if ($ul.find("li").length) {
+            $styles.removeClass("hidden");
+        }
+        this.$overlay.find('[data-toggle="dropdown"]').dropdown();
+    },
+
+    get_parent_block: function () {
+        var self = this;
+        var $button = this.$overlay.find('.oe_snippet_parent');
+        var $parent = globalSelector.closest(this.$target.parent());
+        if ($parent.length) {
+            $button.removeClass("hidden");
+            $button.off("click").on('click', function (event) {
+                event.preventDefault();
+                setTimeout(function () {
+                    self.buildingBlock.make_active($parent);
+                }, 0);
+            });
+        } else {
+            $button.addClass("hidden");
+        }
+    },
+
+    /*
+    *  start
+    *  This method is called after init and _readXMLData
+    */
+    start: function () {
+        var self = this;
+        if (!this.$target.parent().is(':o_editable')) {
+            this.$overlay.find('.oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove').remove();
+        } else {
+            this.$overlay.on('click', '.oe_snippet_clone', _.bind(this.on_clone, this));
+            this.$overlay.on('click', '.oe_snippet_remove', _.bind(this.on_remove, this));
+            this._drag_and_drop();
+        }
+    },
+
+    on_clone: function (event) {
+        event.preventDefault();
+        var $clone = this.$target.clone(false);
+
+        this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
+        
+        this.$target.after($clone);
+        for (var i in this.styles){
+            this.styles[i].on_clone($clone);
+        }
+        this.buildingBlock.create_overlay(this.$target);
+        return false;
+    },
+
+    on_remove: function (event) {
+        event.preventDefault();
+        this.on_blur();
+
+        this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
+
+        var index = _.indexOf(this.buildingBlock.snippets, this.$target.get(0));
+        for (var i in this.styles){
+            this.styles[i].on_remove();
+        }
+        delete this.buildingBlock.snippets[index];
+
+        var $editable = this.$target.closest(".o_editable");
+
+        // remove node and his empty
+        var node = this.$target.parent()[0];
+
+        this.$target.remove();
+        this.$overlay.remove();
+
+        if (node && node.firstChild) {
+            $.summernote.core.dom.removeSpace(node, node.firstChild, 0, node.lastChild, 1);
+            if (!node.firstChild.tagName && node.firstChild.textContent === " ") {
+                node.firstChild.parentNode.removeChild(node.firstChild);
+            }
+        }
+
+        // clean editor if they are image or table in deleted content
+        $(".note-control-selection").hide();
+        $('.o_table_handler').remove();
+
+        return false;
+    },
+
+    /*
+    *  drop_and_build_snippet
+    *  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)
+    */
+    drop_and_build_snippet: function () {
+        for (var i in this.styles){
+            this.styles[i].drop_and_build_snippet();
+        }
+    },
+
+    /* on_focus
+    *  This method is called when the user click inside the snippet in the dom
+    */
+    on_focus : function () {
+        this.$overlay.addClass('oe_active');
+        for (var i in this.styles){
+            this.styles[i].on_focus();
+        }
+    },
+
+    /* on_focus
+    *  This method is called when the user click outside the snippet in the dom, after a focus
+    */
+    on_blur : function () {
+        for (var i in this.styles){
+            this.styles[i].on_blur();
+        }
+        this.$overlay.removeClass('oe_active');
+    },
+});
+
+var data = {
+    'Class': BuildingBlock,
+    'globalSelector': globalSelector,
+};
+return data;
+
+});
diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
new file mode 100644
index 00000000000..a46c00baa25
--- /dev/null
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -0,0 +1,534 @@
+odoo.define('web_editor.snippets.options', function (require) {
+'use strict';
+
+var Class = require('web.Class');
+var ajax = require('web.ajax');
+var core = require('web.core');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
+var widget = require('web_editor.widget');
+var animation = require('web_editor.snippets.animation');
+
+var qweb = core.qweb;
+
+/* ----- Editor option (object link the the xml with data-js) ---- */
+
+var Option = Class.extend({
+    // initialisation (don't overwrite)
+    init: function (BuildingBlock, editor, $target, option_id) {
+        this.buildingBlock = BuildingBlock;
+        this.editor = editor;
+        this.$target = $target;
+        var option = this.buildingBlock.templateOptions[option_id];
+        var styles = this.$target.data("snippet-option-ids") || {};
+        styles[option_id] = this;
+        this.$target.data("snippet-option-ids", styles);
+        this.$overlay = this.$target.data('overlay') || $('<div>');
+        this.option= option_id;
+        this.$el = option.$el.find(">li").clone();
+        this.data = option.$el.data();
+    },
+
+    // helper for this.$target.find
+    $: function (selector) {
+        return this.$target(selector);
+    },
+
+    _bind_li_menu: function () {
+        this.$el.filter("li:hasData").find('a:first')
+            .off('mouseenter click')
+            .on('mouseenter click', _.bind(this._mouse, this));
+
+        this.$el
+            .off('mouseenter click', "li:hasData a")
+            .on('mouseenter click', "li:hasData a", _.bind(this._mouse, this));
+
+        this.$el.closest("ul").add(this.$el)
+            .off('mouseleave')
+            .on('mouseleave', _.bind(this.reset, this));
+
+        this.$el
+            .off('mouseleave', "ul")
+            .on('mouseleave', "ul", _.bind(this.reset, this));
+
+        this.reset_methods = [];
+    },
+
+    /**
+     * this method handles mouse:over and mouse:leave on the snippet editor menu
+     */
+     _time_mouseleave: null,
+    _mouse: function (event) {
+        var $next = $(event.currentTarget).parent();
+
+        // triggers preview or apply methods if a menu item has been clicked
+        this.select(event.type === "click" ? "click" : "over", $next);
+        if (event.type === 'click') {
+            this.set_active();
+            this.$target.trigger("snippet-option-change", [this]);
+        } else {
+            this.$target.trigger("snippet-option-preview", [this]);
+        }
+    },
+    /* 
+    *  select and set item active or not (add highlight item and his parents)
+    *  called before start
+    */
+    set_active: function () {
+        var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
+        this.$el.find('[data-toggle_class], [data-select_class]')
+            .add(this.$el)
+            .filter('[data-toggle_class], [data-select_class]')
+            .removeClass("active")
+            .filter('[data-toggle_class="' + classes.join('"], [data-toggle_class="') + '"] ,'+
+                '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
+            .addClass("active");
+    },
+
+    start: function () {
+        this.set_active();
+        this.$target.on('snippet-option-reset', _.bind(this.set_active, this));
+        this._bind_li_menu();
+    },
+
+    on_focus : function () {
+        this._bind_li_menu();
+    },
+
+    on_blur : function () {
+    },
+
+    on_clone: function ($clone) {
+    },
+
+    on_move: function () {
+    },
+
+    on_remove: function () {
+    },
+
+    drop_and_build_snippet: function () {
+    },
+
+    reset: function () {
+        var self = this;
+        var lis = self.$el.add(self.$el.find('li')).filter('.active').get();
+        lis.reverse();
+        _.each(lis, function (li) {
+            var $li = $(li);
+            for (var k in self.reset_methods) {
+                var method = self.reset_methods[k];
+                if ($li.is('[data-'+method+']') || $li.closest('[data-'+method+']').size()) {
+                    delete self.reset_methods[k];
+                }
+            }
+            self.select("reset", $li);
+        });
+
+        for (var k in self.reset_methods) {
+            var method = self.reset_methods[k];
+            if (method) {
+                self[method]("reset", null);
+            }
+        }
+        self.reset_methods = [];
+        self.$target.trigger("snippet-option-reset", [this]);
+    },
+
+    // call data-method args as method (data-only can be used)
+    select: function (type, $li) {
+        var self = this,
+            $methods = [],
+            el = $li[0];
+
+        if ($li.data('only') && type !== $li.data('only')) {
+            return;
+        }
+
+        if (type==="click") {
+            this.reset();
+            this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
+        }
+
+        function filter (k) { return k !== 'oeId' && k !== 'oeModel' && k !== 'oeField' && k !== 'oeXpath' && k !== 'oeSourceId' && k !== 'only';}
+        function hasData(el) {
+            for (var k in el.dataset) {
+                if (filter (k)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        function method(el) {
+            var data = {};
+            for (var k in el.dataset) {
+                if (filter (k)) {
+                    data[k] = el.dataset[k];
+                }
+            }
+            return data;
+        }
+
+        while (el && this.$el.is(el) || _.some(this.$el.map(function () {return $.contains(this, el);}).get()) ) {
+            if (hasData(el)) {
+                $methods.push(el);
+            }
+            el = el.parentNode;
+        }
+
+        $methods.reverse();
+
+        _.each($methods, function (el) {
+            var $el = $(el);
+            var methods = method(el);
+
+            for (var k in methods) {
+                if (self[k]) {
+                    if (type !== "reset" && self.reset_methods.indexOf(k) === -1) {
+                        self.reset_methods.push(k);
+                    }
+                    self[k](type, methods[k], $el);
+                } else {
+                    console.error("'"+self.option+"' snippet have not method '"+k+"'");
+                }
+            }
+        });
+    },
+
+    // default method for snippet
+    toggle_class: function (type, value, $li) {
+        var $lis = this.$el.find('[data-toggle_class]').add(this.$el).filter('[data-toggle_class]');
+
+        function map ($lis) {
+            return $lis.map(function () {return $(this).data("toggle_class");}).get().join(" ");
+        }
+        var classes = map($lis);
+        var active_classes = map($lis.filter('.active, :has(.active)'));
+
+        this.$target.removeClass(classes);
+        this.$target.addClass(active_classes);
+
+        if (type !== 'reset') {
+            this.$target.toggleClass(value);
+        }
+    },
+    select_class: function (type, value, $li) {
+        var $lis = this.$el.find('[data-select_class]').add(this.$el).filter('[data-select_class]');
+
+        var classes = $lis.map(function () {return $(this).data('select_class');}).get();
+
+        this.$target.removeClass(classes.join(" "));
+        if(value) this.$target.addClass(value);
+    },
+    eval: function (type, value, $li) {
+        var fn = new Function("node", "type", "value", "$li", value);
+        fn.call(this, this, type, value, $li);
+    },
+
+    clean_for_save: editor.dummy
+});
+
+/* ----- default options ---- */
+
+var media = Option.extend({
+    start: function () {
+        var self =this;
+        this._super();
+        animation.start(true, this.$target);
+        this.$target.closest(".o_editable").on("content_changed", function () {
+            if (!self.$target.parent().length) {
+                self.$target.remove();
+                self.$overlay.remove();
+            }
+        });
+    },
+    edition: function (type, value) {
+        if(type !== "click") return;
+        var self = this;
+        var _editor = new widget.MediaDialog(this.$target.closest('.o_editable'), this.$target[0]);
+        _editor.appendTo(document.body);
+        _editor.on('saved', this, function (item, old) {
+            self.editor.on_blur();
+            self.buildingBlock.make_active(false);
+            if (self.$target.parent().data("oe-field") !== "image") {
+                setTimeout(function () {
+                    self.buildingBlock.make_active($(item));
+                },0);
+            }
+        });
+    },
+    on_focus : function () {
+        var self = this;
+        var $parent = this.$target.parent();
+
+        if ($parent.data("oe-field") === "image" && $parent.hasClass('o_editable')) {
+            this.$overlay.addClass("hidden");
+            self.edition('click', null);
+            self.buildingBlock.make_active(false);
+        }
+    }
+});
+
+var colorpicker = Option.extend({
+    start: function () {
+        var self = this;
+        var res = this._super();
+
+        if (!this.$el.find('.colorpicker').length) {
+            this.$el.find('li').append( qweb.render('web_editor.colorpicker') );
+        }
+        if (this.$el.data('area')) {
+            this.$target = this.$target.find(this.$el.data('area'));
+            this.$el.removeData('area').removeAttr('area');
+        }
+
+        var classes = [];
+        this.$el.find(".colorpicker button").map(function () {
+            var $color = $(this);
+            var color = $color.attr("class");
+            if (self.$target.hasClass(color)) {
+                self.color = color;
+                $color.parent().addClass("selected");
+            }
+            classes.push(color);
+        });
+        this.classes = classes.join(" ");
+
+        this.bind_events();
+        return res;
+    },
+    bind_events: function () {
+        var self = this;
+        var $td = this.$el.find(".colorpicker td");
+        var $colors = this.$el.find(".colorpicker button");
+        $colors
+            .mouseenter(function () {
+                self.$target.removeClass(self.classes).addClass($(this).attr("class"));
+            })
+            .mouseleave(function () {
+                self.$target.removeClass(self.classes)
+                    .addClass($td.filter(".selected").children().attr("class"));
+            })
+            .click(function () {
+                $td.removeClass("selected");
+                $(this).parent().addClass("selected");
+            });
+    }
+});
+
+var background = Option.extend({
+    start: function ($change_target) {
+        this.$bg = $change_target || this.$target;
+        this._super();
+        var src = this.$bg.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+        if (this.$bg.hasClass('oe_custom_bg')) {
+            this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
+        }
+    },
+    background: function(type, value, $li) {
+        if (value && value.length) {
+            this.$bg.attr("style", 'background-image: url(' + value + ')' + (this.$bg.attr("style") || '').replace(/background-image:[^;]+/, '') );
+            this.$bg.addClass("oe_img_bg");
+        } else {
+            this.$bg.css("background-image", "");
+            this.$bg.removeClass("oe_img_bg").removeClass("oe_custom_bg");
+        }
+    },
+    choose_image: function(type, value, $li) {
+        if(type !== "click") return;
+
+        var self = this;
+        var $image = $('<img class="hidden"/>');
+        $image.attr("src", value);
+        $image.appendTo(self.$bg);
+
+        var _editor = new widget.MediaDialog(null, $image[0]);
+        _editor.appendTo(document.body);
+        _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
+
+        _editor.on('saved', self, function () {
+            var value = $image.attr("src");
+            $image.remove();
+            self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value);
+            self.background(type, value,$li);
+            self.$bg.addClass('oe_custom_bg');
+            self.$bg.trigger("snippet-option-change", [self]);
+            self.set_active();
+        });
+        _editor.on('cancel', self, function () {
+            $image.remove();
+        });
+    },
+    set_active: function () {
+        var self = this;
+        var src = this.$bg.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+        this._super();
+
+        this.$el.find('li[data-background]:not([data-background=""])')
+            .removeClass("active")
+            .each(function () {
+                var background = $(this).data("background") || $(this).attr("data-background");
+                if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
+                    $(this).addClass("active");
+                }
+            });
+
+        if (!this.$el.find('li[data-background].active').size()) {
+            this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active");
+        } else {
+            this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active");
+        }
+    }
+});
+
+/* t-field options */
+
+var many2one = Option.extend({
+    start: function () {
+        var self = this;
+
+        this.Model = this.$target.data('oe-many2one-model');
+        this.ID = +this.$target.data('oe-many2one-id');
+
+        // create search button and bind search bar
+        this.$btn = $(qweb.render("web_editor.many2one.button"))
+            .insertAfter(this.$overlay.find('.oe_options'));
+
+        this.$ul = this.$btn.find("ul");
+        this.$search = this.$ul.find('li:first');
+        this.$search.find('input').on('mousedown click mouseup keyup keydown', function (e) {
+            e.stopPropagation();
+        });
+
+        // move menu item
+        setTimeout(function () {
+            if (self.$overlay.find('.oe_options').hasClass('hidden')) {
+                self.$btn.css('height', '0').find('> a').addClass('hidden');
+                self.$ul.show().css({
+                    'top': '-24px', 'margin': '0', 'padding': '2px 0', 'position': 'relative'
+                });
+            } else {
+                self.$btn.find('a').on('click', function (e) {
+                    self.clear();
+                });
+            }
+        },0);
+
+        // bind search input
+        this.$search.find('input')
+            .focus()
+            .on('keyup', function(e) {
+                self.find_existing($(this).val());
+            });
+
+        // bind result
+        this.$ul.on('click', "li:not(:first) a", function (e) {
+            self.select_record(this);
+        });
+    },
+
+    on_focus: function () {
+        this.$target.attr('contentEditable', 'false');
+        this.clear();
+        this._super();
+    },
+
+    clear: function () {
+        var self = this;
+        this.$search.siblings().remove();
+        self.$search.find('input').val("");
+        setTimeout(function () {
+            self.$search.find('input').focus();
+        },0);
+    },
+
+    find_existing: function (name) {
+        var self = this;
+        var domain = [];
+        if (!name || !name.length) {
+            self.$search.siblings().remove();
+            return;
+        }
+        if (isNaN(+name)) {
+            if (this.Model === "res.partner") {
+                domain.push(['name', 'ilike', name]);
+            } else {
+                domain.push('|', ['name', 'ilike', name], ['email', 'ilike', name]);
+            }
+        } else {
+            domain.push(['id', '=', name]);
+        }
+
+        ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+            model: this.Model,
+            method: 'search_read',
+            args: [domain, this.Model === "res.partner" ? ['name', 'display_name', 'city', 'country_id'] : ['name', 'display_name']],
+            kwargs: {
+                order: 'name DESC',
+                limit: 5,
+                context: base.get_context(),
+            }
+        }).then(function (result){
+            self.$search.siblings().remove();
+            self.$search.after(qweb.render("web_editor.many2one.search",{contacts:result}));
+        });
+    },
+
+    get_contact_rendering: function (options) {
+        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+            model: 'ir.qweb.field.contact',
+            method: 'get_record_to_html',
+            args: [[this.ID]],
+            kwargs: {
+                options: options,
+                context: base.get_context(),
+            }
+        });
+    },
+
+    select_record: function (li) {
+        var self = this;
+
+        this.ID = +$(li).data("id");
+        this.$target.attr('data-oe-many2one-id', this.ID).data('oe-many2one-id', this.ID);
+
+        this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
+
+        if (self.$target.data('oe-type') === "contact") {
+            $('[data-oe-contact-options]')
+                .filter('[data-oe-model="'+self.$target.data('oe-model')+'"]')
+                .filter('[data-oe-id="'+self.$target.data('oe-id')+'"]')
+                .filter('[data-oe-field="'+self.$target.data('oe-field')+'"]')
+                .filter('[data-oe-contact-options!="'+self.$target.data('oe-contact-options')+'"]')
+                .add(self.$target)
+                .attr('data-oe-many2one-id', self.ID).data('oe-many2one-id', self.ID)
+                .each(function () {
+                    var $node = $(this);
+                    self.get_contact_rendering($node.data('oe-contact-options'))
+                        .then(function (html){
+                            $node.html(html);
+                        });
+                });
+        } else {
+            self.$target.html($(li).data("name"));
+        }
+
+        setTimeout(function () {
+            self.buildingBlock.make_active(false);
+        },0);
+    }
+});
+
+/* end*/
+
+return {
+    'registry': {
+        'media': media,
+        'colorpicker': colorpicker,
+        'background': background,
+        'many2one': many2one,
+    },
+    'Class': Option
+};
+
+});
diff --git a/addons/website/static/src/js/summernote.js b/addons/web_editor/static/src/js/summernote.js
similarity index 94%
rename from addons/website/static/src/js/summernote.js
rename to addons/web_editor/static/src/js/summernote.js
index 5303837b26a..b144ae4eacc 100644
--- a/addons/website/static/src/js/summernote.js
+++ b/addons/web_editor/static/src/js/summernote.js
@@ -1,7 +1,8 @@
-odoo.define('website.summernote', function (require) {
+odoo.define('web_editor.summernote', function (require) {
 'use strict';
 
 var core = require('web.core');
+require('summernote/summernote'); // wait that summernote is loaded
 
 var _t = core._t;
 
@@ -502,7 +503,7 @@ dom.removeBetween = function (sc, so, ec, eo, towrite) {
     if (sc.tagName) {
         sc = sc.childNodes[so] || dom.firstChild(ec);
         so = 0;
-        if (!dom.hasContentBefore(sc) && towrite) {
+        if (!dom.hasContentBefore(sc)) {
             sc.parentNode.insertBefore(document.createTextNode('\u00A0'), sc);
         }
     }
@@ -557,19 +558,18 @@ dom.removeBetween = function (sc, so, ec, eo, towrite) {
         sc = before ? dom.lastChild(before) : dom.firstChild(after);
         so = sc.textContent.length;
 
-        if (towrite && !node.firstChild && node.parentNode && !dom.isNotBreakable(node)) {
-            sc = $("<br/>")[0];
-            so = 0;
-            node.appendChild(br);
-        } else if (!ancestor.children.length && !ancestor.textContent.match(/\S|\u00A0/)) {
-            sc = $("<br/>")[0];
-            so = 0;
-            $(ancestor).prepend(sc);
-        } else if (before) {
+        if (before) {
             var text = sc.textContent.replace(/[ \t\n\r]+$/, '\u00A0');
             so -= sc.textContent.length - text.length;
             sc.textContent = text;
         }
+        if (towrite && !node.firstChild && node.parentNode && !dom.isNotBreakable(node)) {
+            var br = $("<br/>")[0];
+            node.appendChild(br);
+            sc = br;
+            so = 0;
+        }
+        dom.autoMerge(sc, false);
 
     } else {
 
@@ -690,9 +690,9 @@ dom.listBetween = function (sc, ec) {
     });
     return list.unique(nodes);
 };
-dom.isNotBreakable = function (node, sc, so, ec, eo) {
+dom.isNotBreakable = function (node) {
     // avoid triple click => crappy dom
-    return node === ec && !dom.isText(ec) && !dom.isBR(dom.firstChild(ec));
+    return !dom.isText(node) && !dom.isBR(dom.firstChild(node)) && dom.isVoid(dom.firstChild(node));
 };
 
 dom.isContentEditable = function (node) {
@@ -705,7 +705,7 @@ dom.isFont = function (node) {
         (nodeName === "SPAN" && (
             node.className.match(/(^|\s)fa(\s|$)/i) ||
             node.className.match(/(^|\s)(text|bg)-/i) ||
-            (node.attributes.style && node.attributes.style.value.match(/(^|\s)(color|background-color|font-size):/i)))) );
+            (node.attributes.style && node.attributes.style.value.match(/(^|\s)(color|background-color):/i)))) );
 };
 dom.isVisibleText = function (textNode) {
   return !!textNode.textContent.match(/\S|\u00A0/);
@@ -934,6 +934,7 @@ $.summernote.pluginEvents.insertTable = function (event, editor, layoutInfo, sDi
 };
 $.summernote.pluginEvents.tab = function (event, editor, layoutInfo, outdent) {
     var $editable = layoutInfo.editable();
+    $editable.data('NoteHistory').recordUndo($editable, 'tab');
     var r = range.create();
     var outdent = outdent || false;
 
@@ -941,12 +942,12 @@ $.summernote.pluginEvents.tab = function (event, editor, layoutInfo, outdent) {
         if (r.isOnCell() && r.isOnCellFirst()) {
             var td = dom.ancestor(r.sc, dom.isCell);
             if (!outdent && !dom.nextElementSibling(td) && !dom.nextElementSibling(td.parentNode)) {
-                range.create(td.lastChild, td.lastChild.textContent.length, td.lastChild, td.lastChild.textContent.length).select();
+                var last = dom.lastChild(td);
+                range.create(last, dom.nodeLength(last), last, dom.nodeLength(last)).select();
                 $.summernote.pluginEvents.enter(event, editor, layoutInfo);
             } else if (outdent && !dom.previousElementSibling(td) && !$(td.parentNode).text().match(/\S/)) {
                 $.summernote.pluginEvents.backspace(event, editor, layoutInfo);
             } else {
-                $editable.data('NoteHistory').splitNext();
                 editor.table.tab(r, outdent);
             }
             event.preventDefault();
@@ -1025,13 +1026,17 @@ $.summernote.pluginEvents.enter = function (event, editor, layoutInfo) {
 
     var node = dom.node(r.sc);
     var last = node;
-    while (node && dom.isSplitable(node) && !dom.isList(node) && !dom.isEditable(node)) {
+    while (node && dom.isSplitable(node) && !dom.isList(node)) {
         last = node;
         node = node.parentNode;
     }
 
     if (last === node && !dom.isBR(node)) {
         node = r.insertNode(br, true);
+        if (isFormatNode(last.firstChild) && $(last).closest(options.styleTags.join(',')).length) {
+            dom.moveContent(last.firstChild, last);
+            last.removeChild(last.firstChild);
+        }
         do {
             node = dom.hasContentAfter(node);
         } while (node && dom.isBR(node));
@@ -1159,6 +1164,8 @@ $.summernote.pluginEvents.delete = function (event, editor, layoutInfo) {
         }
         r = r.deleteContents();
         r.select();
+        event.preventDefault();
+        return false;
     }
 
     var target = r.ec;
@@ -1283,6 +1290,8 @@ $.summernote.pluginEvents.backspace = function (event, editor, layoutInfo) {
         }
         r = r.deleteContents();
         r.select();
+        event.preventDefault();
+        return false;
     }
 
     var target = r.sc;
@@ -1726,19 +1735,12 @@ $.summernote.pluginEvents.formatBlock = function (event, editor, layoutInfo, sTa
 $.summernote.pluginEvents.removeFormat = function (event, editor, layoutInfo, value) {
     var $editable = layoutInfo.editable();
     $editable.data('NoteHistory').recordUndo($editable);
-
     var node = range.create().sc.parentNode;
     document.execCommand('removeFormat');
-    document.execCommand('removeFormat'); // 2 times because some browser don't clean all in one time
+    document.execCommand('removeFormat');
     var r = range.create();
     r = dom.merge(node, r.sc, r.so, r.ec, r.eo, null, true);
-    r = range.create(r.sc, r.so, r.ec, r.eo);
-    r.select();
-
-    $.summernote.pluginEvents.justify(event, editor, layoutInfo, "");
-
-    r.clean().select();
-
+    range.create(r.sc, r.so, r.ec, r.eo).select();
     event.preventDefault();
     return false;
 };
@@ -1770,9 +1772,6 @@ eventHandler.toolbar.button.updateRecentColor = function (elBtn, sEvent, sValue)
 
 options.fontSizes = [_t('Default'), 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 62];
 $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color, bgcolor, size) {
-        var $editable = layoutInfo.editable();
-        $editable.data('NoteHistory').recordUndo($editable);
-
     var rng = range.create();
     var startPoint = rng.getStartPoint();
     var endPoint = rng.getEndPoint();
@@ -1962,7 +1961,7 @@ $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color
       if (i>0 && (font = dom.ancestor(nodes[i-1], dom.isFont))) {
         className2 = font.getAttribute('class');
         style2 = font.getAttribute('style');
-        if (node !== font && className == className2 && style == style2 && (node.parentNode === font.parentNode || node.parentNode === font)) {
+        if (node !== font && className == className2 && style == style2) {
           remove(node, font);
           nodes.splice(i,1);
           i--;
@@ -1975,8 +1974,6 @@ $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color
 };
 $.summernote.pluginEvents.fontSize = function (event, editor, layoutInfo, value) {
   var $editable = layoutInfo.editable();
-  $editable.data('NoteHistory').recordUndo($editable);
-
   event.preventDefault();
   $.summernote.pluginEvents.applyFont(event, editor, layoutInfo, null, null, value);
   editor.afterCommand($editable);
@@ -2010,60 +2007,6 @@ $.summernote.pluginEvents.backColor = function (event, editor, layoutInfo, backC
   }
   $.summernote.pluginEvents.applyFont(event, editor, layoutInfo, null, backColor, null);
   editor.afterCommand($editable);
-    };
-
-    $.summernote.pluginEvents.justify = function (event, editor, layoutInfo, align) {
-        var rng = range.create();
-        var startPoint = rng.getStartPoint();
-        var endPoint = rng.getEndPoint();
-
-        // get list of nodes to change
-        var nodes = [];
-        nodes.push(dom.ancestor(startPoint.node, dom.isPara) || dom.ancestor(startPoint.node, dom.isCell));
-        nodes.push(dom.ancestor(endPoint.node, dom.isPara) || dom.ancestor(endPoint.node, dom.isCell));
-        dom.walkPoint(startPoint, endPoint, function (point) {
-          var node = point.node;
-          if (dom.isPara(node) || dom.isCell(node)) {
-              nodes.push(point.node);
-          }
-        });
-        nodes = list.unique(nodes);
-
-        $(nodes).not(":has(div,p,li,h1,h2,h3,h4,h5,h6,h7,td,th)").each(function () {
-            var $node = $(this).css('text-align', '');
-            var css = window.getComputedStyle(this);
-            var textAlign = css.textAlign;
-            if (textAlign === "start") {
-                textAlign = css.direction === "ltr" ? "left" : "right";
-            }
-            if(textAlign !== align) {
-                $node.css('text-align', align);
-            }
-        }).find("*").css('text-align', "");
-    };
-    $.summernote.pluginEvents.justifyLeft = function (event, editor, layoutInfo) {
-        var $editable = layoutInfo.editable();
-        $editable.data('NoteHistory').recordUndo($editable);
-        $.summernote.pluginEvents.justify(event, editor, layoutInfo, 'left');
-        editor.afterCommand($editable);
-    };
-    $.summernote.pluginEvents.justifyCenter = function (event, editor, layoutInfo) {
-        var $editable = layoutInfo.editable();
-        $editable.data('NoteHistory').recordUndo($editable);
-        $.summernote.pluginEvents.justify(event, editor, layoutInfo, 'center');
-        editor.afterCommand($editable);
-    };
-    $.summernote.pluginEvents.justifyRight = function (event, editor, layoutInfo) {
-        var $editable = layoutInfo.editable();
-        $editable.data('NoteHistory').recordUndo($editable);
-        $.summernote.pluginEvents.justify(event, editor, layoutInfo, 'right');
-        editor.afterCommand($editable);
-    };
-    $.summernote.pluginEvents.justifyFull = function (event, editor, layoutInfo) {
-        var $editable = layoutInfo.editable();
-        $editable.data('NoteHistory').recordUndo($editable);
-        $.summernote.pluginEvents.justify(event, editor, layoutInfo, 'justify');
-        editor.afterCommand($editable);
 };
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -2094,6 +2037,9 @@ function summernote_table_update (oStyle) {
         return;
     }
     var table = dom.ancestor(oStyle.range.sc, dom.isTable);
+    if (!table) { // if the editable tag is inside the table
+        return;
+    }
     var $editable = $(table).closest('.o_editable');
 
     $('.o_table_handler').remove();
@@ -2196,7 +2142,9 @@ function summernote_table_update (oStyle) {
 var fn_popover_update = eventHandler.popover.update;
 eventHandler.popover.update = function ($popover, oStyle, isAirMode) {
     fn_popover_update.call(this, $popover, oStyle, isAirMode);
-    summernote_table_update(oStyle);
+    if(!!(isAirMode ? $popover : $popover.parent()).find('.note-table').length) {
+        summernote_table_update(oStyle);
+    }
 };
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -2237,12 +2185,15 @@ eventHandler.attach = function (oLayoutInfo, options) {
     oLayoutInfo.editor.on("paste", summernote_paste);
     $editable.on("scroll", summernote_table_scroll);
 };
-var fn_dettach = eventHandler.dettach;
-eventHandler.dettach = function (oLayoutInfo, options) {
+var fn_detach = eventHandler.detach;
+eventHandler.detach = function (oLayoutInfo, options) {
     var $editable = oLayoutInfo.editor.hasClass('note-editable') ? oLayoutInfo.editor : oLayoutInfo.editor.find('.note-editable');
-    fn_dettach.call(this, oLayoutInfo, options);
+    fn_detach.call(this, oLayoutInfo, options);
     oLayoutInfo.editor.off("paste", summernote_paste);
     $editable.off("scroll", summernote_table_scroll);
+    $('.o_table_handler').remove();
 };
 
+return $.summernote;
+
 });
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
new file mode 100644
index 00000000000..755fee8a606
--- /dev/null
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -0,0 +1,397 @@
+odoo.define('web_editor.tour', function (require) {
+'use strict';
+
+var core = require('web.core');
+var Tour = require('web.Tour');
+var base = require('web_editor.base');
+var snippet_editor = require('web_editor.snippet.editor');
+
+var _t = core._t;
+
+base.ready().done(function () {
+
+var click_event = function(el, type) {
+    var evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
+    el.dispatchEvent(evt);
+};
+
+Tour.register({
+    id:   'rte',
+    name: "Test RTE",
+    mode: 'test',
+    path: '/web_editor/field/html?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+    steps: [
+        {
+            title:     "Change html for this test",
+            onload: function () {
+                var html = '\n'+
+                    '<section>\n'+
+                    '    <div class="container">\n'+
+                    '        <div class="row">\n'+
+                    '            <div class="col-md-6 mt16">\n'+
+                    '<h1 id="text_title_id">Batnae municipium in Anthemusia</h1>     \n'+
+                    '     <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>\n'+
+                    '     <p>    Quam <img style="width: 25%" src="/web_editor/static/src/img/drag_here.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>\n'+
+                    '     <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+
+                    '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+
+                    '        </div>\n'+
+                    '        <div class="col-md-6 mt16">\n'+
+                    '            <img class="img img-responsive shadow mb16" src="/web_editor/static/src/img/drag_here.png" alt="Odoo text and image block">\n'+
+                    '        </div>\n'+
+                    '    </div>\n'+
+                    '</section>\n';
+                $("#editable_area").html(html);
+            }
+        },
+        {
+            element:   '#editable_area > section .row > div:first',
+            title:     "simulate triple click and change text bg-color",
+            onload: function () {
+                var $el = $(this.element);
+                var $h1 = $('h1', $el);
+                $.summernote.core.range.create($h1[0].firstChild, 0, $('p', $el)[0], 0).select();
+                click_event($h1[0], 'mouseup');
+            }
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first',
+            element:   '.note-popover button[data-event="color"]:visible',
+            title:     "change text bg-color after triple click",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
+            element:   '.note-color button.dropdown-toggle:visible',
+            title:     "change selection to change text color",
+            onload: function () {
+                var $el = $('#editable_area > section .row > div:first:not(:has(p font)) h1 font');
+                $.summernote.core.range.create($el[0].firstChild, 5, $el[0].firstChild, 10).select();
+                click_event($el[0], 'mouseup');
+            }
+        },
+        {
+            element:   'div[data-target-event="foreColor"]:visible .note-color-row:eq(1) button[data-event="foreColor"]:first',
+            title:     "change text color",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first h1 font:eq(2)',
+            element:   '.note-color button.dropdown-toggle:visible',
+            title:     "change selection to change text bg-color again",
+            onload: function () {
+                var $el = $('#editable_area > section .row > div:first h1 font:eq(2)');
+                $.summernote.core.range.create($el.prev()[0].firstChild, 3, $el[0].firstChild, 10).select();
+                click_event($el.prev()[0], 'mouseup');
+            }
+        },
+        {
+            element:   'div[data-target-event="backColor"] .colorpicker button[data-event="backColor"]:first',
+            title:     "change text backColor again",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first h1 font:eq(4)',
+            element:   '.note-color button.dropdown-toggle:visible',
+            title:     "change selection (h1 and p) to change text color with class",
+            onload: function () {
+                var $el = $('#editable_area > section .row > div:first h1 font:eq(4)');
+                $.summernote.core.range.create($el.prev()[0].firstChild, 3, $el.parent("h1").next("p")[0].firstChild, 30).select();
+                click_event($el.prev()[0], 'mouseup');
+            }
+        },
+        {
+            element:   'div[data-target-event="foreColor"]:visible button[data-event="foreColor"][data-value^="text-"]:first',
+            title:     "change text foreColor again",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first p font',
+            element:   '.o_editable.note-editable.o_dirty',
+            title:     "delete selection",
+            keydown:   46 // delete
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1',
+            element:   '.o_editable.note-editable.o_dirty',
+            title:     "clean and delete (backspace) an other selection",
+            onload: function () {
+                var $el = $(this.waitFor);
+                $.summernote.core.range.createFromNode($el.next("p")[0]).clean();
+                $.summernote.core.range.create($el.find('font:containsExact(ici)')[0].firstChild, 1, $el.next().next()[0].firstChild, 5).select();
+                click_event($el.find('font:last')[0], 'mouseup');
+            },
+            keydown:   8 // backspace
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
+            element:   '.o_editable.note-editable.o_dirty',
+            title:     "delete an other selection",
+            onload: function () {
+                var $el = $(this.waitFor);
+                $.summernote.core.range.create($el.find('font:first')[0].firstChild, 3, $el.next("p")[0].childNodes[2], 8).select();
+                click_event($el.find('font:first')[0], 'mouseup');
+            },
+            keydown:   46
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(Bat) )',
+            element:   '.note-air-popover button[data-event="undo"]',
+            title:     "undo",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(i) )',
+            element:   '.note-air-popover button[data-event="undo"]',
+            title:     "undo adain",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1',
+            element:   '.o_editable.note-editable.o_dirty',
+            title:     "delete (backspace) after undo",
+            keydown:   8 // backspace
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) )',
+            element:   '#editable_area > section .row > div:first img[style*="25%"]',
+            title:     "click on image",
+        },
+        {
+            element:   '.note-image-popover:visible button[data-event="resize"][data-value="0.5"]',
+            title:     "Click on resize half",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first img[style*="50%"]',
+            element:   '.note-image-popover:visible button[data-event="showImageDialog"]',
+            title:     "Click on edit picture",
+        },
+        {
+            waitFor:   '.modal #editor-media-image',
+            element:   '.modal a[data-toggle="tab"]:contains(Pictogram)',
+            title:     "Click on pictogram tab",
+        },
+        {
+            element:   '#editor-media-icon.active span.fa:first',
+            title:     "select a pictogram",
+        },
+        {
+            waitFor:   '#editor-media-icon.active span.font-icons-selected',
+            element:   '.modal button.save',
+            title:     "save pictogram",
+        },
+        {
+            element:   '.note-image-popover button[data-event="resizefa"][data-value="3"]',
+            title:     "select a size for the pictogram",
+        },
+        {
+            waitFor:   '#wrapwrap span.fa-3x',
+            element:   '.note-image-popover:visible button[data-event="floatMe"][data-value="right"]',
+            title:     "click on float right",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first span.fa.pull-right',
+            element:   '.note-image-popover:visible button[data-event="showLinkDialog"]',
+            title:     "click on create link",
+        },
+        {
+            waitFor:   '.modal a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.pull-right',
+            element:   '.modal .dropdown:has(.link-style) a[data-toggle="dropdown"]',
+            title:     "click on color style",
+        },
+        {
+            element:   '.modal .dropdown ul label.btn-success',
+            title:     "choose success style",
+        },
+        // {
+        //     waitFor:   '.modal a#link-preview.btn:containsRegex(/^<span [^>]+><\\/span>$/)',
+        //     element:   '.modal .select2-container.url-source a.select2-choice',
+        //     title:     "click to choose an internal page",
+        // },
+        // {
+        //     element:   '.select2-drop:visible .select2-search input',
+        //     title:     "search 'contact'",
+        //     sampleText: "contact",
+        // },
+        // {
+        //     element:   '.select2-drop:visible .select2-results .select2-result div:contains(/page/)',
+        //     title:     "select /page/contactus",
+        // },
+        {
+        //    waitNot:   '.select2-drop:visible',
+            element:   '#link-text',
+            title:     "change text label",
+            sampleText: "ABC[IMG] DEF",
+        },
+        {
+            waitFor:   '.modal a#link-preview.btn',
+            element:   '#link-external',
+            sampleText: "http://www.odoo.com",
+            title:     "insert a link url",
+        },
+        {
+            waitFor:   '.modal a#link-preview.btn:containsRegex(/^ABC<span [^>]+><\\/span> DEF$/)',
+            element:   '.modal button.save',
+            title:     "save link",
+        },
+        {
+            waitNot:   '#link-preview',
+            waitFor:   'a.btn[href^="http://"]:has(span.fa.fa-3x.pull-right)',
+            element:   '#editable_area > section .row > div:last img',
+            title:     "click on other picture",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first span.fa.pull-right',
+            element:   '.note-image-popover:visible button[data-event="showLinkDialog"]',
+            title:     "click on create link again",
+        },
+        {
+            waitFor:   '.modal a#link-preview:containsRegex(/^<img [^>]+>$/)',
+            element:   '.modal .dropdown:has(.link-style) a[data-toggle="dropdown"]',
+            title:     "click on color style again",
+        },
+        {
+            element:   '.modal .dropdown ul label.btn-success',
+            title:     "choose success style",
+        },
+        {
+            waitFor:   '.modal a#link-preview.btn',
+            element:   '#link-external',
+            sampleText: "test@test.test",
+            title:     "insert an email",
+        },
+        {
+            waitFor:   '.modal a#link-preview.btn[href="mailto:test@test.test"]',
+            element:   '.modal button.save',
+            title:     "save link",
+        },
+        {
+            waitNot:   '#link-preview',
+            waitFor:   '#editable_area > section .row > div:eq(1) > a > img',
+            element:   '#editable_area > section .row > div:first p:eq(2)',
+            title:     "triple enter then double backspace",
+            keydown:   [66, 13, 66, 13, 13, 8, 8], // B enter B enter enter backspace backspace
+            onload: function () {
+                var p = $(this.element)[0].firstChild;
+                $.summernote.core.range.create(p, p.textContent.length, p, p.textContent.length).select();
+                click_event(p, 'mouseup');
+            },
+        },
+        {
+            waitNot:   '#editable_area > section .row > div:first p:eq(4), #editable_area > section .row > div:eq(3)',
+            waitFor:   '#editable_area > section .row > div:first p:eq(3)',
+            title:     "add ul content",
+            onload: function () {
+                var $el = $('#editable_area > section .row > div:first');
+                var html = '  <ul>     '+
+                    '\n     <li>   <p>Batnae municipium.  </p></li>'+
+                    '\n     <li>    Seleucia praeter.</li>'+
+                    '\n     <li><p>Et hanc quidem.</p></li>'+
+                    '\n    </ul>';
+                $el.append(html);
+                var node = $el.find('ul li p:last')[0].firstChild;
+                $.summernote.core.range.create(node, 6).select();
+                click_event(node, 'mouseup');
+            }
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first ul li p:first',
+            element:   '.note-air-popover .note-style button.dropdown-toggle',
+            title:     "click on style dropdown",
+        },
+        {
+            element:   '.note-air-popover .note-style ul:visible a[data-value="h3"]',
+            title:     "select h3",
+            onload: function () {
+                var node = $('#editable_area > section .row > div:first ul li p:last')[0].firstChild;
+                $.summernote.core.range.create(node, 0).select();
+                click_event(node, 'mouseup');
+            }
+        },
+        {
+            element:   '#editable_area > section .row > div:first > ul > li > h3',
+            title:     "double tabulation",
+            keydown:   [9, 9] // tabulation
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first ul > li > ul > li > ul > li > h3',
+            element:   '.note-air-popover button[data-event="insertOrderedList"]',
+            title:     "click on order list",
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first ul > li > ul > li > ol > li > h3',
+            element:   '#editable_area > section .row > div:first ul li > p:last',
+            title:     "enter in ul",
+            keydown:   [66, 13], // enter
+            onload: function () {
+                $(this.element)[0].firstChild.textContent += "";
+                $.summernote.core.range.create($(this.element)[0].firstChild, 7).select();
+                click_event($(this.element)[0], 'mouseup');
+            }
+        },
+        {
+            element:   '#editable_area > section .row > div:first ul li > p:eq(1):containsRegex(/^municipium./)',
+            title:     "backspace in list",
+            keydown:   8
+        },
+        {
+            waitFor:   '#editable_area > section .row > div:first ul li p:eq(1)',
+            title:     "end",
+        },
+    ]
+});
+
+
+Tour.register({
+    id:   'rte_inline',
+    name: "Test RTE Inline",
+    mode: 'test',
+    path: '/web_editor/field/html/inline?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+    steps: [
+        {
+            title:     "Change html for this test",
+            onload: function () {
+                var $el = $(this.element);
+                var html = '\n'+
+                    '<div>\n'+
+                    '  <table cellspacing="0" cellpadding="0" width="100%">\n'+
+                    '    <tbody>\n'+
+                    '      <tr>\n'+
+                    '        <td valign="center" width="270">\n'+
+                    '          <img src="/logo.png" alt="Your Logo" class="img-circle img-thumbnail">\n'+
+                    '        </td>\n'+
+                    '        <td valign="center" width="270">\n'+
+                    '          <a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x text-primary"></span></a>\n'+
+                    '          <span style="color: rgb(255, 0, 0);" class="fa fa-4x fa-google-plus-square pull-right"></span>\n'+
+                    '        </td>\n'+
+                    '      </tr>\n'+
+                    '    </tbody>\n'+
+                    '  </table>\n'+
+                    '</div>';
+                $("#editable_area").html(html);
+            }
+        },
+        {
+            title:     "call clean for save",
+            element:   '#wrapwrap table',
+            onload: function () {
+                snippet_editor.instance.clean_for_save();
+            }
+        },
+        {
+            waitFor:   '#wrapwrap img:first[style*="border-bottom-left-radius:50%"][style*="border-top-width"][style*="padding-top"]',
+            title:     "check the image style",
+        },
+        {
+            waitFor:   '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(66,139,202)/27"]',
+            title:     "check the font image src",
+        },
+        {
+            waitFor:   '#wrapwrap img:eq(1)[style*="height:2em"]',
+            title:     "check the font class to css",
+        },
+        {
+            waitFor:   '#wrapwrap img:eq(2)[style*="float:right"]',
+            title:     "check the second font class to css",
+        },
+    ]
+});
+
+
+});
+
+});
diff --git a/addons/web_editor/static/src/js/transcoder.js b/addons/web_editor/static/src/js/transcoder.js
new file mode 100644
index 00000000000..c7bcd14107f
--- /dev/null
+++ b/addons/web_editor/static/src/js/transcoder.js
@@ -0,0 +1,172 @@
+odoo.define('web_editor.transcoder', function (require) {
+'use strict';
+
+var widget = require('web_editor.widget');
+
+var cache = {};
+var rulesCache = [];
+var getMatchedCSSRules = function (a) {
+    if(cache[a.tagName + "." +a.className]) {
+        return cache[a.tagName + "." +a.className];
+    }
+    if (!rulesCache.length) {
+        var sheets = document.styleSheets;
+        for(var i = sheets.length-1; i >= 0 ; i--) {
+            var rules = sheets[i].rules || sheets[i].cssRules;
+            if (rules) {
+                for(var r = rules.length-1; r >= 0; r--) {
+                    var selectorText = rules[r].selectorText;
+                    if (selectorText &&
+                            rules[r].cssText &&
+                            selectorText.indexOf(".") !== -1 &&
+                            selectorText.indexOf(".note-") === -1 &&
+
+                            selectorText.indexOf(":hover") === -1 &&
+                            selectorText.indexOf(":before") === -1 &&
+                            selectorText.indexOf(":after") === -1 &&
+                            selectorText.indexOf(":active") === -1 &&
+                            selectorText.indexOf(":link") === -1 &&
+                            selectorText.indexOf("::") === -1) {
+                        var st = selectorText.split(/\s*,\s*/);
+                        for (var k=0; k<st.length; k++) {
+                            rulesCache.push({ 'selector': st[k], 'style': rules[r].style });
+                        }
+                    }
+                }
+            }
+        }
+        rulesCache.reverse();
+    }
+
+    var css = [];
+    a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
+    for(var r = 0; r < rulesCache.length; r++) {
+        if (a.matches(rulesCache[r].selector)) {
+            var style = rulesCache[r].style;
+            if (style.parentRule) {
+                var style_obj = {};
+                for (var k=0, len=style.length; k<len; k++) {
+                    style_obj[style[k]] = style[style[k]];
+                }
+                rulesCache[r].style = style = style_obj;
+            }
+            css.push([rulesCache[r].selector, style]);
+        }
+    }
+
+    function specificity (selector) {
+        // http://www.w3.org/TR/css3-selectors/#specificity
+        var a = 0;
+        selector.replace(/#[a-z0-9_-]+/gi, function () { a++; return ""; });
+        var b = 0;
+        selector.replace(/(\.[a-z0-9_-]+)|(\[.*?\])/gi, function () { b++; return ""; });
+        var c = 0;
+        selector.replace(/(\s+|:+)[a-z0-9_-]+/gi, function (a) { if(a.indexOf(':not(')===-1) c++; return ""; });
+        return a*100 + b*10 + c;
+    }
+    css.sort(function (a, b) { return specificity(a[0]) - specificity(b[0]); });
+
+    var style = {};
+    _.each(css, function (v,k) {
+        _.each(v[1], function (v,k) {
+            if (!style[k] || style[k].indexOf('important') === -1 || v.indexOf('important') !== -1) {
+                style[k] = v;
+            }
+        });
+    });
+    return cache[a.tagName + "." +a.className] = style;
+};
+
+// convert font awsome into image
+var font_to_img = function ($editable) {
+    $(".fa", $editable).each(function () {
+        var $font = $(this);
+        var content;
+        _.find(widget.fontIcons, function (font) {
+            return _.find(widget.getCssSelectors(font.parser), function (css) {
+                if ($font.is(css[0].replace(/::?before$/, ''))) {
+                    content = css[1].match(/content:\s*['"]?(.)['"]?/)[1];
+                    return true;
+                }
+            });
+        });
+        if (content) {
+            var size = parseInt(parseFloat($font.css("font-size"))/parseFloat($font.parent().css("font-size")),10);
+            var color = $font.css("color").replace(/\s/g, '');
+            var src = _.str.sprintf('/web_editor/font_to_img/%s/%s/'+$font.width(), window.encodeURI(content), window.encodeURI(color));
+            var style = $font.attr("style");
+            style = (style ? style.replace(/\s/g, '').replace(/(^|;)height:[^;]*/, '$1').replace(/(^|;)font-size:[^;]*/, '$1') : "") + "height:"+size+"em;";
+            var $img = $("<img/>").attr("src", src).attr("data-class", $font.attr("class")).attr("style", style);
+            $font.replaceWith($img);
+        } else {
+            $font.remove();
+        }
+    });
+};
+// convert image into font awsome
+var img_to_font = function ($editable) {
+    $("img[src*='/web_editor/font_to_img/']", $editable).each(function () {
+        var $img = $(this);
+        var $font = $("<span/>").attr("class", $img.data("class")).attr("style", $img.attr("style")).css("height", "");
+        $img.replaceWith($font);
+    });
+};
+
+// convert class into inline style to send by mail
+var class_to_style = function ($editable) {
+    if (!rulesCache.length) {
+        getMatchedCSSRules($editable[0]);
+    }
+    var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
+    $editable.find(selector).each(function () {
+        var $target = $(this);
+        var css = getMatchedCSSRules(this);
+        var style = $target.attr("style") || "";
+        _.each(css, function (v,k) {
+            if (style.indexOf(k) === -1) {
+                style = k+":"+v+";"+style;
+            }
+        });
+        $target.attr("style", style);
+    });
+};
+// convert style into inline class from mail
+var style_to_class = function ($editable) {
+    getMatchedCSSRules($editable[0]);
+    var classes = [];
+    $editable.find("[class]").each(function () {
+        classes = classes.concat(this.className.split(/\s+/));
+    });
+
+    var maybe_selector = _.filter(rulesCache, function (a) { return !!_.find(classes, function (b) { return a.selector.indexOf("."+b) !== -1; } ); });
+    var selector = _.map(maybe_selector, function (a) { return a.selector;}).join(",");
+
+    var $c = $('<span/>').appendTo("body");
+
+    $editable.find(selector).each(function () {
+        var $target = $(this);
+        var css = getMatchedCSSRules(this);
+        var style = "";
+        _.each(css, function (v,k) {
+            if (style.indexOf(k) === -1) {
+                style = k+":"+v+";"+style;
+            }
+        });
+        css = $c.attr("style", style).attr("style").split(/\s*;\s*/);
+        style = $target.attr("style") || "";
+        _.each(css, function (v) {
+            style = style.replace(v, '');
+        });
+        $target.attr("style", style.replace(/;+(\s;)*/g, ';').replace(/^;/g, ''));
+    });
+    $c.remove();
+};
+
+return {
+    'font_to_img': font_to_img,
+    'img_to_font': img_to_font,
+    'class_to_style': class_to_style,
+    'style_to_class': style_to_class,
+};
+
+});
\ No newline at end of file
diff --git a/addons/web_editor/static/src/js/translator.js b/addons/web_editor/static/src/js/translator.js
new file mode 100644
index 00000000000..b15e8278004
--- /dev/null
+++ b/addons/web_editor/static/src/js/translator.js
@@ -0,0 +1,314 @@
+odoo.define('web_editor.translate', function (require) {
+'use strict';
+
+var core = require('web.core');
+var Model = require('web.Model');
+var ajax = require('web.ajax');
+var Class = require('web.Class');
+var Widget = require('web.Widget');
+var base = require('web_editor.base');
+var rte = require('web_editor.rte');
+var editor_widget = require('web_editor.widget');
+
+var qweb = core.qweb;
+var _t = core._t;
+
+ajax.loadXML('/web_editor/static/src/xml/translator.xml', qweb);
+
+
+var translatable = !!$('html').data('translatable');
+var edit_translations = !!$('html').data('edit_translations');
+
+$.fn.extend({
+  prependEvent: function (events, selector, data, handler) {
+    this.on(events, selector, data, handler);
+    events = events.split(' ');
+    this.each(function () {
+        var el = this;
+        _.each(events, function (event) {
+            var handler = $._data(el, 'events')[event].pop();
+            $._data(el, 'events')[event].unshift(handler);
+        });
+    });
+    return this;
+  }
+});
+
+var RTE_Translate = rte.Class.extend({
+    saveElement: function ($el, context) {
+        // remove multi edition
+        if ($el.data('oe-translation-id')) {
+            var key =  'translation:'+$el.data('oe-translation-id');
+            if (this.__saved[key]) return true;
+            this.__saved[key] = true;
+
+            return ajax.jsonRpc('/web/dataset/call', 'call', {
+                model: 'ir.translation',
+                method: 'write',
+                args: [
+                    [+$el.data('oe-translation-id')],
+                    {value: $el.html(), state: 'translated'},
+                    context || base.get_context()
+                ],
+            });
+        }
+
+        return this._super.apply(this, arguments);
+    },
+});
+
+var Translate_Modal = editor_widget.Dialog.extend({
+    template: 'web_editor.translator.attributes',
+    init: function (parent, node) {
+        this._super();
+        this.parent = parent;
+        this.$target = $(node);
+        this.translation = $(node).data('translation');
+    },
+    start: function () {
+        var self = this;
+        this._super();
+        var $group = this.$el.find('.form-group');
+        _.each(this.translation, function (node, attr) {
+            var $node = $(node);
+            var $label = $('<label class="control-label"></label>').text(attr);
+            var $input = $('<input class="form-control"/>').val($node.html());
+            $input.on('change keyup', function () {
+                var value = $input.val();
+                $node.html(value).trigger('change', node);
+                $node.data('$node').attr($node.data('attribute'), value).trigger('translate');
+                self.parent.rte_changed(node);
+            });
+            $group.append($label).append($input);
+        });
+    }
+});
+
+var Translate = Widget.extend({
+    events: {
+        'click [data-action="save"]': 'save_and_reload',
+        'click [data-action="cancel"]': 'cancel',
+    },
+    template: 'web_editor.translator',
+    init: function (parent, $target, lang) {
+        this.parent = parent;
+        this.ir_translation = new Model('ir.translation');
+        this.lang = lang || base.get_context().lang;
+        this.setTarget($target);
+        this._super();
+
+        this.rte = new RTE_Translate(this, this.config);
+        this.rte.on('change', this, this.rte_changed);
+    },
+    start: function () {
+        this._super();
+        this.$('button[data-action=save]').prop('disabled', true);
+        return this.edit();
+    },
+    setTarget: function ($target) {
+        this.$target = $target.find('[data-oe-translation-id], [data-oe-model][data-oe-id][data-oe-field]');
+
+        // attributes
+
+        var attrs = ['placeholder', 'title', 'alt'];
+        _.each(attrs, function (attr) {
+            $target.find('['+attr+'*="data-oe-translation-id="]').each(function () {
+                var $node = $(this);
+                var translation = $node.data('translation') || {};
+                var trans = $node.attr(attr);
+                var match = trans.match(/<span [^>]*data-oe-translation-id="([0-9]+)"[^>]*>(.*)<\/span>/);
+                var $trans = $(trans).addClass('hidden o_editable o_editable_translatable_attribute').appendTo('body');
+                $trans.data('$node', $node).data('attribute', attr);
+                translation[attr] = $trans[0];
+                $node.attr(attr, match[2]);
+
+                var select2 = $node.data('select2');
+                if (select2) {
+                    select2.blur();
+                    $node.on('translate', function () {
+                        select2.blur();
+                    });
+                    $node = select2.container.find('input');
+                }
+                $node.addClass('o_translatable_attribute').data('translation', translation);
+            });
+        });
+        this.$target_attr = $target.find('.o_translatable_attribute');
+        this.$target_attribute = $('.o_editable_translatable_attribute');
+    },
+    find: function (selector) {
+        return selector ? this.$target.find(selector).addBack().filter(selector) : this.$target;
+    },
+    edit: function () {
+        var flag = false;
+        window.onbeforeunload = function(event) {
+            if ($('.o_editable.o_dirty').length && !flag) {
+                flag = true;
+                setTimeout(function () {flag=false;},0);
+                return _t('This document is not saved!');
+            }
+        };
+        this.$target.addClass("o_editable");
+        this.rte.start();
+        this.translations = [];
+        this.markTranslatableNodes();
+        this.onTranslateReady();
+    },
+    onTranslateReady: function () {
+        this.$el.show();
+        this.trigger("edit");
+    },
+    rte_changed: function (node) {
+        var $node = $(node);
+        var trans = this.getTranlationObject($node[0]);
+        $node.toggleClass('o_dirty', trans.value !== $node.html().replace(/[ \t\n\r]+/, ' '));
+        this.$('button[data-action=save]').prop('disabled', !$('.o_editable.o_dirty').length);
+    },
+    getTranlationObject: function (node) {
+        var $node = $(node);
+        var id = +$node.data('oe-translation-id');
+        if (!id) {
+            id = $node.data('oe-model')+','+$node.data('oe-id')+','+$node.data('oe-field');
+        }
+        var trans = _.find(this.translations, function (trans) {
+            return trans.id === id;
+        });
+        if (!trans) {
+            this.translations.push(trans = {'id': id});
+        }
+        return trans;
+    },
+    __unbind_click: function (event) {
+        if (event.ctrlKey || !$(event.target).is(':o_editable')) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    },
+    __translate_attribute: function (event) {
+        if (event.ctrlKey) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.type !== 'click') {
+            return;
+        }
+
+        new Translate_Modal(event.data, event.target).appendTo('body');
+    },
+    markTranslatableNodes: function (node) {
+        var self = this;
+        this.$target.add(this.$target_attribute).each(function () {
+            var $node = $(this);
+            var trans = self.getTranlationObject(this);
+            trans.value = (trans.value ? trans.value : $node.html() ).replace(/[ \t\n\r]+/, ' ');
+        });
+        this.$target.parent().prependEvent('click', this, this.__unbind_click);
+
+        // attributes
+
+        this.$target_attr.each(function () {
+            var $node = $(this);
+            var translation = $node.data('translation');
+            _.each(translation, function (node, attr) {
+                var trans = self.getTranlationObject(node);
+                trans.value = (trans.value ? trans.value : $node.html() ).replace(/[ \t\n\r]+/, ' ');
+                $node.attr('data-oe-translation-state', (trans.state || 'to_translate'));
+            });
+        });
+
+        this.$target_attr.prependEvent('mousedown click mouseup', this, this.__translate_attribute);
+
+        console.info('Click on CTRL when you click in an translatable area to have the default behavior');
+    },
+    unarkTranslatableNode: function () {
+        this.$target.removeClass('o_editable').removeAttr('contentEditable');
+        this.$target.parent().off('click', this.__unbind_click);
+        this.$target_attr.off('mousedown click mouseup', this.__translate_attribute);
+    },
+    save_and_reload: function () {
+        return this.save().then(function () {
+            window.location.href = window.location.href.replace(/&?edit_translations(=[^&]*)?/g, '');
+        });
+    },
+    save: function () {
+        var context = base.get_context();
+        context.lang = this.lang;
+        return this.rte.save(context);
+    },
+    cancel: function () {
+        var self = this;
+        this.rte.cancel();
+        this.$target.each(function () {
+            $(this).html(self.getTranlationObject(this).value);
+        });
+        this.unarkTranslatableNode();
+        this.trigger("cancel");
+        this.$el.hide();
+        window.onbeforeunload = null;
+    },
+    destroy: function () {
+        this.cancel();
+        this.$el.remove();
+        this._super();
+    },
+
+    config: function ($editable) {
+        if ($editable.data('oe-model')) {
+            return {
+                'airMode' : true,
+                'focus': false,
+                'airPopover': [
+                    ['history', ['undo', 'redo']],
+                ],
+                'styleWithSpan': false,
+                'inlinemedia' : ['p'],
+                'lang': "odoo",
+                'onChange': function (html, $editable) {
+                    $editable.trigger("content_changed");
+                }
+            };
+        }
+        return {
+            'airMode' : true,
+            'focus': false,
+            'airPopover': [
+                ['font', ['bold', 'italic', 'underline', 'clear']],
+                ['fontsize', ['fontsize']],
+                ['color', ['color']],
+                ['history', ['undo', 'redo']],
+            ],
+            'styleWithSpan': false,
+            'inlinemedia' : ['p'],
+            'lang': "odoo",
+            'onChange': function (html, $editable) {
+                $editable.trigger("content_changed");
+            }
+        };
+    }
+});
+
+
+if (edit_translations) {
+    base.ready().then(function () {
+        data.instance = new Translate(this, $('#wrapwrap'));
+        data.instance.prependTo(document.body);
+
+        $('a[href*=edit_translations]').each(function () {
+            this.href = this.href.replace(/[$?]edit_translations[^&?]+/, '');
+        });
+        $('form[action*=edit_translations]').each(function () {
+            this.action = this.action.replace(/[$?]edit_translations[^&?]+/, '');
+        });
+    });
+}
+
+var data = {
+    'translatable': translatable,
+    'edit_translations': edit_translations,
+    'Class': Translate,
+};
+return data;
+
+});
diff --git a/addons/web_editor/static/src/js/widgets.js b/addons/web_editor/static/src/js/widgets.js
new file mode 100644
index 00000000000..6fab80ad802
--- /dev/null
+++ b/addons/web_editor/static/src/js/widgets.js
@@ -0,0 +1,1069 @@
+odoo.define('web_editor.widget', function (require) {
+'use strict';
+
+var core = require('web.core');
+var ajax = require('web.ajax');
+var Widget = require('web.Widget');
+var base = require('web_editor.base');
+var rte = require('web_editor.rte');
+
+var QWeb = core.qweb;
+var range = $.summernote.core.range;
+var dom = $.summernote.core.dom;
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+var Dialog = Widget.extend({
+    events: {
+        'hidden.bs.modal': 'destroy',
+        'click button.save': 'save',
+        'click button[data-dismiss="modal"]': 'cancel',
+    },
+    init: function () {
+        this._super();
+    },
+    start: function () {
+        var sup = this._super();
+        this.$el.modal({backdrop: 'static'});
+        this.$('input:first').focus();
+        return sup;
+    },
+    save: function () {
+        this.close();
+        this.trigger("saved");
+    },
+    cancel: function () {
+        this.trigger("cancel");
+    },
+    close: function () {
+        this.$el.modal('hide');
+    },
+});
+
+/**
+ * alt widget. Lets users change a alt & title on a media
+ */
+var alt = Dialog.extend({
+    template: 'web_editor.dialog.alt',
+    init: function ($editable, media) {
+        this.$editable = $editable;
+        this.media = media;
+        this.alt = ($(this.media).attr('alt') || "").replace(/&quot;/g, '"');
+        this.title = ($(this.media).attr('title') || "").replace(/&quot;/g, '"');
+        return this._super();
+    },
+    save: function () {
+        var self = this;
+        range.createFromNode(self.media).select();
+        this.$editable.data('NoteHistory').recordUndo();
+        var alt = this.$('#alt').val();
+        var title = this.$('#title').val();
+        $(this.media).attr('alt', alt ? alt.replace(/"/g, "&quot;") : null).attr('title', title ? title.replace(/"/g, "&quot;") : null);
+        setTimeout(function () {
+            click_event(self.media, "mouseup");
+        },0);
+        return this._super();
+    },
+});
+
+var click_event = function(el, type) {
+    var evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
+    el.dispatchEvent(evt);
+};
+
+/**
+ * MediaDialog widget. Lets users change a media, including uploading a
+ * new image, font awsome or video and can change a media into an other
+ * media
+ * 
+ * options: select_images: allow the selection of more of one image
+ */
+var MediaDialog = Dialog.extend({
+    template: 'web_editor.dialog.media',
+    events : _.extend({}, Dialog.prototype.events, {
+        'input input#icon-search': 'search',
+    }),
+    init: function ($editable, media, options) {
+        this._super();
+        if ($editable) {
+            this.$editable = $editable;
+            this.rte = this.$editable.rte || this.$editable.data('rte');
+        }
+        this.options = options || {};
+        this.old_media = media;
+        this.media = media;
+        this.isNewMedia = !media;
+        this.range = range.create();
+    },
+    start: function () {
+        var self = this;
+
+        this.only_images = this.options.only_images || this.options.select_images || (this.media && $(this.media).parent().data("oe-field") === "image");
+        if (this.only_images) {
+            this.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
+        }
+
+        if (this.media) {
+            if (this.media.nodeName === "IMG") {
+                this.$('[href="#editor-media-image"]').tab('show');
+            } else if (this.media.className.match(/(^|\s)media_iframe_video($|\s)/)) {
+                this.$('[href="#editor-media-video"]').tab('show');
+            }  else if (this.media.parentNode.className.match(/(^|\s)media_iframe_video($|\s)/)) {
+                this.media = this.media.parentNode;
+                this.$('[href="#editor-media-video"]').tab('show');
+            } else if (this.media.className.match(/(^|\s)fa($|\s)/)) {
+                this.$('[href="#editor-media-icon"]').tab('show');
+            }
+        }
+
+        this.imageDialog = new ImageDialog(this, this.media, this.options);
+        this.imageDialog.appendTo(this.$("#editor-media-image"));
+        this.iconDialog = new fontIconsDialog(this, this.media, this.options);
+        this.iconDialog.appendTo(this.$("#editor-media-icon"));
+        this.videoDialog = new VideoDialog(this, this.media, this.options);
+        this.videoDialog.appendTo(this.$("#editor-media-video"));
+
+        this.active = this.imageDialog;
+
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+            if ($(event.target).is('[href="#editor-media-image"]')) {
+                self.active = self.imageDialog;
+                self.$('li.search, li.previous, li.next').removeClass("hidden");
+            } else if ($(event.target).is('[href="#editor-media-icon"]')) {
+                self.active = self.iconDialog;
+                self.$('li.search, li.previous, li.next').removeClass("hidden");
+                self.$('.nav-tabs li.previous, .nav-tabs li.next').addClass("hidden");
+            } else if ($(event.target).is('[href="#editor-media-video"]')) {
+                self.active = self.videoDialog;
+                self.$('.nav-tabs li.search').addClass("hidden");
+            }
+        });
+
+        return this._super();
+    },
+    save: function () {
+        if (this.options.select_images) {
+            this.trigger("saved", this.active.save());
+            this.close();
+            return;
+        }
+        if(this.rte) {
+            this.range.select();
+            this.rte.historyRecordUndo(this.media);
+        }
+
+        var self = this;
+        if (self.media) {
+            this.media.innerHTML = "";
+            if (this.active !== this.imageDialog) {
+                this.imageDialog.clear();
+            }
+            if (this.active !== this.iconDialog) {
+                this.iconDialog.clear();
+            }
+            if (this.active !== this.videoDialog) {
+                this.videoDialog.clear();
+            }
+        } else {
+            this.media = document.createElement("img");
+            this.range.insertNode(this.media, true);
+            this.active.media = this.media;
+        }
+        this.active.save();
+
+        if (this.active.add_class) {
+            $(this.media).addClass(this.active.add_class);
+        }
+
+        $(document.body).trigger("media-saved", [self.active.media, self.old_media]);
+        self.trigger("saved", [self.active.media, self.old_media]);
+        setTimeout(function () {
+            if (!self.active.media.parentNode) {
+                return;
+            }
+            range.createFromNode(self.active.media).select();
+            click_event(self.active.media, "mousedown");
+            if (!this.only_images) {
+                setTimeout(function () {
+                    if($(self.active.media).parent().data("oe-field") !== "image") {
+                        click_event(self.active.media, "click");
+                    }
+                    click_event(self.active.media, "mouseup");
+                },0);
+            }
+        },0);
+
+        this.close();
+    },
+    searchTimer: null,
+    search: function () {
+        var self = this;
+        var needle = this.$("input#icon-search").val();
+        clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(function () {
+            self.active.search(needle || "");
+        },250);
+    }
+});
+
+/**
+ * ImageDialog widget. Lets users change an image, including uploading a
+ * new image in OpenERP or selecting the image style (if supported by
+ * the caller).
+ */
+var IMAGES_PER_ROW = 6;
+var IMAGES_ROWS = 2;
+var ImageDialog = Widget.extend({
+    template: 'web_editor.dialog.image',
+    events: _.extend({}, Dialog.prototype.events, {
+        'change .url-source': function (e) {
+            this.changed($(e.target));
+        },
+        'click button.filepicker': function () {
+            var filepicker = this.$('input[type=file]');
+            if (!_.isEmpty(filepicker)){
+                filepicker[0].click();
+            }
+        },
+        'click .js_disable_optimization': function () {
+            this.$('input[name="disable_optimization"]').val('1');
+            var filepicker = this.$('button.filepicker');
+            if (!_.isEmpty(filepicker)){
+                filepicker[0].click();
+            }
+        },
+        'change input[type=file]': 'file_selection',
+        'submit form': 'form_submit',
+        'change input.url': "change_input",
+        'keyup input.url': "change_input",
+        //'change select.image-style': 'preview_image',
+        'click .existing-attachments img': 'select_existing',
+        'click .existing-attachment-remove': 'try_remove',
+    }),
+    init: function (parent, media, options) {
+        this._super();
+        this.options = options || {};
+        this.parent = parent;
+        this.media = media;
+        this.images = [];
+        this.page = 0;
+    },
+    start: function () {
+        this.$preview = this.$('.preview-container').detach();
+        var self = this;
+        var res = this._super();
+        var o = { url: null, alt: null };
+        // avoid typos, prevent addition of new properties to the object
+        Object.preventExtensions(o);
+
+        if ($(this.media).is("img")) {
+            o.url = this.media.getAttribute('src');
+        } else {
+            this.add_class = "img-responsive pull-left";
+        }
+        this.parent.$(".pager > li").click(function (e) {
+            e.preventDefault();
+            var $target = $(e.currentTarget);
+            if ($target.hasClass('disabled')) {
+                return;
+            }
+            self.page += $target.hasClass('previous') ? -1 : 1;
+            self.display_attachments();
+        });
+        this.set_image(o.url, o.alt);
+        this.fetch_existing();
+        return res;
+    },
+    push: function (url, alt, id) {
+        if (this.options.select_images) {
+            var img = _.select(this.images, function (v) { return v.url == url;});
+            if (img.length) {
+                this.images.splice(this.images.indexOf(img[0]),1);
+                return;
+            }
+        } else {
+            this.images = [];
+        }
+        this.images.push({'url': url, 'alt': alt, 'id': id});
+    },
+    save: function () {
+        if (this.options.select_images) {
+            this.parent.trigger("save", this.images);
+            return this.images;
+        }
+        this.parent.trigger("save", this.media);
+
+        var img = this.images[0] || {
+                'url': this.$(".existing-attachments img:first").attr('src'),
+                'alt': this.$(".existing-attachments img:first").attr('alt')
+            };
+
+        if (this.media.tagName !== "IMG") {
+            var media = document.createElement('img');
+            $(this.media).replaceWith(media);
+            this.media = media;
+        }
+
+        $(this.media).attr('src', img.url).attr('alt', img.alt);
+
+        var style = this.style;
+        this.media.setAttribute('src', img.url);
+        if (style) { this.media.addClass(style); }
+
+        return this.media;
+    },
+    clear: function () {
+        this.media.className = this.media.className.replace(/(^|\s)(img(\s|$)|img-[^\s]*)/g, ' ');
+    },
+    cancel: function () {
+        this.trigger('cancel');
+    },
+    change_input: function (e) {
+        var $input = $(e.target);
+        var $button = $input.parent().find("button");
+        if ($input.val() === "") {
+            $button.addClass("btn-default").removeClass("btn-primary");
+        } else {
+            $button.removeClass("btn-default").addClass("btn-primary");
+        }
+    },
+    search: function (needle) {
+        var self = this;
+        this.fetch_existing(needle).then(function () {
+            self.selected_existing();
+        });
+    },
+    set_image: function (url, alt, error) {
+        var self = this;
+        if (url) {
+            this.push(url, alt);
+        }
+        this.$('input.url').val('');
+        this.fetch_existing().then(function () {
+            self.selected_existing();
+        });
+    },
+    form_submit: function (event) {
+        var self = this;
+        var $form = this.$('form[action="/web_editor/attachment/add"]');
+        if (!$form.find('input[name="upload"]').val().length) {
+            var url = $form.find('input[name="url"]').val();
+            if (this.selected_existing().size()) {
+                event.preventDefault();
+                return false;
+            }
+        }
+        $form.find('.well > div').hide().last().after('<span class="fa fa-spin fa-3x fa-refresh"/>');
+
+        var callback = _.uniqueId('func_');
+        this.$('input[name=func]').val(callback);
+        window[callback] = function (attachments, error) {
+            delete window[callback];
+            $form.find('.well > span').remove();
+            $form.find('.well > div').show();
+            if (error || !attachments.length) {
+                self.file_selected(null, error || !attachments.length);
+            }
+            for (var i=0; i<attachments.length; i++) {
+                self.file_selected(attachments[i]['local_url'] || '/web_editor/image/ir.attachment/'+attachments[i].id+'_'+(new Date().getTime())+'/datas', error);
+            }
+        };
+    },
+    file_selection: function () {
+        this.$el.addClass('nosave');
+        this.$('form').removeClass('has-error').find('.help-block').empty();
+        this.$('button.filepicker').removeClass('btn-danger btn-success');
+        this.$('form').submit();
+    },
+    file_selected: function(url, error) {
+        var $button = this.$('button.filepicker');
+        if (!error) {
+            $button.addClass('btn-success');
+        } else {
+            url = null;
+            this.$('form').addClass('has-error')
+                .find('.help-block').text(error);
+            $button.addClass('btn-danger');
+        }
+        this.set_image(url, null, error);
+
+        if (!this.options.select_images) {
+            // auto save and close popup
+            this.parent.save();
+        }
+    },
+    fetch_existing: function (needle) {
+        var domain = [['res_model', '=', 'ir.ui.view'], '|',
+                    ['mimetype', '=', false], ['mimetype', '=like', 'image/%']];
+        if (needle && needle.length) {
+            domain.push('|', ['datas_fname', 'ilike', needle], ['name', 'ilike', needle]);
+        }
+        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+            model: 'ir.attachment',
+            method: 'search_read',
+            args: [],
+            kwargs: {
+                domain: domain,
+                fields: ['name', 'local_url'],
+                order: 'id desc',
+                context: base.get_context()
+            }
+        }).then(this.proxy('fetched_existing'));
+    },
+    fetched_existing: function (records) {
+        this.records = records;
+        this.display_attachments();
+    },
+    display_attachments: function () {
+        this.$('.help-block').empty();
+        var per_screen = IMAGES_PER_ROW * IMAGES_ROWS;
+
+        var from = this.page * per_screen;
+        var records = this.records;
+
+        // Create rows of 3 records
+        var rows = _(records).chain()
+            .slice(from, from + per_screen)
+            .groupBy(function (_, index) { return Math.floor(index / IMAGES_PER_ROW); })
+            .values()
+            .value();
+        this.$('.existing-attachments').replaceWith(
+            QWeb.render(
+                'web_editor.dialog.image.existing.content', {rows: rows}));
+        this.parent.$('.pager')
+            .find('li.previous').toggleClass('disabled', (from === 0)).end()
+            .find('li.next').toggleClass('disabled', (from + per_screen >= records.length));
+
+        this.selected_existing();
+    },
+    select_existing: function (e) {
+        var $img = $(e.currentTarget);
+        this.push($img.attr('src'), $img.attr('alt'), $img.data('id'));
+        this.selected_existing();
+    },
+    selected_existing: function () {
+        var self = this;
+        this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
+        var $select = this.$('.existing-attachment-cell img').filter(function () {
+            var $img = $(this);
+            var url = $img.attr("src");
+            return !!_.select(self.images, function (v) {
+                if (v.url === url) {
+                    if (!v.id) {
+                        v.id = $img.data('id');
+                        v.alt = $img.attr('alt');
+                    }
+                    return true;
+                }
+            }).length;
+        });
+        $select.parent().addClass("media_selected");
+        return $select;
+    },
+    try_remove: function (e) {
+        var $help_block = this.$('.help-block').empty();
+        var self = this;
+        var $a = $(e.target);
+        var id = parseInt($a.data('id'), 10);
+        var attachment = _.findWhere(this.records, {id: id});
+        var $both = $a.parent().children();
+
+        $both.css({borderWidth: "5px", borderColor: "#f00"});
+
+        return ajax.jsonRpc('/web_editor/attachment/remove', 'call', {'ids': [id]}).then(function (prevented) {
+            if (_.isEmpty(prevented)) {
+                self.records = _.without(self.records, attachment);
+                self.display_attachments();
+                return;
+            }
+            $both.css({borderWidth: "", borderColor: ""});
+            $help_block.replaceWith(QWeb.render(
+                'web_editor.dialog.image.existing.error', {
+                    views: prevented[id]
+                }
+            ));
+        });
+    },
+});
+
+
+var cacheCssSelectors = {};
+var getCssSelectors = function(filter) {
+    var css = [];
+    if (cacheCssSelectors[filter]) {
+        return cacheCssSelectors[filter];
+    }
+    var sheets = document.styleSheets;
+    for(var i = 0; i < sheets.length; i++) {
+        var rules = sheets[i].rules || sheets[i].cssRules;
+        if (rules) {
+            for(var r = 0; r < rules.length; r++) {
+                var selectorText = rules[r].selectorText;
+                if (selectorText) {
+                    var match = selectorText.match(filter);
+                    if (match) {
+                        css.push([match[1], rules[r].cssText.replace(/(^.*\{\s*)|(\s*\}\s*$)/g, '')]);
+                    }
+                }
+            }
+        }
+    }
+    return cacheCssSelectors[filter] = css;
+};
+function computeFonts() {
+    _.each(fontIcons, function (data) {
+        data.icons = _.map(getCssSelectors(data.parser), function (css) {
+            return css[0].slice(1, css[0].length).replace(/::?before$/, '');
+        });
+    });
+}
+
+rte.Class.include({
+    init: function (EditorBar) {
+        this._super.apply(this, arguments);
+        computeFonts();
+    }
+});
+
+/* list of font icons to load by editor. The icons are displayed in the media editor and
+ * identified like font and image (can be colored, spinned, resized with fa classes).
+ * To add font, push a new object {base, parser}
+ * - base: class who appear on all fonts (eg: fa fa-refresh)
+ * - parser: regular expression used to select all font in css style sheets
+ */
+var fontIcons = [{'base': 'fa', 'parser': /(?=^|\s)(\.fa-[0-9a-z_-]+::?before)/i}];
+
+
+/**
+ * FontIconsDialog widget. Lets users change a font awsome, suport all
+ * font awsome loaded in the css files.
+ */
+var fontIconsDialog = Widget.extend({
+    template: 'web_editor.dialog.font-icons',
+    events : _.extend({}, Dialog.prototype.events, {
+        'click .font-icons-icon': function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.$('#fa-icon').val(e.target.getAttribute('data-id'));
+            $(".font-icons-icon").removeClass("font-icons-selected");
+            $(event.target).addClass("font-icons-selected");
+        },
+    }),
+
+    // extract list of font (like awsome) from the cheatsheet.
+    renderElement: function() {
+        this.iconsParser = fontIcons;
+        this.icons = _.flatten(_.map(fontIcons, function (data) {
+                return data.icons;
+            }));
+        this._super();
+    },
+
+    init: function (parent, media) {
+        this._super();
+        this.parent = parent;
+        this.media = media;
+        if (_.find(fontIcons, function (data) {return !data.icons;})) {
+            computeFonts();
+        }
+    },
+    start: function () {
+        return this._super().then(this.proxy('load_data'));
+    },
+    search: function (needle) {
+        var iconsParser = this.iconsParser;
+        if (needle) {
+            var parser = [];
+            var fontIcon;
+
+            for (var k=0; k<fontIcons.length; k++) {
+                fontIcon = fontIcons[k];
+                var icons = _(fontIcon.icons).filter(function (icon) {
+                    return icon.indexOf(needle) !== -1;
+                });
+                if (icons.length) {
+                    parser.push({
+                        base: fontIcon.base,
+                        icons: icons
+                    });
+                }
+            }
+            iconsParser = parser;
+        }
+        this.$('div.font-icons-icons').html(
+            QWeb.render('web_editor.dialog.font-icons.icons', {'iconsParser': iconsParser}));
+    },
+    /**
+     * Removes existing FontAwesome classes on the bound element, and sets
+     * all the new ones if necessary.
+     */
+    save: function () {
+        var self = this;
+        this.parent.trigger("save", this.media);
+        var icons = this.icons;
+        var style = this.media.attributes.style ? this.media.attributes.style.value : '';
+        var classes = (this.media.className||"").split(/\s+/);
+        var non_fa_classes = _.reject(classes, function (cls) {
+            return self.getFont(cls);
+        });
+        var final_classes = non_fa_classes.concat(this.get_fa_classes());
+        if (this.media.tagName !== "SPAN") {
+            var media = document.createElement('span');
+            $(this.media).replaceWith(media);
+            this.media = media;
+            style = style.replace(/\s*width:[^;]+/, '');
+        }
+        $(this.media).attr("class", _.compact(final_classes).join(' ')).attr("style", style);
+    },
+    /**
+     * return the data font object (with base, parser and icons) or null
+     */
+    getFont: function (classNames) {
+        if (!(classNames instanceof Array)) {
+            classNames = (classNames||"").split(/\s+/);
+        }
+        var fontIcon, className;
+        for (var i=0; i<classNames.length; i++) {
+            className = classNames[i];
+            for (var k=0; k<fontIcons.length; k++) {
+                fontIcon = fontIcons[k];
+                if (className === fontIcon.base || fontIcon.icons.indexOf(className) !== -1) {
+                    return {
+                        'base': fontIcon.base,
+                        'parser': fontIcon.parser,
+                        'icons': fontIcon.icons,
+                        'font': className
+                    };
+                }
+            }
+        }
+        return null;
+    },
+
+    /**
+     * Looks up the various FontAwesome classes on the bound element and
+     * sets the corresponding template/form elements to the right state.
+     * If multiple classes of the same category are present on an element
+     * (e.g. fa-lg and fa-3x) the last one occurring will be selected,
+     * which may not match the visual look of the element.
+     */
+    load_data: function () {
+        var classes = (this.media&&this.media.className||"").split(/\s+/);
+        for (var i = 0; i < classes.length; i++) {
+            var cls = classes[i];
+            switch(cls) {
+                case 'fa-1x':case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
+                    // size classes
+                    this.$('#fa-size').val(cls);
+                    continue;
+                case 'fa-spin':
+                case 'fa-rotate-90':case 'fa-rotate-180':case 'fa-rotate-270':
+                case 'fa-flip-horizontal':case 'fa-rotate-vertical':
+                    this.$('#fa-rotation').val(cls);
+                    continue;
+                case 'fa-fw':
+                    continue;
+                case 'fa-border':
+                    this.$('#fa-border').prop('checked', true);
+                    continue;
+                case '': continue;
+                default:
+                    $(".font-icons-icon").removeClass("font-icons-selected").filter("."+cls).addClass("font-icons-selected");
+                    for (var k=0; k<this.icons.length; k++) {
+                        if (this.icons.indexOf(cls) !== -1) {
+                            this.$('#fa-icon').val(cls);
+                            break;
+                        }
+                    }
+            }
+        }
+    },
+    /**
+     * Serializes the dialog to an array of FontAwesome classes. Includes
+     * the base ``fa``.
+     */
+    get_fa_classes: function () {
+        var font = this.getFont(this.$('#fa-icon').val());
+        return [
+            font ? font.base : 'fa',
+            font ? font.font : "",
+            this.$('#fa-size').val(),
+            this.$('#fa-rotation').val(),
+            this.$('#fa-border').prop('checked') ? 'fa-border' : ''
+        ];
+    },
+    clear: function () {
+        this.media.className = this.media.className.replace(/(^|\s)(fa(\s|$)|fa-[^\s]*)/g, ' ');
+    },
+});
+
+
+function createVideoNode(url) {
+    // video url patterns(youtube, instagram, vimeo, dailymotion, youku)
+    var ytRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+    var ytMatch = url.match(ytRegExp);
+
+    var igRegExp = /\/\/instagram.com\/p\/(.[a-zA-Z0-9]*)/;
+    var igMatch = url.match(igRegExp);
+
+    var vRegExp = /\/\/vine.co\/v\/(.[a-zA-Z0-9]*)/;
+    var vMatch = url.match(vRegExp);
+
+    var vimRegExp = /\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/;
+    var vimMatch = url.match(vimRegExp);
+
+    var dmRegExp = /.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/;
+    var dmMatch = url.match(dmRegExp);
+
+    var youkuRegExp = /\/\/v\.youku\.com\/v_show\/id_(\w+)\.html/;
+    var youkuMatch = url.match(youkuRegExp);
+
+    var $video = $('<iframe>');
+    if (ytMatch && ytMatch[1].length === 11) {
+      var youtubeId = ytMatch[1];
+      $video = $('<iframe>')
+        .attr('src', '//www.youtube.com/embed/' + youtubeId)
+        .attr('width', '640').attr('height', '360');
+    } else if (igMatch && igMatch[0].length) {
+      $video = $('<iframe>')
+        .attr('src', igMatch[0] + '/embed/')
+        .attr('width', '612').attr('height', '710')
+        .attr('scrolling', 'no')
+        .attr('allowtransparency', 'true');
+    } else if (vMatch && vMatch[0].length) {
+      $video = $('<iframe>')
+        .attr('src', vMatch[0] + '/embed/simple')
+        .attr('width', '600').attr('height', '600')
+        .attr('class', 'vine-embed');
+    } else if (vimMatch && vimMatch[3].length) {
+      $video = $('<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen>')
+        .attr('src', '//player.vimeo.com/video/' + vimMatch[3])
+        .attr('width', '640').attr('height', '360');
+    } else if (dmMatch && dmMatch[2].length) {
+      $video = $('<iframe>')
+        .attr('src', '//www.dailymotion.com/embed/video/' + dmMatch[2])
+        .attr('width', '640').attr('height', '360');
+    } else if (youkuMatch && youkuMatch[1].length) {
+      $video = $('<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen>')
+        .attr('height', '498')
+        .attr('width', '510')
+        .attr('src', '//player.youku.com/embed/' + youkuMatch[1]);
+    } else {
+      // this is not a known video link. Now what, Cat? Now what?
+    }
+
+    $video.attr('frameborder', 0);
+
+    return $video;
+}
+
+/**
+ * VideoDialog widget. Lets users change a video, support all summernote
+ * video, and embled iframe
+ */
+var VideoDialog = Widget.extend({
+    template: 'web_editor.dialog.video',
+    events : _.extend({}, Dialog.prototype.events, {
+        'click input#urlvideo ~ button': 'get_video',
+        'click input#embedvideo ~ button': 'get_embed_video',
+        'change input#urlvideo': 'change_input',
+        'keyup input#urlvideo': 'change_input',
+        'change input#embedvideo': 'change_input',
+        'keyup input#embedvideo': 'change_input'
+    }),
+    init: function (parent, media) {
+        this._super();
+        this.parent = parent;
+        this.media = media;
+    },
+    start: function () {
+        this.$preview = this.$('.preview-container').detach();
+        this.$iframe = this.$("iframe");
+        var $media = $(this.media);
+        if ($media.hasClass("media_iframe_video")) {
+            var src = $media.data('src');
+            this.$("input#urlvideo").val(src);
+            this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1);
+            this.get_video();
+        } else {
+            this.add_class = "pull-left";
+        }
+        return this._super();
+    },
+    change_input: function (e) {
+        var $input = $(e.target);
+        var $button = $input.parent().find("button");
+        if ($input.val() === "") {
+            $button.addClass("btn-default").removeClass("btn-primary");
+        } else {
+            $button.removeClass("btn-default").addClass("btn-primary");
+        }
+    },
+    get_embed_video: function (event) {
+        event.preventDefault();
+        var embedvideo = this.$("input#embedvideo").val().match(/src=["']?([^"']+)["' ]?/);
+        if (embedvideo) {
+            this.$("input#urlvideo").val(embedvideo[1]);
+            this.get_video(event);
+        }
+        return false;
+    },
+    get_video: function (event) {
+        if (event) event.preventDefault();
+        var $video = createVideoNode(this.$("input#urlvideo").val());
+        this.$iframe.replaceWith($video);
+        this.$iframe = $video;
+        return false;
+    },
+    save: function () {
+        this.parent.trigger("save", this.media);
+        var video_id = this.$("#video_id").val();
+        if (!video_id) {
+            this.$("button.btn-primary").click();
+            video_id = this.$("#video_id").val();
+        }
+        var video_type = this.$("#video_type").val();
+        var $iframe = $(
+            '<div class="media_iframe_video" data-src="'+this.$iframe.attr("src")+'">'+
+                '<div class="css_editable_mode_display">&nbsp;</div>'+
+                '<div class="media_iframe_video_size" contentEditable="false">&nbsp;</div>'+
+                '<iframe src="'+this.$iframe.attr("src")+'" frameborder="0" allowfullscreen="allowfullscreen" contentEditable="false"></iframe>'+
+            '</div>');
+        $(this.media).replaceWith($iframe);
+        this.media = $iframe[0];
+    },
+    clear: function () {
+        if (this.media.dataset.src) {
+            try {
+                delete this.media.dataset.src;
+            } catch(e) {
+                this.media.dataset.src = undefined;
+            }
+        }
+        this.media.className = this.media.className.replace(/(^|\s)media_iframe_video(\s|$)/g, ' ');
+    },
+});
+
+/* ----- EDITOR: LINK & MEDIA ---- */
+var LinkDialog = Dialog.extend({
+    template: 'web_editor.dialog.link',
+    events: _.extend({}, Dialog.prototype.events, {
+        'change :input.url-source': 'changed',
+        'keyup :input.url': 'onkeyup',
+        'keyup :input': 'preview',
+        'click button.remove': 'remove_link',
+        'change input#link-text': function (e) {
+            this.text = $(e.target).val();
+        },
+        'change .link-style': function (e) {
+            this.preview();
+        },
+    }),
+    init: function (editable, linkInfo) {
+        this._super(editable, linkInfo);
+        this.editable = editable;
+        this.data = linkInfo || {};
+
+        this.data.className = "";
+        if (this.data.range) {
+            this.data.iniClassName = $(this.data.range.sc).filter("a").attr("class") || "";
+            this.data.className = this.data.iniClassName.replace(/(^|\s+)btn(-[a-z0-9_-]*)?/gi, ' ');
+
+            var is_link = this.data.range.isOnAnchor();
+            var r = this.data.range;
+
+            var sc = r.sc;
+            var so = r.so;
+            var ec = r.ec;
+            var eo = r.eo;
+
+            var nodes;
+            if (!is_link) {
+                if (sc.tagName) {
+                    sc = dom.firstChild(so ? sc.childNodes[so] : sc);
+                    so = 0;
+                } else if (so !== sc.textContent.length) {
+                    if (sc === ec) {
+                        ec = sc = sc.splitText(so);
+                        eo -= so;
+                    } else {
+                        sc = sc.splitText(so);
+                    }
+                    so = 0;
+                }
+                if (ec.tagName) {
+                    ec = dom.lastChild(eo ? ec.childNodes[eo-1] : ec);
+                    eo = ec.textContent.length;
+                } else if (eo !== ec.textContent.length) {
+                    ec.splitText(eo);
+                }
+                
+                nodes = dom.listBetween(sc, ec);
+
+                // browsers can't target a picture or void node
+                if (dom.isVoid(sc) || dom.isImg(sc)) {
+                  so = dom.listPrev(sc).length-1;
+                  sc = sc.parentNode;
+                }
+                if (dom.isBR(ec)) {
+                  eo = dom.listPrev(ec).length-1;
+                  ec = ec.parentNode;
+                } else if (dom.isVoid(ec) || dom.isImg(sc)) {
+                  eo = dom.listPrev(ec).length;
+                  ec = ec.parentNode;
+                }
+
+                this.data.range = range.create(sc, so, ec, eo);
+                this.data.range.select();
+            } else {
+                nodes = dom.ancestor(sc, dom.isAnchor).childNodes;
+            }
+
+            if (dom.isImg(sc) && nodes.indexOf(sc) === -1) {
+                nodes.push(sc);
+            }
+            if (nodes.length > 1 || dom.ancestor(nodes[0], dom.isImg)) {
+                var text = "";
+                this.data.images = [];
+                for (var i=0; i<nodes.length; i++) {
+                    if (dom.ancestor(nodes[i], dom.isImg)) {
+                        this.data.images.push(dom.ancestor(nodes[i], dom.isImg));
+                        text += '[IMG]';
+                    } else if (!is_link && i===0) {
+                        text += nodes[i].textContent.slice(so, Infinity);
+                    } else if (!is_link && i===nodes.length-1) {
+                        text += nodes[i].textContent.slice(0, eo);
+                    } else {
+                        text += nodes[i].textContent;
+                    }
+                }
+                this.data.text = text;
+            }
+        }
+
+        this.data.text = this.data.text.replace(/[ \t\r\n]+/g, ' ');
+    },
+    start: function () {
+        this.bind_data();
+        this.$('input.url-source:eq(1)').closest('.list-group-item').addClass('active');
+        return this._super();
+    },
+    get_data: function (test) {
+        var self = this;
+        var def = new $.Deferred();
+        var $e = this.$('.active input.url-source');
+        if (!$e.length) {
+            $e = this.$('input.url-source:first');
+        }
+        var val = $e.val();
+        var label = this.$('#link-text').val() || val;
+
+        if (label && this.data.images) {
+            for(var i=0; i<this.data.images.length; i++) {
+                label = label.replace(/</, "&lt;").replace(/>/, "&gt;").replace(/\[IMG\]/, this.data.images[i].outerHTML);
+            }
+        }
+
+        if (!test && (!val || !$e[0].checkValidity())) {
+            // FIXME: error message
+            $e.closest('.form-group').addClass('has-error');
+            $e.focus();
+            def.reject();
+        }
+
+        var style = this.$("input[name='link-style-type']:checked").val() || '';
+        var size = this.$("input[name='link-style-size']:checked").val() || '';
+        var classes = (this.data.className || "") + (style && style.length ? " btn " : "") + style + " " + size;
+        var isNewWindow = this.$('input.window-new').prop('checked');
+
+        if ($e.hasClass('email-address') && $e.val().indexOf("@") !== -1) {
+            self.get_data_buy_mail(def, $e, isNewWindow, label, classes);
+        } else {
+            self.get_data_buy_url(def, $e, isNewWindow, label, classes);
+        }
+        return def;
+    },
+    get_data_buy_mail: function (def, $e, isNewWindow, label, classes) {
+        var val = $e.val();
+        def.resolve(val.indexOf("mailto:") === 0 ? val : 'mailto:' + val, isNewWindow, label, classes);
+    },
+    get_data_buy_url: function (def, $e, isNewWindow, label, classes) {
+        def.resolve($e.val(), isNewWindow, label, classes);
+    },
+    save: function () {
+        var self = this;
+        var _super = this._super.bind(this);
+        return this.get_data()
+            .then(function (url, new_window, label, classes) {
+                self.data.url = url;
+                self.data.newWindow = new_window;
+                self.data.text = label;
+                self.data.className = classes.replace(/\s+/gi, ' ').replace(/^\s+|\s+$/gi, '');
+
+                self.trigger("save", self.data);
+            }).then(_super);
+    },
+    bind_data: function () {
+        var href = this.data.url;
+        var new_window = this.data.isNewWindow;
+        var text = this.data.text;
+        var classes = this.data.iniClassName;
+
+        this.$('input#link-text').val(text);
+        this.$('input.window-new').prop('checked', new_window);
+
+        if (classes) {
+            this.$('input[value!=""]').each(function () {
+                var $option = $(this);
+                if (classes.indexOf($option.val()) !== -1) {
+                    $option.attr("checked", "checked");
+                }
+            });
+        }
+
+        if (href) {
+            var match;
+            if(match = /mailto:(.+)/.exec(href)) {
+                this.$('input.email-address').val(match = /mailto:(.+)/.exec(href) ? match[1] : '');
+            } else {
+                this.$('input.url').val(href);
+            }
+        }
+        this.preview();
+    },
+    changed: function (e) {
+        $(e.target).closest('.list-group-item')
+            .addClass('active')
+            .siblings().removeClass('active')
+            .addBack().removeClass('has-error');
+        this.preview();
+    },
+    onkeyup: function (e) {
+        var $e = $(e.target);
+        var is_link = ($e.val()||'').length && $e.val().indexOf("@") === -1;
+        this.$('input.window-new').closest("div").toggle(is_link);
+        this.preview();
+    },
+    preview: function () {
+        var $preview = this.$("#link-preview");
+        this.get_data(true).then(function (url, new_window, label, classes) {
+            $preview.attr("target", new_window ? '_blank' : "")
+                .attr("href", url && url.length ? url : "#")
+                .html((label && label.length ? label : url))
+                .attr("class", classes.replace(/pull-\w+/, ''));
+        });
+    }
+});
+
+return {
+    'getCssSelectors': getCssSelectors,
+    'Dialog': Dialog,
+    'alt': alt,
+    'MediaDialog': MediaDialog,
+    'fontIcons': fontIcons,
+    'LinkDialog': LinkDialog
+};
+
+});
diff --git a/addons/web_editor/static/src/xml/backend.xml b/addons/web_editor/static/src/xml/backend.xml
new file mode 100644
index 00000000000..5e3ed9695cd
--- /dev/null
+++ b/addons/web_editor/static/src/xml/backend.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web_editor.FieldTextHtmlSimple">
+        <div class="oe_form_field oe_form_field_html_text" t-att-style="widget.node.attrs.style">
+            <textarea readonly="readonly"/>
+        </div>
+    </t>
+
+    <t t-name="web_editor.FieldTextHtml">
+        <div class="oe_form_field oe_form_field_html oe_form_embedded_html" t-att-style="widget.node.attrs.style">
+            <iframe/>
+        </div>
+    </t>
+
+    <t t-name="web_editor.FieldTextHtml.button.reset">
+        <div class="btn-group pull-right">
+            <button class="o_reset_translation btn btn-default btn-sm btn-small" title="Reset from source"><span class="fa fa-upload"></span></button>
+        </div>
+    </t>
+
+    <t t-name="web_editor.FieldTextHtml.button.translate">
+        <div class="btn-group pull-right">
+            <button t-if="widget.field.translate &amp;&amp; widget.get('effective_readonly')" class="oe_field_translate btn btn-default btn-sm btn-small" style="height: 24px; padding: 1px 3px 0px 5px">
+                <img border="0" class="oe_input_icon" height="16" width="16" src="/web/static/src/img/icons/terp-translate.png" style="margin: 2px 0px -2px 0px;"/>
+            </button>
+        </div>
+    </t>
+
+    <t t-name="web_editor.FieldTextHtml.translate">
+        <div t-if="widget.view.datarecord.id &amp;&amp; widget.languages.length" style="margin: 5px; position: fixed; top: 0; left: 0; z-index: 2000;">
+            <select style="
+                    width: 148px;
+                    height: 22px;
+                    padding: 2px 4px;
+                    border: 1px solid #ccc;
+                    -moz-border-radius: 3px;
+                    -webkit-border-radius: 3px;
+                    border-radius: 3px;
+                    background: white;">
+                <t t-foreach="widget.languages" t-as="lang">
+                    <option value="en_US" t-att-selected="'en_US' == widget.lang ? 'selected' : null">
+                        <t t-if="!widget.get('effective_readonly')">English (edit mode)</t>
+                        <t t-if="widget.get('effective_readonly')">English</t>
+                    </option>
+                    <option t-att-value="lang.code" t-att-selected="lang.code == widget.lang ? 'selected' : null"><t t-esc="lang.name"/></option>
+                </t>
+            </select>
+        </div>
+    </t>
+    <t t-name="web_editor.FieldTextHtml.fullscreen">
+        <span style="margin: 5px; position: fixed; top: 0; right: 0; z-index: 2000;">
+            <button class="o_fullscreen btn btn-primary" style="height: 24px; padding: 1px 2px 1px 3px;">
+                <img border="0" class="oe_input_icon" height="16" width="16" src="/web/static/src/img/icons/STOCK_FULLSCREEN.png" style="margin: 2px 0px -2px 0px;"/>
+            </button>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
new file mode 100644
index 00000000000..7b73f9e3e16
--- /dev/null
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -0,0 +1,372 @@
+<templates id="template" xml:space="preserve">
+    <t t-name="web_editor.editorbar">
+        <div id="web_editor-top-edit" class="o_css_editor navbar navbar-inverse navbar-fixed-top hidden-xs">
+            <form class="navbar-form text-muted">
+                <button type="button" data-action="save"
+                        class="btn btn-primary btn-xs">Save</button>
+                <span> or </span>
+                <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a>
+            </form>
+        </div>
+    </t>
+
+    <t t-name="web_editor.dialog">
+        <div class="modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 class="modal-title"><t t-esc="title"/></h3>
+                    </div>
+                    <div class="modal-body"><t t-raw="0"/></div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary save" t-if="!button">Save</button>
+                        <button type="button" class="btn btn-primary save" t-if="button"><t t-raw="button"/></button>
+                        <button type="button" class="btn hidden wait" disabled="disabled"/>
+                        <span> or </span>
+                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.media">
+        <div class="modal note-image-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog select-media">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 class="modal-title">Select a Media</h3>
+                    </div>
+                    <div class="modal-body">
+                        <ul class="nav nav-tabs">
+                            <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
+                            <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
+                            <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
+                            <li class="search" style="float: right;">
+                                <ul class="pager mb0 mt0">
+                                    <li class="previous disabled"><a href="#">← Previous</a></li>
+                                    <li class="next disabled"><a href="#">Next →</a></li>
+                                </ul>
+                            </li>
+                            <li class="search" style="float: right;">
+                                <form action="#">
+                                    <div class="form-group font-icons fa fa-search mb0">
+                                        <input type="search" class="form-control" id="icon-search"/>
+                                    </div>
+                                </form>
+                            </li>
+                        </ul>
+
+                        <!-- Tab panes -->
+                        <div class="tab-content">
+                            <div class="tab-pane fade in active" id="editor-media-image">
+                            </div>
+                            <div class="tab-pane fade" id="editor-media-icon">
+                            </div>
+                            <div class="tab-pane fade" id="editor-media-video">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary save">Save</button>
+                        <button type="button" class="btn hidden wait" disabled="disabled"/>
+                        or
+                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.image">
+        <div>
+            <form method="POST"
+                  action="/web_editor/attachment/add"
+                  enctype="multipart/form-data"
+                  target="fileframe"
+                  class="form-inline">
+                <div class="well">
+                    <div class="form-group pull-left">
+                        <input type="file" name="upload" accept="image/*" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
+                        <input type="hidden" name="disable_optimization" value=""/>
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
+                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                                <span class="caret"></span>
+                                <span class="sr-only">Alternate Upload</span>
+                            </button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="#" class="js_disable_optimization">Upload image without optimization</a></li>
+                            </ul>
+                        </div>
+                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
+                    </div>
+                    <div>
+                        <span class="text-muted"> — or — </span>
+                        <label for="iamgeurl">Add an image URL</label>
+                        <div class="form-group btn-group">
+                            <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
+                            <button class="btn btn-default" type="submit">Add</button>
+                        </div>
+                    </div>
+                </div>
+                <input type="hidden" name="func"/>
+                <div class="help-block"/>
+                <div class="existing-attachments">
+                    <t t-call="web_editor.dialog.image.existing"/>
+                </div>
+            </form>
+        </div>
+        <iframe src="about:blank" name="fileframe" class="hidden"/>
+    </t>
+    <t t-name="web_editor.dialog.image.existing">
+        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog select-image">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 class="modal-title">Select a Picture</h3>
+                    </div>
+                    <div class="modal-body has-error">
+                        <div class="existing-attachments"/>
+                        <div class="help-block"/>
+                    </div>
+                    <div class="modal-footer">
+                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.image.existing.content">
+        <div class="existing-attachments">
+            <div class="row mt16" t-foreach="rows" t-as="row">
+                <div class="col-sm-2 existing-attachment-cell"
+                     t-foreach="row" t-as="attachment">
+                    <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/>
+                    <img t-att-src="attachment.local_url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" class="img img-responsive"/>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.image.existing.error">
+        <div class="help-block">
+            <p>The image could not be deleted because it is used in the
+               following pages or views:</p>
+            <ul t-foreach="views" t-as="view">
+                <li>
+                    <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
+                        <t t-esc="view.name"/>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </t>
+
+    <t t-name="web_editor.discard">
+        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 class="modal-title">Discard edition</h3>
+                    </div>
+                    <div class="modal-body">
+                        <p>
+                            If you discard the current edition, <em>all</em>
+                            unsaved changes will be lost.
+                        </p>
+                        <p>You can cancel to return to the edition mode.</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-danger">Discard</button>
+                        or
+                        <a href="#" data-dismiss="modal" aria-hidden="true">Cancel</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="web_editor.dialog.alt">
+        <t t-call="web_editor.dialog">
+            <t t-set="title">Change media Alt and Title</t>
+            <form action="#" class="form-horizontal">
+                <div class="form-group">
+                    <label for="alt" class="col-sm-2 control-label">Alt:</label>
+                    <div class="col-sm-9"><input id="alt" type="text" class="form-control" required="required" t-att-value="widget.alt"/></div>
+                </div>
+                <div class="form-group">
+                    <label for="title" class="col-sm-2 control-label">Title:</label>
+                    <div class="col-sm-9"><input id="title" type="text" class="form-control" required="required" t-att-value="widget.title"/></div>
+                </div>
+            </form>
+        </t>
+    </t>
+
+    <t t-name="web_editor.dialog.font-icons">
+        <form action="#">
+            <input type="hidden" id="fa-icon"/>
+            <input type="hidden" id="fa-size" value="fa-1x"/>
+            <div class="font-icons-icons">
+                <t t-call="web_editor.dialog.font-icons.icons">
+                    <t t-set="iconsParser" t-value="widget.iconsParser"/>
+                </t>
+            </div>
+        </form>
+    </t>
+    <t t-name="web_editor.dialog.font-icons.icons">
+        <t t-foreach="iconsParser" t-as="data">
+            <span t-foreach="data.icons" t-as="icon"
+                  t-attf-class="#{data.base} font-icons-icon #{icon}"
+                  t-att-data-id="icon"/>
+        </t>
+    </t>
+
+    <t t-name="web_editor.dialog.video">
+        <form action="#" class="form-inline">
+            <div class="well">
+                <div class="form-group btn-group">
+                    <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
+                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left">Set a video URL</label>
+                    <input type="text"
+                        name="url"
+                        class="form-control url pull-left"
+                        style="width: 400px;"
+                        id="urlvideo"
+                        placeholder="//www.youtube.com/embed/yws1tbgNV7k"
+                        t-translation="off"/>
+                    <button class="btn btn-default">Preview</button>
+                </div>
+                <div class="form-group btn-group">
+                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
+                    <input type="text"
+                        name="embed"
+                        class="form-control url pull-left"
+                        style="width: 400px;"
+                        id="embedvideo"
+                        placeholder='&lt;iframe src="//www.youtube.com/embed/yws1tbgNV7k"&gt;&lt;/iframe&gt;'
+                        t-translation="off"/>
+                    <button class="btn btn-default">Preview</button>
+                </div>
+            </div>
+            
+            <div id="video-preview" style="width: 450px; margin: 0 auto;">
+                <div class="media_iframe_video">
+                    <div class="media_iframe_video_size"></div>
+                    <iframe
+                        src=""
+                        frameborder="0"
+                        allowfullscreen="allowfullscreen"></iframe>
+                </div>
+            </div>
+
+            <div class="text-center mt32">
+                <div class="checkbox">
+                    <label><input type="checkbox" id="autoplay"/> Autoplay</label>
+                </div>
+            </div>
+        </form>
+    </t>
+
+    <t t-name="web_editor.dialog.link">
+        <t t-call="web_editor.dialog">
+            <t t-set="title">Link to</t>
+            <form>
+                <div class="list-group">
+                    <div class="form-group list-group-item active">
+                        <h3 class="list-group-item-heading">
+                            <label for="link-new" class="control-label">
+                                Link Label
+                            </label>
+                        </h3>
+                        <input type="text" class="form-control" id="link-text" required="required"/>
+                    </div>
+                </div>
+                <ul class="list-group">
+                    <li class="list-group-item form-group clearfix active">
+                        <div class="pull-right" style="display: none;">
+                            <label>
+                                <input type="checkbox" class="window-new"/>
+                                Open in new window
+                            </label>
+                        </div>
+                        <h4 class="list-group-item-heading">
+                            <label for="link-external" class="control-label">
+                                URL or Email Address
+                            </label>
+                        </h4>
+                        <input type="text" class="form-control url email-address url-source"
+                               id="link-external" placeholder="http://openerp.com"/>
+                    </li>
+                </ul>
+                <div class="form-horizontal link-style">
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">
+                            Style
+                        </label>
+                        <div class="col-sm-4">
+                            <div class="dropdown" style="line-height: 2em;">
+                                <a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a>
+                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                    <li>
+                                        <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-success">Success<input value="btn-success" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="dropdown" style="line-height: 2em;">
+                                <a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
+                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                    <li>
+                                        <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-horizontal link-style">
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">
+                            Preview
+                        </label>
+                        <div class="col-sm-10" style="line-height: 2em;">
+                            <div style="overflow: auto; max-width: 100%; max-height: 200px;">
+                                <a id="link-preview" href="#"></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </t>
+    </t>
+</templates>
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
similarity index 92%
rename from addons/website/static/src/xml/website.snippets.xml
rename to addons/web_editor/static/src/xml/snippets.xml
index 42a925184fa..ee996548379 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <!-- Snippet loader -->
-    <t t-name="website.snippets_style">
+    <t t-name="web_editor.snippets_style">
         <li class="navbar-form">
             <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@@ -13,7 +13,7 @@
         </li>
     </t>
 
-    <t t-name="website.snippets">
+    <t t-name="web_editor.snippets">
         <div id='oe_snippets' class="hidden-xs o_open">
             <div id="o_arrow">
                 <span class="fa fa-angle-double-right fa-1x" style="top: 10px;"></span>
@@ -24,7 +24,7 @@
         </div>
     </t>
 
-    <t t-name="website.snippet_overlay">
+    <t t-name="web_editor.snippet_overlay">
         <div class="oe_overlay">
             <div class="oe_overlay_options" contentEditable="false">
                 <div class="btn-group">
@@ -51,13 +51,13 @@
         </div>
     </t>
 
-    <t t-name="website.snippet_manipulator">
+    <t t-name="web_editor.snippet_manipulator">
         <div class='oe_snippet_manipulator'></div>
     </t>
 
     <!-- t-field options -->
 
-    <t t-name="website.many2one.button">
+    <t t-name="web_editor.many2one.button">
         <div class="dropdown">
             <a href="#" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact"><i class="fa fa-search"></i></a>
             <ul class="dropdown-menu contact_menu" role="menu">
@@ -66,7 +66,7 @@
         </div>
     </t>
 
-    <t t-name="website.many2one.search">
+    <t t-name="web_editor.many2one.search">
         <t t-foreach="contacts" t-as="item">
             <li><a href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
         </t>
diff --git a/addons/web_editor/static/src/xml/translator.xml b/addons/web_editor/static/src/xml/translator.xml
new file mode 100644
index 00000000000..244fc67ec4a
--- /dev/null
+++ b/addons/web_editor/static/src/xml/translator.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+
+<t t-name="web_editor.translator">
+    <div id="web_editor-top-edit" class="o_css_editor o_translate navbar navbar-inverse navbar-fixed-top hidden-xs">
+        <form class="navbar-form text-muted">
+            <button type="button" data-action="save" class="btn btn-primary btn-xs">Save</button>
+            <span>or</span>
+            <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a>
+        </form>
+    </div>
+</t>
+
+<t t-name="web_editor.translator.attributes">
+    <div class="modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    <h3 class="modal-title">Translate Attribute</h3>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary save">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</t>
+
+</templates>
diff --git a/addons/web_editor/tests/__init__.py b/addons/web_editor/tests/__init__.py
new file mode 100644
index 00000000000..ee3fba301a9
--- /dev/null
+++ b/addons/web_editor/tests/__init__.py
@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+import test_ui
+import test_converter
diff --git a/addons/web_editor/tests/test_converter.py b/addons/web_editor/tests/test_converter.py
new file mode 100644
index 00000000000..ec8124b66b5
--- /dev/null
+++ b/addons/web_editor/tests/test_converter.py
@@ -0,0 +1,243 @@
+# -*- coding: utf-8 -*-
+import textwrap
+import unittest2
+
+from lxml import etree, html
+from lxml.builder import E
+
+from openerp.tests import common
+from openerp.addons.base.ir import ir_qweb
+from openerp.addons.web_editor.models.ir_qweb import html_to_text
+
+
+class TestHTMLToText(unittest2.TestCase):
+    def test_rawstring(self):
+        self.assertEqual(
+            "foobar",
+            html_to_text(E.div("foobar")))
+
+    def test_br(self):
+        self.assertEqual(
+            "foo\nbar",
+            html_to_text(E.div("foo", E.br(), "bar")))
+
+        self.assertEqual(
+            "foo\n\nbar\nbaz",
+            html_to_text(E.div(
+                "foo", E.br(), E.br(),
+                "bar", E.br(),
+                "baz")))
+
+    def test_p(self):
+        self.assertEqual(
+            "foo\n\nbar\n\nbaz",
+            html_to_text(E.div(
+                "foo",
+                E.p("bar"),
+                "baz")))
+
+        self.assertEqual(
+            "foo",
+            html_to_text(E.div(E.p("foo"))))
+
+        self.assertEqual(
+            "foo\n\nbar",
+            html_to_text(E.div("foo", E.p("bar"))))
+        self.assertEqual(
+            "foo\n\nbar",
+            html_to_text(E.div(E.p("foo"), "bar")))
+
+        self.assertEqual(
+            "foo\n\nbar\n\nbaz",
+            html_to_text(E.div(
+                E.p("foo"),
+                E.p("bar"),
+                E.p("baz"),
+            )))
+
+    def test_div(self):
+        self.assertEqual(
+            "foo\nbar\nbaz",
+            html_to_text(E.div(
+                "foo",
+                E.div("bar"),
+                "baz"
+            )))
+
+        self.assertEqual(
+            "foo",
+            html_to_text(E.div(E.div("foo"))))
+
+        self.assertEqual(
+            "foo\nbar",
+            html_to_text(E.div("foo", E.div("bar"))))
+        self.assertEqual(
+            "foo\nbar",
+            html_to_text(E.div(E.div("foo"), "bar")))
+
+        self.assertEqual(
+            "foo\nbar\nbaz",
+            html_to_text(E.div(
+                "foo",
+                E.div("bar"),
+                E.div("baz")
+            )))
+
+    def test_other_block(self):
+        self.assertEqual(
+            "foo\nbar\nbaz",
+            html_to_text(E.div(
+                "foo",
+                E.section("bar"),
+                "baz"
+            )))
+
+    def test_inline(self):
+        self.assertEqual(
+            "foobarbaz",
+            html_to_text(E.div("foo", E.span("bar"), "baz")))
+
+    def test_whitespace(self):
+        self.assertEqual(
+            "foo bar\nbaz",
+            html_to_text(E.div(
+                "foo\nbar",
+                E.br(),
+                "baz")
+            ))
+
+        self.assertEqual(
+            "foo bar\nbaz",
+            html_to_text(E.div(
+                E.div(E.span("foo"), " bar"),
+                "baz")))
+
+
+class TestConvertBack(common.TransactionCase):
+    def setUp(self):
+        super(TestConvertBack, self).setUp()
+
+    def field_rountrip_result(self, field, value, expected):
+        model = 'web_editor.converter.test'
+        Model = self.registry(model)
+        id = Model.create(
+            self.cr, self.uid, {
+                field: value
+            })
+        [record] = Model.browse(self.cr, self.uid, [id])
+
+        e = etree.Element('span')
+        field_value = 'record.%s' % field
+        e.set('t-field', field_value)
+
+        rendered = self.registry('ir.qweb').render_tag_field(
+            e, {'field': field_value}, '', ir_qweb.QWebContext(self.cr, self.uid, {
+                'record': record,
+            }, context={'inherit_branding': True}))
+        element = html.fromstring(
+            rendered, parser=html.HTMLParser(encoding='utf-8'))
+
+        converter = self.registry('ir.qweb').get_converter_for(
+            element.get('data-oe-type'))
+
+        value_back = converter.from_html(
+            self.cr, self.uid, model, Model._fields[field], element)
+
+        if isinstance(expected, str):
+            expected = expected.decode('utf-8')
+        self.assertEqual(value_back, expected)
+
+    def field_roundtrip(self, field, value):
+        self.field_rountrip_result(field, value, value)
+
+    def test_integer(self):
+        self.field_roundtrip('integer', 42)
+
+    def test_float(self):
+        self.field_roundtrip('float', 42.567890)
+        self.field_roundtrip('float', 324542.567890)
+
+    def test_numeric(self):
+        self.field_roundtrip('numeric', 42.77)
+
+    def test_char(self):
+        self.field_roundtrip('char', "foo bar")
+
+        self.field_roundtrip('char', "ⒸⓄⓇⒼⒺ")
+
+    def test_selection(self):
+        self.field_roundtrip('selection', 3)
+
+    def test_selection_str(self):
+        self.field_roundtrip('selection_str', 'B')
+
+    def test_text(self):
+        self.field_roundtrip('text', textwrap.dedent("""\
+            You must obey the dance commander
+            Givin' out the order for fun
+            You must obey the dance commander
+            You know that he's the only one
+            Who gives the orders here,
+            Alright
+            Who gives the orders here,
+            Alright
+
+            It would be awesome
+            If we could dance-a
+            It would be awesome, yeah
+            Let's take the chance-a
+            It would be awesome, yeah
+            Let's start the show
+            Because you never know
+            You never know
+            You never know until you go"""))
+
+    def test_m2o(self):
+        """ the M2O field conversion (from html) is markedly different from
+        others as it directly writes into the m2o and returns nothing at all.
+        """
+        model = 'web_editor.converter.test'
+        field = 'many2one'
+
+        Sub = self.registry('web_editor.converter.test.sub')
+        sub_id = Sub.create(self.cr, self.uid, {'name': "Foo"})
+        sub2_id = Sub.create(self.cr, self.uid, {'name': "Bar"})
+
+        Model = self.registry(model)
+        id = Model.create(self.cr, self.uid, {field: sub_id})
+        [record] = Model.browse(self.cr, self.uid, [id])
+
+        e = etree.Element('span')
+        field_value = 'record.%s' % field
+        e.set('t-field', field_value)
+
+        rendered = self.registry('ir.qweb').render_tag_field(
+            e, {'field': field_value}, '', ir_qweb.QWebContext(self.cr, self.uid, {
+                'record': record,
+            }, context={'inherit_branding': True}))
+
+        element = html.fromstring(rendered, parser=html.HTMLParser(encoding='utf-8'))
+        # emulate edition
+        element.set('data-oe-many2one-id', str(sub2_id))
+        element.text = "New content"
+
+        converter = self.registry('ir.qweb').get_converter_for(
+            element.get('data-oe-type'))
+
+        value_back = converter.from_html(
+            self.cr, self.uid, model, Model._fields[field], element)
+
+        self.assertIsNone(
+            value_back, "the m2o converter should return None to avoid spurious"
+                        " or useless writes on the parent record")
+
+        self.assertEqual(
+            Sub.browse(self.cr, self.uid, sub_id).name,
+            "Foo",
+            "element edition can't change directly the m2o record"
+        )
+        self.assertEqual(
+            Model.browse(self.cr, self.uid, id).many2one.name,
+            "Bar",
+            "element edition should have been change the m2o id"
+        )
diff --git a/addons/web_editor/tests/test_ui.py b/addons/web_editor/tests/test_ui.py
new file mode 100644
index 00000000000..c0887201bba
--- /dev/null
+++ b/addons/web_editor/tests/test_ui.py
@@ -0,0 +1,9 @@
+import openerp.tests
+
+
+class TestUi(openerp.tests.HttpCase):
+    def test_01_admin_rte(self):
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web.Tour'].run('rte', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.rte", login='admin')
+
+    def test_02_admin_rte_inline(self):
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web.Tour'].run('rte_inline', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.rte", login='admin')
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
new file mode 100644
index 00000000000..5053d5acd6b
--- /dev/null
+++ b/addons/web_editor/views/editor.xml
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+
+<template id="summernote" name="Summernote">
+    <script type="text/javascript">
+        (function () {
+            "use strict";
+            odoo.define('jquery', function () {return $;});
+
+            var uniqId = 0;
+            odoo.__define__ = window.define;
+            window.define = function (id) {
+                var args = Array.prototype.slice.call(arguments);
+                var factorie = args.pop();
+                var id = args[0];
+                
+                if (id instanceof Array) {
+                    var name = "summernote_factorie_" + (++uniqId);
+                    odoo[name] = factorie;
+
+                    var head = '';
+                    var fn = 'var fn = odoo.'+name+';\ndelete odoo.'+name+';\n';
+                    fn += 'return fn(';
+                    for (var k=0; k&lt;id.length; k++) {
+                        head += 'var a'+(++uniqId)+' = require("'+id[k]+'");\n';
+                        fn += 'a'+uniqId+', ';
+                    }
+                    fn += 'null);';
+
+                    odoo.define(odoo.website_next_define, new Function('require', head + fn));
+                } else {
+                    odoo.define(id, factorie);
+                }
+            };
+        })();
+    </script>
+    <script>odoo.website_next_define = 'summernote/core/async';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/async.js" />
+    <script>odoo.website_next_define = 'summernote/core/func';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/func.js" />
+    <script>odoo.website_next_define = 'summernote/core/agent';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/agent.js" />
+    <script>odoo.website_next_define = 'summernote/core/list';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/list.js" />
+    <script>odoo.website_next_define = 'summernote/core/dom';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/dom.js" />
+    <script>odoo.website_next_define = 'summernote/core/key';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/key.js" />
+    <script>odoo.website_next_define = 'summernote/core/range';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/core/range.js" />
+
+    <script>odoo.website_next_define = 'summernote/editing/Bullet';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/editing/Bullet.js" />
+    <script>odoo.website_next_define = 'summernote/editing/History';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/editing/History.js" />
+    <script>odoo.website_next_define = 'summernote/editing/Style';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/editing/Style.js" />
+    <script>odoo.website_next_define = 'summernote/editing/Table';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/editing/Table.js" />
+    <script>odoo.website_next_define = 'summernote/editing/Typing';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/editing/Typing.js" />
+    <script>odoo.website_next_define = 'summernote/editing/Editor';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/editing/Editor.js" />
+
+    <script>odoo.website_next_define = 'summernote/module/Button';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/module/Button.js" />
+    <script>odoo.website_next_define = 'summernote/module/Dialog';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/module/Dialog.js" />
+    <script>odoo.website_next_define = 'summernote/module/Handle';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/module/Handle.js" />
+    <script>odoo.website_next_define = 'summernote/module/Popover';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/module/Popover.js" />
+    <script>odoo.website_next_define = 'summernote/module/Toolbar';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/module/Toolbar.js" />
+
+    <script>odoo.website_next_define = 'summernote/Renderer';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/Renderer.js" />
+    <script>odoo.website_next_define = 'summernote/EventHandler';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/EventHandler.js" />
+
+    <script>odoo.website_next_define = 'summernote/settings';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/settings.js" />
+
+    <script>odoo.website_next_define = 'summernote/summernote';</script>
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/summernote.js" />
+    
+    <script type="text/javascript" src="/web_editor/static/src/js/summernote.js" />
+    <script type="text/javascript">
+        window.define = odoo.__define__;
+        delete odoo.__define__;
+        delete odoo.website_next_define;
+    </script>
+
+    <!--link rel="stylesheet" href="/web_editor/static/lib/summernote/src/less/summernote.less"/-->
+    <link rel="stylesheet" href="/web_editor/static/lib/summernote/summernote.css"/>
+</template>
+
+<template id="editor" name="Editor">
+    <link rel='stylesheet' href='/web_editor/static/src/css/snippets.css'/>
+    <link rel="stylesheet" href='/web_editor/static/src/css/editor.css'/>
+    <script type="text/javascript" src='/web_editor/static/lib/nearest/jquery.nearest.js' />
+    <script type="text/javascript" src="/web_editor/static/src/js/editor.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/rte.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/rte.summernote.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/widgets.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/snippets.editor.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/snippets.options.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/tour.rte.js" />
+    <script type="text/javascript" src="/web_editor/static/src/js/transcoder.js"></script>
+    <script type="text/javascript" src="/web_editor/static/src/js/translator.js"></script>
+</template>
+
+<template id="assets_common" inherit_id="web.assets_common" name="web_editor base assets_common">
+    <xpath expr="." position="inside">
+        <link rel="stylesheet" href='/web_editor/static/src/css/web_editor.css'/>
+        <script type="text/javascript" src="/web_editor/static/src/js/base.js" />
+        <script type="text/javascript" src="/web_editor/static/src/js/snippets.animation.js" />
+    </xpath>
+</template>
+
+<template id="assets_editor" name="web_editor assets for editor">
+    <t t-call="web.assets_common"/>
+    <t t-call="web.bootstrap"/>
+    <script type="text/javascript" src="/web/static/lib/select2/select2.js"></script>
+    <t t-call="web_editor.summernote"/>
+    <t t-call="web_editor.editor"/>
+</template>
+
+<template id="assets_backend" name="web_editor assets for backend" inherit_id="web.assets_backend">
+    <xpath expr="." position="inside">
+        <t t-call="web_editor.summernote"/>
+        <t t-call="web_editor.editor"/>
+        <link rel="stylesheet" href="/web_editor/static/src/css/backend.css"/>
+        <script type="text/javascript" src="/web_editor/static/src/js/backend.js" />
+    </xpath>
+</template>
+
+<!-- color-picker -->
+<!-- HTML class to hide option for one mode : only-text, only-bg -->
+
+<template id="web_editor.colorpicker" name="Color-Picker">
+    <table class="colorpicker">
+        <tr>
+            <td><button class="bg-primary" title="Primary Color"/></td>
+            <td><button class="bg-success" title="Success Color"/></td>
+            <td><button class="bg-info" title="Info Color"/></td>
+            <td><button class="bg-warning" title="Warning Color"/></td>
+            <td><button class="bg-danger" title="Danger Color"/></td>
+        </tr>
+    </table>
+</template>
+
+</openerp>
diff --git a/addons/web_editor/views/iframe.xml b/addons/web_editor/views/iframe.xml
new file mode 100644
index 00000000000..32cbebd30ed
--- /dev/null
+++ b/addons/web_editor/views/iframe.xml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+
+<template id="layout" name="Editor layout">&lt;!DOCTYPE html&gt;
+    <html t-att-lang="lang and lang.replace('_', '-')"
+          t-att-data-editable="'1' if editable else None"
+          t-att-data-translatable="'1' if translatable else None"
+          t-att-data-edit_translations="'1' if edit_translations else None"
+          t-att-data-main-object="repr(main_object) if editable else None">
+        <head>
+            <meta charset="utf-8" />
+            <title>Odoo Editor layout</title>
+            <meta name="viewport" content="initial-scale=1"/>
+            <script type="text/javascript">
+                var snippets_url = '<t t-esc="snippets or ''"/>';
+                var callback = window.location.href.match(/callback=([^&amp;=]+)/)[1];
+            </script>
+            <link t-if="inline_mode" rel="stylesheet" href="/web_editor/static/src/css/inline.css" type="text/css"/>
+            <t t-if="not dont_load_assets">
+                <t t-call-assets="web_editor.assets_editor"/>
+                <style>
+                    .note-popover .popover { left: 5px !important; }
+                    html[data-translatable] .note-popover .popover { left: 150px !important; }
+                </style>
+                <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
+                <script type="text/javascript" src="/web_editor/static/src/js/iframe.js"></script>
+                <script t-if="enable_editor and inline_mode" type="text/javascript" src="/web_editor/static/src/js/inline.js"></script>
+            </t>
+            <script type="text/javascript">
+                var snippets_url = '<t t-esc="snippets or ''"/>';
+                var callback = window.location.href.match(/callback=([^&amp;=]+)/)[1];
+            </script>
+            <script>
+                if (window.top.odoo &amp;&amp; !window.top.odoo[callback+"_updown"]) {
+                    window.top.odoo[callback+"_updown"] = function (value, fields_values) {
+                        var editable = document.getElementsByClassName("o_editable")[0];
+                        if (value !== editable.innerHTML) {
+                            editable.innerHTML = value;
+                        }
+                    };
+                }
+            </script>
+            <t t-raw="head or ''"/>
+        </head>
+        <body onload="var fn=window.top.odoo &amp;&amp; window.top.odoo[callback+'_content']; if(fn) {fn();} else {console.warn('Please don\'t open iframe without the odoo backend');}">
+            <div id="wrapwrap">
+                <main>
+                    <t t-raw="0"/>
+                </main>
+            </div>
+            <t t-raw="add_html or ''"/>
+        </body>
+    </html>
+</template>
+
+<template id="FieldTextHtml" name="Editor HTML">
+    <t t-call="web_editor.layout">
+        <div id="editable_area" t-att-class="'' if edit_translations else 'o_editable'"></div>
+    </t>
+</template>
+
+</openerp>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
new file mode 100644
index 00000000000..4499187f6a7
--- /dev/null
+++ b/addons/web_editor/views/snippets.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+<template id="snippets">
+
+
+<ul>
+    <li class="active">
+        <a href="#snippet_structure" class="scroll-link">
+            <span class="fa-stack fa-lg">
+                <i class="fa fa-square fa-stack-2x fa-inverse"></i>
+            </span>
+        </a>
+    </li>
+</ul>
+
+
+<div id="o_scroll">
+    <div id="snippet_structure" class="o_panel">
+        <div class="o_panel_header">
+            <span class="fa-stack">
+                <i class="fa fa-th-large fa-stack-1x"></i>
+            </span> First Panel
+        </div>
+        <div class="o_panel_body">
+
+        </div>
+    </div>
+</div>
+
+
+<div id="snippet_options" class="hidden">
+    <t t-call="web_editor.snippet_options"/>
+</div>
+</template>
+
+<!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
+
+<template id="snippet_options">
+    <!-- media -->
+
+    <div data-js='media'
+        data-selector="img, .media_iframe_video, span.fa, i.fa, .glyphicon">
+        <li data-edition="edition"><a>Change...</a></li>
+    </div>
+
+    <!-- t-field -->
+
+    <div data-js='many2one'
+        data-selector="[data-oe-many2one-model]:not([data-oe-readonly])"
+        data-no-check="true">
+    </div>
+</template>
+
+</data>
+</openerp>
diff --git a/addons/web_gantt/static/src/js/gantt.js b/addons/web_gantt/static/src/js/gantt.js
index 556167f7229..1f4eb415ebb 100644
--- a/addons/web_gantt/static/src/js/gantt.js
+++ b/addons/web_gantt/static/src/js/gantt.js
@@ -7,7 +7,7 @@ odoo.define('web_gantt.GanttView', function (require) {
 var core = require('web.core');
 var form_common = require('web.form_common');
 var formats = require('web.formats');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var time = require('web.time');
 var View = require('web.View');
 
diff --git a/addons/web_kanban/static/src/js/kanban_view.js b/addons/web_kanban/static/src/js/kanban_view.js
index 44e50935348..0f93413a699 100644
--- a/addons/web_kanban/static/src/js/kanban_view.js
+++ b/addons/web_kanban/static/src/js/kanban_view.js
@@ -3,7 +3,7 @@ odoo.define('web_kanban.KanbanView', function (require) {
 
 var core = require('web.core');
 var data = require('web.data');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var Dialog = require('web.Dialog');
 var form_common = require('web.form_common');
 var Pager = require('web.Pager');
diff --git a/addons/web_tests/static/src/js/web.tour.js b/addons/web_tests/static/src/js/web.tour.js
index bc93b1ba079..9ec5905213b 100644
--- a/addons/web_tests/static/src/js/web.tour.js
+++ b/addons/web_tests/static/src/js/web.tour.js
@@ -303,7 +303,7 @@ Tour.register({
         },
         {
             title:      "select demo user",
-            element:    '.modal li a:contains(Demo User)',
+            element:    '.modal li:contains(Demo User)',
         },
         {
             title:      "test one2many's line onchange after many2one",
@@ -399,7 +399,7 @@ Tour.register({
         },
         {
             title:      "select an other user",
-            element:    '.oe_application li a:contains(Demo User)',
+            element:    '.ui-autocomplete li:contains(Demo User)',
         },
         {
             title:      "test one2many's line onchange after many2one",
@@ -433,7 +433,7 @@ Tour.register({
         },
         {
             title:      "add a tag",
-            element:    '.ui-autocomplete a:first',
+            element:    '.ui-autocomplete li:first',
         },
 
         // remove record
diff --git a/addons/web_tests_demo/static/test/demo.js b/addons/web_tests_demo/static/test/demo.js
index 5c5c90f08e4..ae0dcbfaafb 100644
--- a/addons/web_tests_demo/static/test/demo.js
+++ b/addons/web_tests_demo/static/test/demo.js
@@ -44,7 +44,7 @@ odoo.define_section('basic section', [], function (test, mock) {
     });
 
 
-    test('XML-RPC', ['web.Model'], function (assert, Model) {
+    test('XML-RPC', ['web.DataModel'], function (assert, Model) {
         assert.expect(3);
 
         mock.add('people.famous:name_search', function (args, kwargs) {
diff --git a/addons/web_tip/static/src/js/tip.js b/addons/web_tip/static/src/js/tip.js
index 8f8e7f15ff1..b5ed982aabe 100644
--- a/addons/web_tip/static/src/js/tip.js
+++ b/addons/web_tip/static/src/js/tip.js
@@ -3,7 +3,7 @@ odoo.define('web_tip.web_tip', function (require) {
 
 var core = require('web.core');
 var form_widgets = require('web.form_widgets');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var utils = require('web.utils');
 var WebClient = require('web.WebClient');
 
diff --git a/addons/website/__openerp__.py b/addons/website/__openerp__.py
index 4a40d869b0e..19cf30928da 100644
--- a/addons/website/__openerp__.py
+++ b/addons/website/__openerp__.py
@@ -11,7 +11,7 @@ OpenERP Website CMS
 
         """,
     'author': 'OpenERP SA',
-    'depends': ['web', 'web_planner'],
+    'depends': ['web', 'web_editor', 'web_planner'],
     'installable': True,
     'data': [
         'data/data.xml',
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 9f01f71b2a0..a755cb249b4 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -1,5 +1,4 @@
 # -*- coding: utf-8 -*-
-import cStringIO
 import datetime
 from itertools import islice
 import json
@@ -11,13 +10,12 @@ import re
 import werkzeug.utils
 import urllib2
 import werkzeug.wrappers
-from PIL import Image
 
 import openerp
 from openerp.addons.web.controllers.main import WebClient
+from openerp.addons.web_editor.controllers.main import Web_Editor
 from openerp.addons.web import http
-from openerp.http import request, STATIC_CACHE
-from openerp.tools import image_save_for_web
+from openerp.http import request
 
 logger = logging.getLogger(__name__)
 
@@ -199,7 +197,7 @@ class Website(openerp.addons.web.controllers.main.Home):
             return werkzeug.wrappers.Response(url, mimetype='text/plain')
         return werkzeug.utils.redirect(url + "?enable_editor=1")
 
-    @http.route(['/website/snippets'], type='json', auth="public", website=True)
+    @http.route(['/website/snippets'], type='json', auth="user", website=True)
     def snippets(self):
         return request.website._render('website.snippets')
 
@@ -234,111 +232,16 @@ class Website(openerp.addons.web.controllers.main.Home):
         return request.registry["ir.ui.view"].customize_template_get(
             request.cr, request.uid, key, full=full, bundles=bundles,
             context=request.context)
-    @http.route('/website/get_view_translations', type='json', auth='public', website=True)
-    def get_view_translations(self, xml_id, lang=None):
-        lang = lang or request.context.get('lang')
-        return request.registry["ir.ui.view"].get_view_translations(
-            request.cr, request.uid, xml_id, lang=lang, context=request.context)
-
-    @http.route('/website/set_translations', type='json', auth='public', website=True)
-    def set_translations(self, data, lang):
-        irt = request.registry.get('ir.translation')
-        for view_id, trans in data.items():
-            view_id = int(view_id)
-            for t in trans:
-                initial_content = t['initial_content'].strip()
-                new_content = t['new_content'].strip()
-                tid = t['translation_id']
-                if not tid:
-                    old_trans = irt.search_read(
-                        request.cr, request.uid,
-                        [
-                            ('type', '=', 'model'),
-                            ('name', '=', 'ir.ui.view,arch_db'),
-                            ('res_id', '=', view_id),
-                            ('lang', '=', lang),
-                            ('src', '=', initial_content),
-                        ])
-                    if old_trans:
-                        tid = old_trans[0]['id']
-                if tid:
-                    vals = {'value': new_content, 'state': 'translated'}
-                    irt.write(request.cr, request.uid, [tid], vals)
-                else:
-                    new_trans = {
-                        'type': 'model',
-                        'name': 'ir.ui.view,arch_db',
-                        'state': 'translated',
-                        'res_id': view_id,
-                        'lang': lang,
-                        'src': initial_content,
-                        'value': new_content,
-                    }
-                    if t.get('gengo_translation'):
-                        new_trans['gengo_translation'] = t.get('gengo_translation')
-                        new_trans['gengo_comment'] = t.get('gengo_comment')
-                    irt.create(request.cr, request.uid, new_trans)
-        return True
 
     @http.route('/website/translations', type='json', auth="public", website=True)
-    def get_website_translations(self, lang):
+    def get_website_translations(self, lang, mods=None):
         module_obj = request.registry['ir.module.module']
         module_ids = module_obj.search(request.cr, request.uid, [('name', 'ilike', 'website'), ('state', '=', 'installed')], context=request.context)
         modules = [x['name'] for x in module_obj.read(request.cr, request.uid, module_ids, ['name'], context=request.context)]
+        if mods:
+            modules += mods
         return WebClient().translations(mods=modules, lang=lang)
 
-    @http.route('/website/attach', type='http', auth='user', methods=['POST'], website=True)
-    def attach(self, func, upload=None, url=None, disable_optimization=None):
-        # the upload argument doesn't allow us to access the files if more than
-        # one file is uploaded, as upload references the first file
-        # therefore we have to recover the files from the request object
-        Attachments = request.registry['ir.attachment']  # registry for the attachment table
-
-        uploads = []
-        message = None
-        if not upload: # no image provided, storing the link and the image name
-            uploads.append({'website_url': url})
-            name = url.split("/").pop()                       # recover filename
-            attachment_id = Attachments.create(request.cr, request.uid, {
-                'name': name,
-                'type': 'url',
-                'url': url,
-                'res_model': 'ir.ui.view',
-            }, request.context)
-        else:                                                  # images provided
-            try:
-                attachment_ids = []
-                for c_file in request.httprequest.files.getlist('upload'):
-                    image_data = c_file.read()
-                    image = Image.open(cStringIO.StringIO(image_data))
-                    w, h = image.size
-                    if w*h > 42e6: # Nokia Lumia 1020 photo resolution
-                        raise ValueError(
-                            u"Image size excessive, uploaded images must be smaller "
-                            u"than 42 million pixel")
-
-                    if not disable_optimization and image.format in ('PNG', 'JPEG'):
-                        image_data = image_save_for_web(image)
-
-                    attachment_id = Attachments.create(request.cr, request.uid, {
-                        'name': c_file.filename,
-                        'datas': image_data.encode('base64'),
-                        'datas_fname': c_file.filename,
-                        'res_model': 'ir.ui.view',
-                    }, request.context)
-                    attachment_ids.append(attachment_id)
-
-                uploads = Attachments.read(
-                    request.cr, request.uid, attachment_ids, ['website_url'],
-                    context=request.context)
-            except Exception, e:
-                logger.exception("Failed to upload image to attachment")
-                message = unicode(e)
-
-        return """<script type='text/javascript'>
-            window.parent['%s'](%s, %s);
-        </script>""" % (func, json.dumps(uploads), json.dumps(message))
-
     @http.route(['/website/publish'], type='json', auth="public", website=True)
     def publish(self, id, object):
         _id = int(id)
@@ -432,63 +335,6 @@ class Website(openerp.addons.web.controllers.main.Home):
     def kanban(self, **post):
         return request.website.kanban_col(**post)
 
-    def placeholder(self, response):
-        return request.registry['website']._image_placeholder(response)
-
-    @http.route([
-        '/website/image',
-        '/website/image/<xmlid>',
-        '/website/image/<xmlid>/<int:max_width>x<int:max_height>',
-        '/website/image/<xmlid>/<field>',
-        '/website/image/<xmlid>/<field>/<int:max_width>x<int:max_height>',
-        '/website/image/<model>/<id>/<field>',
-        '/website/image/<model>/<id>/<field>/<int:max_width>x<int:max_height>'
-        ], auth="public", website=True)
-    def website_image(self, model=None, id=None, field=None, xmlid=None, max_width=None, max_height=None):
-        """ Fetches the requested field and ensures it does not go above
-        (max_width, max_height), resizing it if necessary.
-
-        If the record is not found or does not have the requested field,
-        returns a placeholder image via :meth:`~.placeholder`.
-
-        Sets and checks conditional response parameters:
-        * :mailheader:`ETag` is always set (and checked)
-        * :mailheader:`Last-Modified is set iif the record has a concurrency
-          field (``__last_update``)
-
-        The requested field is assumed to be base64-encoded image data in
-        all cases.
-
-        xmlid can be used to load the image. But the field image must by base64-encoded
-        """
-        if xmlid and "." in xmlid:
-            try:
-                record = request.env.ref(xmlid)
-                model, id = record._name, record.id
-            except:
-                raise werkzeug.exceptions.NotFound()
-            if model == 'ir.attachment' and not field:
-                if record.sudo().type == "url":
-                    field = "url"
-                else:
-                    field = "datas"
-
-        if not model or not id or not field:
-            raise werkzeug.exceptions.NotFound()
-
-        try:
-            idsha = str(id).split('_')
-            id = idsha[0]
-            response = werkzeug.wrappers.Response()
-            return request.registry['website']._image(
-                request.cr, request.uid, model, id, field, response, max_width, max_height,
-                cache=STATIC_CACHE if len(idsha) > 1 else None)
-        except Exception:
-            logger.exception("Cannot render image field %r of record %s[%s] at size(%s,%s)",
-                             field, model, id, max_width, max_height)
-            response = werkzeug.wrappers.Response()
-            return self.placeholder(response)
-
     #------------------------------------------------------
     # Server actions
     #------------------------------------------------------
@@ -529,21 +375,15 @@ class Website(openerp.addons.web.controllers.main.Home):
         return request.redirect('/')
 
     #------------------------------------------------------
-    # Backend html field
+    # image route for browse record
     #------------------------------------------------------
-    @http.route('/website/field/html', type='http', auth="public", website=True)
-    def FieldTextHtml(self, model=None, res_id=None, field=None, callback=None, **kwargs):
-        record = None
-        if model and res_id:
-            res_id = int(res_id)
-            record = request.registry[model].browse(request.cr, request.uid, res_id, request.context)
-
-        datarecord = json.loads(kwargs['datarecord'])
-        kwargs.update({
-            'content': record and getattr(record, field) or "",
-            'model': model,
-            'res_id': res_id,
-            'field': field,
-            'datarecord': datarecord
-        })
-        return request.website.render(kwargs.get("template") or "website.FieldTextHtml", kwargs)
+    @http.route([
+        '/website/image',
+        '/website/image/<xmlid>',
+        '/website/image/<xmlid>/<field>',
+        '/website/image/<model>/<id>/<field>',
+        '/website/image/<model>/<id>/<field>/<int:max_width>x<int:max_height>'
+        ], type='http', auth="public")
+    def website_image(self, model=None, id=None, field=None, xmlid=None, max_width=None, max_height=None):
+        logger.warning("Deprecated image controller, please use /web_editor/image/")
+        return Web_Editor().image(model=model, id=id, field=field, xmlid=xmlid, max_width=max_width, max_height=max_height)
diff --git a/addons/website/models/__init__.py b/addons/website/models/__init__.py
index 67672babb4e..9815e0c8285 100644
--- a/addons/website/models/__init__.py
+++ b/addons/website/models/__init__.py
@@ -8,5 +8,3 @@ import ir_qweb
 import ir_http
 import res_config
 import web_planner
-
-import test_models
diff --git a/addons/website/models/ir_http.py b/addons/website/models/ir_http.py
index 2668e5008d6..76e0d9a0945 100644
--- a/addons/website/models/ir_http.py
+++ b/addons/website/models/ir_http.py
@@ -157,7 +157,8 @@ class ir_http(orm.AbstractModel):
                 elif url_lang:
                     path.pop(1)
                     return self.reroute('/'.join(path) or '/')
-
+            if path[1] == request.website.default_lang_code:
+                request.context['edit_translations'] = False
             if not request.context.get('tz'):
                 request.context['tz'] = request.session['geoip'].get('time_zone')
             # bind modified context
diff --git a/addons/website/models/ir_qweb.py b/addons/website/models/ir_qweb.py
index d10e33a4708..ea0c6e33438 100644
--- a/addons/website/models/ir_qweb.py
+++ b/addons/website/models/ir_qweb.py
@@ -1,44 +1,11 @@
 # -*- coding: utf-8 -*-
-"""
-Website-context rendering needs to add some metadata to rendered fields,
-as well as render a few fields differently.
-
-Also, adds methods to convert values back to openerp models.
-"""
-
-import cStringIO
-import datetime
-import itertools
-import logging
-import os
-import urllib2
-import urlparse
-import re
-
-import pytz
-import werkzeug.urls
-import werkzeug.utils
-from dateutil import parser
-from lxml import etree, html
-from PIL import Image as I
-import openerp.modules
-
-import openerp
-from openerp.osv import orm, fields
-from openerp.tools import ustr, DEFAULT_SERVER_DATE_FORMAT, DEFAULT_SERVER_DATETIME_FORMAT
-from openerp.tools import html_escape as escape
 from openerp.addons.web.http import request
-from openerp.addons.base.ir import ir_qweb
-import simplejson
+from openerp.osv import orm
 
-REMOTE_CONNECTION_TIMEOUT = 2.5
-
-logger = logging.getLogger(__name__)
 
 class QWeb(orm.AbstractModel):
     """ QWeb object for rendering stuff in the website context
     """
-    _name = 'website.qweb'
     _inherit = 'ir.qweb'
 
     URL_ATTRS = {
@@ -46,7 +13,12 @@ class QWeb(orm.AbstractModel):
         'a': 'href',
     }
 
-    re_remove_spaces = re.compile('\s+')
+    CDN_TRIGGERS = {
+        'link':    'href',
+        'script':  'src',
+        'img':     'src',
+    }
+
     PRESERVE_WHITESPACE = [
         'pre',
         'textarea',
@@ -54,48 +26,15 @@ class QWeb(orm.AbstractModel):
         'style',
     ]
 
-    CDN_TRIGGERS = {
-        'link':    'href',
-        'script':  'src',
-        'img':     'src',
-    }
-
     def render_attribute(self, element, name, value, qwebcontext):
         context = qwebcontext.context or {}
         if not context.get('rendering_bundle'):
-            if name == self.URL_ATTRS.get(element.tag):
+            if name == self.URL_ATTRS.get(element.tag) and qwebcontext.get('url_for'):
                 value = qwebcontext.get('url_for')(value)
-            if request and request.website and request.website.cdn_activated and name == self.CDN_TRIGGERS.get(element.tag):
+            elif request and request.website and request.website.cdn_activated and (name == self.URL_ATTRS.get(element.tag) or name == self.CDN_TRIGGERS.get(element.tag)):
                 value = request.website.get_cdn_url(value)
-
         return super(QWeb, self).render_attribute(element, name, value, qwebcontext)
 
-    def render_tag_snippet(self, element, template_attributes, generated_attributes, qwebcontext):
-        cr = qwebcontext['request'].cr
-        uid = qwebcontext['request'].uid
-        view_reg = self.pool['ir.ui.view']
-        page_xmlid = self.eval_format(template_attributes["snippet"], qwebcontext)
-        view = view_reg.browse(cr, uid, view_reg.search(cr, uid, [('key', '=', page_xmlid)]))
-        generated_attributes += " " + "".join([
-            'data-oe-name="%s"' % view.name,
-            'data-oe-type="snippet"',
-            'data-oe-thumbnail="%s"' % template_attributes.get('thumbnail', "oe-thumbnail")])
-
-        template_attributes['call'] = template_attributes['snippet']
-        return self.render_tag_call(element, template_attributes, generated_attributes, qwebcontext)
-
-    def render_tag_call_assets(self, element, template_attributes, generated_attributes, qwebcontext):
-        if request and request.website and request.website.cdn_activated:
-            if qwebcontext.context is None:
-                qwebcontext.context = {}
-            qwebcontext.context['url_for'] = request.website.get_cdn_url
-        return super(QWeb, self).render_tag_call_assets(element, template_attributes, generated_attributes, qwebcontext)
-
-    def get_converter_for(self, field_type):
-        return self.pool.get(
-            'website.qweb.field.' + field_type,
-            self.pool['website.qweb.field'])
-
     def render_text(self, text, element, qwebcontext):
         compress = request and not request.debug and request.website and request.website.compress_html
         if compress and element.tag not in self.PRESERVE_WHITESPACE:
@@ -108,482 +47,3 @@ class QWeb(orm.AbstractModel):
             # No need to recurse because those tags children are not html5 parser friendly
             tail = self.re_remove_spaces.sub(' ', tail.rstrip())
         return super(QWeb, self).render_tail(tail, element, qwebcontext)
-
-class Field(orm.AbstractModel):
-    _name = 'website.qweb.field'
-    _inherit = 'ir.qweb.field'
-
-    def attributes(self, cr, uid, field_name, record, options,
-                   source_element, g_att, t_att, qweb_context, context=None):
-        if options is None: options = {}
-        field = record._model._fields[field_name]
-        attrs = [('data-oe-translate', 1 if getattr(field, 'translate', False) else 0)]
-
-        placeholder = options.get('placeholder') \
-                   or source_element.get('placeholder') \
-                   or getattr(field, 'placeholder', None)
-        if placeholder:
-            attrs.append(('placeholder', placeholder))
-
-        return itertools.chain(
-            super(Field, self).attributes(cr, uid, field_name, record, options,
-                                          source_element, g_att, t_att,
-                                          qweb_context, context=context),
-            attrs
-        )
-
-    def value_from_string(self, value):
-        return value
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        return self.value_from_string(element.text_content().strip())
-
-    def qweb_object(self):
-        return self.pool['website.qweb']
-
-class Integer(orm.AbstractModel):
-    _name = 'website.qweb.field.integer'
-    _inherit = ['website.qweb.field']
-
-    value_from_string = int
-
-class Float(orm.AbstractModel):
-    _name = 'website.qweb.field.float'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.float']
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        lang = self.user_lang(cr, uid, context=context)
-
-        value = element.text_content().strip()
-
-        return float(value.replace(lang.thousands_sep, '')
-                          .replace(lang.decimal_point, '.'))
-
-
-def parse_fuzzy(in_format, value):
-    day_first = in_format.find('%d') < in_format.find('%m')
-
-    if '%y' in in_format:
-        year_first = in_format.find('%y') < in_format.find('%d')
-    else:
-        year_first = in_format.find('%Y') < in_format.find('%d')
-
-    return parser.parse(value, dayfirst=day_first, yearfirst=year_first)
-
-class Date(orm.AbstractModel):
-    _name = 'website.qweb.field.date'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.date']
-
-    def attributes(self, cr, uid, field_name, record, options,
-                   source_element, g_att, t_att, qweb_context,
-                   context=None):
-        attrs = super(Date, self).attributes(
-            cr, uid, field_name, record, options, source_element, g_att, t_att,
-            qweb_context, context=None)
-        return itertools.chain(attrs, [('data-oe-original', record[field_name])])
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        value = element.text_content().strip()
-        if not value: return False
-
-        datetime.datetime.strptime(value, DEFAULT_SERVER_DATE_FORMAT)
-        return value
-
-class DateTime(orm.AbstractModel):
-    _name = 'website.qweb.field.datetime'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.datetime']
-
-    def attributes(self, cr, uid, field_name, record, options,
-                   source_element, g_att, t_att, qweb_context,
-                   context=None):
-        value = record[field_name]
-        if isinstance(value, basestring):
-            value = datetime.datetime.strptime(
-                value, DEFAULT_SERVER_DATETIME_FORMAT)
-        if value:
-            # convert from UTC (server timezone) to user timezone
-            value = fields.datetime.context_timestamp(
-                cr, uid, timestamp=value, context=context)
-            value = value.strftime(DEFAULT_SERVER_DATETIME_FORMAT)
-
-        attrs = super(DateTime, self).attributes(
-            cr, uid, field_name, record, options, source_element, g_att, t_att,
-            qweb_context, context=None)
-        return itertools.chain(attrs, [
-            ('data-oe-original', value)
-        ])
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        if context is None: context = {}
-        value = element.text_content().strip()
-        if not value: return False
-
-        # parse from string to datetime
-        dt = datetime.datetime.strptime(value, DEFAULT_SERVER_DATETIME_FORMAT)
-
-        # convert back from user's timezone to UTC
-        tz_name = context.get('tz') \
-            or self.pool['res.users'].read(cr, openerp.SUPERUSER_ID, uid, ['tz'], context=context)['tz']
-        if tz_name:
-            try:
-                user_tz = pytz.timezone(tz_name)
-                utc = pytz.utc
-
-                dt = user_tz.localize(dt).astimezone(utc)
-            except Exception:
-                logger.warn(
-                    "Failed to convert the value for a field of the model"
-                    " %s back from the user's timezone (%s) to UTC",
-                    model, tz_name,
-                    exc_info=True)
-
-        # format back to string
-        return dt.strftime(DEFAULT_SERVER_DATETIME_FORMAT)
-
-class Text(orm.AbstractModel):
-    _name = 'website.qweb.field.text'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.text']
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        return html_to_text(element)
-
-class Selection(orm.AbstractModel):
-    _name = 'website.qweb.field.selection'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.selection']
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        record = self.browse(cr, uid, [], context=context)
-        value = element.text_content().strip()
-        selection = field.get_description(record.env)['selection']
-        for k, v in selection:
-            if isinstance(v, str):
-                v = ustr(v)
-            if value == v:
-                return k
-
-        raise ValueError(u"No value found for label %s in selection %s" % (
-                         value, selection))
-
-class ManyToOne(orm.AbstractModel):
-    _name = 'website.qweb.field.many2one'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.many2one']
-
-    def attributes(self, cr, uid, field_name, record, options,
-                   source_element, g_att, t_att, qweb_context,
-                   context=None):
-        attrs = super(ManyToOne, self).attributes(
-            cr, uid, field_name, record, options, source_element, g_att, t_att,
-            qweb_context, context=context)
-        many2one = getattr(record, field_name)
-        if many2one:
-            return itertools.chain(attrs, [
-                    ('data-oe-many2one-id', many2one.id),
-                    ('data-oe-many2one-model', many2one._name)])
-        else:
-            return attrs
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        Model = self.pool[element.get('data-oe-model')]
-        M2O = self.pool[field.comodel_name]
-        field_name = element.get('data-oe-field')
-        id = int(element.get('data-oe-id'))
-        many2one_id = int(element.get('data-oe-many2one-id'))
-
-        if many2one_id and M2O.exists(cr, uid, [many2one_id]):
-            # save the new id of the many2one
-            Model.write(cr, uid, [id], {
-                field_name: many2one_id
-            }, context=context)
-
-        # not necessary, but might as well be explicit about it
-        return None
-
-class HTML(orm.AbstractModel):
-    _name = 'website.qweb.field.html'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.html']
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        content = []
-        if element.text: content.append(element.text)
-        content.extend(html.tostring(child)
-                       for child in element.iterchildren(tag=etree.Element))
-        return '\n'.join(content)
-
-class Image(orm.AbstractModel):
-    """
-    Widget options:
-
-    ``class``
-        set as attribute on the generated <img> tag
-    """
-    _name = 'website.qweb.field.image'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.image']
-
-    def to_html(self, cr, uid, field_name, record, options,
-                source_element, t_att, g_att, qweb_context, context=None):
-        assert source_element.tag != 'img',\
-            "Oddly enough, the root tag of an image field can not be img. " \
-            "That is because the image goes into the tag, or it gets the " \
-            "hose again."
-
-        return super(Image, self).to_html(
-            cr, uid, field_name, record, options,
-            source_element, t_att, g_att, qweb_context, context=context)
-
-    def record_to_html(self, cr, uid, field_name, record, options=None, context=None):
-        if options is None: options = {}
-        aclasses = ['img', 'img-responsive'] + options.get('class', '').split()
-        classes = ' '.join(itertools.imap(escape, aclasses))
-
-        max_size = None
-        max_width, max_height = options.get('max_width', 0), options.get('max_height', 0)
-        if max_width or max_height:
-            max_size = '%sx%s' % (max_width, max_height)
-
-        src = self.pool['website'].image_url(cr, uid, record, field_name, max_size)
-        if options.get('resize'):
-            src = "%s/%s" % (src, options.get('resize'))
-
-        img = '<img class="%s" src="%s" style="%s"/>' % (classes, src, options.get('style', ''))
-        return ir_qweb.HTMLSafe(img)
-
-    local_url_re = re.compile(r'^/(?P<module>[^]]+)/static/(?P<rest>.+)$')
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        url = element.find('img').get('src')
-
-        url_object = urlparse.urlsplit(url)
-        if url_object.path.startswith('/website/image'):
-            # url might be /website/image/<model>/<id>[_<checksum>]/<field>[/<width>x<height>]
-            fragments = url_object.path.split('/')
-            query = dict(urlparse.parse_qsl(url_object.query))
-            model = query.get('model', fragments[3])
-            oid = query.get('id', fragments[4].split('_')[0])
-            field = query.get('field', fragments[5])
-            item = self.pool[model].browse(cr, uid, int(oid), context=context)
-            return item[field]
-
-        if self.local_url_re.match(url_object.path):
-            return self.load_local_url(url)
-
-        return self.load_remote_url(url)
-
-    def load_local_url(self, url):
-        match = self.local_url_re.match(urlparse.urlsplit(url).path)
-
-        rest = match.group('rest')
-        for sep in os.sep, os.altsep:
-            if sep and sep != '/':
-                rest.replace(sep, '/')
-
-        path = openerp.modules.get_module_resource(
-            match.group('module'), 'static', *(rest.split('/')))
-
-        if not path:
-            return None
-
-        try:
-            with open(path, 'rb') as f:
-                # force complete image load to ensure it's valid image data
-                image = I.open(f)
-                image.load()
-                f.seek(0)
-                return f.read().encode('base64')
-        except Exception:
-            logger.exception("Failed to load local image %r", url)
-            return None
-
-    def load_remote_url(self, url):
-        try:
-            # should probably remove remote URLs entirely:
-            # * in fields, downloading them without blowing up the server is a
-            #   challenge
-            # * in views, may trigger mixed content warnings if HTTPS CMS
-            #   linking to HTTP images
-            # implement drag & drop image upload to mitigate?
-
-            req = urllib2.urlopen(url, timeout=REMOTE_CONNECTION_TIMEOUT)
-            # PIL needs a seekable file-like image, urllib result is not seekable
-            image = I.open(cStringIO.StringIO(req.read()))
-            # force a complete load of the image data to validate it
-            image.load()
-        except Exception:
-            logger.exception("Failed to load remote image %r", url)
-            return None
-
-        # don't use original data in case weird stuff was smuggled in, with
-        # luck PIL will remove some of it?
-        out = cStringIO.StringIO()
-        image.save(out, image.format)
-        return out.getvalue().encode('base64')
-
-class Monetary(orm.AbstractModel):
-    _name = 'website.qweb.field.monetary'
-    _inherit = ['website.qweb.field', 'ir.qweb.field.monetary']
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        lang = self.user_lang(cr, uid, context=context)
-
-        value = element.find('span').text.strip()
-
-        return float(value.replace(lang.thousands_sep, '')
-                          .replace(lang.decimal_point, '.'))
-
-class Duration(orm.AbstractModel):
-    _name = 'website.qweb.field.duration'
-    _inherit = [
-        'ir.qweb.field.duration',
-        'website.qweb.field.float',
-    ]
-
-    def attributes(self, cr, uid, field_name, record, options,
-                   source_element, g_att, t_att, qweb_context,
-                   context=None):
-        attrs = super(Duration, self).attributes(
-            cr, uid, field_name, record, options, source_element, g_att, t_att,
-            qweb_context, context=None)
-        return itertools.chain(attrs, [('data-oe-original', record[field_name])])
-
-    def from_html(self, cr, uid, model, field, element, context=None):
-        value = element.text_content().strip()
-
-        # non-localized value
-        return float(value)
-
-
-class RelativeDatetime(orm.AbstractModel):
-    _name = 'website.qweb.field.relative'
-    _inherit = [
-        'ir.qweb.field.relative',
-        'website.qweb.field.datetime',
-    ]
-
-    # get formatting from ir.qweb.field.relative but edition/save from datetime
-
-
-class Contact(orm.AbstractModel):
-    _name = 'website.qweb.field.contact'
-    _inherit = ['ir.qweb.field.contact', 'website.qweb.field.many2one']
-
-    def attributes(self, cr, uid, field_name, record, options,
-                   source_element, g_att, t_att, qweb_context,
-                   context=None):
-        attrs = super(Contact, self).attributes(
-            cr, uid, field_name, record, options, source_element, g_att, t_att,
-            qweb_context, context=context)
-        many2one = getattr(record, field_name)
-        if many2one:
-            return itertools.chain(attrs, [('data-oe-contact-options', simplejson.dumps(options))])
-        else:
-            return attrs
-
-    # helper to call the rendering of contact field in website
-    def get_record_to_html(self, cr, uid, ids, options=None, context=None):
-        node = self.record_to_html(cr, uid,
-            'record', {'record': self.pool['res.partner'].browse(cr, uid, ids[0], context=context)},
-            options=options, context=context)
-        return node and node.__html__()
-
-class QwebView(orm.AbstractModel):
-    _name = 'website.qweb.field.qweb'
-    _inherit = ['ir.qweb.field.qweb']
-
-
-def html_to_text(element):
-    """ Converts HTML content with HTML-specified line breaks (br, p, div, ...)
-    in roughly equivalent textual content.
-
-    Used to replace and fixup the roundtripping of text and m2o: when using
-    libxml 2.8.0 (but not 2.9.1) and parsing HTML with lxml.html.fromstring
-    whitespace text nodes (text nodes composed *solely* of whitespace) are
-    stripped out with no recourse, and fundamentally relying on newlines
-    being in the text (e.g. inserted during user edition) is probably poor form
-    anyway.
-
-    -> this utility function collapses whitespace sequences and replaces
-       nodes by roughly corresponding linebreaks
-       * p are pre-and post-fixed by 2 newlines
-       * br are replaced by a single newline
-       * block-level elements not already mentioned are pre- and post-fixed by
-         a single newline
-
-    ought be somewhat similar (but much less high-tech) to aaronsw's html2text.
-    the latter produces full-blown markdown, our text -> html converter only
-    replaces newlines by <br> elements at this point so we're reverting that,
-    and a few more newline-ish elements in case the user tried to add
-    newlines/paragraphs into the text field
-
-    :param element: lxml.html content
-    :returns: corresponding pure-text output
-    """
-
-    # output is a list of str | int. Integers are padding requests (in minimum
-    # number of newlines). When multiple padding requests, fold them into the
-    # biggest one
-    output = []
-    _wrap(element, output)
-
-    # remove any leading or tailing whitespace, replace sequences of
-    # (whitespace)\n(whitespace) by a single newline, where (whitespace) is a
-    # non-newline whitespace in this case
-    return re.sub(
-        r'[ \t\r\f]*\n[ \t\r\f]*',
-        '\n',
-        ''.join(_realize_padding(output)).strip())
-
-_PADDED_BLOCK = set('p h1 h2 h3 h4 h5 h6'.split())
-# https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements minus p
-_MISC_BLOCK = set((
-    'address article aside audio blockquote canvas dd dl div figcaption figure'
-    ' footer form header hgroup hr ol output pre section tfoot ul video'
-).split())
-
-def _collapse_whitespace(text):
-    """ Collapses sequences of whitespace characters in ``text`` to a single
-    space
-    """
-    return re.sub('\s+', ' ', text)
-def _realize_padding(it):
-    """ Fold and convert padding requests: integers in the output sequence are
-    requests for at least n newlines of padding. Runs thereof can be collapsed
-    into the largest requests and converted to newlines.
-    """
-    padding = None
-    for item in it:
-        if isinstance(item, int):
-            padding = max(padding, item)
-            continue
-
-        if padding:
-            yield '\n' * padding
-            padding = None
-
-        yield item
-    # leftover padding irrelevant as the output will be stripped
-
-def _wrap(element, output, wrapper=u''):
-    """ Recursively extracts text from ``element`` (via _element_to_text), and
-    wraps it all in ``wrapper``. Extracted text is added to ``output``
-
-    :type wrapper: basestring | int
-    """
-    output.append(wrapper)
-    if element.text:
-        output.append(_collapse_whitespace(element.text))
-    for child in element:
-        _element_to_text(child, output)
-    output.append(wrapper)
-
-def _element_to_text(e, output):
-    if e.tag == 'br':
-        output.append(u'\n')
-    elif e.tag in _PADDED_BLOCK:
-        _wrap(e, output, 2)
-    elif e.tag in _MISC_BLOCK:
-        _wrap(e, output, 1)
-    else:
-        # inline
-        _wrap(e, output)
-
-    if e.tail:
-        output.append(_collapse_whitespace(e.tail))
diff --git a/addons/website/models/ir_ui_view.py b/addons/website/models/ir_ui_view.py
index c63f67a191c..0fd2933f308 100644
--- a/addons/website/models/ir_ui_view.py
+++ b/addons/website/models/ir_ui_view.py
@@ -104,54 +104,6 @@ class view(osv.osv):
                     result.append(r)
         return result
 
-    def extract_embedded_fields(self, cr, uid, arch, context=None):
-        return arch.xpath('//*[@data-oe-model != "ir.ui.view"]')
-
-    def save_embedded_field(self, cr, uid, el, context=None):
-        Model = self.pool[el.get('data-oe-model')]
-        field = el.get('data-oe-field')
-
-        converter = self.pool['website.qweb'].get_converter_for(el.get('data-oe-type'))
-        value = converter.from_html(cr, uid, Model, Model._fields[field], el)
-
-        if value is not None:
-            # TODO: batch writes?
-            Model.write(cr, uid, [int(el.get('data-oe-id'))], {
-                field: value
-            }, context=context)
-
-    def to_field_ref(self, cr, uid, el, context=None):
-        # filter out meta-information inserted in the document
-        attributes = dict((k, v) for k, v in el.items()
-                          if not k.startswith('data-oe-'))
-        attributes['t-field'] = el.get('data-oe-expression')
-
-        out = html.html_parser.makeelement(el.tag, attrib=attributes)
-        out.tail = el.tail
-        return out
-
-    def replace_arch_section(self, cr, uid, view_id, section_xpath, replacement, context=None):
-        # the root of the arch section shouldn't actually be replaced as it's
-        # not really editable itself, only the content truly is editable.
-
-        [view] = self.browse(cr, uid, [view_id], context=context)
-        arch = etree.fromstring(view.arch.encode('utf-8'))
-        # => get the replacement root
-        if not section_xpath:
-            root = arch
-        else:
-            # ensure there's only one match
-            [root] = arch.xpath(section_xpath)
-
-        root.text = replacement.text
-        root.tail = replacement.tail
-        # replace all children
-        del root[:]
-        for child in replacement:
-            root.append(copy.deepcopy(child))
-
-        return arch
-
     @tools.ormcache_context('uid', 'xml_id', keys=('website_id',))
     def get_view_id(self, cr, uid, xml_id, context=None):
         if context and 'website_id' in context and not isinstance(xml_id, (int, long)):
@@ -163,29 +115,10 @@ class view(osv.osv):
             view_id = super(view, self).get_view_id(cr, uid, xml_id, context=context)
         return view_id
 
-    def _prepare_qcontext(self, cr, uid, context=None):
-        if not context:
-            context = {}
-
-        company = self.pool['res.company'].browse(cr, SUPERUSER_ID, request.website.company_id.id, context=context)
-
-        qcontext = dict(
-            context.copy(),
-            website=request.website,
-            url_for=website.url_for,
-            slug=website.slug,
-            res_company=company,
-            user_id=self.pool.get("res.users").browse(cr, uid, uid),
-            translatable=context.get('lang') != request.website.default_lang_code,
-            editable=request.website.is_publisher(),
-            menu_data=self.pool['ir.ui.menu'].load_menus_root(cr, uid, context=context) if request.website.is_user() else None,
-        )
-        return qcontext
-
     @api.cr_uid_ids_context
     def render(self, cr, uid, id_or_xml_id, values=None, engine='ir.qweb', context=None):
         if request and getattr(request, 'website_enabled', False):
-            engine = 'website.qweb'
+            engine = 'ir.qweb'
 
             if isinstance(id_or_xml_id, list):
                 id_or_xml_id = id_or_xml_id[0]
@@ -197,10 +130,11 @@ class view(osv.osv):
                 qcontext.update(values)
 
             # in edit mode ir.ui.view will tag nodes
-            if qcontext.get('editable'):
-                context = dict(context, inherit_branding=True)
-            elif request.registry['res.users'].has_group(cr, uid, 'base.group_website_publisher'):
-                context = dict(context, inherit_branding_auto=True)
+            if not qcontext.get('translatable'):
+                if qcontext.get('editable'):
+                    context = dict(context, inherit_branding=True)
+                elif request.registry['res.users'].has_group(cr, uid, 'base.group_website_publisher'):
+                    context = dict(context, inherit_branding_auto=True)
 
             view_obj = request.website.get_template(id_or_xml_id)
             if 'main_object' not in qcontext:
@@ -210,49 +144,30 @@ class view(osv.osv):
 
         return super(view, self).render(cr, uid, id_or_xml_id, values=values, engine=engine, context=context)
 
-    def _pretty_arch(self, arch):
-        # remove_blank_string does not seem to work on HTMLParser, and
-        # pretty-printing with lxml more or less requires stripping
-        # whitespace: http://lxml.de/FAQ.html#why-doesn-t-the-pretty-print-option-reformat-my-xml-output
-        # so serialize to XML, parse as XML (remove whitespace) then serialize
-        # as XML (pretty print)
-        arch_no_whitespace = etree.fromstring(
-            etree.tostring(arch, encoding='utf-8'),
-            parser=etree.XMLParser(encoding='utf-8', remove_blank_text=True))
-        return etree.tostring(
-            arch_no_whitespace, encoding='unicode', pretty_print=True)
+    def _prepare_qcontext(self, cr, uid, context=None):
+        if not context:
+            context = {}
 
-    def save(self, cr, uid, res_id, value, xpath=None, context=None):
-        """ Update a view section. The view section may embed fields to write
+        company = self.pool['res.company'].browse(cr, SUPERUSER_ID, request.website.company_id.id, context=context)
 
-        :param str model:
-        :param int res_id:
-        :param str xpath: valid xpath to the tag to replace
-        """
-        res_id = int(res_id)
+        editable = request.website.is_publisher()
+        translatable = editable and context.get('lang') != request.website.default_lang_code
+        editable = not translatable and editable
 
-        arch_section = html.fromstring(
-            value, parser=html.HTMLParser(encoding='utf-8'))
-
-        if xpath is None:
-            # value is an embedded field on its own, not a view section
-            self.save_embedded_field(cr, uid, arch_section, context=context)
-            return
-
-        for el in self.extract_embedded_fields(cr, uid, arch_section, context=context):
-            self.save_embedded_field(cr, uid, el, context=context)
-
-            # transform embedded field back to t-field
-            el.getparent().replace(el, self.to_field_ref(cr, uid, el, context=context))
-
-        arch = self.replace_arch_section(cr, uid, res_id, xpath, arch_section, context=context)
-        self.write(cr, uid, res_id, {
-            'arch': self._pretty_arch(arch)
-        }, context=context)
-
-        view = self.browse(cr, SUPERUSER_ID, res_id, context=context)
-        if view.model_data_id:
-            view.model_data_id.write({'noupdate': True})
+        qcontext = dict(
+            context.copy(),
+            website=request.website,
+            url_for=website.url_for,
+            slug=website.slug,
+            res_company=company,
+            user_id=self.pool.get("res.users").browse(cr, uid, uid),
+            default_lang_code=request.website.default_lang_code,
+            languages=request.website.get_languages(),
+            translatable=translatable,
+            editable=editable,
+            menu_data=self.pool['ir.ui.menu'].load_menus_root(cr, uid, context=context) if request.website.is_user() else None,
+        )
+        return qcontext
 
     def customize_template_get(self, cr, uid, key, full=False, bundles=False, context=None):
         """ Get inherit view's informations of the template ``key``. By default, only
@@ -292,10 +207,3 @@ class view(osv.osv):
                     'active': v.active,
                 })
         return result
-
-    def get_view_translations(self, cr, uid, xml_id, lang, field=['id', 'res_id', 'value', 'state', 'gengo_translation'], context=None):
-        views = self.customize_template_get(cr, uid, xml_id, full=True, context=context)
-        views_ids = [view.get('id') for view in views if view.get('active')]
-        domain = [('type', '=', 'view'), ('res_id', 'in', views_ids), ('lang', '=', lang)]
-        return self.pool['ir.translation'].search_read(cr, uid, domain, field, context=context)
-
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 6fbb17f9d47..0a5c5de5551 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -1,18 +1,11 @@
 # -*- coding: utf-8 -*-
-import cStringIO
-import contextlib
-import datetime
-import hashlib
 import inspect
 import logging
 import math
 import unicodedata
-import os
 import re
-import time
 import urlparse
 
-from PIL import Image
 from sys import maxint
 
 import werkzeug
@@ -130,6 +123,7 @@ DEFAULT_CDN_FILTERS = [
     "^/[^/]+/static/",
     "^/web/(css|js)/",
     "^/website/image/",
+    "^/web_editor/image/",
 ]
 
 def unslug(s):
@@ -206,8 +200,8 @@ class website(osv.osv):
 
         # find a free xmlid
         inc = 0
-        dom = [('key', '=', page_xmlid), '|', ('website_id', '=', False), ('website_id', '=', context.get('website_id'))]
-        while view.search(cr, openerp.SUPERUSER_ID, dom, context=dict(context or {}, active_test=False)):
+        dom = [('website_id', '=', False), ('website_id', '=', context.get('website_id'))]
+        while view.search(cr, openerp.SUPERUSER_ID, [('key', '=', page_xmlid), '|'] + dom, context=dict(context or {}, active_test=False)):
             inc += 1
             page_xmlid = "%s.%s" % (template_module, page_name + (inc and "-%s" % inc or ""))
         page_name += (inc and "-%s" % inc or "")
@@ -630,123 +624,15 @@ class website(osv.osv):
         return html
 
     def _image_placeholder(self, response):
-        # file_open may return a StringIO. StringIO can be closed but are
-        # not context managers in Python 2 though that is fixed in 3
-        with contextlib.closing(openerp.tools.misc.file_open(
-                os.path.join('web', 'static', 'src', 'img', 'placeholder.png'),
-                mode='rb')) as f:
-            response.data = f.read()
-            return response.make_conditional(request.httprequest)
+        logger.warning("Deprecated _image_placeholder method, please use this method on ir.attachment")
+        return self.pool['ir.attachment']._image_placeholder(response)
 
     def _image(self, cr, uid, model, id, field, response, max_width=maxint, max_height=maxint, cache=None, context=None):
-        """ Fetches the requested field and ensures it does not go above
-        (max_width, max_height), resizing it if necessary.
-
-        Resizing is bypassed if the object provides a $field_big, which will
-        be interpreted as a pre-resized version of the base field.
-
-        If the record is not found or does not have the requested field,
-        returns a placeholder image via :meth:`~._image_placeholder`.
-
-        Sets and checks conditional response parameters:
-        * :mailheader:`ETag` is always set (and checked)
-        * :mailheader:`Last-Modified is set iif the record has a concurrency
-          field (``__last_update``)
-
-        The requested field is assumed to be base64-encoded image data in
-        all cases.
-        """
-        Model = self.pool[model]
-        id = int(id)
-
-        ids = Model.search(cr, uid,
-                           [('id', '=', id)], context=context)
-        if not ids and 'website_published' in Model._fields:
-            ids = Model.search(cr, openerp.SUPERUSER_ID,
-                               [('id', '=', id), ('website_published', '=', True)], context=context)
-        if not ids:
-            return self._image_placeholder(response)
-
-        concurrency = '__last_update'
-        [record] = Model.read(cr, openerp.SUPERUSER_ID, [id],
-                              [concurrency, field],
-                              context=context)
-
-        if concurrency in record:
-            server_format = openerp.tools.misc.DEFAULT_SERVER_DATETIME_FORMAT
-            try:
-                response.last_modified = datetime.datetime.strptime(
-                    record[concurrency], server_format + '.%f')
-            except ValueError:
-                # just in case we have a timestamp without microseconds
-                response.last_modified = datetime.datetime.strptime(
-                    record[concurrency], server_format)
-
-        # Field does not exist on model or field set to False
-        if not record.get(field):
-            # FIXME: maybe a field which does not exist should be a 404?
-            return self._image_placeholder(response)
-
-        response.set_etag(hashlib.sha1(record[field]).hexdigest())
-        response.make_conditional(request.httprequest)
-
-        if cache:
-            response.cache_control.max_age = cache
-            response.expires = int(time.time() + cache)
-
-        # conditional request match
-        if response.status_code == 304:
-            return response
-
-        if model == 'ir.attachment' and field == 'url' and field in record:
-            path = record[field].strip('/')
-
-            # Check that we serve a file from within the module
-            if os.path.normpath(path).startswith('..'):
-                return self._image_placeholder(response)
-
-            # Check that the file actually exists
-            path = path.split('/')
-            resource = openerp.modules.get_module_resource(*path)
-            if not resource:
-                return self._image_placeholder(response)
-
-            data = open(resource, 'rb').read()
-        else:
-            data = record[field].decode('base64')
-        image = Image.open(cStringIO.StringIO(data))
-        response.mimetype = Image.MIME[image.format]
-
-        filename = '%s_%s.%s' % (model.replace('.', '_'), id, str(image.format).lower())
-        response.headers['Content-Disposition'] = 'inline; filename="%s"' % filename
-
-        if (not max_width) and (not max_height):
-            response.data = data
-            return response
-
-        w, h = image.size
-        max_w = int(max_width) if max_width else maxint
-        max_h = int(max_height) if max_height else maxint
-
-        if w < max_w and h < max_h:
-            response.data = data
-        else:
-            size = (max_w, max_h)
-            img = image_resize_and_sharpen(image, size, preserve_aspect_ratio=True)
-            image_save_for_web(img, response.stream, format=image.format)
-            # invalidate content-length computed by make_conditional as
-            # writing to response.stream does not do it (as of werkzeug 0.9.3)
-            del response.headers['Content-Length']
-
-        return response
+        logger.warning("Deprecated _image method, please use this method on ir.attachment")
+        return self.pool['ir.attachment']._image(cr, uid, model, id, field, response, max_width=max_width, max_height=max_height, cache=cache, context=context)
 
     def image_url(self, cr, uid, record, field, size=None, context=None):
-        """Returns a local url that points to the image field of a given browse record."""
-        model = record._name
-        sudo_record = record.sudo()
-        id = '%s_%s' % (record.id, hashlib.sha1(sudo_record.write_date or sudo_record.create_date or '').hexdigest()[0:7])
-        size = '' if size is None else '/%s' % size
-        return '/website/image/%s/%s/%s%s' % (model, id, field, size)
+        return self.pool['ir.attachment'].image_url(cr, uid, record, field, size=size, context=context)
 
 class website_menu(osv.osv):
     _name = "website.menu"
@@ -819,64 +705,22 @@ class website_menu(osv.osv):
 
 
 class ir_attachment(osv.osv):
-
     _inherit = "ir.attachment"
 
-    def _website_url_get(self, cr, uid, ids, name, arg, context=None):
-        result = {}
-        for attach in self.browse(cr, uid, ids, context=context):
-            if attach.url:
-                result[attach.id] = attach.url
-            else:
-                result[attach.id] = self.pool['website'].image_url(cr, uid, attach, 'datas')
-        return result
-
-    def _datas_big(self, cr, uid, ids, name, arg, context=None):
-        result = dict.fromkeys(ids, False)
-        if context and context.get('bin_size'):
-            return result
-
-        for record in self.browse(cr, uid, ids, context=context):
-            if record.res_model != 'ir.ui.view' or not record.datas: continue
-            try:
-                result[record.id] = openerp.tools.image_resize_image_big(record.datas)
-            except IOError: # apparently the error PIL.Image.open raises
-                pass
-
-        return result
-
     _columns = {
-        'website_url': fields.function(_website_url_get, string="Attachment URL", type='char'),
-        'datas_big': fields.function (_datas_big, type='binary', store=True,
-                                      string="Resized file content"),
+        'website_url': fields.related("local_url", string="Attachment URL", type='char', deprecated=True), # related for backward compatibility with saas-6
     }
 
-    def try_remove(self, cr, uid, ids, context=None):
-        """ Removes a web-based image attachment if it is used by no view
-        (template)
+    def _image(self, cr, uid, model, id_or_ids, field, response, max_width=maxint, max_height=maxint, cache=None, context=None):
+        Model = self.pool[model]
+        ids = isinstance(id_or_ids, (list, tuple)) and id_or_ids or [int(id_or_ids)]
+        ids = Model.search(cr, uid, [('id', 'in', ids)], context=context)
 
-        Returns a dict mapping attachments which would not be removed (if any)
-        mapped to the views preventing their removal
-        """
-        Views = self.pool['ir.ui.view']
-        attachments_to_remove = []
-        # views blocking removal of the attachment
-        removal_blocked_by = {}
+        if not ids and 'website_published' in Model._fields:
+            ids = Model.search(cr, openerp.SUPERUSER_ID, [('id', 'in', ids), ('website_published', '=', True)], context=context)
 
-        for attachment in self.browse(cr, uid, ids, context=context):
-            # in-document URLs are html-escaped, a straight search will not
-            # find them
-            url = escape(attachment.website_url)
-            ids = Views.search(cr, uid, ["|", ('arch_db', 'like', '"%s"' % url), ('arch_db', 'like', "'%s'" % url)], context=context)
-
-            if ids:
-                removal_blocked_by[attachment.id] = Views.read(
-                    cr, uid, ids, ['name'], context=context)
-            else:
-                attachments_to_remove.append(attachment.id)
-        if attachments_to_remove:
-            self.unlink(cr, uid, attachments_to_remove, context=context)
-        return removal_blocked_by
+        return super(ir_attachment, self)._image(cr, openerp.SUPERUSER_ID, model, id_or_ids, field, response,
+            max_width=max_width, max_height=max_height, cache=cache, context=context)
 
 class res_partner(osv.osv):
     _inherit = "res.partner"
diff --git a/addons/website/security/ir.model.access.csv b/addons/website/security/ir.model.access.csv
index 8682a349f70..4c91ee15c85 100644
--- a/addons/website/security/ir.model.access.csv
+++ b/addons/website/security/ir.model.access.csv
@@ -4,8 +4,6 @@ access_website,website,website.model_website,base.group_website_designer,1,1,1,1
 access_website_menu,access_website_menu,model_website_menu,,1,0,0,0
 access_website_menu_designer,Web Menu Manager,model_website_menu,base.group_website_designer,1,1,1,1
 access_website,web menu manager,website.model_website,base.group_website_designer,1,1,1,1
-access_website_converter_test,access_website_converter_test,model_website_converter_test,,1,1,1,1
-access_website_converter_test_sub,access_website_converter_test_sub,model_website_converter_test_sub,,1,1,1,1
 access_website_ir_ui_view,access_website_ir_ui_view,model_ir_ui_view,base.group_website_designer,1,1,1,1
 access_seo_public,access_seo_public,model_website_seo_metadata,,1,0,0,0
 access_seo_public,access_seo_manager,model_website_seo_metadata,base.group_website_designer,1,1,1,1
diff --git a/addons/website/static/lib/summernote/src/js/editing/History.js b/addons/website/static/lib/summernote/src/js/editing/History.js
deleted file mode 100644
index ef8dd6016f1..00000000000
--- a/addons/website/static/lib/summernote/src/js/editing/History.js
+++ /dev/null
@@ -1,60 +0,0 @@
-define(['summernote/core/range'], function (range) {
-  /**
-   * History
-   * @class
-   */
-  var History = function ($editable) {
-    var stack = [], stackOffset = -1;
-    var editable = $editable[0];
-
-    var makeSnapshot = function () {
-      var rng = range.create();
-      var emptyBookmark = {s: {path: [0], offset: 0}, e: {path: [0], offset: 0}};
-
-      return {
-        contents: $editable.html(),
-        bookmark: (rng ? rng.bookmark(editable) : emptyBookmark)
-      };
-    };
-
-    var applySnapshot = function (snapshot) {
-      if (snapshot.contents !== null) {
-        $editable.html(snapshot.contents);
-      }
-      if (snapshot.bookmark !== null) {
-        range.createFromBookmark(editable, snapshot.bookmark).select();
-      }
-    };
-
-    this.undo = function () {
-      if (0 < stackOffset) {
-        stackOffset--;
-        applySnapshot(stack[stackOffset]);
-      }
-    };
-
-    this.redo = function () {
-      if (stack.length - 1 > stackOffset) {
-        stackOffset++;
-        applySnapshot(stack[stackOffset]);
-      }
-    };
-
-    this.recordUndo = function () {
-      stackOffset++;
-
-      // Wash out stack after stackOffset
-      if (stack.length > stackOffset) {
-        stack = stack.slice(0, stackOffset);
-      }
-
-      // Create new snapshot and push it to the end
-      stack.push(makeSnapshot());
-    };
-
-    // Create first undo stack
-    this.recordUndo();
-  };
-
-  return History;
-});
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index b49c6a14afe..9c577e69e5e 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -85,11 +85,13 @@
 .editor_enable [data-oe-readonly]:hover {
   cursor: default;
 }
+
 /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
 .o_editable[placeholder]:empty:not(:focus):before {
-    content: attr(placeholder);
-    opacity: 0.3;
+  content: attr(placeholder);
+  opacity: 0.3;
 }
+
 /* Prevent the text contents of draggable elements from being selectable. */
 [draggable] {
   -moz-user-select: none;
@@ -271,41 +273,6 @@ table.editorbar-panel td.selected {
   line-height: 2em;
 }
 
-/* ---- TRANSLATIONS ---- {{{ */
-.oe_translate_or {
-  color: white;
-  padding: 0 0 0 1em;
-}
-
-.oe_translate_examples li {
-  margin: 10px;
-  padding: 4px;
-}
-
-.oe_translatable_text {
-  outline: 1px solid black;
-}
-
-.oe_translatable_field {
-  outline: 1px dashed black;
-}
-
-.oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty {
-  outline-color: red;
-}
-
-.oe_translatable_text.oe_dirty:empty {
-  padding: 0 10px;
-}
-
-.oe_translatable_todo {
-  background: #ffffb6;
-}
-.oe_translatable_todo:hover {
-  background: inherit;
-  cursor: text;
-}
-
 /* ---- MENU ---- {{{ */
 div.oe_menu_buttons {
   top: -8px;
@@ -636,7 +603,7 @@ ul.oe_menu_editor .disclose {
 }
 .oe_ace_view_editor.oe_ace_closed {
   z-index: -1000;
-  display: none
+  display: none;
 }
 
 .oe_include_bundles {
@@ -651,7 +618,6 @@ ul.oe_menu_editor .disclose {
 
 #theme_customize_modal {
   overflow: visible;
-  overflow-y: auto;
   z-index: 1020;
   background: transparent;
   display: block;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 23762bb5fe4..8a7f65912f4 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -229,30 +229,6 @@ table.editorbar-panel
 
 // }}}
 
-/* ---- TRANSLATIONS ---- {{{ */
-
-.oe_translate_or
-    color: white
-    padding: 0 0 0 1em
-.oe_translate_examples li
-    margin: 10px
-    padding: 4px
-.oe_translatable_text
-    outline: 1px solid black
-.oe_translatable_field
-    outline: 1px dashed black
-.oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty
-    outline-color: red
-.oe_translatable_text.oe_dirty:empty
-    padding: 0 10px
-.oe_translatable_todo
-    background: rgb(255, 255, 182)
-    &:hover
-        background: inherit
-        cursor: text
-
-// }}}
-
 /* ---- MENU ---- {{{ */
 
 div.oe_menu_buttons
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 4d3f2c6c5ff..eb0b4d3e69b 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -1,725 +1,3 @@
-/* ---- SNIPPET EDITOR ---- {{{ */
-#oe_snippets #o_left_bar, #oe_snippets #o_arrow {
-  position: fixed;
-  top: 34px;
-  left: 0px;
-  bottom: 0;
-  background: #282828;
-  -moz-box-shadow: 0px 10px 10px -10px black inset;
-  -webkit-box-shadow: 0px 10px 10px -10px black inset;
-  box-shadow: 0px 10px 10px -10px black inset;
-}
-#oe_snippets #o_arrow {
-  z-index: 1009;
-  width: 24px;
-  opacity: 0.75;
-}
-#oe_snippets #o_arrow > * {
-  position: absolute;
-  color: white;
-}
-#oe_snippets #o_arrow div {
-  -moz-transform: translateX(-36%) rotate(-90deg);
-  -ms-transform: translateX(-36%) rotate(-90deg);
-  -webkit-transform: translateX(-36%) rotate(-90deg);
-  transform: translateX(-36%) rotate(-90deg);
-  top: 50%;
-  white-space: nowrap;
-}
-#oe_snippets #o_arrow .fa {
-  width: 100%;
-  left: 40%;
-}
-#oe_snippets #o_left_bar {
-  left: -228px;
-  z-index: 1010;
-  width: 208px;
-  -moz-transition: all 500ms ease;
-  -o-transition: all 500ms ease;
-  -webkit-transition: all 500ms ease;
-  transition: all 500ms ease;
-}
-#oe_snippets #o_left_bar ul {
-  text-align: center;
-  margin: 0;
-  padding: 6px 0;
-  list-style-type: none;
-}
-#oe_snippets #o_left_bar ul li {
-  display: inline-block;
-  padding: 0 3px;
-}
-#oe_snippets #o_left_bar ul li a {
-  color: #aaa;
-}
-#oe_snippets #o_left_bar ul li .fa-stack {
-  overflow: hidden;
-}
-#oe_snippets #o_left_bar ul li.active a.fa, #oe_snippets #o_left_bar ul li.active .fa-stack-1x {
-  color: #428bca;
-}
-#oe_snippets.o_open #o_left_bar {
-  left: 0;
-}
-#oe_snippets .o_panel {
-  margin: 0;
-  border: 0;
-  width: 208px;
-}
-#oe_snippets .o_panel_header {
-  background: #dff0d8;
-  padding: 1px 8px;
-  color: #414141;
-  text-align: center;
-}
-#oe_snippets .o_panel_header .fa-stack {
-  overflow: hidden;
-  font-size: 1em;
-}
-#oe_snippets .o_panel_body {
-  white-space: normal;
-  background: black;
-  padding: 7px 3px;
-}
-#oe_snippets .o_panel_body > div {
-  background: black;
-}
-#oe_snippets .o_panel_body > div label {
-  width: 44px;
-  color: #fff;
-  padding-left: 10px;
-}
-#oe_snippets .o_panel_body > div label div {
-  width: 100px;
-  text-align: center;
-  -moz-transform: translate(-39px, 44px);
-  -webkit-transform: translate(-39px, 44px);
-  transform: translate(-39px, 44px);
-  -moz-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  -webkit-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-}
-
-.oe_snippet {
-  display: inline-block;
-  vertical-align: top;
-  width: 93px;
-  margin-left: 3px;
-  margin-right: 3px;
-  margin-top: 1px;
-  position: relative;
-  overflow: hidden;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: move;
-}
-.oe_snippet .oe_snippet_thumbnail {
-  text-align: center;
-  height: 100%;
-  background: transparent;
-  color: white;
-  position: relative;
-}
-.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
-  -moz-transform: scale(0.95, 0.95);
-  -ms-transform: scale(0.95, 0.95);
-  -webkit-transform: scale(0.95, 0.95);
-  transform: scale(0.95, 0.95);
-}
-.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
-  font-size: 12px;
-  display: block;
-  text-shadow: 0 0 2px black;
-}
-.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
-  height: 74px;
-  width: 92px;
-  background-size: cover;
-  -moz-transform: scale(1, 1);
-  -ms-transform: scale(1, 1);
-  -webkit-transform: scale(1, 1);
-  transform: scale(1, 1);
-}
-.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
-  line-height: 18px;
-}
-.oe_snippet > :not(.oe_snippet_thumbnail) {
-  display: none !important;
-}
-.oe_snippet.disable .oe_snippet_thumbnail {
-  background-color: rgba(255, 0, 0, 0.75);
-}
-.oe_snippet.disable .oe_snippet_thumbnail_img {
-  opacity: 0.8;
-}
-
-#oe_snippets .oe_snippet_thumbnail {
-  background: #747474, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-}
-
-/* ---- SNIPPETS DROP ZONES ---- {{{ */
-.oe_drop_zone.oe_insert {
-  display: block;
-  height: 48px;
-  margin: 0px;
-  margin-top: -4px;
-  margin-bottom: -44px;
-  -moz-transition: margin 250ms linear;
-  -o-transition: margin 250ms linear;
-  -webkit-transition: margin 250ms linear;
-  transition: margin 250ms linear;
-  width: 100%;
-  position: absolute;
-  z-index: 1000;
-}
-.oe_drop_zone.oe_insert: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 {
-  border-top: dashed 2px rgba(116, 255, 161, 0.72);
-}
-.oe_drop_zone.oe_insert.oe_vertical {
-  width: 48px;
-  float: left;
-  position: relative;
-  margin: 0px -24px !important;
-}
-.oe_drop_zone.oe_insert.oe_vertical_text {
-  width: 48px;
-  float: none;
-  display: inline-block;
-  position: relative;
-  margin: 0px -24px !important;
-}
-.oe_drop_zone.oe_insert.oe_overlay {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  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);
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-}
-.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
-  background: rgba(0, 255, 133, 0.3);
-  z-index: 1001;
-}
-
-.oe_drop_zone_style {
-  color: white;
-  height: 48px;
-  margin-bottom: 32px;
-  padding-top: 12px;
-}
-
-/* ---- SNIPPET MANIPULATOR ----  {{{ */
-.resize_editor_busy {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.oe_overlay {
-  display: none;
-  height: 0;
-  position: absolute;
-  background: transparent;
-  z-index: 1001;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: opacity 100ms linear;
-  -o-transition: opacity 100ms linear;
-  -webkit-transition: opacity 100ms linear;
-  transition: opacity 100ms linear;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.oe_overlay.oe_active {
-  display: block;
-}
-.oe_overlay .oe_handle {
-  display: block !important;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  margin: -2px;
-}
-.oe_overlay .oe_handle > div {
-  z-index: 1;
-  position: absolute;
-  border-style: dashed;
-  border-width: 1px;
-  border-color: #666666;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-}
-.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
-  z-index: 2;
-  position: relative;
-  top: 50%;
-  left: 50%;
-  display: block;
-  background: white;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  width: 18px;
-  height: 18px;
-  margin: -9px;
-  padding-left: 1px;
-  font-size: 14px;
-  line-height: 14px;
-  font-family: FontAwesome;
-  color: rgba(0, 0, 0, 0.5);
-  -moz-transition: background 100ms linear;
-  -o-transition: background 100ms linear;
-  -webkit-transition: background 100ms linear;
-  transition: background 100ms linear;
-}
-.oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before {
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-}
-.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w {
-  top: 4px;
-  height: 100%;
-}
-.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
-  content: "";
-  line-height: 16px;
-}
-.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
-  width: 0;
-  height: 100%;
-  top: 2px;
-  left: 8px;
-}
-.oe_overlay .oe_handle.e {
-  left: auto;
-  right: -6px;
-  cursor: w-resize;
-}
-.oe_overlay .oe_handle.w {
-  left: -6px;
-  cursor: e-resize;
-}
-.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
-  left: 2px;
-  width: 100%;
-}
-.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
-  content: "";
-  text-align: center;
-  padding: 1px;
-}
-.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
-  width: 100%;
-  height: 0;
-  top: 7px;
-  left: 1px;
-}
-.oe_overlay .oe_handle.s {
-  top: auto;
-  cursor: n-resize;
-}
-.oe_overlay .oe_handle.n {
-  cursor: s-resize;
-}
-.oe_overlay .oe_handle.n > div {
-  top: 5px;
-}
-.oe_overlay .oe_handle.size {
-  z-index: 3;
-  top: auto;
-  left: 50%;
-  bottom: -6px;
-  margin-left: -50px;
-}
-.oe_overlay .oe_handle.size .oe_handle_button {
-  position: relative;
-  z-index: 3;
-  text-align: center;
-  margin-left: -52px;
-  margin-top: -10px;
-  left: 0px;
-}
-.oe_overlay .oe_handle.size .oe_handle_button:hover {
-  background: rgba(30, 30, 30, 0.8);
-  color: #fff;
-  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-}
-.oe_overlay .oe_handle.size .size {
-  position: absolute;
-  width: 64px;
-  cursor: row-resize;
-  top: 9px;
-  margin-left: 52px;
-  padding: 0 5px;
-}
-.oe_overlay .oe_handle.size .auto_size {
-  position: absolute;
-  width: 100px;
-  top: 9px;
-  cursor: pointer;
-}
-.oe_overlay .oe_handle.readonly {
-  cursor: auto !important;
-}
-.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size {
-  display: none !important;
-}
-.oe_overlay .icon.btn {
-  display: inline-block;
-}
-.oe_overlay .oe_overlay_options {
-  position: absolute;
-  left: 50% !important;
-  text-align: center;
-  top: -20px;
-  z-index: 1002;
-}
-.oe_overlay .oe_overlay_options > .btn-group {
-  left: -50%;
-  white-space: nowrap;
-}
-.oe_overlay .oe_overlay_options > .btn-group > a {
-  cursor: pointer;
-  display: inline-block;
-  float: none;
-  margin: 0 -3px;
-}
-.oe_overlay .oe_overlay_options > .btn-group > div {
-  float: none;
-}
-.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
-  cursor: pointer;
-}
-.oe_overlay .oe_overlay_options .dropdown {
-  display: inline-block;
-}
-.oe_overlay .oe_overlay_options .dropdown-menu {
-  text-align: left;
-  min-width: 180px;
-}
-.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
-  display: block;
-}
-.oe_overlay.block-w-left .w:before {
-  content: "" !important;
-}
-.oe_overlay.block-w-right .w:before {
-  content: "" !important;
-}
-.oe_overlay.block-w-left.block-w-right .w:before {
-  display: none !important;
-}
-.oe_overlay.block-e-left .e:before {
-  content: "" !important;
-}
-.oe_overlay.block-e-right .e:before {
-  content: "" !important;
-}
-.oe_overlay.block-e-left.block-e-right .e:before {
-  display: none !important;
-}
-.oe_overlay.block-s-top .s:before {
-  content: "" !important;
-}
-.oe_overlay.block-s-bottom .s:before {
-  content: "" !important;
-}
-.oe_overlay.block-n-top .n:before {
-  content: "" !important;
-}
-.oe_overlay.block-n-bottom .n:before {
-  content: "" !important;
-}
-.oe_overlay.o_keypress {
-  opacity: 0;
-  -webkit-transition: 0.8s;
-  -moz-transition: 0.8s;
-  -o-transition: 0.8s;
-  -transition: 0.8s;
-}
-
-.s-resize-important, .s-resize-important * {
-  cursor: s-resize !important;
-}
-
-.n-resize-important, .n-resize-important * {
-  cursor: n-resize !important;
-}
-
-.e-resize-important, .e-resize-important * {
-  cursor: e-resize !important;
-}
-
-.w-resize-important, .w-resize-important * {
-  cursor: w-resize !important;
-}
-
-.move-important, .move-important * {
-  cursor: move !important;
-}
-
-/* add CSS for bootstrap dropdown multi level */
-.dropdown-submenu {
-  position: relative;
-  z-index: 1000;
-}
-
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  -webkit-border-radius: 0 6px 6px 6px;
-  -moz-border-radius: 0 6px 6px 6px;
-  border-radius: 0 6px 6px 6px;
-}
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-.dropdown-submenu:hover > a:after {
-  border-left-color: #ffffff;
-}
-.dropdown-submenu > a:after {
-  display: block;
-  content: " ";
-  float: right;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 5px;
-  margin-right: -10px;
-}
-.dropdown-submenu.pull-left {
-  float: none;
-}
-.dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  -webkit-border-radius: 6px 0 6px 6px;
-  -moz-border-radius: 6px 0 6px 6px;
-  border-radius: 6px 0 6px 6px;
-}
-
-.oe_snippet_list {
-  width: auto;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.oe_snippet_editor {
-  position: fixed;
-  z-index: 1000;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 214px;
-  background: #a0a0a0;
-  box-shadow: 0 1px 3px #646464 inset;
-}
-.oe_snippet_editor .oe_snippet {
-  box-sizing: border-box;
-  display: inline-block;
-  width: 220px;
-  height: 160px;
-  border-radius: 3px;
-  background: white;
-  margin: 20px 20px 20px 0;
-  cursor: pointer;
-  border: 2px solid transparent;
-  box-shadow: 0 1px 3px #646464;
-  position: relative;
-  top: 0;
-  overflow: hidden;
-  vertical-align: top;
-  user-select: none;
-  white-space: normal;
-}
-.oe_snippet_editor .oe_snippet:after {
-  content: attr(name);
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background: rgba(255, 255, 255, 0.8);
-  text-align: center;
-  color: black;
-  padding: 8px;
-}
-.oe_snippet_editor .oe_snippet.oe_selected, .oe_snippet_editor .oe_snippet.oe_active {
-  border: 2px solid #9789ff;
-  box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
-}
-.oe_snippet_editor .oe_snippet > * {
-  margin-top: 16px;
-  line-height: 1em;
-  zoom: 0.6;
-}
-.oe_snippet_editor .oe_snippet > .container {
-  margin-top: 15px;
-  zoom: 0.17;
-  line-height: 0.999em;
-  line-height: 1em;
-}
-.oe_snippet_editor .oe_snippet > .row {
-  margin-top: 0px;
-  zoom: 0.23;
-  line-height: 0.999em;
-}
-.oe_snippet_editor .oe_snippet > .span6 {
-  margin-top: 18px;
-  zoom: 0.34;
-}
-.oe_snippet_editor .oe_snippet > .span12 {
-  margin-top: 16px;
-  zoom: 0.23;
-}
-.oe_snippet_editor .oe_snippet > p {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  font-size: 20px;
-  padding: 16px;
-  zoom: 1;
-  margin: 0px;
-}
-.oe_snippet_editor .oe_snippet.oe_new {
-  background: gray;
-  box-shadow: 0px 1px 3px #5a5a5a inset;
-  border: 0px;
-}
-.oe_snippet_editor .oe_snippet.oe_new.oe_selected, .oe_snippet_editor .oe_snippet.oe_new.oe_active {
-  box-shadow: 0px 2px 0px 0px #9789ff inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset;
-}
-.oe_snippet_editor .oe_snippet.oe_new > * {
-  zoom: 1;
-  margin: 0;
-  line-height: 160px;
-  text-align: center;
-  color: white;
-  font-size: 48px;
-}
-.oe_snippet_editor .oe_snippet.oe_new:after {
-  position: absolute;
-  left: 0px;
-  right: 0px;
-  top: 0px;
-  bottom: 0px;
-  background: transparent;
-  color: white;
-  text-shadow: 0px 1px 3px black;
-  line-height: 160px;
-  padding: 0px;
-}
-
-.oe_snippet_drop {
-  position: relative;
-  border: 2px dashed #ae34ff;
-  background: rgba(147, 52, 255, 0.1);
-  min-height: 28px;
-  margin: -16px auto;
-  border-radius: 5px;
-  max-width: 50%;
-}
-.oe_snippet_drop.oe_accepting {
-  border: 2px dashed #34ffa6;
-  background: rgba(52, 255, 190, 0.1);
-}
-
-#website-top-edit li.oe_snippet_editorbar {
-  padding: 1px 8px 2px;
-  font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
-  float: left;
-  margin-top: 6px;
-  border: 1px solid #a6a6a6;
-  border-bottom-color: #979797;
-  background: #eeeeee;
-  border-radius: 3px;
-}
-#website-top-edit li.oe_snippet_editorbar > * {
-  display: inline-block;
-  height: 22px;
-  padding: 4px 6px;
-  outline: 0;
-  border: 0;
-}
-#website-top-edit li.oe_snippet_editorbar a.button .icon {
-  cursor: inherit;
-  background-repeat: no-repeat;
-  margin-top: 1px;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-}
-
-/* ---- COLOR-PICKER ----  {{{ */
-.colorpicker {
-  margin: 0 auto;
-  background: transparent;
-  border: 0;
-}
-.colorpicker td {
-  padding: 0;
-  background: transparent;
-}
-.colorpicker td > * {
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  margin: 3px;
-  padding: 0;
-  border-width: 1px;
-  display: block;
-}
-.colorpicker .only-text {
-  display: none;
-}
-.colorpicker .automatic-color {
-  background: #fff;
-  border-left: 7px solid #f33;
-  border-top: 7px solid #0e0;
-  border-right: 8px solid #33f;
-  border-bottom: 8px solid #fe0;
-  margin: 4px 3px 3px 3px;
-  width: 0;
-  height: 0;
-}
-
 /* ---- Table Snippet ----  {{{ */
 .table_desc {
   margin: 0 0 20px 0;
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 62a3040c19c..cb18e21db53 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -2,585 +2,6 @@
 @import "compass/css3/user-interface"
 @import "compass/css3/transition"
 
-
-/* ---- SNIPPET EDITOR ---- {{{ */
-
-#oe_snippets
-    #o_left_bar, #o_arrow
-        position: fixed
-        top: 34px
-        left: 0px
-        bottom: 0
-        background: rgb(40,40,40)
-        +box-shadow(0px 10px 10px -10px black inset)
-    #o_arrow
-        z-index: 1009
-        width: 24px
-        opacity: 0.75
-        > *
-            position: absolute
-            color: white
-        div
-            @include transform( translateX(-36%) rotate(-90deg) )
-            top: 50%
-            white-space: nowrap
-        .fa
-            width: 100%
-            left: 40%
-    #o_left_bar
-        left:  -228px
-        z-index: 1010
-        width: 208px
-        @include transition(all 500ms ease)
-        ul
-            text-align: center
-            margin: 0
-            padding: 6px 0
-            list-style-type: none
-            li
-                display: inline-block
-                padding: 0 3px
-                a
-                    color: #aaa
-                .fa-stack
-                    overflow: hidden
-            li.active a.fa, li.active .fa-stack-1x
-                color: #428bca
-
-    &.o_open #o_left_bar
-        left: 0
-    .o_panel
-        margin: 0
-        border: 0
-        width: 208px
-    .o_panel_header
-        background: #dff0d8
-        padding: 1px 8px
-        color: #414141
-        text-align: center
-        .fa-stack
-            overflow: hidden
-            font-size: 1em
-    .o_panel_body
-        white-space: normal
-        background: black
-        padding: 7px 3px
-        > div
-            background: rgb(0,0,0)
-            label
-                width: 44px
-                color: #fff
-                padding-left: 10px
-
-                div
-                    width: 100px
-                    text-align: center
-                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
-                    @include transform-origin(50%)
-
-.oe_snippet
-    display: inline-block
-    vertical-align: top
-    width: 93px
-    margin-left: 3px
-    margin-right: 3px
-    margin-top: 1px
-    position: relative
-    overflow: hidden
-    +user-select(none)
-    cursor: move
-    .oe_snippet_thumbnail
-        text-align: center
-        height: 100%
-        background: transparent
-        color: white
-        position: relative
-        &:hover
-            .oe_snippet_thumbnail_img
-                @include transform( scale(.95,.95))
-        .oe_snippet_thumbnail_title
-            font-size: 12px
-            display: block
-            +text-shadow(0 0 2px rgb(0,0,0))
-        .oe_snippet_thumbnail_img
-            height: 74px
-            width: 92px
-            background-size: cover
-            @include transform( scale(1,1))
-        span, div
-            line-height: 18px
-    & > :not(.oe_snippet_thumbnail)
-        display: none !important
-    &.disable
-        .oe_snippet_thumbnail
-            background-color: rgba(255, 0, 0, 0.75)
-        .oe_snippet_thumbnail_img
-            opacity: 0.8
-#oe_snippets .oe_snippet_thumbnail
-    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
-
-// }}}}
-
-/* ---- SNIPPETS DROP ZONES ---- {{{ */
-
-.oe_drop_zone.oe_insert
-    display: block
-    height: 48px
-    margin: 0px
-    margin-top: -4px
-    margin-bottom: -44px
-    @include transition(margin 250ms linear)
-    width: 100%
-    position: absolute
-    z-index: 1000
-    &:not(.oe_vertical):before
-        content: ""
-        display: block
-        border-top: dashed 2px rgba(209, 178, 255, 0.72)
-        position: relative
-        top: 0px
-    &.oe_hover:before
-        border-top: dashed 2px rgba(116, 255, 161, 0.72)
-    &.oe_vertical
-        width: 48px
-        float: left
-        position: relative
-        margin: 0px -24px !important
-    &.oe_vertical_text
-        width: 48px
-        float: none
-        display: inline-block
-        position: relative
-        margin: 0px -24px !important
-    &.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_zone_style
-    color: white
-    height: 48px
-    margin-bottom: 32px
-    padding-top: 12px
-
-// }}}
-
-/* ---- SNIPPET MANIPULATOR ----  {{{ */
-
-.resize_editor_busy
-    background-color: rgba(0,0,0,0.3)
-
-.oe_overlay
-    display: none
-    height: 0
-    position: absolute
-    background: transparent
-    z-index: 1001
-    //@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)
-    &.oe_active
-        display: block
-    .oe_handle
-        display: block !important
-        position: absolute
-        top: 50%
-        left: 50%
-        +box-sizing(border-box)
-        width: 16px
-        height: 16px
-        margin: -2px
-        > div
-            z-index: 1
-            position: absolute
-            border-style: dashed
-            border-width: 1px
-            border-color: #666666
-            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
-        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
-            z-index: 2
-            position: relative
-            top: 50%
-            left: 50%
-            display: block
-            background: rgba(255, 255, 255, 1)
-            border: solid 1px rgba(0, 0, 0, .2)
-            +border-radius(5px)
-            width: 18px
-            height: 18px
-            margin: -9px
-            padding-left: 1px
-            font-size: 14px
-            line-height: 14px
-            font-family: FontAwesome
-            color: rgba(0,0,0,.5)
-            @include transition(background 100ms linear)
-        &.e, &.w, &.s, &.n
-            &:hover:before
-                background: rgba(0, 0, 0, .5)
-                color: #fff
-                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-        &.e, &.w
-            top: 4px
-            height: 100%
-            &:before
-                content: "\f07e"
-                line-height: 16px
-            > div
-                width: 0
-                height: 100%
-                top: 2px
-                left: 8px
-        &.e
-            left: auto
-            right: -6px
-            cursor: w-resize
-        &.w
-            left: -6px
-            cursor: e-resize
-        &.s, &.n
-            left: 2px
-            width: 100%
-            &:before
-                content: "\f07d"
-                text-align: center
-                padding: 1px
-            > div
-                width: 100%
-                height: 0
-                top: 7px
-                left: 1px
-        &.s
-            top: auto
-            cursor: n-resize
-        &.n
-            cursor: s-resize
-            > div
-                top: 5px
-        &.size
-            z-index: 3
-            top: auto
-            left: 50%
-            bottom: -6px
-            margin-left: -50px
-            .oe_handle_button
-                position: relative
-                z-index: 3
-                text-align: center
-                margin-left: -52px
-                margin-top: -10px
-                left: 0px
-                &:hover
-                    background: rgba(30, 30, 30, .8)
-                    color: #fff
-                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-            .size
-                position: absolute
-                width: 64px
-                cursor: row-resize
-                top: 9px
-                margin-left: 52px
-                padding: 0 5px
-            .auto_size
-                position: absolute
-                width: 100px
-                top: 9px
-                cursor: pointer
-        &.readonly
-            cursor: auto !important
-            &:before, &.size
-                display: none !important
-
-    .icon.btn
-        display: inline-block
-
-    .oe_overlay_options
-        position: absolute
-        left: 50% !important
-        text-align: center
-        top: -20px
-        z-index: 1002
-        > .btn-group
-            left: -50%
-            white-space: nowrap
-            > a
-                cursor: pointer
-                display: inline-block
-                float: none
-                margin: 0 -3px
-            > div
-                float: none
-        .btn, a
-            cursor: pointer
-        .dropdown
-            display: inline-block
-        .dropdown-menu
-            text-align: left
-            min-width: 180px
-        .dropdown-menu select,.dropdown-menu input
-            display: block
-
-    &.block-w-left .w:before
-        content: "\F061" !important
-    &.block-w-right .w:before
-        content: "\F060" !important
-    &.block-w-left.block-w-right .w:before
-        display: none !important
-    &.block-e-left .e:before
-        content: "\F061" !important
-    &.block-e-right .e:before
-        content: "\F060" !important
-    &.block-e-left.block-e-right .e:before
-        display: none !important
-
-    &.block-s-top .s:before
-        content: "\F063" !important
-    &.block-s-bottom .s:before
-        content: "\f062" !important
-    &.block-n-top .n:before
-        content: "\F063" !important
-    &.block-n-bottom .n:before
-        content: "\f062" !important
-
-    &.o_keypress
-        opacity: 0
-        -webkit-transition: .8s
-        -moz-transition: .8s
-        -o-transition: .8s
-        -transition: .8s
-
-
-.s-resize-important, .s-resize-important *
-    cursor: s-resize !important
-.n-resize-important, .n-resize-important *
-    cursor: n-resize !important
-.e-resize-important, .e-resize-important *
-    cursor: e-resize !important
-.w-resize-important, .w-resize-important *
-    cursor: w-resize !important
-.move-important, .move-important *
-    cursor: move !important
-
-// }}}
-
-
-/* add CSS for bootstrap dropdown multi level */
-.dropdown-submenu
-    position: relative
-    z-index: 1000
-.dropdown-submenu
-    &>.dropdown-menu
-        top: 0
-        left: 100%
-        margin-top: -6px
-        margin-left: -1px
-        -webkit-border-radius: 0 6px 6px 6px
-        -moz-border-radius: 0 6px 6px 6px
-        border-radius: 0 6px 6px 6px
-    &:hover
-        &>.dropdown-menu
-            display: block
-        &>a:after
-            border-left-color: #ffffff
-    &>a:after
-        display: block
-        content: " "
-        float: right
-        width: 0
-        height: 0
-        border-color: transparent
-        border-style: solid
-        border-width: 5px 0 5px 5px
-        border-left-color: #cccccc
-        margin-top: 5px
-        margin-right: -10px
-    &.pull-left
-        float: none
-        &>.dropdown-menu
-            left: -100%
-            margin-left: 10px
-            -webkit-border-radius: 6px 0 6px 6px
-            -moz-border-radius: 6px 0 6px 6px
-            border-radius: 6px 0 6px 6px
-
-.oe_snippet_list
-    width: auto
-    white-space: nowrap
-    margin-left: 20px
-
-.oe_snippet_editor
-    position: fixed
-    z-index: 1000
-    bottom: 0
-    left: 0
-    right: 0
-    height: 214px
-    background: rgb(160,160,160)
-    box-shadow: 0 1px 3px rgb(100,100,100) inset
-    .oe_snippet
-        box-sizing: border-box
-        display: inline-block
-        width: 220px
-        height: 160px
-        border-radius: 3px
-        background: white
-        margin: 20px 20px 20px 0
-        cursor: pointer
-        border: 2px solid transparent
-        box-shadow: 0 1px 3px rgb(100,100,100)
-        position: relative
-        top: 0
-        overflow: hidden
-        vertical-align: top
-        user-select: none
-        white-space: normal
-        &:after
-            content: attr(name)
-            position: absolute
-            bottom: 0px
-            left: 0px
-            right: 0px
-            background: rgba(255,255,255,0.8)
-            text-align: center
-            color: black
-            padding: 8px
-        &.oe_selected, &.oe_active
-            border: 2px solid rgb(151, 137, 255)
-            box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
-        & > *
-            margin-top: 16px
-            line-height: 1em
-            zoom: 0.6
-        & > .container
-            margin-top: 15px
-            zoom: 0.17
-            line-height: 0.999em
-            line-height: 1em
-        & > .row
-            margin-top: 0px
-            zoom: 0.23
-            line-height: 0.999em
-        & > .span6
-            margin-top: 18px
-            zoom: 0.34
-        & > .span12
-            margin-top: 16px
-            zoom: 0.23
-        & > p
-            position: absolute
-            top: 0
-            right: 0
-            left: 0
-            bottom: 0
-            font-size: 20px
-            padding: 16px
-            zoom: 1
-            margin: 0px
-        &.oe_new
-            background: gray
-            box-shadow: 0px 1px 3px rgb(90,90,90) inset
-            border: 0px
-            &.oe_selected, &.oe_active
-                box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset
-            & > *
-                zoom: 1
-                margin: 0
-                line-height: 160px
-                text-align: center
-                color: white
-                font-size: 48px
-            &:after
-                position: absolute
-                left: 0px
-                right: 0px
-                top: 0px
-                bottom: 0px
-                background: transparent
-                color: white
-                text-shadow: 0px 1px 3px black
-                line-height: 160px
-                padding: 0px
-
-.oe_snippet_drop 
-    position: relative
-    border: 2px dashed rgb(174, 52, 255)
-    background: rgba(147, 52, 255, 0.1)
-    min-height: 28px
-    margin: -16px auto
-    border-radius: 5px
-    max-width: 50%
-    &.oe_accepting 
-        border: 2px dashed rgb(52, 255, 166)
-        background: rgba(52, 255, 190, 0.1)
-
-#website-top-edit
-    li.oe_snippet_editorbar 
-        padding: 1px 8px 2px
-        font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif
-        float: left
-        margin-top: 6px
-        border: 1px solid #a6a6a6
-        border-bottom-color: #979797
-        background: #eeeeee
-        border-radius: 3px
-        & > * 
-            display: inline-block
-            height: 22px
-            padding: 4px 6px
-            outline: 0
-            border: 0
-
-        a.button .icon 
-            cursor: inherit
-            background-repeat: no-repeat
-            margin-top: 1px
-            width: 16px
-            height: 16px
-            display: inline-block
-
-/* ---- COLOR-PICKER ----  {{{ */
-
-.colorpicker
-    margin: 0 auto
-    background: transparent
-    border: 0
-    td
-        padding: 0
-        background: transparent
-        > *
-            width: 16px
-            height: 16px
-            border-radius: 2px
-            margin: 3px
-            padding: 0
-            border-width: 1px
-            display: block
-    .only-text
-        display: none
-    .automatic-color
-        background: #fff
-        border-left: 7px solid #f33
-        border-top: 7px solid #0e0
-        border-right: 8px solid #33f
-        border-bottom: 8px solid #fe0
-        margin: 4px 3px 3px 3px
-        width: 0
-        height: 0
-
-// }}}
-
 /* ---- Table Snippet ----  {{{ */
 
 .table_desc
diff --git a/addons/website/static/src/css/website.backend.css b/addons/website/static/src/css/website.backend.css
index 333118ce1b3..927b3907d6f 100644
--- a/addons/website/static/src/css/website.backend.css
+++ b/addons/website/static/src/css/website.backend.css
@@ -3,35 +3,4 @@
 }
 .oe_button_box .oe_stat_button .o_stat_info.published > .o_stat_text.oe_unpublish {
     display: none;
-}
-.oe_form_field.oe_form_field_html_frame {
-    display: block;
-}
-.oe_form_field_html_frame iframe {
-    display: block;
-    width: 100%;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    min-height: 300px;
-}
-.o_form_FieldTextHtml_fullscreen .oe_form_field_html_frame iframe {
-    position: absolute !important;
-    left: 0 !important;
-    right: 0 !important;
-    top: 0px !important;
-    bottom: 0 !important;
-    width: 100% !important;
-    z-index: 1001 !important;
-    border: 0;
-}
-.o_form_FieldTextHtml_fullscreen .modal .oe_form_field_html_frame iframe {
-    top: 0 !important;
-}
-.o_form_FieldTextHtml_fullscreen .oe_webclient *, .o_form_FieldTextHtml_fullscreen .modal * {
-    position: static !important;
-    top: 0 !important;
-    left: 0 !important;
-    overflow: visible !important;
-    width: auto !important;
 }
\ 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 40febaf9b1b..32abb23c44d 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,158 +1,10 @@
-@charset "UTF-8";
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
  * stuff must go to the editor.css
  *
  */
-/* ----- GENERIC LAYOUTING HELPERS ---- */
-/* Vertical Spacing */
-.mt128 {
-  margin-top: 128px !important;
-}
-
-.mt92 {
-  margin-top: 92px !important;
-}
-
-.mt64 {
-  margin-top: 64px !important;
-}
-
-.mt48 {
-  margin-top: 48px !important;
-}
-
-.mt32 {
-  margin-top: 32px !important;
-}
-
-.mt16 {
-  margin-top: 16px !important;
-}
-
-.mt8 {
-  margin-top: 8px !important;
-}
-
-.mt4 {
-  margin-top: 4px !important;
-}
-
-.mt0 {
-  margin-top: 0px !important;
-}
-
-.mb128 {
-  margin-bottom: 128px !important;
-}
-
-.mb92 {
-  margin-bottom: 92px !important;
-}
-
-.mb64 {
-  margin-bottom: 64px !important;
-}
-
-.mb48 {
-  margin-bottom: 48px !important;
-}
-
-.mb32 {
-  margin-bottom: 32px !important;
-}
-
-.mb16 {
-  margin-bottom: 16px !important;
-}
-
-.mb8 {
-  margin-bottom: 8px !important;
-}
-
-.mb4 {
-  margin-bottom: 4px !important;
-}
-
-.mb0 {
-  margin-bottom: 0px !important;
-}
-
-.ml8 {
-  margin-left: 8px !important;
-}
-
-.ml4 {
-  margin-left: 4px !important;
-}
-
-.ml0 {
-  margin-left: 0px !important;
-}
-
-.mr8 {
-  margin-right: 8px !important;
-}
-
-.mr4 {
-  margin-right: 4px !important;
-}
-
-.mr0 {
-  margin-right: 0px !important;
-}
-
-img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
-  padding: 4px;
-}
-img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
-  padding: 8px;
-}
-img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
-  padding: 16px;
-}
-img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
-  padding: 32px;
-}
-
-div.media_iframe_video.padding-small iframe {
-  padding: 4px;
-}
-div.media_iframe_video.padding-medium iframe {
-  padding: 8px;
-}
-div.media_iframe_video.padding-large iframe {
-  padding: 16px;
-}
-div.media_iframe_video.padding-xl iframe {
-  padding: 32px;
-}
-
-.fa-6x {
-  font-size: 6em;
-}
-
-.fa-7x {
-  font-size: 7em;
-}
-
-.fa-8x {
-  font-size: 8em;
-}
-
-.fa-9x {
-  font-size: 9em;
-}
-
-.fa-10x {
-  font-size: 10em;
-}
-
-.fa.center-block {
-  text-align: center;
-}
-
 ul {
   list-style-type: disc;
 }
@@ -214,7 +66,7 @@ li > p {
 }
 
 font[style*='background'], font[class*='bg-'] {
-  padding: 0 2px
+  padding: 0 2px;
 }
 
 .o_ul_toggle_self, .o_ul_toggle_next {
@@ -239,20 +91,14 @@ font[style*='background'], font[class*='bg-'] {
 .o_ul_folded .o_ul_toggle_self:before, .o_ul_folded .o_ul_toggle_next:before {
   content: "";
 }
-.o_ul_folded .o_ul_toggle_self .o_open, .o_ul_folded .o_ul_toggle_next .o_open {
+.o_ul_folded .o_ul_toggle_self.o_open, .o_ul_folded .o_ul_toggle_next.o_open {
   left: 0em;
 }
-.o_ul_folded .o_ul_toggle_self .o_open:before, .o_ul_folded .o_ul_toggle_next .o_open:before {
+.o_ul_folded .o_ul_toggle_self.o_open:before, .o_ul_folded .o_ul_toggle_next.o_open:before {
   content: "";
 }
 
 /* Extra Styles */
-img.shadow {
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-}
-
 h1.text-muted, h2.text-muted, h3.text-muted {
   margin-top: 10px;
 }
@@ -269,19 +115,6 @@ hr {
   padding-bottom: 10px;
 }
 
-td {
-  min-width: 20px;
-}
-
-/* ----- Editor (for public user, like forum) ----- */
-.note-toolbar {
-  margin-left: 0 !important;
-}
-
-.note-popover .popover > .arrow {
-  display: none;
-}
-
 /* ----- Snippets Styles ----- */
 .para_large {
   font-size: 120%;
@@ -294,11 +127,6 @@ td {
   margin-right: auto;
 }
 
-/* ----- EDITOR ----- */
-.css_non_editable_mode_hidden {
-  display: none !important;
-}
-
 /* ----- BOOTSTRAP FIX ----- */
 .container .container, .readable .container {
   padding-left: 0;
@@ -351,7 +179,6 @@ body > nav.navbar {
     padding-top: 34px;
   }
 }
-
 /* ----- BOOTSTRAP FIX ----- */
 .col-md-12 {
   float: left;
@@ -363,26 +190,6 @@ body > nav.navbar {
     width: 100%;
   }
 }
-/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
-.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  position: static;
-}
-
-.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: " ";
-  text-align: center;
-  display: block;
-  min-height: 1em;
-  color: grey;
-  font-size: 24px;
-  padding-top: 160px;
-}
-
-.css_editable_display {
-  display: none;
-}
-
-/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
 .navbar .nav > li > p {
   margin-bottom: 0px;
 }
@@ -844,17 +651,6 @@ table.well tr td {
   color: white;
 }
 
-address .fa.fa-mobile-phone {
-  margin: 0 3px 0 2px;
-}
-address .fa.fa-file-text-o {
-  margin-right: 1px;
-}
-
-span[data-oe-type="monetary"] {
-  white-space: nowrap;
-}
-
 .oe_template_fallback {
   -moz-column-count: 3;
   -webkit-column-count: 3;
@@ -879,49 +675,6 @@ span[data-oe-type="monetary"] {
   text-align: center;
 }
 
-div.media_iframe_video {
-  margin: 0 auto;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-div.media_iframe_video iframe {
-  width: 100%;
-  height: 100%;
-  top: 0;
-  position: absolute;
-  margin: 0 auto;
-  margin-left: -50%;
-}
-div.media_iframe_video .media_iframe_video_size {
-  padding-bottom: 66.5%;
-  position: relative;
-  width: 100%;
-  height: 0;
-}
-div.media_iframe_video .css_editable_mode_display {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: none;
-  z-index: 2;
-}
-
-html[data-browser^="msie"] div.media_iframe_video iframe {
-  margin-left: 0;
-}
-
-/* Mobile view */
-@media (max-width: 768px) {
-  img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
-    -webkit-transform: none !important;
-    -moz-transform: none !important;
-    -ms-transform: none !important;
-    -o-transform: none !important;
-    transform: none !important;
-  }
-}
-/* Fix: backward compatibility saas-3 */
 div.carousel .container > .carousel-caption {
   position: absolute;
   right: 50%;
@@ -1000,22 +753,25 @@ div.carousel .item.text_only .container > .carousel-image {
 #oe_main_menu_navbar .navbar-nav.navbar-right:last-child {
   margin-right: 0 !important;
 }
+
 .container nav#oe_main_menu_navbar {
   position: inherit;
 }
 
 .oe_search_clear {
   position: absolute;
-  display:none;
   cursor: pointer;
   z-index: 2;
   right: 42px;
   color: #939393;
   padding: 10px 0;
   top: 1px;
-  }
+}
 
 .oe_search_box {
-    padding-right: 23px;
+  padding-right: 23px;
+}
+
+.note-editor button {
+  height: 30px;
 }
-/*# sourceMappingURL=website.css.map */
diff --git a/addons/website/static/src/css/website.editor.css b/addons/website/static/src/css/website.editor.css
new file mode 100644
index 00000000000..69e6e451d6b
--- /dev/null
+++ b/addons/website/static/src/css/website.editor.css
@@ -0,0 +1,263 @@
+@charset "utf-8";
+/* ---- Common---- {{{ */
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+  min-height: 24px;
+}
+
+/* ---- MOBILE PREVIEW ---- {{{ */
+.oe_mobile_preview.modal .modal-content {
+  height: 660px;
+  background-color: #000000;
+  border: 2px solid #1C1F1F;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  max-width: 330px;
+}
+.oe_mobile_preview.modal .modal-content .modal-header {
+  background-color: #000000;
+  border-bottom: 0;
+  -moz-border-radius-topleft: 10px;
+  -webkit-border-top-left-radius: 10px;
+  border-top-left-radius: 10px;
+  -moz-border-radius-topright: 10px;
+  -webkit-border-top-right-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.oe_mobile_preview.modal .modal-content .modal-header .modal-title {
+  color: #1C1F1F;
+}
+.oe_mobile_preview.modal .modal-content .modal-header .close {
+  color: lightgrey;
+  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+  opacity: 1;
+}
+.oe_mobile_preview.modal .modal-content .modal-header .close:hover {
+  color: #E00101;
+  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+  opacity: 1;
+}
+.oe_mobile_preview.modal .modal-content .modal-body {
+  background-color: #000000;
+  max-height: 600px;
+  padding: 0;
+  margin: 0;
+}
+.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
+  width: 320px;
+  height: 568px;
+  padding: 5px;
+  border: none;
+}
+.oe_mobile_preview.modal .modal-content .modal-footer {
+  background-color: #000000;
+}
+
+/* ---- SEO TOOLS ---- {{{ */
+.oe_seo_configuration .modal-dialog {
+  width: 80%;
+}
+.oe_seo_configuration .oe_remove {
+  color: #E00101;
+}
+.oe_seo_configuration .oe_seo_suggestion {
+  cursor: pointer;
+}
+.oe_seo_configuration .oe_seo_keyword {
+  padding: 0.2em 0.4em 0.2em 0.5em;
+  -moz-border-radius: 0.4em;
+  -webkit-border-radius: 0.4em;
+  border-radius: 0.4em;
+}
+.oe_seo_configuration li.oe_seo_preview_g {
+  line-height: 1.2;
+  list-style: none;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  font-size: small;
+  font-family: arial, sans-serif;
+}
+.oe_seo_configuration li.oe_seo_preview_g h3 {
+  font-size: medium;
+}
+.oe_seo_configuration li.oe_seo_preview_g .r {
+  margin: 0;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oe_seo_configuration li.oe_seo_preview_g .r a {
+  color: #1e0fbe;
+  text-decoration: underline;
+  text-transform: none;
+}
+.oe_seo_configuration li.oe_seo_preview_g .r a em {
+  font-style: normal !important;
+}
+.oe_seo_configuration li.oe_seo_preview_g .s {
+  color: #444;
+  max-width: 42em;
+}
+.oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
+  display: block;
+  margin-bottom: 1px;
+}
+.oe_seo_configuration li.oe_seo_preview_g .f {
+  color: #666;
+  margin-bottom: 1px;
+}
+.oe_seo_configuration li.oe_seo_preview_g .f cite {
+  color: #006621;
+  font-style: normal;
+  font-size: 14px;
+}
+.oe_seo_configuration li.oe_seo_preview_g .st {
+  line-height: 1.24;
+}
+
+/* ---- ACE EDITOR ---- {{{ */
+.oe_ace_view_editor {
+  position: fixed;
+  right: 0;
+  z-index: 1001;
+  height: 100%;
+  background: #2F3129;
+  color: white;
+}
+.oe_ace_view_editor .oe_ace_view_editor_title {
+  width: 100%;
+  padding-top: 0;
+  padding-left: 0;
+  height: 30px;
+}
+.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
+  width: 50%;
+  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: 30px;
+  padding: 0 4px 0 4px;
+  font-size: 14px;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+  line-height: normal;
+}
+.oe_ace_view_editor .ace_editor {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  left: 0;
+}
+.oe_ace_view_editor .ace_editor .ace_gutter {
+  cursor: ew-resize;
+}
+.oe_ace_view_editor #ace-view-id {
+  padding: 0 1em;
+}
+.oe_ace_view_editor.oe_ace_open {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
+  opacity: 0.97;
+}
+.oe_ace_view_editor.oe_ace_closed {
+  z-index: -1000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+}
+
+.oe_include_bundles {
+  font-weight: normal;
+  padding: 0 8px;
+}
+
+/* ---- CUSTOMIZE THEME ---- {{{ */
+#theme_error {
+  background: #ffc;
+}
+
+#theme_customize_modal {
+  overflow: visible;
+  z-index: 1020;
+  background: transparent;
+  display: block;
+}
+#theme_customize_modal .modal-dialog {
+  top: 75px;
+  width: auto;
+  margin: 0;
+  position: absolute;
+  right: 10px;
+  font-family: "Lato-Regular";
+  font-weight: normal;
+  text-transform: capitalize;
+  letter-spacing: normal;
+}
+#theme_customize_modal .modal-h5 {
+  color: #ffffff;
+  font-family: "Lato-Regular";
+  font-weight: normal;
+  text-transform: uppercase;
+  letter-spacing: normal;
+  font-size: 14px;
+  color: white;
+  padding: 4px 0 4px 4px;
+  background-color: #bdc3c7;
+}
+#theme_customize_modal table {
+  width: 100%;
+  margin-bottom: 8px;
+}
+#theme_customize_modal label {
+  display: block;
+  text-align: center;
+}
+#theme_customize_modal label > div, #theme_customize_modal label > img {
+  border: 1px solid #fff;
+  line-height: 30px;
+  font-size: 0.9em;
+  margin: 2px 4px;
+}
+#theme_customize_modal label.checked > div, #theme_customize_modal label.checked > img {
+  box-shadow: 2px 2px 3px #888;
+  border: 1px solid #666;
+}
+#theme_customize_modal label img {
+  width: 60px;
+  height: 35px;
+  margin: 2px;
+  border: 1px solid rgba(136, 136, 136, 0.5);
+}
+#theme_customize_modal label input {
+  display: none;
+}
+#theme_customize_modal .loading_backdrop {
+  display: none;
+}
+#theme_customize_modal.loading .loading_backdrop {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.3;
+  position: absolute;
+  z-index: 1;
+}
+
+/* ---- force the browse to re-compute the stylesheets ---- */
+body.theme_customize_css_loading {
+  magin-top: 1px;
+}
+body.theme_customize_css_loading #wrapwrap {
+  magin-top: -1px;
+}
diff --git a/addons/website/static/src/css/website.editor.sass b/addons/website/static/src/css/website.editor.sass
new file mode 100644
index 00000000000..911631bb8ee
--- /dev/null
+++ b/addons/website/static/src/css/website.editor.sass
@@ -0,0 +1,234 @@
+@charset "utf-8"
+@import "common"
+
+/* ---- Common---- {{{ */
+
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
+    min-height: 24px
+
+// }}}
+
+/* ---- MOBILE PREVIEW ---- {{{ */
+
+$mobile_preview_background: #000000
+$mobile_preview_border: #1C1F1F
+$icon_close: #E00101
+.oe_mobile_preview
+    &.modal .modal-content
+        height: 660px
+        background-color: $mobile_preview_background
+        border: 2px solid $mobile_preview_border
+        +border-radius(10px)
+        margin: auto
+        top: 0
+        left: 0
+        bottom: 0
+        right: 0
+        max-width: 330px
+        .modal-header
+            background-color: $mobile_preview_background
+            border-bottom: 0
+            +border-top-left-radius(10px)
+            +border-top-right-radius(10px)
+            .modal-title
+                color: $mobile_preview_border
+            .close
+                color: lightgrey
+                +opacity(1)
+            .close:hover
+                color: $icon_close
+                +opacity(1)
+        .modal-body
+            background-color: $mobile_preview_background
+            max-height: 600px
+            padding: 0
+            margin: 0
+            .oe_mobile_viewport
+                width: 320px
+                height: 568px
+                padding: 5px
+                border: none
+        .modal-footer
+            background-color: $mobile_preview_background
+
+// }}}
+
+/* ---- SEO TOOLS ---- {{{ */
+
+$remove_color: $icon_close
+$in_title_color: #5cb85c
+$in_description_color: #428bca
+$in_body_color: #5bc0de
+$highlighted_text_color: #ffffff
+.oe_seo_configuration
+    .modal-dialog
+        width: 80%
+    .oe_remove
+        color: $remove_color
+    .oe_seo_suggestion
+        cursor: pointer
+    .oe_seo_keyword
+        padding: .2em .4em .2em .5em
+        +border-radius(.4em)
+    li.oe_seo_preview_g
+        line-height: 1.2
+        list-style: none
+        list-style-image: none
+        list-style-position: outside
+        list-style-type: none
+        font-size: small
+        font-family: arial,sans-serif
+        h3
+            font-size: medium
+        .r
+            margin: 0
+            font-size: 16px
+            font-style: normal
+            font-weight: normal
+            overflow: hidden
+            text-overflow: ellipsis
+            -webkit-text-overflow: ellipsis
+            white-space: nowrap
+            a
+                color: rgb(30, 15, 190)
+                text-decoration: underline
+                text-transform: none
+                em
+                    font-style: normal !important
+        .s
+            color: #444
+            max-width: 42em
+        .kv,.slp
+            display: block
+            margin-bottom: 1px
+        .f
+            color: #666
+            margin-bottom: 1px
+            cite
+                color: #006621
+                font-style: normal
+                font-size: 14px
+        .st
+            line-height: 1.24
+
+
+// }}}
+
+/* ---- ACE EDITOR ---- {{{ */
+
+$editorbar_height: 30px
+$infobar_height: 20px
+// TODO Fix => might break with themes
+
+.oe_ace_view_editor
+    position: fixed
+    // top property is set programmatically
+    right: 0
+    z-index: 1001
+    height: 100%
+    background: #2F3129
+    color: white
+    .oe_ace_view_editor_title
+        width: 100%
+        padding-top: 0
+        padding-left: 0
+        height: $editorbar_height
+        .oe_view_list
+            width: 50%
+            height: $editorbar_height
+            @include editor-font
+        .btn
+            height: $editorbar_height
+            padding: 0 4px 0 4px
+            @include editor-font
+    .ace_editor
+        position: absolute
+        top: $editorbar_height + $infobar_height
+        right: 0
+        // bottom property is set programmatically
+        left: 0
+        .ace_gutter
+            cursor: ew-resize
+    #ace-view-id
+        padding: 0 1em
+    &.oe_ace_open
+        +opacity(0.97)
+    &.oe_ace_closed
+        z-index: -1000
+        +opacity(0)
+
+.oe_include_bundles
+    font-weight: normal
+    padding: 0 8px
+
+// }}}
+
+/* ---- CUSTOMIZE THEME ---- {{{ */
+#theme_error
+    background: #ffc
+#theme_customize_modal
+    overflow: visible
+    z-index: 1020
+    background: transparent
+    display: block
+    .modal-dialog
+        top: 75px
+        width: auto
+        margin: 0
+        position: absolute
+        right: 10px
+        font-family: 'Lato-Regular'
+        font-weight: normal
+        text-transform: capitalize
+        letter-spacing: normal
+    .modal-h5
+        color: #ffffff
+        font-family: 'Lato-Regular'
+        font-weight: normal
+        text-transform: uppercase
+        letter-spacing: normal
+        font-size: 14px
+        color: white
+        padding: 4px 0 4px 4px
+        background-color: #bdc3c7
+    table
+        width: 100%
+        margin-bottom: 8px
+    label
+        display: block
+        text-align: center
+        > div, > img
+            border: 1px solid #fff
+            line-height: 30px
+            font-size: 0.9em
+            margin: 2px 4px
+        &.checked
+            > div, > img
+                box-shadow: 2px 2px 3px #888
+                border: 1px solid #666
+        img
+            width: 60px
+            height: 35px
+            margin: 2px
+            border: 1px solid rgba(136, 136, 136, 0.5)
+        input
+            display: none
+    .loading_backdrop
+        display: none
+    &.loading
+        .loading_backdrop
+            display: block
+            width: 100%
+            height: 100%
+            background: #000
+            opacity: 0.3
+            position: absolute
+            z-index: 1
+
+/* ---- force the browse to re-compute the stylesheets ---- */
+body.theme_customize_css_loading
+    magin-top: 1px
+    #wrapwrap
+        magin-top: -1px
+
+// }}}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index cb526b29b01..afaa0ded4f5 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -10,93 +10,6 @@
  *
  */
 
-/* ----- GENERIC LAYOUTING HELPERS ---- */
-
-/* Vertical Spacing */
-.mt128
-    margin-top: 128px !important
-.mt92
-    margin-top: 92px !important
-.mt64
-    margin-top: 64px !important
-.mt48
-    margin-top: 48px !important
-.mt32
-    margin-top: 32px !important
-.mt16
-    margin-top: 16px !important
-.mt8
-    margin-top: 8px !important
-.mt4
-    margin-top: 4px !important
-.mt0
-    margin-top: 0px !important
-
-.mb128
-    margin-bottom: 128px !important
-.mb92
-    margin-bottom: 92px !important
-.mb64
-    margin-bottom: 64px !important
-.mb48
-    margin-bottom: 48px !important
-.mb32
-    margin-bottom: 32px !important
-.mb16
-    margin-bottom: 16px !important
-.mb8
-    margin-bottom: 8px !important
-.mb4
-    margin-bottom: 4px !important
-.mb0
-    margin-bottom: 0px !important
-
-.ml8
-    margin-left: 8px !important
-.ml4
-    margin-left: 4px !important
-.ml0
-    margin-left: 0px !important
-
-.mr8
-    margin-right: 8px !important
-.mr4
-    margin-right: 4px !important
-.mr0
-    margin-right: 0px !important
-
-img, .img, span.fa, iframe
-    &.padding-small
-        padding: 4px
-    &.padding-medium
-        padding: 8px
-    &.padding-large
-        padding: 16px
-    &.padding-xl
-        padding: 32px
-div.media_iframe_video
-    &.padding-small iframe
-        padding: 4px
-    &.padding-medium iframe
-        padding: 8px
-    &.padding-large iframe
-        padding: 16px
-    &.padding-xl iframe
-        padding: 32px
-
-.fa-6x
-    font-size: 6em
-.fa-7x
-    font-size: 7em
-.fa-8x
-    font-size: 8em
-.fa-9x
-    font-size: 9em
-.fa-10x
-    font-size: 10em
-.fa.center-block
-    text-align: center
-
 ul
     list-style-type: disc
 li > ul
@@ -151,16 +64,13 @@ font[style*='background'], font[class*='bg-']
         text-decoration: none
         &:before
             content: "\f0da"
-        .o_open
+        &.o_open
             left: 0em
             &:before
                 content: "\f0d7"
 
 /* Extra Styles */
 
-img.shadow
-    +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
-
 h1.text-muted, h2.text-muted, h3.text-muted
     margin-top: 10px
 
@@ -175,17 +85,6 @@ hr
     margin-bottom: 10px
     padding-bottom: 10px
 
-td
-    min-width: 20px
-
-/* ----- Editor (for public user, like forum) ----- */
-
-.note-toolbar
-    margin-left: 0 !important
-
-.note-popover .popover > .arrow
-    display: none
-
 /* ----- Snippets Styles ----- */
 
 .para_large
@@ -197,11 +96,6 @@ td
     margin-left: auto
     margin-right: auto
 
-/* ----- EDITOR ----- */
-
-.css_non_editable_mode_hidden
-    display: none !important
-
 /* ----- BOOTSTRAP FIX ----- */
 
 .container, .readable
@@ -241,7 +135,7 @@ body > nav.navbar
     width: 100%
     position: absolute
     z-index: 10000
-@media (max-min: 767px)
+@media (min-width: 767px)
     nav.navbar + #wrapwrap
         padding-top: 34px
 
@@ -255,33 +149,9 @@ body > nav.navbar
     .table .img-responsive
         width: 100%
 
-/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
-.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    position: static
-
-.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: ' '
-    text-align: center
-    display: block
-    min-height: 1em
-    color: grey
-    font-size: 24px
-    padding-top: 160px
-
-.css_editable_display
-    display: none
-
-/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
-
 .navbar .nav > li > p
     margin-bottom: 0px
 
-// .navbar .nav > li  a
-//     text-shadow: none
-
-// .nav > li  a
-//     display: block
-
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 
 .nav-hierarchy
@@ -659,15 +529,6 @@ table.well tr
         a
             color: white
 
-address
-    .fa.fa-mobile-phone
-        margin: 0 3px 0 2px
-    .fa.fa-file-text-o
-        margin-right: 1px
-
-span[data-oe-type="monetary"]
-    white-space: nowrap
-
 .oe_template_fallback
     @include column-count(3)
 
@@ -685,46 +546,6 @@ span[data-oe-type="monetary"]
     input
         text-align: center
 
-div.media_iframe_video
-    margin: 0 auto
-    text-align: center
-    position: relative
-    overflow: hidden
-    iframe
-        width: 100%
-        height: 100%
-        top: 0
-        position: absolute
-        margin: 0 auto
-        margin-left: -50%
-    .media_iframe_video_size
-        padding-bottom: 66.5%
-        position: relative
-        width: 100%
-        height: 0
-    .css_editable_mode_display
-        position: absolute
-        width: 100%
-        height: 100%
-        display: none
-        z-index: 2
-
-html[data-browser^="msie"] div.media_iframe_video iframe
-    margin-left: 0
-
-/* Mobile view */
-
-@media (max-width: 768px)
-    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
-        -webkit-transform: none !important
-        -moz-transform: none !important
-        -ms-transform: none !important
-        -o-transform: none !important
-        transform: none !important
-
-
-/* Fix: backward compatibility saas-3 */
-
 div.carousel
     .container
         > .carousel-caption
@@ -811,4 +632,7 @@ div.carousel
     top: 1px
 
 .oe_search_box
-  padding-right: 23px
+    padding-right: 23px
+
+.note-editor button
+    height: 30px
diff --git a/addons/website/static/src/js/openerp.define.js b/addons/website/static/src/js/openerp.define.js
deleted file mode 100644
index 85e0486546e..00000000000
--- a/addons/website/static/src/js/openerp.define.js
+++ /dev/null
@@ -1,107 +0,0 @@
-odoo.define('website.define', function () {
-'use strict';
-
-var containsDefine = typeof(define) !== "undefined" ? define : undefined;
-var scripts = {
-    'jquery': jQuery
-};
-
-function odoo_define(parse) {
-    return function (name, list, callback) {
-
-        var def = $.Deferred();
-        def.openerpDefine = true;
-
-        if (!callback) {
-            callback = list;
-            list = null;
-        }
-        if (!list) {
-            list = name;
-            if (odoo.website_next_define) {
-                name = odoo.website_next_define;
-                odoo.website_next_define = null;
-            }
-        }
-
-        if (list instanceof Array) {
-            var defs = [];
-            var args = [];
-            _.each(list, function (js, index) {
-                var path = parse(js);
-
-                if (!(path in scripts)) {
-
-                    scripts[path] = $.Deferred();
-                    scripts[path].openerpDefine = true;
-
-                    $.ajax({ 'url': path, 'dataType': 'html', 'async': false })
-                        .then(function (data) {
-                            var code = new Function("return "+data)();
-                            if (code.openerpDefine) {
-                                code.then(function (code) {
-                                    scripts[path].resolve(code);
-                                    scripts[path] = code;
-                                });
-                            } else {
-                                scripts[path].resolve(code);
-                                scripts[path] = code;
-                            }
-                        });
-
-                }
-
-                if (scripts[path] && scripts[path].openerpDefine) {
-                    scripts[path].then(function (code) {
-                        args[index] = code;
-                    });
-                    defs.push(scripts[path]);
-                } else {
-                    args[index] = scripts[path] = scripts[path] || null;
-                }
-            });
-
-            $.when.apply($, defs).then(function () {
-                var result = callback.apply(window, args);
-                if  (name) {
-                    scripts[name] = scripts[parse(name)] = result;
-                }
-                def.resolve(result);
-            });
-
-        } else {
-
-            def = scripts[name] = scripts[parse(name)] = scripts[name] || callback() || null;
-
-        }
-
-        return def;
-    }
-}
-
-function enable() {
-    window.define = odoo_define(function (id) {
-
-        if (id.slice(0,10) === 'summernote') {
-            return '/website/static/lib/summernote/src/js' + id.slice(10,Infinity) + '.js';
-        }
-        return id;
-    });
-}
-
-function disable() {
-    window.define = containsDefine;
-}
-
-odoo.website_next_define = undefined;
-odoo.enable_website_define = enable;
-odoo.disable_website_define = disable;
-
-return {
-    enable: enable,
-    disable: disable,
-    define: odoo_define,
-    scripts: scripts,
-};
-
-});
diff --git a/addons/website/static/src/js/web_planner_website.js b/addons/website/static/src/js/web_planner_website.js
index 0c8f62a0d54..7a3803bffd4 100644
--- a/addons/website/static/src/js/web_planner_website.js
+++ b/addons/website/static/src/js/web_planner_website.js
@@ -1,10 +1,14 @@
 odoo.define('web.planner.website', function (require) {
 'use strict';
 
+var ajax = require('web.ajax');
+var core = require('web.core');
 var Model = require('web.Model');
 var Widget = require('web.Widget');
 var planner = require('web.planner.common');
-var website = require('website.website');
+var base = require('web_editor.base');
+
+var qweb = core.qweb;
 
 var PlannerDialog = planner.PlannerDialog;
 
@@ -54,9 +58,9 @@ PlannerDialog.include({
     }
 });
 
-website.ready().done(function() {
+base.dom_ready.done(function() {
     if($('#oe_systray').length) {
-        website.add_template_file('/web_planner/static/src/xml/web_planner.xml').then(function() {
+        ajax.loadXML('/web_planner/static/src/xml/web_planner.xml', qweb).then(function() {
             new planner.WebistePlannerLauncher().prependTo($('#oe_systray'));
         });
     }
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index aa724e819fb..77a4ac27446 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -5,18 +5,24 @@ var ajax = require('web.ajax');
 var Class = require('web.Class');
 var core = require('web.core');
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
 var ace_call = require('website.ace_call');
 var website = require('website.website');
 
 var _t = core._t;
-var QWeb = core.qweb;
+var qweb = core.qweb;
 
 var hash = "#advanced-view-editor";
 
-website.add_template_file('/website/static/src/xml/website.ace.xml');
+ajax.loadXML('/website/static/src/xml/website.ace.xml', qweb);
 
 var Ace = Widget.extend({
+    events: {
+        'click a[data-action=ace]': 'launchAce',
+    },
     launchAce: function (e) {
+        ace_call.load();
+
         if (e) {
             e.preventDefault();
         }
@@ -213,7 +219,7 @@ var ViewEditor = Widget.extend({
         ajax.jsonRpc('/web/dataset/call', 'call', {
             model: 'ir.ui.view',
             method: 'read',
-            args: [[viewId], ['arch'], website.get_context()],
+            args: [[viewId], ['arch'], _.extend(base.get_context(), {'lang': null})],
         }).then(function(result) {
             var editingSession = self.buffers[viewId] = new ace.EditSession(result[0].arch);
             editingSession.setMode("ace/mode/xml");
@@ -286,7 +292,7 @@ var ViewEditor = Widget.extend({
             ajax.jsonRpc('/web/dataset/call', 'call', {
                 model: 'ir.ui.view',
                 method: 'write',
-                args: [[session.id], { 'arch':  xml.xml }, website.get_context()],
+                args: [[session.id], { 'arch':  xml.xml }, _.extend(base.get_context(), {'lang': null})],
             }).then(function () {
                 def.resolve();
             }).fail(function (source, error) {
@@ -353,7 +359,7 @@ var ViewEditor = Widget.extend({
             this.$("#ace-view-list").val(session.id).change();
         }
 
-        var $dialog = $(QWeb.render('website.error_dialog', {
+        var $dialog = $(qweb.render('website.error_dialog', {
             title: session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1],
             message:"<b>Malformed XML document</b>:<br/>" + message
         }));
@@ -369,12 +375,12 @@ var ViewEditor = Widget.extend({
     },
 });
 
-website.ready().done(function() {
-    var ace = new Ace();
-    $(document.body).on('click', 'a[data-action=ace]', function() {
-        ace_call.load();
-        ace.launchAce();
-    });
+website.TopBar.include({
+    start: function () {
+        this.ace = new Ace();
+        var def = this.ace.attachTo($('#html_editor'));
+        return $.when(this._super(), def);
+    }
 });
 
 });
diff --git a/addons/website/static/src/js/website.backend.iframe.js b/addons/website/static/src/js/website.backend.iframe.js
deleted file mode 100644
index 925fb6aa4b1..00000000000
--- a/addons/website/static/src/js/website.backend.iframe.js
+++ /dev/null
@@ -1,75 +0,0 @@
-odoo.define('website.backend.iframe', function (require) {
-'use strict';
-
-var editor = require('website.editor');
-var snippet_editor = require('website.snippets.editor');
-
-window.top.odoo[callback+"_set_value"] = function (value, fields_values) {
-    var $editable = $("#wrapwrap .o_editable:first");
-    if (value !== $editable.html()) {
-        if ($('body').hasClass('editor_enable')) {
-            editor.editor_bar.rte.historyRecordUndo($editable);
-            editor.editor_bar.snippets.make_active(false);
-        }
-        $editable.html(value);
-    }
-};
-
-editor.EditorBar.include({
-    start: function () {
-        var self = this;
-        var res = this._super.apply(this, arguments);
-        if (location.search.indexOf("enable_editor") !== -1) {
-            this.on('rte:ready', this, function () {
-                $("#website-top-edit").hide();
-                setTimeout(function () {
-                    if (window.top.odoo[callback+"_editor"]) {
-                        window.top.odoo[callback+"_editor"](this);
-                    }
-                }, 0);
-
-                var $editable = $("#wrapwrap .o_editable:first");
-                setTimeout(function () {
-                    $($editable.find("*").filter(function () {return !this.children.length;}).first()[0] || $editable)
-                        .focusIn().trigger("mousedown").trigger("keyup");
-                },0);
-
-                this.rte.on('change', this, function () {
-                    window.top.odoo[callback+"_downup"]($editable.prop('innerHTML'));
-                });
-
-
-                $(window).on('keydown', function (event) {
-                    if(event.keyCode === 27 && $("body", window.top.document).hasClass("o_form_FieldTextHtml_fullscreen")) {
-                        $(".o_fullscreen").trigger("click");
-                    }
-                    $(window).trigger('resize');
-                });
-
-            });
-
-            var style = document.createElement("style");
-            style.textContent = "#wrapwrap > main > * { margin-top: 50px; }";
-            $("head").append(style);
-
-            this.on("snippets:ready", this, function () {
-                $(window.top).trigger("resize");
-            });
-
-        } else if (window.top.odoo[callback+"_editor"]) {
-            window.top.odoo[callback+"_editor"](this);
-        }
-        return res;
-    },
-    cancel: function () {
-        return;
-    },
-});
-
-snippet_editor.BuildingBlock.include({
-    _get_snippet_url: function () {
-        return snippets_url;
-    }
-});
-
-});
diff --git a/addons/website/static/src/js/website.backend.js b/addons/website/static/src/js/website.backend.js
index fb93bf0dadf..f877c0e90fc 100644
--- a/addons/website/static/src/js/website.backend.js
+++ b/addons/website/static/src/js/website.backend.js
@@ -22,157 +22,4 @@ var WidgetWebsiteButton = form_common.AbstractField.extend({
 
 core.form_widget_registry.add('website_button', WidgetWebsiteButton);
 
-var FieldWidget = form_common.AbstractField.extend(form_common.ReinitializeFieldMixin);
-
-
-var FieldTextHtmlFrame = FieldWidget.extend({
-    template: 'FieldTextHtmlFrame',
-    start: function () {
-        var self = this;
-
-        this.callback = _.uniqueId('FieldTextHtml_');
-        odoo[this.callback+"_editor"] = function (EditorBar) {
-            self.on_editor_loaded(EditorBar);
-        };
-        odoo[this.callback+"_content"] = function () {
-            self.on_content_loaded();
-        };
-        odoo[this.callback+"_downup"] = function (value) {
-            self.dirty = true;
-            self.internal_set_value(value);
-            self.trigger('changed_value');
-            self.resize();
-        };
-
-        // init jqery objects
-        this.$iframe = this.$('iframe');
-        this.document = null;
-        this.$body = $();
-        this.$content = $();
-
-        // init resize
-        this.resize = function resize() {
-            if (self.get('effective_readonly')) {
-               $("body").removeClass("o_form_FieldTextHtml_fullscreen");
-            }
-            if ($("body").hasClass("o_form_FieldTextHtml_fullscreen")) {
-                self.$iframe.css('height', $("body").hasClass('o_form_FieldTextHtml_fullscreen') ? (document.body.clientHeight - self.$iframe.offset().top) + 'px' : '');
-            } else {
-                self.$iframe.css("height", (self.$body.find("#oe_snippets").length ? 500 : 300) + "px");
-            }
-        };
-        $(window).on('resize', self.resize);
-
-        return this._super();
-    },
-    get_url: function () {
-        var src = this.options.editor_url ? this.options.editor_url+"?" : "/website/field/html?";
-        var datarecord = this.view.get_fields_values();
-
-        var attr = {
-            'model': this.view.model,
-            'field': this.name,
-            'res_id': datarecord.id || '',
-            'callback': this.callback
-        };
-        if (this.options.snippets) {
-            attr.snippets = this.options.snippets;
-        }
-        if (!this.get("effective_readonly")) {
-            attr.enable_editor = 1;
-        }
-        if (core.debug) {
-            attr.debug = 1;
-        }
-
-        for (var k in attr) {
-            src += "&"+k+"="+attr[k];
-        }
-
-        delete datarecord[this.name];
-        src += "&datarecord="+ encodeURIComponent(JSON.stringify(datarecord));
-
-        return src;
-    },
-    initialize_content: function() {
-        if (!this.get("effective_readonly")) {
-            this.$iframe = this.$el.find('iframe');
-            this.document = null;
-            this.$body = $();
-            this.$content = $();
-            this.dirty = false;
-            this.editor = false;
-            odoo[this.callback+"_set_value"] = null;
-            this.$iframe.attr("src", this.get_url());
-        }
-    },
-    on_content_loaded: function () {
-        this.document = this.$iframe.contents()[0];
-        this.$body = $("body", this.document);
-        this.$content = this.$body.find("#wrapwrap .o_editable:first");
-        setTimeout(this.resize,0);
-    },
-    on_editor_loaded: function (EditorBar) {
-        var self = this;
-        this.editor = EditorBar;
-
-        $("body").on('click', function (event) {
-            if ($("body").hasClass('o_form_FieldTextHtml_fullscreen')) {
-                $("body").removeClass("o_form_FieldTextHtml_fullscreen");
-                self.$iframe.css('height', '');
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        });
-
-        if (this.get('value') && window.odoo[this.callback+"_set_value"] && !(this.$content.prop('innerHTML')||"").length) {
-            this.render_value();
-        }
-
-        setTimeout(function () {
-            var $fullscreen = $('<span class="btn btn-primary" style="margin: 5px;padding: 1px; position: fixed; top: 0; right: 0; z-index: 2000;"><span class="o_fullscreen fa fa-arrows-alt" style="color: white;margin: 3px 5px;"></span></span>');
-            $("#website-top-navbar", self.document).append($fullscreen);
-            $fullscreen.on('click', function () {
-                $("body").toggleClass("o_form_FieldTextHtml_fullscreen");
-                self.resize();
-            });
-            setTimeout(self.resize,0);
-        }, 500);
-    },
-    render_value: function() {
-        var value = (this.get('value') || "").replace(/^<p[^>]*>\s*<\/p>$/, '');
-        if (!this.get("effective_readonly")) {
-            if (!this.$content) {
-                return;
-            }
-            if(window.odoo[this.callback+"_set_value"]) {
-                window.odoo[this.callback+"_set_value"](value || '', this.view.get_fields_values(), this.name);
-                this.resize();
-            }
-        } else {
-            this.$el.html(value);
-        }
-    },
-    is_false: function() {
-        return this.get('value') === false || this.get('value') === "";
-    },
-    get_value: function(save_mode) {
-        if (save_mode && this.editor && this.editor.snippets && this.dirty) {
-            this.editor.snippets.clean_for_save();
-            this.internal_set_value( this.$content.prop('innerHTML') );
-        }
-        return this.get('value');
-    },
-    destroy: function () {
-        $("body").removeClass("o_form_FieldTextHtml_fullscreen");
-        $(window).off('resize', self.resize);
-        $(window).off('keydown', self.escape);
-        delete window.odoo[this.callback+"_content"];
-        delete window.odoo[this.callback+"_downup"];
-        delete window.odoo[this.callback+"_set_value"];
-    }
-});
-
-core.form_widget_registry.add('html_frame', FieldTextHtmlFrame);
-
 });
diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 27397078380..d723309b5c4 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -1,32 +1,32 @@
 odoo.define('website.contentMenu', function (require) {
 "use strict";
 
-var ajax = require('web.ajax');
 var core = require('web.core');
+var ajax = require('web.ajax');
 var Widget = require('web.Widget');
-var editor = require('website.editor');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
+var widget = require('web_editor.widget');
 var website = require('website.website');
 
 var _t = core._t;
-var QWeb = core.qweb;
+var qweb = core.qweb;
 
-website.add_template_file('/website/static/src/xml/website.contentMenu.xml');
+ajax.loadXML('/website/static/src/xml/website.contentMenu.xml', qweb);
 
-var EditorBarContent = Widget.extend({
+var TopBarContent = Widget.extend({
     start: function() {
         var self = this;
         self.$el.on('click', 'a[data-action]', function(ev) {
             ev.preventDefault();
             var $content_item = $(this);
-            var data_action = self[$content_item.data('action')];
-            if (data_action) {
-                data_action();
-            }
+            self[$content_item.data('action')]();
         });
         return this._super();
     },
     edit_menu: function() {
-        var context = website.get_context();
+        var self = this;
+        var context = base.get_context();
         var def = $.Deferred();
         if ($("[data-content_menu_id]").length) {
             var select = new SelectEditMenuDialog();
@@ -114,7 +114,7 @@ var EditorBarContent = Widget.extend({
         },
     delete_page: function() {
         var self = this;
-        var context = website.get_context();
+        var context = base.get_context();
         self.mo_id = self.getMainObject().id;
 
         ajax.jsonRpc('/web/dataset/call_kw', 'call', {
@@ -161,7 +161,15 @@ var EditorBarContent = Widget.extend({
     }
 });
 
-var SelectEditMenuDialog = editor.Dialog.extend({
+website.TopBar.include({
+    start: function () {
+        this.content_menu = new TopBarContent();
+        var def = this.content_menu.attachTo($('.oe_content_menu'));
+        return $.when(this._super(), def);
+    }
+});
+
+var SelectEditMenuDialog = widget.Dialog.extend({
     template: 'website.contentMenu.dialog.select',
     init: function () {
         var self = this;
@@ -177,9 +185,9 @@ var SelectEditMenuDialog = editor.Dialog.extend({
     }
 });
 
-var EditMenuDialog = editor.Dialog.extend({
+var EditMenuDialog = widget.Dialog.extend({
     template: 'website.contentMenu.dialog.edit',
-    events: _.extend({}, editor.Dialog.prototype.events, {
+    events: _.extend({}, widget.Dialog.prototype.events, {
         'click a.js_add_menu': 'add_menu',
         'click button.js_edit_menu': 'edit_menu',
         'click button.js_delete_menu': 'delete_menu',
@@ -232,7 +240,7 @@ var EditMenuDialog = editor.Dialog.extend({
             };
             self.flat[new_menu.id] = new_menu;
             self.$('.oe_menu_editor').append(
-                QWeb.render('website.contentMenu.dialog.submenu', { submenu: new_menu }));
+                qweb.render('website.contentMenu.dialog.submenu', { submenu: new_menu }));
         });
         dialog.appendTo(document.body);
     },
@@ -272,7 +280,7 @@ var EditMenuDialog = editor.Dialog.extend({
         var new_menu = this.$('.oe_menu_editor').nestedSortable('toArray', {startDepthCount: 0});
         var levels = [];
         var data = [];
-        var context = website.get_context();
+        var context = base.get_context();
         // Resequence, re-tree and remove useless data
         new_menu.forEach(function (menu) {
             if (menu.item_id) {
@@ -293,12 +301,12 @@ var EditMenuDialog = editor.Dialog.extend({
             },
         }).then(function (menu) {
             self.close();
-            website.reload();
+            editor.reload();
         });
     },
 });
 
-var MenuEntryDialog = editor.LinkDialog.extend({
+var MenuEntryDialog = widget.LinkDialog.extend({
     template: 'website.contentMenu.dialog.add',
     init: function (editor, data) {
         data.text = data.name || '';
@@ -336,14 +344,8 @@ var MenuEntryDialog = editor.LinkDialog.extend({
     },
 });
 
-$(document).ready(function() {
-    var content = new EditorBarContent();
-    content.setElement($('.oe_content_menu'));
-    content.start();
-});
-
 return {
-    EditorBarContent: EditorBarContent,
+    'TopBar': TopBarContent,
 };
 
 });
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 67e9b3da734..429d2e66220 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -3,1145 +3,55 @@ odoo.define('website.editor', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
-var utils = require('web.utils');
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
+var widget = require('web_editor.widget');
 var website = require('website.website');
 
+var qweb = core.qweb;
 var _t = core._t;
 
+ajax.loadXML('/website/static/src/xml/website.editor.xml', qweb);
 
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-/* Summernote Lib (neek change to make accessible: method and object) */
-var dom = $.summernote.core.dom;
-var range = $.summernote.core.range;
-var eventHandler = $.summernote.eventHandler;
-var renderer = $.summernote.renderer;
-
-var tplButton = renderer.getTemplate().button;
-var tplIconButton = renderer.getTemplate().iconButton;
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-/* update and change the popovers content, and add history button */
-
-var fn_createPalette = renderer.createPalette;
-renderer.createPalette = function ($container, options) {
-    fn_createPalette.call(this, $container, options);
-
-    if (!core.qweb.has_template('website.colorpicker')) {
-        return;
-    }
-
-    var $color = $container.find('.note-color');
-    var html = core.qweb.render('website.colorpicker');
-    $color.find('.note-color-palette').prepend(html);
-    var $bg = $color.find('.colorpicker:first button');
-    var $fore = $color.find('.colorpicker:last button');
-
-    $bg.each(function () { $(this).attr('data-event', 'backColor').attr('data-value', $(this).attr('class')); });
-    $fore.each(function () { $(this).attr('data-event', 'foreColor').attr('data-value', $(this).attr('class').replace(/bg-/, 'text-')); });
-};
-
-var fn_tplPopovers = renderer.tplPopovers;
-renderer.tplPopovers = function (lang, options) {
-    var $popover = $(fn_tplPopovers.call(this, lang, options));
-
-    var $imagePopover = $popover.find('.note-image-popover');
-    var $linkPopover = $popover.find('.note-link-popover');
-    var $airPopover = $popover.find('.note-air-popover');
-
-    if (window === window.top) {
-        $popover.children().addClass("hidden-xs");
-    }
-
-    //////////////// image popover
-
-    // add center button for images
-    $(tplIconButton('fa fa-align-center', {
-            title: _t('Center'),
-            event: 'floatMe',
-            value: 'center'
-        })).insertAfter($imagePopover.find('[data-event="floatMe"][data-value="left"]'));
-    $imagePopover.find('button[data-event="removeMedia"]').parent().remove();
-    $imagePopover.find('button[data-event="floatMe"][data-value="none"]').remove();
-
-    var $alt = $('<div class="btn-group"/>');
-    $alt.prependTo($imagePopover.find('.popover-content'));
-    $alt.append('<button class="btn btn-default btn-sm btn-small" data-event="alt"><strong>Alt: </strong><span class="o_image_alt"></span></button>');
-
-    // padding button
-    var $padding = $('<div class="btn-group"/>');
-    $padding.insertBefore($imagePopover.find('.btn-group:first'));
-    var $button = $(tplIconButton('fa fa-plus-square-o', {
-            title: _t('Padding'),
-            dropdown: true
-        })).appendTo($padding);
-    var $ul = $('<ul class="dropdown-menu"/>').insertAfter($button);
-    $ul.append('<li><a data-event="padding" href="#" data-value="">'+_t('None')+'</a></li>');
-    $ul.append('<li><a data-event="padding" href="#" data-value="small">'+_t('Small')+'</a></li>');
-    $ul.append('<li><a data-event="padding" href="#" data-value="medium">'+_t('Medium')+'</a></li>');
-    $ul.append('<li><a data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>');
-    $ul.append('<li><a data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>');
-
-    // circle, boxed... options became toggled
-    $imagePopover.find('[data-event="imageShape"]:not([data-value])').remove();
-    $button = $(tplIconButton('fa fa-sun-o', {
-            title: _t('Shadow'),
-            event: 'imageShape',
-            value: 'shadow'
-        })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-circle"]'));
-
-    // add spin for fa
-    var $spin = $('<div class="btn-group hidden only_fa"/>').insertAfter($button.parent());
-    $(tplIconButton('fa fa-refresh', {
-            title: _t('Spin'),
-            event: 'imageShape',
-            value: 'fa-spin'
-        })).appendTo($spin);
-
-    // resize for fa
-    var $resizefa = $('<div class="btn-group hidden only_fa"/>')
-        .insertAfter($imagePopover.find('.btn-group:has([data-event="resize"])'));
-    for (var size=1; size<=5; size++) {
-        $(tplButton('<span class="note-fontsize-10">'+size+'x</span>', {
-          title: size+"x",
-          event: 'resizefa',
-          value: size+''
-        })).appendTo($resizefa);
-    }
-    var $colorfa = $airPopover.find('.note-color').clone();
-    $colorfa.find(".btn-group:first").remove();
-    $colorfa.find("ul.dropdown-menu").css('min-width', '172px');
-    $colorfa.find('button[data-event="color"]').attr('data-value', '{"foreColor": "#f00"}')
-        .find("i").css({'background': '', 'color': '#f00'});
-    $resizefa.after($colorfa);
-
-    // show dialog box and delete
-    var $imageprop = $('<div class="btn-group"/>');
-    $imageprop.appendTo($imagePopover.find('.popover-content'));
-    $(tplIconButton('fa fa-picture-o', {
-            title: _t('Edit'),
-            event: 'showImageDialog'
-        })).appendTo($imageprop);
-    $(tplIconButton('fa fa-trash-o', {
-            title: _t('Remove'),
-            event: 'delete'
-        })).appendTo($imageprop);
-
-    $imagePopover.find('.popover-content').append($airPopover.find(".note-history").clone());
-
-    $imagePopover.find('[data-event="showImageDialog"]').before($airPopover.find('[data-event="showLinkDialog"]').clone());
-    
-    //////////////// link popover
-
-    $linkPopover.find('.popover-content').append($airPopover.find(".note-history").clone());
-
-    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fa fa-link");
-    $linkPopover.find('button[data-event="unlink"]').before($airPopover.find('button[data-event="showImageDialog"]').clone());
-
-    //////////////// text/air popover
-
-    //// highlight the text format
-    $airPopover.find('.note-style').on('mousedown', function () {
-        var $format = $airPopover.find('[data-event="formatBlock"]');
-        var node = range.create().sc;
-        var formats = $format.map(function () { return $(this).data("value"); }).get();
-        while (node && (!node.tagName || (!node.tagName || formats.indexOf(node.tagName.toLowerCase()) === -1))) {
-            node = node.parentNode;
-        }
-        $format.parent().removeClass('active');
-        $format.filter('[data-value="'+(node ? node.tagName.toLowerCase() : "p")+'"]')
-            .parent().addClass("active");
-    });
-
-    //////////////// tooltip
-
-    $airPopover.add($linkPopover).add($imagePopover).find("button")
-        .tooltip('destroy')
-        .tooltip({
-            container: 'body',
-            trigger: 'hover',
-            placement: 'bottom'
-        }).on('click', function () {$(this).tooltip('hide');});
-
-    return $popover;
-};
-
-var fn_boutton_update = eventHandler.popover.button.update;
-eventHandler.popover.button.update = function ($container, oStyle) {
-    // stop animation when edit content
-    var previous = $(".note-control-selection").data('target');
-    if (previous) {
-        $(previous).css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
-    }
-    if (oStyle.image) {
-        $(oStyle.image).css({"-webkit-animation": "none", "animation": "none"});
-    }
-    // end
-
-    fn_boutton_update.call(this, $container, oStyle);
-
-    $container.find('button[data-event="undo"]').attr('disabled', !history.hasUndo());
-    $container.find('button[data-event="redo"]').attr('disabled', !history.hasRedo());
-
-    if (oStyle.image) {
-        $container.find('[data-event]').parent().removeClass("active");
-
-        $container.find('a[data-event="padding"][data-value="small"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-small"));
-        $container.find('a[data-event="padding"][data-value="medium"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-medium"));
-        $container.find('a[data-event="padding"][data-value="large"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-large"));
-        $container.find('a[data-event="padding"][data-value="xl"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-xl"));
-        $container.find('a[data-event="padding"][data-value=""]').parent().toggleClass("active", !$container.find('.active a[data-event="padding"]').length);
-
-        if (dom.isImgFont(oStyle.image)) {
-
-            $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-event="imageShape"])').addClass("hidden");
-            $container.find('.only_fa').removeClass("hidden");
-            $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
-            $container.find('button[data-event="resizefa"][data-value="3"]').toggleClass("active", $(oStyle.image).hasClass("fa-3x"));
-            $container.find('button[data-event="resizefa"][data-value="4"]').toggleClass("active", $(oStyle.image).hasClass("fa-4x"));
-            $container.find('button[data-event="resizefa"][data-value="5"]').toggleClass("active", $(oStyle.image).hasClass("fa-5x"));
-            $container.find('button[data-event="resizefa"][data-value="1"]').toggleClass("active", !$container.find('.active[data-event="resizefa"]').length);
-
-            $container.find('button[data-event="imageShape"][data-value="fa-spin"]').toggleClass("active", $(oStyle.image).hasClass("fa-spin"));
-            
-            $container.find('.note-color').removeClass("hidden");
-
-        } else {
-
-            $container.find('.hidden:not(.only_fa)').removeClass("hidden");
-            $container.find('.only_fa').addClass("hidden");
-            var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/);
-            if (width) {
-                width = width[2];
-            }
-            $container.find('button[data-event="resize"][data-value="1"]').toggleClass("active", width === "100%");
-            $container.find('button[data-event="resize"][data-value="0.5"]').toggleClass("active", width === "50%");
-            $container.find('button[data-event="resize"][data-value="0.25"]').toggleClass("active", width === "25%");
-
-            $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
-            
-            if (!$(oStyle.image).is("img")) {
-                $container.find('.btn-group:has(button[data-event="imageShape"])').addClass("hidden");
-            }
-
-            $container.find('.note-color').addClass("hidden");
-
-        }
-
-        $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("pull-left"));
-        $container.find('button[data-event="floatMe"][data-value="center"]').toggleClass("active", $(oStyle.image).hasClass("center-block"));
-        $container.find('button[data-event="floatMe"][data-value="right"]').toggleClass("active", $(oStyle.image).hasClass("pull-right"));
-
-        $(oStyle.image).trigger('attributes_change');
-    }
-};
-
-var fn_popover_update = eventHandler.popover.update;
-eventHandler.popover.update = function ($popover, oStyle, isAirMode) {
-    var $imagePopover = $popover.find('.note-image-popover');
-    var $linkPopover = $popover.find('.note-link-popover');
-    var $airPopover = $popover.find('.note-air-popover');
-
-    fn_popover_update.call(this, $popover, oStyle, isAirMode);
-
-    if (!isAirMode || $(oStyle.range.sc).closest('[data-oe-model]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"])').length) {
-        $imagePopover.hide();
-        $linkPopover.hide();
-        $airPopover.hide();
-        return;
-    }
-
-    if (oStyle.image) {
-        if (oStyle.image.parentNode.className.match(/(^|\s)media_iframe_video(\s|$)/i)) {
-            oStyle.image = oStyle.image.parentNode;
-        }
-        var alt =  $(oStyle.image).attr("alt");
-
-        $imagePopover.find('.o_image_alt').text( (alt || "").replace(/&quot;/g, '"') ).parent().toggle(oStyle.image.tagName === "IMG");
-        $imagePopover.show();
-
-        range.createFromNode(dom.firstChild(oStyle.image)).select();
-    } else {
-        $(".note-control-selection").hide();
-    }
-
-    if (oStyle.image || (!oStyle.range.isCollapsed() || (oStyle.range.sc.tagName && !dom.isAnchor(oStyle.range.sc)) || (oStyle.image && !$(oStyle.image).closest('a').length))) {
-        $linkPopover.hide();
-        oStyle.anchor = false;
-    }
-
-    if (oStyle.image || oStyle.anchor || !$(oStyle.range.sc).closest('.note-editable').length) {
-        $airPopover.hide();
-    } else {
-        $airPopover.show();
-    }
-};
-
-eventHandler.handle.update = function ($handle, oStyle) {
-    $handle.toggle(!!oStyle.image);
-    if (oStyle.image) {
-        var $selection = $handle.find('.note-control-selection');
-        var $image = $(oStyle.image);
-        var szImage = {
-          w: parseInt($image.outerWidth(true), 10),
-          h: parseInt($image.outerHeight(true), 10)
-        };
-        $selection.data('target', oStyle.image); // save current image element.
-        var sSizing = szImage.w + 'x' + szImage.h;
-        $selection.find('.note-control-selection-info').text(szImage.h > 50 ? sSizing : "");
-
-        $selection.find('.note-control-sizing').toggleClass('note-control-sizing note-control-holder').css({
-                'border-top': 0,
-                'border-left': 0
-            });
-    }
-};
-
-$(document).on('click keyup', function () {
-    $('button[data-event="undo"]').attr('disabled', !history.hasUndo());
-    $('button[data-event="redo"]').attr('disabled', !history.hasRedo());
-});
-
-eventHandler.editor.undo = function ($popover) {
-    if(!$popover.attr('disabled')) history.undo();
-};
-eventHandler.editor.redo = function ($popover) {
-    if(!$popover.attr('disabled')) history.redo();
-};
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-/* hack for image and link editor */
-
-function getImgTarget () {
-  return $(".note-control-selection").data('target');
-}
-eventHandler.editor.padding = function ($editable, sValue) {
-    var $target = $(getImgTarget());
-    var paddings = "small medium large xl".split(/\s+/);
-    $editable.data('NoteHistory').recordUndo();
-    if (sValue.length) {
-        paddings.splice(paddings.indexOf(sValue),1);
-        $target.toggleClass('padding-'+sValue);
-    }
-    $target.removeClass("padding-" + paddings.join(" padding-"));
-};
-eventHandler.editor.resize = function ($editable, sValue) {
-    var $target = $(getImgTarget());
-    $editable.data('NoteHistory').recordUndo();
-    var width = ($target.attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+)%/);
-    if (width) {
-        width = width[2]/100;
-    }
-    $(getImgTarget()).css('width', width != sValue ? (sValue * 100) + '%' : '');
-};
-eventHandler.editor.resizefa = function ($editable, sValue) {
-    var $target = $(getImgTarget());
-    $editable.data('NoteHistory').recordUndo();
-    $target.attr('class', $target.attr('class').replace(/\s*fa-[0-9]+x/g, ''));
-    if (+sValue > 1) {
-        $target.addClass('fa-'+sValue+'x');
-    }
-};
-eventHandler.editor.floatMe = function ($editable, sValue) {
-    var $target = $(getImgTarget());
-    $editable.data('NoteHistory').recordUndo();
-    switch (sValue) {
-        case 'center': $target.toggleClass('center-block').removeClass('pull-right pull-left'); break;
-        case 'left': $target.toggleClass('pull-left').removeClass('pull-right center-block'); break;
-        case 'right': $target.toggleClass('pull-right').removeClass('pull-left center-block'); break;
-    }
-};
-eventHandler.editor.imageShape = function ($editable, sValue) {
-    var $target = $(getImgTarget());
-    $editable.data('NoteHistory').recordUndo();
-    $target.toggleClass(sValue);
-};
-
-eventHandler.dialog.showLinkDialog = function ($editable, $dialog, linkInfo) {
-    $editable.data('range').select();
-    $editable.data('NoteHistory').recordUndo();
-
-    var editor = new LinkDialog($editable, linkInfo);
-    editor.appendTo(document.body);
-
-    var def = new $.Deferred();
-    editor.on("save", this, function (linkInfo) {
-        linkInfo.range.select();
-        $editable.data('range', linkInfo.range);
-        def.resolve(linkInfo);
-        $editable.data('NoteHistory').popUndo();
-        $('.note-popover .note-link-popover').show();
-    });
-    editor.on("cancel", this, function () {
-        def.reject();
-        $editable.data('NoteHistory').popUndo();
-    });
-    return def;
-};
-eventHandler.dialog.showImageDialog = function ($editable) {
-    var r = $editable.data('range');
-    if (r.sc.tagName && r.sc.childNodes.length) {
-        r.sc = r.sc.childNodes[r.so];
-    }
-    var editor = new MediaDialog($editable, dom.isImg(r.sc) ? r.sc : null);
-    editor.appendTo(document.body);
-    return new $.Deferred().reject();
-};
-$.summernote.pluginEvents.alt = function (event, editor, layoutInfo) {
-    var $editable = layoutInfo.editable();
-    var $selection = layoutInfo.handle().find('.note-control-selection');
-    var media = $selection.data('target');
-    new alt($editable, media).appendTo(document.body);
-};
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-dom.isVoid = function (node) {
-    return node && /^BR|^IMG|^HR/.test(node.nodeName.toUpperCase()) || dom.isImg(node);
-};
-dom.isImg = function (node) {
-    return dom.isImgFont(node) || (node && (node.nodeName === "IMG" || (node.className && node.className.match(/(^|\s)media_iframe_video(\s|$)/i)) ));
-};
-dom.isForbiddenNode = function (node) {
-    return $(node).is(".media_iframe_video, .fa, img");
-};
-
-dom.isImgFont = function (node) {
-    var nodeName = node && node.nodeName.toUpperCase();
-    var className = (node && node.className || "");
-    if (node && (nodeName === "SPAN" || nodeName === "I") && className.length) {
-        var classNames = className.split(/\s+/);
-        for (var k=0; k<fontIcons.length; k++) {
-            if (_.intersection(fontIcons[k].icons, classNames).length) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
-// re-overwrite font to include theme icons
-var isFont = dom.isFont;
-dom.isFont = function (node) {
-    return dom.isImgFont(node) || isFont(node);
-};
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-var fn_visible = $.summernote.pluginEvents.visible;
-$.summernote.pluginEvents.visible = function (event, editor, layoutInfo) {
-    var res = fn_visible.call(this, event, editor, layoutInfo);
-    var $node = $(dom.node(range.create().sc));
-    if (($node.is('[data-oe-type="html"]') || $node.is('[data-oe-field="arch"]')) && $node.hasClass("o_editable") && !$node[0].children.length) {
-        var p = $('<p><br/></p>')[0];
-        $node.append( p );
-        range.createFromNode(p.firstChild).select();
-    }
-    return res;
-};
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-/* fix ie and re-range to don't break snippet*/
-
-var initial_data = {};
-function reRangeSelectKey (event) {
-    initial_data.range = null;
-    if (event.shiftKey && event.keyCode >= 37 && event.keyCode <= 40 && !$(event.target).is("input, textarea, select")) {
-        var r = range.create();
-        if (r) {
-            var rng = r.reRange(event.keyCode <= 38);
-            if (r !== rng) {
-                rng.select();
-            }
-        }
-    }
-}
-function reRangeSelect (event, dx, dy) {
-    var r = range.create();
-    if (!r || r.isCollapsed()) return;
-
-    // check if the user move the caret on up or down
-    var data = r.reRange(dy < 0 || (dy === 0 && dx < 0));
-
-    if (data.sc !== r.sc || data.so !== r.so || data.ec !== r.ec || data.eo !== r.eo) {
-        setTimeout(function () {
-            data.select();
-            $(data.sc.parentNode).closest('.note-popover');
-        },0);
-    }
-
-    $(data.sc).closest('.o_editable').data('range', r);
-    return r;
-}
-function summernote_mouseup (event) {
-    if ($(event.target).closest("#website-top-navbar, .note-popover").length) {
-        return;
-    }
-    // don't rerange if simple click
-    if (initial_data.event) {
-        var dx = event.clientX - (event.shiftKey ? initial_data.rect.left : initial_data.event.clientX);
-        var dy = event.clientY - (event.shiftKey ? initial_data.rect.top : initial_data.event.clientY);
-        if (10 < Math.pow(dx, 2)+Math.pow(dy, 2)) {
-            reRangeSelect(event, dx, dy);
-        }
-    }
-
-    if (!$(event.target).closest(".o_editable").length) {
-        return;
-    }
-    if (!initial_data.range || !event.shiftKey) {
-        setTimeout(function () {
-            initial_data.range = range.create();
-        },0);
-    }
-}
-var remember_selection;
-function summernote_mousedown (event) {
-    history.splitNext();
-
-    var $editable = $(event.target).closest(".o_editable, .note-editor");
-    
-    if (!!document.documentMode) {
-        summernote_ie_fix(event, function (node) { return node.tagName === "DIV" || node.tagName === "IMG" || (node.dataset && node.dataset.oeModel); });
-    } else if (last_div && event.target !== last_div) {
-        if (last_div.tagName === "A") {
-            summernote_ie_fix(event, function (node) { return node.dataset && node.dataset.oeModel; });
-        } else if ($editable.length) {
-            if (summernote_ie_fix(event, function (node) { return node.tagName === "A"; })) {
-                r = range.create();
-                r.select();
-            }
-        }
-    }
-
-    // remember_selection when click on non editable area
-    var r = range.create();
-    if ($(r ? dom.node(r.sc) : event.srcElement || event.target).closest('#website-top-navbar, #oe_main_menu_navbar, .note-popover, .note-toolbar, .modal').length) {
-        if (!$(event.target).is('input, select, label, button, a')) {
-            if (!remember_selection && $editable[0]) {
-                remember_selection = range.create(dom.firstChild($editable[0]), 0);
-            }
-            try {
-                remember_selection.select();
-            } catch (e) {
-                console.warn(e);
-            }
-        }
-    } else if (r && $(dom.node(r.sc)).closest('.o_editable, .note-editable').length) {
-        remember_selection = r;
-    }
-
-    initial_data.event = event;
-
-    // keep selection when click with shift
-    if (event.shiftKey && $editable.length) {
-        if (initial_data.range) {
-            initial_data.range.select();
-        }
-        var rect = r && r.getClientRects();
-        initial_data.rect = rect && rect.length ? rect[0] : { top: 0, left: 0 };
-    }
-}
-
-var last_div;
-var last_div_change;
-var last_editable;
-function summernote_ie_fix (event, pred) {
-    var editable;
-    var div;
-    var node = event.target;
-    while(node.parentNode) {
-        if (!div && pred(node)) {
-            div = node;
-        }
-        if(last_div !== node && (node.getAttribute('contentEditable')==='false' || node.className && (node.className.indexOf('o_not_editable') !== -1))) {
-            break;
-        }
-        if (node.className && node.className.indexOf('o_editable') !== -1) {
-            if (!div) {
-                div = node;
-            }
-            editable = node;
-            break;
-        }
-        node = node.parentNode;
-    }
-
-    if (!editable) {
-        $(last_div_change).removeAttr("contentEditable").removeProp("contentEditable");
-        $(last_editable).attr("contentEditable", "true").prop("contentEditable", "true");
-        last_div_change = null;
-        last_editable = null;
-        return;
-    }
-
-    if (div === last_div) {
-        return;
-    }
-
-    last_div = div;
-
-    $(last_div_change).removeAttr("contentEditable").removeProp("contentEditable");
-
-    if (last_editable !== editable) {
-        if ($(editable).is("[contentEditable='true']")) {
-           $(editable).removeAttr("contentEditable").removeProp("contentEditable");
-            last_editable = editable;
-        } else {
-            last_editable = null;
-        }
-    }
-    if (!$(div).attr("contentEditable") && !$(div).is("[data-oe-type='many2one'], [data-oe-type='contact']")) {
-        $(div).attr("contentEditable", "true").prop("contentEditable", "true");
-        last_div_change = div;
-    } else {
-        last_div_change = null;
-    }
-    return editable !== div ? div : null;
-}
-
-var fn_attach = eventHandler.attach;
-eventHandler.attach = function (oLayoutInfo, options) {
-    fn_attach.call(this, oLayoutInfo, options);
-    oLayoutInfo.editor.on('dragstart', 'img', function (e) { e.preventDefault(); });
-    $(document).on('mousedown', summernote_mousedown);
-    $(document).on('mouseup', summernote_mouseup);
-    oLayoutInfo.editor.off('click').on('click', function (e) {e.preventDefault();}); // if the content editable is a link
-    oLayoutInfo.editor.on('dblclick', 'img, .media_iframe_video, span.fa, i.fa, span.fa', function (event) {
-        if (!$(event.target).closest(".note-toolbar").length) { // prevent icon edition of top bar for default summernote
-            new MediaDialog(oLayoutInfo.editor, event.target).appendTo(document.body);
-        }
-    });
-    $(document).on("keyup", reRangeSelectKey);
-    
-    var clone_data = false;
-    var $node = oLayoutInfo.editor;
-    if ($node.data('oe-model')) {
-        $node.on('content_changed', function () {
-
-        var $nodes = $('[data-oe-model]')
-            .filter(function () { return this != $node[0];})
-            .filter('[data-oe-model="'+$node.data('oe-model')+'"]')
-            .filter('[data-oe-id="'+$node.data('oe-id')+'"]')
-            .filter('[data-oe-field="'+$node.data('oe-field')+'"]');
-        if ($node.data('oe-type')) $nodes = $nodes.filter('[data-oe-type="'+$node.data('oe-type')+'"]');
-        if ($node.data('oe-expression')) $nodes = $nodes.filter('[data-oe-expression="'+$node.data('oe-expression')+'"]');
-        if ($node.data('oe-xpath')) $nodes = $nodes.filter('[data-oe-xpath="'+$node.data('oe-xpath')+'"]');
-        if ($node.data('oe-contact-options')) $nodes = $nodes.filter('[data-oe-contact-options="'+$node.data('oe-contact-options')+'"]');
-
-        var nodes = $node.get();
-
-        if ($node.data('oe-type') === "many2one") {
-            $nodes = $nodes.add($('[data-oe-model]')
-                .filter(function () { return this != $node[0] && nodes.indexOf(this) === -1; })
-                .filter('[data-oe-many2one-model="'+$node.data('oe-many2one-model')+'"]')
-                .filter('[data-oe-many2one-id="'+$node.data('oe-many2one-id')+'"]')
-                .filter('[data-oe-type="many2one"]'));
-
-            $nodes = $nodes.add($('[data-oe-model]')
-                .filter(function () { return this != $node[0] && nodes.indexOf(this) === -1; })
-                .filter('[data-oe-model="'+$node.data('oe-many2one-model')+'"]')
-                .filter('[data-oe-id="'+$node.data('oe-many2one-id')+'"]')
-                .filter('[data-oe-field="name"]'));
-        }
-
-            if (!clone_data) {
-                clone_data = true;
-                $nodes.html(this.innerHTML);
-                clone_data = false;
-            }
-        });
-    }
-};
-var fn_dettach = eventHandler.dettach;
-eventHandler.dettach = function (oLayoutInfo, options) {
-    fn_dettach.call(this, oLayoutInfo, options);
-    oLayoutInfo.editor.off("dragstart");
-    $(document).off('mousedown', summernote_mousedown);
-    $(document).off('mouseup', summernote_mouseup);
-    oLayoutInfo.editor.off("dblclick");
-    $(document).off("keyup", reRangeSelectKey);
-};
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-/* Translation for odoo */
-
-$.summernote.lang.odoo = {
-    font: {
-      bold: _t('Bold'),
-      italic: _t('Italic'),
-      underline: _t('Underline'),
-      strikethrough: _t('Strikethrough'),
-      subscript: _t('Subscript'),
-      superscript: _t('Superscript'),
-      clear: _t('Remove Font Style'),
-      height: _t('Line Height'),
-      name: _t('Font Family'),
-      size: _t('Font Size')
-    },
-    image: {
-      image: _t('Picture'),
-      insert: _t('Insert Image'),
-      resizeFull: _t('Resize Full'),
-      resizeHalf: _t('Resize Half'),
-      resizeQuarter: _t('Resize Quarter'),
-      floatLeft: _t('Float Left'),
-      floatRight: _t('Float Right'),
-      floatNone: _t('Float None'),
-      dragImageHere: _t('Drag an image here'),
-      selectFromFiles: _t('Select from files'),
-      url: _t('Image URL'),
-      remove: _t('Remove Image')
-    },
-    link: {
-      link: _t('Link'),
-      insert: _t('Insert Link'),
-      unlink: _t('Unlink'),
-      edit: _t('Edit'),
-      textToDisplay: _t('Text to display'),
-      url: _t('To what URL should this link go?'),
-      openInNewWindow: _t('Open in new window')
-    },
-    video: {
-      video: _t('Video'),
-      videoLink: _t('Video Link'),
-      insert: _t('Insert Video'),
-      url: _t('Video URL?'),
-      providers: _t('(YouTube, Vimeo, Vine, Instagram, DailyMotion or Youku)')
-    },
-    table: {
-      table: _t('Table')
-    },
-    hr: {
-      insert: _t('Insert Horizontal Rule')
-    },
-    style: {
-      style: _t('Style'),
-      normal: _t('Normal'),
-      blockquote: _t('Quote'),
-      pre: _t('Code'),
-      h1: _t('Header 1'),
-      h2: _t('Header 2'),
-      h3: _t('Header 3'),
-      h4: _t('Header 4'),
-      h5: _t('Header 5'),
-      h6: _t('Header 6')
-    },
-    lists: {
-      unordered: _t('Unordered list'),
-      ordered: _t('Ordered list')
-    },
-    options: {
-      help: _t('Help'),
-      fullscreen: _t('Full Screen'),
-      codeview: _t('Code View')
-    },
-    paragraph: {
-      paragraph: _t('Paragraph'),
-      outdent: _t('Outdent'),
-      indent: _t('Indent'),
-      left: _t('Align left'),
-      center: _t('Align center'),
-      right: _t('Align right'),
-      justify: _t('Justify full')
-    },
-    color: {
-      recent: _t('Recent Color'),
-      more: _t('More Color'),
-      background: _t('Background Color'),
-      foreground: _t('Foreground Color'),
-      transparent: _t('Transparent'),
-      setTransparent: _t('Set transparent'),
-      reset: _t('Reset'),
-      resetToDefault: _t('Reset to default')
-    },
-    shortcut: {
-      shortcuts: _t('Keyboard shortcuts'),
-      close: _t('Close'),
-      textFormatting: _t('Text formatting'),
-      action: _t('Action'),
-      paragraphFormatting: _t('Paragraph formatting'),
-      documentStyle: _t('Document Style')
-    },
-    history: {
-      undo: _t('Undo'),
-      redo: _t('Redo')
-    }
-};
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-/* Change History to have a global History for all summernote instances */
-
-var History = function History ($editable) {
-    var aUndo = [];
-    var pos = 0;
-
-    this.makeSnap = function () {
-        var rng = range.create(),
-            elEditable = dom.ancestor(rng && rng.commonAncestor(), dom.isEditable) || $('.o_editable:first')[0];
-        return {
-            editable: elEditable,
-            contents: elEditable.innerHTML,
-            bookmark: rng && rng.bookmark(elEditable),
-            scrollTop: $(elEditable).scrollTop()
-        };
-    };
-
-    this.applySnap = function (oSnap) {
-        var $editable = $(oSnap.editable);
-
-        if (!!document.documentMode) {
-            $editable.removeAttr("contentEditable").removeProp("contentEditable");
-        }
-
-        $editable.html(oSnap.contents).scrollTop(oSnap.scrollTop);
-        $(".oe_overlay").remove();
-        $(".note-control-selection").hide();
-        
-        $editable.trigger("content_changed");
-
-        if (!oSnap.bookmark) {
-            return;
-        }
-
-        try {
-            var r = range.createFromBookmark(oSnap.editable, oSnap.bookmark);
-            r.select();
-        } catch(e) {
-            console.error(e);
-            return;
-        }
-
-        $(document).trigger("click");
-        $(".o_editable *").filter(function () {
-            var $el = $(this);
-            if($el.data('snippet-editor')) {
-                $el.removeData();
-            }
-        });
-
-        setTimeout(function () {
-            var target = dom.isBR(r.sc) ? r.sc.parentNode : dom.node(r.sc);
-            if (!target) {
-                return;
-            }
-            var evt = document.createEvent("MouseEvents");
-            evt.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, target);
-            target.dispatchEvent(evt);
-
-            var other_evt = document.createEvent("MouseEvents");
-            other_evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, target);
-            target.dispatchEvent(other_evt);
-        },0);
-    };
-
-    this.undo = function () {
-        if (!pos) { return; }
-        last = null;
-        if (!aUndo[pos]) aUndo[pos] = this.makeSnap();
-        if (aUndo[pos-1].jump) pos--;
-        this.applySnap(aUndo[--pos]);
-    };
-    this.hasUndo = function () {
-        return pos > 0;
-    };
-
-    this.redo = function () {
-        if (aUndo.length <= pos+1) { return; }
-        if (aUndo[pos].jump) pos++;
-        this.applySnap(aUndo[++pos]);
-    };
-    this.hasRedo = function () {
-        return aUndo.length > pos+1;
-    };
-
-    this.popUndo = function () {
-        pos--;
-        aUndo.pop();
-    };
-
-    var last;
-    this.recordUndo = function ($editable, event, internal_history) {
-        if (!internal_history) {
-            if (!event || !last || !aUndo[pos-1] || aUndo[pos-1].editable !== $editable[0]) { // don't trigger change for all keypress
-                $(".o_editable.note-editable").trigger("content_changed");
-            }
-        }
-        if (event) {
-            if (last && aUndo[pos-1] && aUndo[pos-1].editable !== $editable[0]) {
-                // => make a snap when the user change editable zone (because: don't make snap for each keydown)
-                aUndo.splice(pos, aUndo.length);
-                var prev = aUndo[pos-1];
-                aUndo[pos] = {
-                    editable: prev.editable,
-                    contents: $(prev.editable).html(),
-                    bookmark: prev.bookmark,
-                    scrollTop: prev.scrollTop,
-                    jump: true
-                };
-                pos++;
-            }
-            else if (event === last) return;
-        }
-        last = event;
-        aUndo.splice(pos, aUndo.length);
-        aUndo[pos] = this.makeSnap($editable);
-        pos++;
-    };
-
-    this.splitNext = function () {
-        last = false;
-    };
-};
-var history = new History();
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-// add focusIn to jQuery to allow to move caret into a div of a contentEditable area
-
-$.fn.extend({
-    focusIn: function () {
-        if (this.length) {
-            range.create(dom.firstChild(this[0]), 0).select();
-        }
-        return this;
-    },
-    selectContent: function () {
-        if (this.length) {
-            var next = dom.lastChild(this[0]);
-            range.create(dom.firstChild(this[0]), 0, next, next.textContent.length).select();
-        }
-        return this;
-    },
-    activateBlock: function () {
-        var target = snippet_editor.snippet.globalSelector.closest($(this))[0] || (dom.isBR(this) ? this.parentNode : dom.node(this));
-        var evt = document.createEvent("MouseEvents");
-        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, target);
-        target.dispatchEvent(evt);
-        return this;
-    }
-});
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-function change_default_bootstrap_animation_to_edit() {
-    var fn_carousel = $.fn.carousel;
-    $.fn.carousel = function () {
-        var res = fn_carousel.apply(this, arguments);
-        // off bootstrap keydown event to remove event.preventDefault()
-        // and allow to change cursor position
-        $(this).off('keydown.bs.carousel');
-        return res;
-    };
-}
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-website.no_editor = !!$(document.documentElement).data('editable-no-editor');
-
-website.add_template_file('/website/static/src/xml/website.editor.xml');
-website.dom_ready.done(function () {
-    website.ready().then(init_editor);
-
-    $(document).on('click', 'a.js_link2post', function (ev) {
-        ev.preventDefault();
-        website.form(this.pathname, 'POST');
-    });
-
-    $(document).on('click', '.note-editable', function (ev) {
-        ev.preventDefault();
-    });
-
-    $(document).on('submit', '.note-editable form .btn', function (ev) {
-        // Disable form submition in editable mode
-        ev.preventDefault();
-    });
-
-    $(document).on('hide.bs.dropdown', '.dropdown', function (ev) {
-        // Prevent dropdown closing when a contenteditable children is focused
-        if (ev.originalEvent
-                && $(ev.target).has(ev.originalEvent.target).length
-                && $(ev.originalEvent.target).is('[contenteditable]')) {
-            ev.preventDefault();
-        }
-    });
-});
-
-
-/* ----- TOP EDITOR BAR FOR ADMIN ---- */
-var EditorBar = Widget.extend({
-    template: 'website.editorbar',
+/**
+ * Object who contains all method and bind for the top bar, the template is create server side.
+ */
+website.TopBar.include({
     events: {
-        'click button[data-action=save]': 'save',
-        'click a[data-action=cancel]': 'cancel',
+        'click [data-action="edit"]': 'edit',
     },
-    start: function() {
+    start: function () {
         var self = this;
-        this.saving_mutex = new utils.Mutex();
-
-        this.$buttons = {
-            edit: this.$el.parents().find('button[data-action=edit]'),
-            save: this.$('button[data-action=save]'),
-            cancel: this.$('button[data-action=cancel]'),
-        };
-
-        this.$('#website-top-edit').hide();
-        this.$('#website-top-view').show();
-
-        var $edit_button = this.$buttons.edit
-                .prop('disabled', website.no_editor);
-        if (website.no_editor) {
-            var help_text = $(document.documentElement).data('editable-no-editor');
-            $edit_button.parent()
-                // help must be set on form above button because it does
-                // not appear on disabled button
-                .attr('title', help_text);
-        }
-
-        $('.dropdown-toggle').dropdown();
-
-        this.$buttons.edit.click(function(ev) {
-            self.edit();
-        });
-
-        this.rte = new RTE(this);
-        this.rte.on('change', this, this.proxy('rte_changed'));
-        this.rte.on('rte:ready', this, function () {
-            self.trigger('rte:ready');
-        });
-
-        this.rte.appendTo(this.$('#website-top-edit .nav.js_editor_placeholder'));
-        return this._super.apply(this, arguments);
-    },
-    edit: function (no_editor) {
-        this.$buttons.edit.prop('disabled', true);
-        this.$('#website-top-view').hide();
-        this.$el.show();
-        this.$('#website-top-edit').show();
-        
-        if (!no_editor) {
-            this.rte.start_edition();
-            this.trigger('rte:called');
-        }
-
-        var flag = false;
-        window.onbeforeunload = function(event) {
-            if ($('.o_editable.o_dirty').length && !flag) {
-                flag = true;
-                setTimeout(function () {flag=false;},0);
-                return _t('This document is not saved!');
+        $("#wrapwrap").on('click', '.o_editable, [data-oe-model]', function (event) {
+            var $this = $(event.srcElement);
+            var tag = $this[0] && $this[0].tagName.toLowerCase();
+            if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
+                self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
             }
-        };
-    },
-    rte_changed: function () {
-        this.$buttons.save.prop('disabled', false);
-    },
-    _save: function () {
-        var self = this;
-
-        var saved = {}; // list of allready saved views and data
-
-        var defs = $('.o_editable')
-            .filter('.o_dirty')
-            .removeAttr('contentEditable')
-            .removeClass('o_dirty o_editable oe_carlos_danger o_is_inline_editable')
-            .map(function () {
-                var $el = $(this);
-
-                // remove multi edition
-                var key =  $el.data('oe-model')+":"+$el.data('oe-id')+":"+$el.data('oe-field')+":"+$el.data('oe-type')+":"+$el.data('oe-expression');
-                if (saved[key]) return true;
-                saved[key] = true;
-
-                // 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)
-                        .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('o_dirty oe_carlos_danger');
-                            $el.addClass(id);
-                            return $.Deferred().reject({
-                                id: id,
-                                error: response.data,
-                            });
-                        });
-                });
-            }).get();
-        return $.when.apply(null, defs).then(function () {
-            window.onbeforeunload = null;
-            website.reload();
-        }, function (failed) {
-            // If there were errors, re-enable edition
-            self.rte.start_edition(true);
-            // jquery's deferred being a pain in the ass
-            if (!_.isArray(failed)) { failed = [failed]; }
-
-            _(failed).each(function (failure) {
-                var html = failure.error.exception_type === "except_osv";
-                if (html) {
-                    var msg = $("<div/>").text(failure.error.message).html();
-                    var data = msg.substring(3,msg.length-2).split(/', u'/);
-                    failure.error.message = '<b>' + data[0] + '</b>' + dom.blank + data[1];
-                }
-                $(root).find('.' + failure.id)
-                    .removeClass(failure.id)
-                    .popover({
-                        html: html,
-                        trigger: 'hover',
-                        content: failure.error.message,
-                        placement: 'auto top',
-                    })
-                    // Force-show popovers so users will notice them.
-                    .popover('show');
-            });
-        });
-    },
-    save: function () {
-        return this._save().then(function () {
-            website.reload();
-        });
-    },
-    /**
-     * Saves an RTE content, which always corresponds to a view section (?).
-     */
-    save_without_reload: function () {
-        return this._save();
-    },
-    saveElement: function ($el) {
-        var markup = $el.prop('outerHTML');
-        return ajax.jsonRpc('/web/dataset/call', 'call', {
-            model: 'ir.ui.view',
-            method: 'save',
-            args: [$el.data('oe-id'), markup,
-                   $el.data('oe-xpath') || null,
-                   website.get_context()],
-        });
-    },
-    cancel: function () {
-        new $.Deferred(function (d) {
-            var $dialog = $(core.qweb.render('website.editor.discard')).appendTo(document.body);
-            $dialog.on('click', '.btn-danger', function () {
-                d.resolve();
-            }).on('hidden.bs.modal', function () {
-                d.reject();
-            });
-            d.always(function () {
-                $dialog.remove();
-            });
-            $dialog.modal('show');
-        }).then(function () {
-            window.onbeforeunload = null;
-            website.reload();
         });
+
+        $("#wrapwrap").find("[data-oe-model] .oe_structure.oe_empty, [data-oe-model].oe_structure.oe_empty, [data-oe-type=html]:empty")
+            .addClass("oe_empty")
+            .attr("data-oe-placeholder", _t("Press The Top-Left Edit Button"));
+
+        if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang') === "en_US") {
+            this.$el.hide();
+        }
+
+        return this._super();
     },
+    edit: function () {
+        this.$('button[data-action=edit]').prop('disabled', true);
+        this.$el.hide();
+        editor.editor_bar = new editor.Class(this);
+        editor.editor_bar.prependTo(document.body);
+    }
 });
 
-var EditorBarCustomize = Widget.extend({
+/* ----- Customize Template ---- */
+
+website.TopBarCustomize = Widget.extend({
     events: {
         'mousedown a.dropdown-toggle': 'load_menu',
         'click ul a[data-view-id]': 'do_customize',
@@ -1183,349 +93,29 @@ var EditorBarCustomize = Widget.extend({
             args: [],
             kwargs: {
                 ids: [parseInt(view_id, 10)],
-                context: website.get_context()
+                context: base.get_context()
             }
         }).then( function() {
             window.location.reload();
         });
     },
 });
-
-$(document).ready(function() {
-    var editorBarCustomize = new EditorBarCustomize();
-    editorBarCustomize.setElement($('li[id=customize-menu]'));
-    editorBarCustomize.start();
-});
-
-/* ----- RICH TEXT EDITOR ---- */
-
-var RTE = Widget.extend({
-    init: function (EditorBar) {
-        this.EditorBar = EditorBar;
-        $('.inline-media-link').remove();
-        this._super.apply(this, arguments);
-
-        computeFonts();
-    },
-    /**
-     * Add a record undo to history
-     * @param {DOM} target where the dom is changed is editable zone
-     */
-    historyRecordUndo: function ($target, internal_history) {
-        var rng = range.create();
-        var $editable = $($target || (rng && rng.sc)).closest(".o_editable");
-        if ($editable.length) {
-            rng = $editable.data('range') || rng;
-        }
-        if (!rng && $target.length) {
-            rng = range.create($target.closest("*")[0],0);
-        }
-        if (rng) {
-            try {
-                rng.select();
-            } catch (e) {
-                console.error(e);
-            }
-        }
-        $target = $(rng.sc);
-        $target.mousedown();
-        this.history.recordUndo($target, null, internal_history);
-        $target.mousedown();
-    },
-    /**
-     * 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;
-
-        change_default_bootstrap_animation_to_edit();
-
-        this.history = history;
-
-        // handler for cancel editor
-        $(document).on('keydown', function (event) {
-            if (event.keyCode === 27 && !$('.modal-content:visible').length) {
-                setTimeout(function () {
-                    $('#website-top-navbar [data-action="cancel"]').click();
-                    var $modal = $('.modal-content > .modal-body').parents(".modal:first");
-                    $modal.off('keyup.dismiss.bs.modal');
-                    setTimeout(function () {
-                        $modal.on('keyup.dismiss.bs.modal', function () {
-                            $(this).modal('hide');
-                        });
-                    },500);
-                },0);
-            }
-        });
-
-        // activate editor
-        var $last;
-        $(document).on('mousedown', function (event) {
-            var $target = $(event.target);
-            var $editable = $target.closest('.o_editable');
-
-            if (!$editable.size()) {
-                return;
-            }
-
-            if ($last && (!$editable.size() || $last[0] != $editable[0])) {
-                var $destroy = $last;
-                setTimeout(function () {$destroy.destroy();},150); // setTimeout to remove flickering when change to editable zone (re-create an editor)
-                $last = null;
-            }
-            if ($editable.size() && (!$last || $last[0] != $editable[0]) &&
-                    ($target.closest('[contenteditable]').attr('contenteditable') || "").toLowerCase() !== 'false') {
-                $editable.summernote(self._config());
-                $editable.data('NoteHistory', self.history);
-                $editable.data('rte', self);
-                $last = $editable;
-
-                // firefox & IE fix
-                try {
-                    document.execCommand('enableObjectResizing', false, false);
-                    document.execCommand('enableInlineTableEditing', false, false);
-                    document.execCommand( '2D-position', false, false);
-                } catch (e) {}
-                document.body.addEventListener('resizestart', function (evt) {evt.preventDefault(); return false;});
-                document.body.addEventListener('movestart', function (evt) {evt.preventDefault(); return false;});
-                document.body.addEventListener('dragstart', function (evt) {evt.preventDefault(); return false;});
-
-                if (!range.create()) {
-                    range.create($editable[0],0).select();
-                }
-
-                $target.trigger('mousedown'); // for activate selection on picture
-                setTimeout(function () {
-                    self.historyRecordUndo($editable, true);
-                },0);
-            }
-        });
-
-        $('.o_not_editable').attr("contentEditable", false);
-
-        $('#wrapwrap [data-oe-model]')
-            .not('.o_not_editable')
-            .filter(function () {
-                return !$(this).closest('.o_not_editable').length;
-            })
-            .not('link, script')
-            .not('[data-oe-readonly]')
-            .not('img[data-oe-field="arch"], br[data-oe-field="arch"], input[data-oe-field="arch"]')
-            .not('.oe_snippet_editor')
-            .addClass('o_editable');
-
-        $('.o_editable').each(function () {
-            var node = this;
-            var $node = $(node);
-
-            // add class to display inline-block for empty t-field
-            if(window.getComputedStyle(node).display === "inline" && $node.data('oe-type') !== "image") {
-                $node.addClass('o_is_inline_editable');
-            }
-
-            // start element observation
-            $(node).one('content_changed', function () {
-                $node.addClass('o_dirty');
-            });
-            $(node).on('content_changed', function () {
-                self.trigger('change');
-            });
-        });
-
-        $(document).trigger('mousedown');
-
-        if (!restart) {
-            $('#wrapwrap, .o_editable').on('click', '*', function (event) {
-                event.preventDefault();
-            });
-
-            $('body').addClass("editor_enable");
-
-            $(document)
-                .tooltip({
-                    selector: '[data-oe-readonly]',
-                    container: 'body',
-                    trigger: 'hover',
-                    delay: { "show": 1000, "hide": 100 },
-                    placement: 'bottom',
-                    title: _t("Readonly field")
-                })
-                .on('click', function () {
-                    $(this).tooltip('hide');
-                });
-
-            self.trigger('rte:ready');
-        }
-    },
-
-    _config: function () {
-        return {
-            airMode : true,
-            focus: false,
-            airPopover: [
-                ['style', ['style']],
-                ['font', ['bold', 'italic', 'underline', 'clear']],
-                ['fontsize', ['fontsize']],
-                ['color', ['color']],
-                ['para', ['ul', 'ol', 'paragraph']],
-                ['table', ['table']],
-                ['insert', ['link', 'picture']],
-                ['history', ['undo', 'redo']],
-            ],
-            oninit: function() {
-            },
-            styleWithSpan: false,
-            inlinemedia : ['p'],
-            lang: "odoo"
-        };
+website.TopBar.include({
+    start: function () {
+        this.customize_menu = new website.TopBarCustomize();
+        var def = this.customize_menu.attachTo($('#customize-menu'));
+        return $.when(this._super(), def);
     }
 });
 
 /* ----- EDITOR: LINK & MEDIA ---- */
 
-var Dialog = Widget.extend({
-    events: {
-        'hidden.bs.modal': 'destroy',
-        'click button.save': 'save',
-        'click button[data-dismiss="modal"]': 'cancel',
-    },
-    init: function () {
-        this._super();
-    },
-    start: function () {
-        var sup = this._super();
-        this.$el.modal({backdrop: 'static'});
-        this.$('input:first').focus();
-        return sup;
-    },
-    save: function () {
-        this.close();
-        this.trigger("saved");
-    },
-    cancel: function () {
-        this.trigger("cancel");
-    },
-    close: function () {
-        this.$el.modal('hide');
-        },
-        destroy: function () {
-            this.$el.modal('hide').remove();
-            if($(".modal.in").length>0){
-                $('body').addClass('modal-open');
-            }
-    },
-});
-
-var LinkDialog = Dialog.extend({
-    template: 'website.editor.dialog.link',
-    events: _.extend({}, Dialog.prototype.events, {
-        'change :input.url-source': 'changed',
-        'keyup :input.url': 'onkeyup',
-        'keyup :input': 'preview',
-        'click button.remove': 'remove_link',
-        'change input#link-text': function (e) {
-            this.text = $(e.target).val();
-        },
-        'change .link-style': function (e) {
-            this.preview();
-        },
-    }),
-    init: function (editable, linkInfo) {
-        this._super(editable, linkInfo);
-        this.editable = editable;
-        this.data = linkInfo || {};
-
-        this.data.className = "";
-        if (this.data.range) {
-            this.data.iniClassName = $(this.data.range.sc).filter("a").attr("class") || "";
-            this.data.className = this.data.iniClassName.replace(/(^|\s+)btn(-[a-z0-9_-]*)?/gi, ' ');
-
-            var is_link = this.data.range.isOnAnchor();
-            var r = this.data.range;
-
-            var sc = r.sc;
-            var so = r.so;
-            var ec = r.ec;
-            var eo = r.eo;
-
-            var nodes;
-            if (!is_link) {
-                if (sc.tagName) {
-                    sc = dom.firstChild(so ? sc.childNodes[so] : sc);
-                    so = 0;
-                } else if (so !== sc.textContent.length) {
-                    if (sc === ec) {
-                        ec = sc = sc.splitText(so);
-                        eo -= so;
-                    } else {
-                        sc = sc.splitText(so);
-                    }
-                    so = 0;
-                }
-                if (ec.tagName) {
-                    ec = dom.lastChild(eo ? ec.childNodes[eo-1] : ec);
-                    eo = ec.textContent.length;
-                } else if (eo !== ec.textContent.length) {
-                    ec.splitText(eo);
-                }
-                
-                nodes = dom.listBetween(sc, ec);
-
-                // browsers can't target a picture or void node
-                if (dom.isVoid(sc) || dom.isImg(sc)) {
-                  so = dom.listPrev(sc).length-1;
-                  sc = sc.parentNode;
-                }
-                if (dom.isBR(ec)) {
-                  eo = dom.listPrev(ec).length-1;
-                  ec = ec.parentNode;
-                } else if (dom.isVoid(ec) || dom.isImg(sc)) {
-                  eo = dom.listPrev(ec).length;
-                  ec = ec.parentNode;
-                }
-
-                this.data.range = range.create(sc, so, ec, eo);
-                this.data.range.select();
-            } else {
-                nodes = dom.ancestor(sc, dom.isAnchor).childNodes;
-            }
-
-            if (dom.isImg(sc) && nodes.indexOf(sc) === -1) {
-                nodes.push(sc);
-            }
-            if (nodes.length > 1 || dom.ancestor(nodes[0], dom.isImg)) {
-                var text = "";
-                this.data.images = [];
-                for (var i=0; i<nodes.length; i++) {
-                    if (dom.ancestor(nodes[i], dom.isImg)) {
-                        this.data.images.push(dom.ancestor(nodes[i], dom.isImg));
-                        text += '[IMG]';
-                    } else if (!is_link && i===0) {
-                        text += nodes[i].textContent.slice(so, Infinity);
-                    } else if (!is_link && i===nodes.length-1) {
-                        text += nodes[i].textContent.slice(0, eo);
-                    } else {
-                        text += nodes[i].textContent;
-                    }
-                }
-                this.data.text = text;
-            }
-        }
-
-        this.data.text = this.data.text.replace(/[ \t\r\n]+/g, ' ');
-
-        // Store last-performed request to be able to cancel/abort it.
-        this.page_exists_req = null;
-        this.search_pages_req = null;
-        this.bind_data();
-    },
-    start: function () {
+widget.LinkDialog.include({
+    bind_data: function () {
         var self = this;
+        var href = this.data.url;
         var last;
+        
         this.$('#link-page').select2({
             minimumInputLength: 1,
             placeholder: _t("New or existing page"),
@@ -1555,37 +145,24 @@ var LinkDialog = Dialog.extend({
                 });
             },
         });
-        return this._super().then(this.proxy('bind_data'));
+
+        if (href) {
+            this.page_exists(href).then(function (exist) {
+                if (exist) {
+                    self.$('#link-page').select2('data', {'id': href, 'text': href}).change();
+                } else {
+                    self.$('input.url').val(href).change();
+                    self.$('input.window-new').closest("div").show();
+                }
+            });
+        }
+        return this._super();
     },
-    get_data: function (test) {
-        var def = new $.Deferred(),
-            $e = this.$('.active input.url-source').filter(':input'),
-            val = $e.val(),
-            label = this.$('#link-text').val() || val;
-
-        if (label && this.data.images) {
-            for(var i=0; i<this.data.images.length; i++) {
-                label = label.replace(/</, "&lt;").replace(/>/, "&gt;").replace(/\[IMG\]/, this.data.images[i].outerHTML);
-            }
-        }
-
-        if (!test && (!val || !$e[0].checkValidity())) {
-            // FIXME: error message
-            $e.closest('.form-group').addClass('has-error');
-            $e.focus();
-            def.reject();
-        }
-
-        var style = this.$("input[name='link-style-type']:checked").val() || '';
-        var size = this.$("input[name='link-style-size']:checked").val() || '';
-        var classes = (this.data.className || "") + (style && style.length ? " btn " : "") + style + " " + size;
-        var isNewWindow = this.$('input.window-new').prop('checked');
-
-        if ($e.hasClass('email-address') && $e.val().indexOf("@") !== -1) {
-            def.resolve(val.indexOf("mailto:") === 0 ? val : 'mailto:' + val, isNewWindow, label, classes);
-        } else if ($e.val() && $e.val().length && $e.hasClass('page')) {
+    get_data_buy_url: function (def, $e, isNewWindow, label, classes) {
+        var val = $e.val();
+        if (val && val.length && $e.hasClass('page')) {
             var data = $e.select2('data');
-            if (test || !data.create) {
+            if (!data.create) {
                 def.resolve(data.id, isNewWindow, label || data.text, classes);
             } else {
                 // Create the page, get the URL back
@@ -1598,76 +175,12 @@ var LinkDialog = Dialog.extend({
         } else {
             def.resolve(val, isNewWindow, label, classes);
         }
-        return def;
-    },
-    save: function () {
-        var self = this;
-        var _super = this._super.bind(this);
-        return this.get_data()
-            .then(function (url, new_window, label, classes) {
-                self.data.url = url;
-                self.data.newWindow = new_window;
-                self.data.text = label;
-                self.data.className = classes.replace(/\s+/gi, ' ').replace(/^\s+|\s+$/gi, '');
-
-                self.trigger("save", self.data);
-            }).then(_super);
-    },
-    bind_data: function () {
-        var self = this;
-        var href = this.data.url;
-        var new_window = this.data.isNewWindow;
-        var text = this.data.text;
-        var classes = this.data.iniClassName;
-
-        this.$('input#link-text').val(text);
-        this.$('input.window-new').prop('checked', new_window);
-
-        if (classes) {
-            this.$('input[value!=""]').each(function () {
-                var $option = $(this);
-                if (classes.indexOf($option.val()) !== -1) {
-                    $option.attr("checked", "checked");
-                }
-            });
-        }
-
-        var match, $control;
-        if (href && (match = /mailto:(.+)/.exec(href))) {
-            this.$('input.email-address').val(match[1]).change();
-        }
-        if (href && !$control) {
-            this.page_exists(href).then(function (exist) {
-                if (exist) {
-                    self.$('#link-page').select2('data', {'id': href, 'text': href});
-                } else {
-                    self.$('input.url').val(href).change();
-                    self.$('input.window-new').closest("div").show();
-                }
-            });
-        }
-
-        this.page_exists(href).then(function (exist) {
-            if (exist) {
-                self.$('#link-page').select2('data', {'id': href, 'text': href});
-            } else {
-                self.$('input.url').val(href).change();
-                self.$('input.window-new').closest("div").show();
-            }
-        });
-
-        this.preview();
     },
     changed: function (e) {
-        var $e = $(e.target);
-        this.$('.url-source').filter(':input').not($e).val('')
+        this.$('.url-source').filter(':input').not($(e.target)).val('')
                 .filter(function () { return !!$(this).data('select2'); })
                 .select2('data', null);
-        $e.closest('.list-group-item')
-            .addClass('active')
-            .siblings().removeClass('active')
-            .addBack().removeClass('has-error');
-        this.preview();
+        this._super(e);
     },
     call: function (method, args, kwargs) {
         var self = this;
@@ -1684,859 +197,15 @@ var LinkDialog = Dialog.extend({
     },
     page_exists: function (term) {
         return this.call('page_exists', [null, term], {
-            context: website.get_context(),
+            context: base.get_context(),
         });
     },
     fetch_pages: function (term) {
         return this.call('search_pages', [null, term], {
             limit: 9,
-            context: website.get_context(),
-        });
-    },
-    onkeyup: function (e) {
-        var $e = $(e.target);
-        var is_link = ($e.val()||'').length && $e.val().indexOf("@") === -1;
-        this.$('input.window-new').closest("div").toggle(is_link);
-        this.preview();
-    },
-    preview: function () {
-        var $preview = this.$("#link-preview");
-        this.get_data(true).then(function (url, new_window, label, classes) {
-            $preview.attr("target", new_window ? '_blank' : "")
-                .attr("href", url && url.length ? url : "#")
-                .html((label && label.length ? label : url))
-                .attr("class", classes.replace(/pull-\w+/, ''));
-        });
-    }
-});
-
-/**
- * alt widget. Lets users change a alt & title on a media
- */
-var alt = Dialog.extend({
-    template: 'website.editor.dialog.alt',
-    init: function ($editable, media) {
-        this.$editable = $editable;
-        this.media = media;
-        this.alt = ($(this.media).attr('alt') || "").replace(/&quot;/g, '"');
-        this.title = ($(this.media).attr('title') || "").replace(/&quot;/g, '"');
-        return this._super();
-    },
-    save: function () {
-        var self = this;
-        range.createFromNode(self.media).select();
-        this.$editable.data('NoteHistory').recordUndo();
-        var alt = this.$('#alt').val();
-        var title = this.$('#title').val();
-        $(this.media).attr('alt', alt ? alt.replace(/"/g, "&quot;") : null).attr('title', title ? title.replace(/"/g, "&quot;") : null);
-        setTimeout(function () {
-            click_event(self.media, "mouseup");
-        },0);
-        return this._super();
-    },
-});
-
-var click_event = function(el, type) {
-    var evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
-    el.dispatchEvent(evt);
-};
-
-/**
- * MediaDialog widget. Lets users change a media, including uploading a
- * new image, font awsome or video and can change a media into an other
- * media
- *
- * options: select_images: allow the selection of more of one image
- */
-var MediaDialog = Dialog.extend({
-    template: 'website.editor.dialog.media',
-    events : _.extend({}, Dialog.prototype.events, {
-        'input input#icon-search': 'search',
-    }),
-    init: function ($editable, media, options) {
-        this._super();
-        if ($editable) {
-            this.$editable = $editable;
-            this.rte = this.$editable.rte || this.$editable.data('rte');
-        }
-        this.options = options || {};
-        this.old_media = media;
-        this.media = media;
-        this.isNewMedia = !media;
-        this.range = range.create();
-    },
-    start: function () {
-        var self = this;
-
-        this.only_images = this.options.only_images || this.options.select_images || (this.media && $(this.media).parent().data("oe-field") === "image");
-        if (this.only_images) {
-            this.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
-        }
-
-        if (this.media) {
-            if (this.media.nodeName === "IMG") {
-                this.$('[href="#editor-media-image"]').tab('show');
-            } else if (this.media.className.match(/(^|\s)media_iframe_video($|\s)/)) {
-                this.$('[href="#editor-media-video"]').tab('show');
-            }  else if (this.media.parentNode.className.match(/(^|\s)media_iframe_video($|\s)/)) {
-                this.media = this.media.parentNode;
-                this.$('[href="#editor-media-video"]').tab('show');
-            } else if (this.media.className.match(/(^|\s)fa($|\s)/)) {
-                this.$('[href="#editor-media-icon"]').tab('show');
-            }
-        }
-
-        this.imageDialog = new ImageDialog(this, this.media, this.options);
-        this.imageDialog.appendTo(this.$("#editor-media-image"));
-        this.iconDialog = new FontIconsDialog(this, this.media, this.options);
-        this.iconDialog.appendTo(this.$("#editor-media-icon"));
-        this.videoDialog = new VideoDialog(this, this.media, this.options);
-        this.videoDialog.appendTo(this.$("#editor-media-video"));
-
-        this.active = this.imageDialog;
-
-        $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
-            if ($(event.target).is('[href="#editor-media-image"]')) {
-                self.active = self.imageDialog;
-                self.$('li.search, li.previous, li.next').removeClass("hidden");
-            } else if ($(event.target).is('[href="#editor-media-icon"]')) {
-                self.active = self.iconDialog;
-                self.$('li.search, li.previous, li.next').removeClass("hidden");
-                self.$('.nav-tabs li.previous, .nav-tabs li.next').addClass("hidden");
-            } else if ($(event.target).is('[href="#editor-media-video"]')) {
-                self.active = self.videoDialog;
-                self.$('.nav-tabs li.search').addClass("hidden");
-            }
-        });
-
-        return this._super();
-    },
-    save: function () {
-        if (this.options.select_images) {
-            this.trigger("saved", this.active.save());
-            this.close();
-            return;
-        }
-        if(this.rte) {
-            this.range.select();
-            this.rte.historyRecordUndo(this.media);
-        }
-
-        var self = this;
-        if (self.media) {
-            this.media.innerHTML = "";
-            if (this.active !== this.imageDialog) {
-                this.imageDialog.clear();
-            }
-            if (this.active !== this.iconDialog) {
-                this.iconDialog.clear();
-            }
-            if (this.active !== this.videoDialog) {
-                this.videoDialog.clear();
-            }
-        } else {
-            this.media = document.createElement("img");
-            this.range.insertNode(this.media, true);
-            this.active.media = this.media;
-        }
-        this.active.save();
-
-        if (this.active.add_class) {
-            $(this.media).addClass(this.active.add_class);
-        }
-
-        $(document.body).trigger("media-saved", [self.active.media, self.old_media]);
-        self.trigger("saved", [self.active.media, self.old_media]);
-        setTimeout(function () {
-                if (!self.active.media.parentNode) {
-                    return;
-                }
-            range.createFromNode(self.active.media).select();
-            click_event(self.active.media, "mousedown");
-            if (!this.only_images) {
-                setTimeout(function () {
-                    if($(self.active.media).parent().data("oe-field") !== "image") {
-                        click_event(self.active.media, "click");
-                    }
-                    click_event(self.active.media, "mouseup");
-                },0);
-            }
-        },0);
-
-        this.close();
-    },
-    searchTimer: null,
-    search: function () {
-        var self = this;
-        var needle = this.$("input#icon-search").val();
-        clearTimeout(this.searchTimer);
-        this.searchTimer = setTimeout(function () {
-            self.active.search(needle || "");
-        },250);
-    }
-});
-
-/**
- * ImageDialog widget. Lets users change an image, including uploading a
- * new image in OpenERP or selecting the image style (if supported by
- * the caller).
- */
-var IMAGES_PER_ROW = 6;
-var IMAGES_ROWS = 2;
-var ImageDialog = Widget.extend({
-    template: 'website.editor.dialog.image',
-    events: _.extend({}, Dialog.prototype.events, {
-        'change .url-source': function (e) {
-            this.changed($(e.target));
-        },
-        'click button.filepicker': function () {
-            var filepicker = this.$('input[type=file]');
-            if (!_.isEmpty(filepicker)){
-                filepicker[0].click();
-            }
-        },
-        'click .js_disable_optimization': function () {
-            this.$('input[name="disable_optimization"]').val('1');
-            var filepicker = this.$('button.filepicker');
-            if (!_.isEmpty(filepicker)){
-                filepicker[0].click();
-            }
-        },
-        'change input[type=file]': 'file_selection',
-        'submit form': 'form_submit',
-        'change input.url': "change_input",
-        'keyup input.url': "change_input",
-        //'change select.image-style': 'preview_image',
-        'click .existing-attachments img': 'select_existing',
-        'click .existing-attachment-remove': 'try_remove',
-    }),
-    init: function (parent, media, options) {
-        this._super();
-        this.options = options || {};
-        this.parent = parent;
-        this.media = media;
-        this.images = [];
-        this.page = 0;
-    },
-    start: function () {
-        this.$preview = this.$('.preview-container').detach();
-        var self = this;
-        var res = this._super();
-        var o = { url: null, alt: null };
-        // avoid typos, prevent addition of new properties to the object
-        Object.preventExtensions(o);
-
-        if ($(this.media).is("img")) {
-            o.url = this.media.getAttribute('src');
-        } else {
-            this.add_class = "img-responsive pull-left";
-        }
-        this.parent.$(".pager > li").click(function (e) {
-            e.preventDefault();
-            var $target = $(e.currentTarget);
-            if ($target.hasClass('disabled')) {
-                return;
-            }
-            self.page += $target.hasClass('previous') ? -1 : 1;
-            self.display_attachments();
-        });
-        this.set_image(o.url, o.alt);
-        this.fetch_existing();
-        return res;
-    },
-    push: function (url, alt, id) {
-        if (this.options.select_images) {
-            var img = _.select(this.images, function (v) { return v.url == url;});
-            if (img.length) {
-                this.images.splice(this.images.indexOf(img[0]),1);
-                return;
-            }
-        } else {
-            this.images = [];
-        }
-        this.images.push({'url': url, 'alt': alt, 'id': id});
-    },
-    save: function () {
-        if (this.options.select_images) {
-            this.parent.trigger("save", this.images);
-            return this.images;
-        }
-        this.parent.trigger("save", this.media);
-
-        var img = this.images[0] || {
-                'url': this.$(".existing-attachments img:first").attr('src'),
-                'alt': this.$(".existing-attachments img:first").attr('alt')
-            };
-
-        if (this.media.tagName !== "IMG") {
-            var media = document.createElement('img');
-            $(this.media).replaceWith(media);
-            this.media = media;
-        }
-
-        $(this.media).attr('src', img.url).attr('alt', img.alt);
-
-        var style = this.style;
-        this.media.setAttribute('src', img.url);
-        if (style) { this.media.addClass(style); }
-
-        return this.media;
-    },
-    clear: function () {
-        this.media.className = this.media.className.replace(/(^|\s)(img(\s|$)|img-[^\s]*)/g, ' ');
-    },
-    cancel: function () {
-        this.trigger('cancel');
-    },
-    change_input: function (e) {
-        var $input = $(e.target);
-        var $button = $input.parent().find("button");
-        if ($input.val() === "") {
-            $button.addClass("btn-default").removeClass("btn-primary");
-        } else {
-            $button.removeClass("btn-default").addClass("btn-primary");
-        }
-    },
-    search: function (needle) {
-        var self = this;
-        this.fetch_existing(needle).then(function () {
-            self.selected_existing();
-        });
-    },
-    set_image: function (url, alt) {
-        var self = this;
-        if (url) {
-            this.push(url, alt);
-        }
-        this.$('input.url').val('');
-        this.fetch_existing().then(function () {
-            self.selected_existing();
-        });
-    },
-    form_submit: function (event) {
-        var self = this;
-        var $form = this.$('form[action="/website/attach"]');
-        if (!$form.find('input[name="upload"]').val().length) {
-            $form.find('input[name="url"]').val();
-            if (this.selected_existing().size()) {
-                event.preventDefault();
-                return false;
-            }
-        }
-        $form.find('.well > div').hide().last().after('<span class="fa fa-spin fa-3x fa-refresh"/>');
-
-        var callback = _.uniqueId('func_');
-        this.$('input[name=func]').val(callback);
-        window[callback] = function (attachments, error) {
-            delete window[callback];
-            $form.find('.well > span').remove();
-            $form.find('.well > div').show();
-            if (error || !attachments.length) {
-                self.file_selected(null, error || !attachments.length);
-            }
-            for (var i=0; i<attachments.length; i++) {
-                self.file_selected(attachments[i]['website_url'], error);
-            }
-        };
-    },
-    file_selection: function () {
-        this.$el.addClass('nosave');
-        this.$('form').removeClass('has-error').find('.help-block').empty();
-        this.$('button.filepicker').removeClass('btn-danger btn-success');
-        this.$('form').submit();
-    },
-    file_selected: function(url, error) {
-        var $button = this.$('button.filepicker');
-        if (!error) {
-            $button.addClass('btn-success');
-        } else {
-            url = null;
-            this.$('form').addClass('has-error')
-                .find('.help-block').text(error);
-            $button.addClass('btn-danger');
-        }
-        this.set_image(url, null, error);
-
-        if (!this.options.select_images) {
-            // auto save and close popup
-            this.parent.save();
-        }
-    },
-    fetch_existing: function (needle) {
-        var domain = [['res_model', '=', 'ir.ui.view'], '|',
-                    ['mimetype', '=', false], ['mimetype', '=like', 'image/%']];
-        if (needle && needle.length) {
-            domain.push('|', ['datas_fname', 'ilike', needle], ['name', 'ilike', needle]);
-        }
-        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: 'ir.attachment',
-            method: 'search_read',
-            args: [],
-            kwargs: {
-                domain: domain,
-                fields: ['name', 'website_url'],
-                order: 'id desc',
-                context: website.get_context()
-            }
-        }).then(this.proxy('fetched_existing'));
-    },
-    fetched_existing: function (records) {
-        this.records = records;
-        this.display_attachments();
-    },
-    display_attachments: function () {
-        this.$('.help-block').empty();
-        var per_screen = IMAGES_PER_ROW * IMAGES_ROWS;
-
-        var from = this.page * per_screen;
-        var records = this.records;
-
-        // Create rows of 3 records
-        var rows = _(records).chain()
-            .slice(from, from + per_screen)
-            .groupBy(function (_, index) { return Math.floor(index / IMAGES_PER_ROW); })
-            .values()
-            .value();
-        this.$('.existing-attachments').replaceWith(
-            core.qweb.render(
-                'website.editor.dialog.image.existing.content', {rows: rows}));
-        this.parent.$('.pager')
-            .find('li.previous').toggleClass('disabled', (from === 0)).end()
-            .find('li.next').toggleClass('disabled', (from + per_screen >= records.length));
-
-        this.selected_existing();
-    },
-    select_existing: function (e) {
-        var $img = $(e.currentTarget);
-        this.push($img.attr('src'), $img.attr('alt'), $img.data('id'));
-        this.selected_existing();
-    },
-    selected_existing: function () {
-        var self = this;
-        this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
-        var $select = this.$('.existing-attachment-cell img').filter(function () {
-            var $img = $(this);
-            var url = $img.attr("src");
-            return !!_.select(self.images, function (v) {
-                if (v.url === url) {
-                    if (!v.id) {
-                        v.id = $img.data('id');
-                        v.alt = $img.attr('alt');
-                    }
-                    return true;
-                }
-            }).length;
-        });
-        $select.parent().addClass("media_selected");
-        return $select;
-    },
-    try_remove: function (e) {
-        var $help_block = this.$('.help-block').empty();
-        var self = this;
-        var $a = $(e.target);
-        var id = parseInt($a.data('id'), 10);
-        var attachment = _.findWhere(this.records, {id: id});
-        var $both = $a.parent().children();
-
-        $both.css({borderWidth: "5px", borderColor: "#f00"});
-
-        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: 'ir.attachment',
-            method: 'try_remove',
-            args: [],
-            kwargs: {
-                ids: [id],
-                context: website.get_context()
-            }
-        }).then(function (prevented) {
-            if (_.isEmpty(prevented)) {
-                self.records = _.without(self.records, attachment);
-                self.display_attachments();
-                return;
-            }
-            $both.css({borderWidth: "", borderColor: ""});
-            $help_block.replaceWith(core.qweb.render(
-                'website.editor.dialog.image.existing.error', {
-                    views: prevented[id]
-                }
-            ));
+            context: base.get_context(),
         });
     },
 });
 
-
-var cacheCssSelectors = {};
-function getCssSelectors(filter) {
-    var css = [];
-    if (cacheCssSelectors[filter]) {
-        return cacheCssSelectors[filter];
-    }
-    var sheets = document.styleSheets;
-    for(var i = 0; i < sheets.length; i++) {
-        try {
-            var rules = sheets[i].rules || sheets[i].cssRules;
-        } catch(e) {     
-            continue;
-        }
-        if (rules) {
-            for(var r = 0; r < rules.length; r++) {
-                var selectorText = rules[r].selectorText;
-                if (selectorText) {
-                    var match = selectorText.match(filter);
-                    if (match) {
-                        css.push([match[1], rules[r].cssText.replace(/(^.*\{\s*)|(\s*\}\s*$)/g, '')]);
-                    }
-                }
-            }
-        }
-    }
-    return cacheCssSelectors[filter] = css;
-}
-
-function computeFonts() {
-    _.each(fontIcons, function (data) {
-        data.icons = _.map(getCssSelectors(data.parser), function (css) {
-            return css[0].slice(1, css[0].length).replace(/::?before$/, '');
-        });
-    });
-}
-
-/* list of font icons to load by editor. The icons are displayed in the media editor and
- * identified like font and image (can be colored, spinned, resized with fa classes).
- * To add font, push a new object {base, parser}
- * - base: class who appear on all fonts (eg: fa fa-refresh)
- * - parser: regular expression used to select all font in css style sheets
- */
-var fontIcons = [{'base': 'fa', 'parser': /(?=^|\s)(\.fa-[0-9a-z_-]+::?before)/i}];
-
-
-/**
- * FontIconsDialog widget. Lets users change a font awsome, suport all
- * font awsome loaded in the css files.
- */
-var FontIconsDialog = Widget.extend({
-    template: 'website.editor.dialog.font-icons',
-    events : _.extend({}, Dialog.prototype.events, {
-        'click .font-icons-icon': function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            this.$('#fa-icon').val(e.target.getAttribute('data-id'));
-            $(".font-icons-icon").removeClass("font-icons-selected");
-            $(event.target).addClass("font-icons-selected");
-        },
-    }),
-
-    // extract list of font (like awsome) from the cheatsheet.
-    renderElement: function() {
-        this.iconsParser = fontIcons;
-        this.icons = _.flatten(_.map(fontIcons, function (data) {
-                return data.icons;
-            }));
-        this._super();
-    },
-
-    init: function (parent, media) {
-        this._super();
-        this.parent = parent;
-        this.media = media;
-    },
-    start: function () {
-        return this._super().then(this.proxy('load_data'));
-    },
-    search: function (needle) {
-        var iconsParser = this.iconsParser;
-        if (needle) {
-            var parser = [];
-            var fontIcon;
-
-            for (var k=0; k<fontIcons.length; k++) {
-                fontIcon = fontIcons[k];
-                var icons = _(fontIcon.icons).filter(function (icon) {
-                    return icon.indexOf(needle) !== -1;
-                });
-                if (icons.length) {
-                    parser.push({
-                        base: fontIcon.base,
-                        icons: icons
-                    });
-                }
-            }
-            iconsParser = parser;
-        }
-        this.$('div.font-icons-icons').html(
-            core.qweb.render('website.editor.dialog.font-icons.icons', {'iconsParser': iconsParser}));
-    },
-    /**
-     * Removes existing FontAwesome classes on the bound element, and sets
-     * all the new ones if necessary.
-     */
-    save: function () {
-        var self = this;
-        this.parent.trigger("save", this.media);
-        var icons = this.icons;
-        var style = this.media.attributes.style ? this.media.attributes.style.value : '';
-        var classes = (this.media.className||"").split(/\s+/);
-        var non_fa_classes = _.reject(classes, function (cls) {
-            return self.getFont(cls);
-        });
-        var final_classes = non_fa_classes.concat(this.get_fa_classes());
-        if (this.media.tagName !== "SPAN") {
-            var media = document.createElement('span');
-            $(this.media).replaceWith(media);
-            this.media = media;
-            style = style.replace(/\s*width:[^;]+/, '');
-        }
-        $(this.media).attr("class", _.compact(final_classes).join(' ')).attr("style", style);
-    },
-    /**
-     * return the data font object (with base, parser and icons) or null
-     */
-    getFont: function (classNames) {
-        if (!(classNames instanceof Array)) {
-            classNames = (classNames||"").split(/\s+/);
-        }
-        var fontIcon, className;
-        for (var i=0; i<classNames.length; i++) {
-            className = classNames[i];
-            for (var k=0; k<fontIcons.length; k++) {
-                fontIcon = fontIcons[k];
-                if (className === fontIcon.base || fontIcon.icons.indexOf(className) !== -1) {
-                    return {
-                        'base': fontIcon.base,
-                        'parser': fontIcon.parser,
-                        'icons': fontIcon.icons,
-                        'font': className
-                    };
-                }
-            }
-        }
-        return null;
-    },
-
-    /**
-     * Looks up the various FontAwesome classes on the bound element and
-     * sets the corresponding template/form elements to the right state.
-     * If multiple classes of the same category are present on an element
-     * (e.g. fa-lg and fa-3x) the last one occurring will be selected,
-     * which may not match the visual look of the element.
-     */
-    load_data: function () {
-        var classes = (this.media&&this.media.className||"").split(/\s+/);
-        for (var i = 0; i < classes.length; i++) {
-            var cls = classes[i];
-            switch(cls) {
-                case 'fa-1x':case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
-                    // size classes
-                    this.$('#fa-size').val(cls);
-                    continue;
-                case 'fa-spin':
-                case 'fa-rotate-90':case 'fa-rotate-180':case 'fa-rotate-270':
-                case 'fa-flip-horizontal':case 'fa-rotate-vertical':
-                    this.$('#fa-rotation').val(cls);
-                    continue;
-                case 'fa-fw':
-                    continue;
-                case 'fa-border':
-                    this.$('#fa-border').prop('checked', true);
-                    continue;
-                case '': continue;
-                default:
-                    $(".font-icons-icon").removeClass("font-icons-selected").filter("."+cls).addClass("font-icons-selected");
-                    for (var k=0; k<this.icons.length; k++) {
-                        if (this.icons.indexOf(cls) !== -1) {
-                            this.$('#fa-icon').val(cls);
-                            break;
-                        }
-                    }
-            }
-        }
-    },
-    /**
-     * Serializes the dialog to an array of FontAwesome classes. Includes
-     * the base ``fa``.
-     */
-    get_fa_classes: function () {
-        var font = this.getFont(this.$('#fa-icon').val());
-        return [
-            font ? font.base : 'fa',
-            font ? font.font : "",
-            this.$('#fa-size').val(),
-            this.$('#fa-rotation').val(),
-            this.$('#fa-border').prop('checked') ? 'fa-border' : ''
-        ];
-    },
-    clear: function () {
-        this.media.className = this.media.className.replace(/(^|\s)(fa(\s|$)|fa-[^\s]*)/g, ' ');
-    },
-});
-
-
-function createVideoNode(url) {
-    // video url patterns(youtube, instagram, vimeo, dailymotion, youku)
-    var ytRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
-    var ytMatch = url.match(ytRegExp);
-
-    var igRegExp = /\/\/instagram.com\/p\/(.[a-zA-Z0-9]*)/;
-    var igMatch = url.match(igRegExp);
-
-    var vRegExp = /\/\/vine.co\/v\/(.[a-zA-Z0-9]*)/;
-    var vMatch = url.match(vRegExp);
-
-    var vimRegExp = /\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/;
-    var vimMatch = url.match(vimRegExp);
-
-    var dmRegExp = /.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/;
-    var dmMatch = url.match(dmRegExp);
-
-    var youkuRegExp = /\/\/v\.youku\.com\/v_show\/id_(\w+)\.html/;
-    var youkuMatch = url.match(youkuRegExp);
-
-    var $video = $('<iframe>');
-    if (ytMatch && ytMatch[1].length === 11) {
-      var youtubeId = ytMatch[1];
-      $video = $('<iframe>')
-        .attr('src', '//www.youtube.com/embed/' + youtubeId)
-        .attr('width', '640').attr('height', '360');
-    } else if (igMatch && igMatch[0].length) {
-      $video = $('<iframe>')
-        .attr('src', igMatch[0] + '/embed/')
-        .attr('width', '612').attr('height', '710')
-        .attr('scrolling', 'no')
-        .attr('allowtransparency', 'true');
-    } else if (vMatch && vMatch[0].length) {
-      $video = $('<iframe>')
-        .attr('src', vMatch[0] + '/embed/simple')
-        .attr('width', '600').attr('height', '600')
-        .attr('class', 'vine-embed');
-    } else if (vimMatch && vimMatch[3].length) {
-      $video = $('<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen>')
-        .attr('src', '//player.vimeo.com/video/' + vimMatch[3])
-        .attr('width', '640').attr('height', '360');
-    } else if (dmMatch && dmMatch[2].length) {
-      $video = $('<iframe>')
-        .attr('src', '//www.dailymotion.com/embed/video/' + dmMatch[2])
-        .attr('width', '640').attr('height', '360');
-    } else if (youkuMatch && youkuMatch[1].length) {
-      $video = $('<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen>')
-        .attr('height', '498')
-        .attr('width', '510')
-        .attr('src', '//player.youku.com/embed/' + youkuMatch[1]);
-    } else {
-      // this is not a known video link. Now what, Cat? Now what?
-    }
-
-    $video.attr('frameborder', 0);
-
-    return $video;
-}
-
-/**
- * VideoDialog widget. Lets users change a video, support all summernote
- * video, and embled iframe
- */
-var VideoDialog = Widget.extend({
-    template: 'website.editor.dialog.video',
-    events : _.extend({}, Dialog.prototype.events, {
-        'click input#urlvideo ~ button': 'get_video',
-        'click input#embedvideo ~ button': 'get_embed_video',
-        'change input#urlvideo': 'change_input',
-        'keyup input#urlvideo': 'change_input',
-        'change input#embedvideo': 'change_input',
-        'keyup input#embedvideo': 'change_input'
-    }),
-    init: function (parent, media) {
-        this._super();
-        this.parent = parent;
-        this.media = media;
-    },
-    start: function () {
-        this.$preview = this.$('.preview-container').detach();
-        this.$iframe = this.$("iframe");
-        var $media = $(this.media);
-        if ($media.hasClass("media_iframe_video")) {
-            var src = $media.data('src');
-            this.$("input#urlvideo").val(src);
-            this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1);
-            this.get_video();
-        } else {
-            this.add_class = "pull-left";
-        }
-        return this._super();
-    },
-    change_input: function (e) {
-        var $input = $(e.target);
-        var $button = $input.parent().find("button");
-        if ($input.val() === "") {
-            $button.addClass("btn-default").removeClass("btn-primary");
-        } else {
-            $button.removeClass("btn-default").addClass("btn-primary");
-        }
-    },
-    get_embed_video: function (event) {
-        event.preventDefault();
-        var embedvideo = this.$("input#embedvideo").val().match(/src=["']?([^"']+)["' ]?/);
-        if (embedvideo) {
-            this.$("input#urlvideo").val(embedvideo[1]);
-            this.get_video(event);
-        }
-        return false;
-    },
-    get_video: function (event) {
-        if (event) event.preventDefault();
-        var $video = createVideoNode(this.$("input#urlvideo").val());
-        this.$iframe.replaceWith($video);
-        this.$iframe = $video;
-        return false;
-    },
-    save: function () {
-        this.parent.trigger("save", this.media);
-        var video_id = this.$("#video_id").val();
-        if (!video_id) {
-            this.$("button.btn-primary").click();
-            video_id = this.$("#video_id").val();
-        }
-        var video_type = this.$("#video_type").val();
-        var $iframe = $(
-            '<div class="media_iframe_video" data-src="'+this.$iframe.attr("src")+'">'+
-                '<div class="css_editable_mode_display">&nbsp;</div>'+
-                '<div class="media_iframe_video_size" contentEditable="false">&nbsp;</div>'+
-                '<iframe src="'+this.$iframe.attr("src")+'" frameborder="0" allowfullscreen="allowfullscreen" contentEditable="false"></iframe>'+
-            '</div>');
-        $(this.media).replaceWith($iframe);
-        this.media = $iframe[0];
-    },
-    clear: function () {
-        if (this.media.dataset.src) {
-            try {
-                delete this.media.dataset.src;
-            } catch(e) {
-                this.media.dataset.src = undefined;
-            }
-        }
-
-        this.media.className = this.media.className.replace(/(^|\s)media_iframe_video(\s|$)/g, ' ');
-    },
-});
-
-var editor_bar = new EditorBar();
-function init_editor() {
-    var $body = $(document.body);
-    editor_bar.prependTo($body).then(function () {
-        if (location.search.indexOf("enable_editor") >= 0) {
-            editor_bar.edit();
-        }
-    });
-};
-
-return {
-    EditorBar: EditorBar,
-    editor_bar: editor_bar,
-    LinkDialog: LinkDialog,
-    Dialog: Dialog,
-    MediaDialog: MediaDialog,
-    getCssSelectors: getCssSelectors,
-};
-
 });
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index a9f1f41d95c..f54648de024 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -3,10 +3,14 @@ odoo.define('website.website', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
+var Widget = require('web.Widget');
 var session = require('web.session');
+var base = require('web_editor.base');
 var Tour = require('web.Tour');
 
+var qweb = core.qweb;
 var _t = core._t;
+base.url_translations = '/website/translations';
 
 /* --- Set the browser into the dom for css selectors --- */
 var browser;
@@ -18,66 +22,24 @@ else if ($.browser.mozilla) browser = "mozilla";
 browser += ","+$.browser.version;
 if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) browser += ",mobile";
 document.documentElement.setAttribute('data-browser', browser);
-/* ---------------------------------------------------- */
-
-
-var translatable = !!$('html').data('translatable');
-var data = {
-    id: undefined,
-    session: undefined,
-};
 
 /* ----------------------------------------------------
    Helpers
-   ---------------------------------------------------- */ 
-function get_context(dict) {
+   ---------------------------------------------------- */
+
+var get_context = base.get_context;
+base.get_context = base.get_context = function (dict) {
     var html = document.documentElement;
     return _.extend({
-        lang: html.getAttribute('lang').replace('-', '_'),
-        website_id: html.getAttribute('data-website-id')|0
-    }, dict);
-}
-
-function parseQS(qs) {
-    var match,
-        params = {},
-        pl     = /\+/g,  // Regex for replacing addition symbol with a space
-        search = /([^&=]+)=?([^&]*)/g;
-
-    while ((match = search.exec(qs))) {
-        var name = decodeURIComponent(match[1].replace(pl, " "));
-        var value = decodeURIComponent(match[2].replace(pl, " "));
-        params[name] = value;
-    }
-    return params;
-}
-
-var _parsedSearch;
-function parseSearch() {
-    if (!_parsedSearch) {
-        _parsedSearch = parseQS(window.location.search.substring(1));
-    }
-    return _parsedSearch;
-}
-
-function parseHash() {
-    return parseQS(window.location.hash.substring(1));
-}
-
-function reload() {
-    location.hash = "scrollTop=" + window.document.body.scrollTop;
-    if (location.search.indexOf("enable_editor") > -1) {
-        window.location.href = window.location.href.replace(/enable_editor(=[^&]*)?/g, '');
-    } else {
-        window.location.reload();
-    }
-}
+        'website_id': html.getAttribute('data-website-id')|0
+    }, get_context(dict), dict);
+};
 
 /* ----------------------------------------------------
    Widgets
    ---------------------------------------------------- */ 
 
-function prompt(options, qweb) {
+var prompt = function (options, _qweb) {
     /**
      * A bootstrapped version of prompt() albeit asynchronous
      * This was built to quickly prompt the user with a single field.
@@ -111,8 +73,8 @@ function prompt(options, qweb) {
             text: options
         };
     }
-    if (_.isUndefined(qweb)) {
-        qweb = 'website.prompt';
+    if (_.isUndefined(_qweb)) {
+        _qweb = 'website.prompt';
     }
     options = _.extend({
         window_title: '',
@@ -127,7 +89,7 @@ function prompt(options, qweb) {
     options.field_name = options.field_name || options[type];
 
     var def = $.Deferred();
-    var dialog = $(core.qweb.render(qweb, options)).appendTo("body");
+    var dialog = $(qweb.render(_qweb, options)).appendTo("body");
     options.$dialog = dialog;
     var field = dialog.find(options.field_type).first();
     field.val(options['default']); // dict notation for IE<9
@@ -168,34 +130,34 @@ function prompt(options, qweb) {
         });
     }
     return def;
-}
+};
 
-function error(data, url) {
-    var $error = $(core.qweb.render('website.error_dialog', {
+var error = function(data, url) {
+    var $error = $(qweb.render('website.error_dialog', {
         'title': data.data ? data.data.arguments[0] : "",
         'message': data.data ? data.data.arguments[1] : data.statusText,
         'backend_url': url
     }));
     $error.appendTo("body");
     $error.modal('show');
-}
+};
 
-function form(url, method, params) {
-    var htmlform = document.createElement('form');
-    htmlform.setAttribute('action', url);
-    htmlform.setAttribute('method', method);
+var form = function (url, method, params) {
+    var form = document.createElement('form');
+    form.setAttribute('action', url);
+    form.setAttribute('method', method);
     _.each(params, function (v, k) {
         var param = document.createElement('input');
         param.setAttribute('type', 'hidden');
         param.setAttribute('name', k);
         param.setAttribute('value', v);
-        htmlform.appendChild(param);
+        form.appendChild(param);
     });
-    document.body.appendChild(htmlform);
-    htmlform.submit();
-}
+    document.body.appendChild(form);
+    form.submit();
+};
 
-function init_kanban($kanban) {
+var init_kanban = function ($kanban) {
     $('.js_kanban_col', $kanban).each(function () {
         var $col = $(this);
         var $pagination = $('.pagination', $col);
@@ -223,7 +185,7 @@ function init_kanban($kanban) {
             }
 
             var page = +$a.attr("href").split(",").pop().split('-')[1];
-            data.page = page;
+            data['page'] = page;
 
             $.post('/website/kanban', data, function (col) {
                 $col.find("> .thumbnail").remove();
@@ -250,43 +212,9 @@ function init_kanban($kanban) {
         });
 
     });
-}
+};
 
-/* ----------------------------------------------------
-   Async Ready and Template loading
-   ---------------------------------------------------- */ 
-var templates_def = $.Deferred().resolve();
-function add_template_file(template) {
-    var def = $.Deferred();
-    templates_def = templates_def.then(function() {
-        core.qweb.add_template(template, function(err) {
-            if (err) {
-                def.reject(err);
-            } else {
-                def.resolve();
-            }
-        });
-        return def;
-    });
-    return def;
-}
-
-add_template_file('/website/static/src/xml/website.xml');
-
-var dom_ready = $.Deferred();
-$(document).ready(function () {
-    dom_ready.resolve();
-    // fix for ie
-    if($.fn.placeholder) $('input, textarea').placeholder();
-    $(".oe_search_box").on('input', function() {
-        $(this).next('span').toggle(!!$(this).val());
-    });
-    $(".oe_search_clear").on('click', function() {
-        $(this).prev('input').val('').focus();
-        $(".oe_search_button").trigger("click");
-    });
-    $(".oe_search_clear").toggle(!!$('.oe_search_box').val());
-});
+ajax.loadXML('/website/static/src/xml/website.xml', qweb);
 
 /**
  * Execute a function if the dom contains at least one element matched
@@ -295,73 +223,38 @@ $(document).ready(function () {
  * @param {String} selector A jQuery selector used to match the element(s)
  * @param {Function} fn Callback to execute if at least one element has been matched
  */
-function if_dom_contains(selector, fn) {
-    dom_ready.then(function () {
+var if_dom_contains = function(selector, fn) {
+    base.dom_ready.then(function () {
         var elems = $(selector);
         if (elems.length) {
             fn(elems);
         }
     });
-}
+};
+
+/**
+ * Cancel the auto run of Tour (test) and launch the tour after tob bar all bind events
+ */
+ 
+Tour.autoRunning = false;
+base.ready().then(function () {
+    data.topBar = new TopBar();
+    data.topBar.attachTo($("#oe_main_menu_navbar"))
+        .then(function () {
+            setTimeout(Tour.running,0);
+        });
+});
 
-var all_ready = null;
 /**
  * Returns a deferred resolved when the templates are loaded
  * and the Widgets can be instanciated.
  */
-function ready() {
-    if (!all_ready) {
-        all_ready = dom_ready.then(function () {
-            return templates_def;
-        }).then(function () {
-            odoo.init();
-            
-            // display button if they are at least one editable zone in the page (check the branding)
-            if ($('[data-oe-model]').size()) {
-                $("#oe_editzone").show();
-            }
-
-            if ($('html').data('website-id')) {
-                data.id = $('html').data('website-id');
-                data.session = session;
-
-                return ajax.jsonRpc('/website/translations', 'call', {'lang': get_context().lang})
-                .then(function(trans) {
-                    _t.database.set_bundle(trans);});
-            }
-        }).then(function () {
-            var templates = core.qweb.templates;
-            var keys = _.keys(templates);
-            for (var i = 0; i < keys.length; i++){
-                treat_node(templates[keys[i]]);
-            }
-        }).promise();
-    }
-    return all_ready;
-}
-
-function treat_node(node){
-    if(node.nodeType === 3) {
-        if(node.nodeValue.match(/\S/)){
-                var text_value = $.trim(node.nodeValue);
-                var spaces = node.nodeValue.split(text_value);
-                node.nodeValue = spaces[0] + _t(text_value) + spaces[1];
-        }
-    }
-    else if(node.nodeType === 1 && node.hasChildNodes()) {
-        _.each(node.childNodes, function(subnode) {treat_node(subnode);});
-    }
-};
-
-
-function inject_tour() {
-    // if a tour is active inject tour js
-}
-
-dom_ready.then(function () {
+ 
+base.dom_ready.then(function () {
     /* ----- PUBLISHING STUFF ---- */
     $(document).on('click', '.js_publish_management .js_publish_btn', function () {
         var $data = $(this).parents(".js_publish_management:first");
+        var self=this;
         ajax.jsonRpc($data.data('controller') || '/website/publish', 'call', {'id': +$data.data('id'), 'object': $data.data('object')})
             .then(function (result) {
                 $data.toggleClass("css_unpublished css_published");
@@ -389,7 +282,7 @@ dom_ready.then(function () {
             // retrieve the hash before the redirect
             var redirect = {
                 lang: self.data('lang'),
-                url: self.attr('href'),
+                url: encodeURIComponent(self.attr('href').replace(/[&?]edit_translations[^&?]+/, '')),
                 hash: location.hash
             };
             location.href = _.str.sprintf("/website/lang/%(lang)s?r=%(url)s%(hash)s", redirect);
@@ -412,48 +305,41 @@ dom_ready.then(function () {
             window.document.body.scrollTop = +location.hash.match(/scrollTop=([0-9]+)/)[1];
         }
     },0);
-
-    /* ----- WEBSITE TOP BAR ---- */
-    var $collapse = $('#oe_applications ul.dropdown-menu').clone()
-            .attr("id", "oe_applications_collapse")
-            .attr("class", "nav navbar-nav navbar-left navbar-collapse collapse");
-    $('#oe_applications').before($collapse);
-    $collapse.wrap('<div class="visible-xs"/>');
-    $('[data-target="#oe_applications"]').attr("data-target", "#oe_applications_collapse");
-    });
-
-    Tour.autoRunning = false;
-    ready().then(function () {
-        setTimeout(Tour.running,0);
 });
 
-return {
-    translatable: translatable,
-    get_context: get_context,
-    parseQS: parseQS,
-    parseSearch: parseSearch,
-    parseHash: parseHash,
-    reload: reload,
+
+/**
+ * Object who contains all method and bind for the top bar, the template is create server side.
+ */
+
+var TopBar = Widget.extend({
+    start: function () {
+        var $collapse = this.$('#oe_applications ul.dropdown-menu').clone()
+                .attr("id", "oe_applications_collapse")
+                .attr("class", "nav navbar-nav navbar-left navbar-collapse collapse");
+        this.$('#oe_applications').before($collapse);
+        $collapse.wrap('<div class="visible-xs"/>');
+        this.$('[data-target="#oe_applications"]').attr("data-target", "#oe_applications_collapse");
+
+        return this._super();
+    }
+});
+
+
+var data = {
     prompt: prompt,
-    error: error,
     form: form,
-    init_kanban: init_kanban,
-    add_template_file: add_template_file,
-    dom_ready: dom_ready,
     if_dom_contains: if_dom_contains,
-    ready: ready,
-    inject_tour: inject_tour,
-
-    data: data,
+    TopBar: TopBar,
+    ready: function () {
+        console.warn("website.ready is deprecated: Please use require('web_editor.base').ready()");
+        return base.ready();
+    }
 };
+return data;
 
 });
 
-odoo.define('web.session', function (require) {
-"use strict";
-
-var Session = require('web.Session');
-
-return new Session(null, null, {modules: ['website']});
-
+$(function () {
+    odoo.init();
 });
diff --git a/addons/website/static/src/js/website.mobile.js b/addons/website/static/src/js/website.mobile.js
index 517dcdbbe68..d784ea3fafc 100644
--- a/addons/website/static/src/js/website.mobile.js
+++ b/addons/website/static/src/js/website.mobile.js
@@ -1,10 +1,13 @@
 odoo.define('website.mobile', function (require) {
 'use strict';
 
+var core = require('web.core');
+var ajax = require('web.ajax');
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
 var website = require('website.website');
 
-website.add_template_file('/website/static/src/xml/website.xml');
+var qweb = core.qweb;
 
 var MobilePreview = Widget.extend({
     template: 'website.mobile_preview',
@@ -24,10 +27,13 @@ var MobilePreview = Widget.extend({
     },
 });
 
-website.ready().done(function() {
-    $(document.body).on('click', 'a[data-action=show-mobile-preview]', function() {
-        new MobilePreview().appendTo($(document.body));
-    });
+website.TopBar.include({
+    start: function () {
+        this.$el.on('click', 'a[data-action=show-mobile-preview]', function() {
+            new MobilePreview().appendTo($(document.body));
+        });
+        return this._super();
+    }
 });
 
 });
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index 8ecd8e3fee2..a43d87c805d 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -1,14 +1,18 @@
 odoo.define('website.seo', function (require) {
 'use strict';
 
+var core = require('web.core');
+var ajax = require('web.ajax');
 var Class = require('web.Class');
 var mixins = require('web.mixins');
 var Model = require('web.Model');
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
 var website = require('website.website');
 
-website.add_template_file('/website/static/src/xml/website.seo.xml');
+var qweb = core.qweb;
 
+ajax.loadXML('/website/static/src/xml/website.seo.xml', qweb);
 
     // This replaces \b, because accents(e.g. à, é) are not seen as word boundaries.
     // Javascript \b is not unicode aware, and words beginning or ending by accents won't match \b
@@ -348,7 +352,7 @@ var Configurator = Widget.extend({
         $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 });
+        // self.imageList = new ImageList(self, { page: htmlPage });
         // if (htmlPage.images().length === 0) {
         //     $modal.find('.js_image_section').remove();
         // } else {
@@ -468,8 +472,7 @@ var Configurator = Widget.extend({
             def.resolve(null);
         } else {
             var fields = ['website_meta_title', 'website_meta_description', 'website_meta_keywords'];
-            var model = new Model(obj.model);
-            model.call('read', [[obj.id], fields, website.get_context()]).then(function (data) {
+            var model = new Model(obj.model).call('read', [[obj.id], fields, base.get_context()]).then(function (data) {
                 if (data.length) {
                     var meta = data[0];
                     meta.model = obj.model;
@@ -488,8 +491,7 @@ var Configurator = Widget.extend({
         if (!obj) {
             return $.Deferred().reject();
         } else {
-            var model = new Model(obj.model);
-            return model.call('write', [[obj.id], data, website.get_context()]);
+            return new Model(obj.model).call('write', [[obj.id], data, base.get_context()]);
         }
     },
     titleChanged: function () {
@@ -524,10 +526,13 @@ var Configurator = Widget.extend({
     },
 });
 
-website.ready().done(function() {
-    $(document.body).on('click', 'a[data-action=promote-current-page]', function() {
-        new Configurator(this).appendTo($(document.body));
-    });
+website.TopBar.include({
+    start: function () {
+        this.$el.on('click', 'a[data-action=promote-current-page]', function() {
+            new Configurator(this).appendTo($(document.body));
+        });
+        return this._super();
+    }
 });
 
 return {
diff --git a/addons/website/static/src/js/website.share.js b/addons/website/static/src/js/website.share.js
index 3f4e0cf17a3..daeeb757d93 100644
--- a/addons/website/static/src/js/website.share.js
+++ b/addons/website/static/src/js/website.share.js
@@ -1,13 +1,15 @@
 odoo.define('website.share', function (require) {
 "use strict";
 
+var ajax = require('web.ajax');
 var core = require('web.core');
 var Widget = require('web.Widget');
-var website = require('website.website');
+var base = require('web_editor.base');
 
+var _t = core._t;
 var qweb = core.qweb;
 
-website.add_template_file('/website/static/src/xml/website.share.xml');
+ajax.loadXML('/website/static/src/xml/website.share.xml', qweb);
 
 var SocialShare = Widget.extend({
     template: 'website.social_hover',
@@ -74,7 +76,7 @@ var SocialShare = Widget.extend({
 });
 
 // Initialize all social_share links when ready
-website.ready().done(function() {
+base.ready().done(function() {
     $('.oe_social_share').mouseenter(function() {
         new SocialShare($(this));
     });
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 0b1c7befaa1..8d9f095b2c3 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -3,11 +3,12 @@ odoo.define('website.snippets.animation', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
-var website = require('website.website');
+var base = require('web_editor.base');
+var animation = require('web_editor.snippets.animation');
 
-var readyAnimation = [];
+var qweb = core.qweb;
 
-var animationRegistry = Object.create(null);
+/*-------------------------------------------------------------------------*/
 
 function load_called_template () {
     var ids_or_xml_ids = _.uniq($("[data-oe-call]").map(function () {return $(this).data('oe-call');}).get());
@@ -25,79 +26,19 @@ function load_called_template () {
     }
 }
 
-function start_animation(editable_mode, $target) {
-    for (var k in animationRegistry) {
-        var Animation = animationRegistry[k];
-        var selector = "";
-        if (Animation.prototype.selector) {
-            if (selector !== "") selector += ", ";
-            selector += Animation.prototype.selector;
-        }
-        if ($target) {
-            if ($target.is(selector)) selector = $target;
-            else continue;
-        }
-
-        $(selector).each(function () {
-            var $snipped_id = $(this);
-            if (    !$snipped_id.parents("#oe_snippets").length &&
-                    !$snipped_id.parent("body").length &&
-                    !$snipped_id.data("snippet-view")) {
-                readyAnimation.push($snipped_id);
-                $snipped_id.data("snippet-view", new Animation($snipped_id, editable_mode));
-            } else if ($snipped_id.data("snippet-view")) {
-                $snipped_id.data("snippet-view").start(editable_mode);
-            }
-        });
-    }
-}
-
-function stop_animation() {
-    $(readyAnimation).each(function() {
-        var $snipped_id = $(this);
-        if ($snipped_id.data("snippet-view")) {
-            $snipped_id.data("snippet-view").stop();
-        }
-    });
-}
-
-$(document).ready(function () {
-    load_called_template(); // if asset is placed into head, move this call into $(document).ready
+/*-------------------------------------------------------------------------*/
 
+base.ready().then(function () {
+    load_called_template();
     if ($(".o_gallery:not(.oe_slideshow)").size()) {
         // load gallery modal template
-        website.add_template_file('/website/static/src/xml/website.gallery.xml');
+        ajax.loadXML('/website/static/src/xml/website.gallery.xml', qweb);
     }
-
-    start_animation();
 });
 
+/*-------------------------------------------------------------------------*/
 
-
-var Animation = core.Class.extend({
-    selector: false,
-    $: function () {
-        return this.$el.find.apply(this.$el, arguments);
-    },
-    init: function (dom, editable_mode) {
-        this.$el = this.$target = $(dom);
-        this.start(editable_mode);
-    },
-    /*
-    *  start
-    *  This method is called after init
-    */
-    start: function () {
-    },
-    /*
-    *  stop
-    *  This method is called to stop the animation (e.g.: when rte is launch)
-    */
-    stop: function () {
-    },
-});
-
-animationRegistry.slider = Animation.extend({
+animation.registry.slider = animation.Class.extend({
     selector: ".carousel",
     start: function () {
         this.$target.carousel();
@@ -108,7 +49,7 @@ animationRegistry.slider = Animation.extend({
     },
 });
 
-animationRegistry.parallax = Animation.extend({
+animation.registry.parallax = animation.Class.extend({
     selector: ".parallax",
     start: function () {
         var self = this;
@@ -161,7 +102,7 @@ animationRegistry.parallax = Animation.extend({
     }
 });
 
-animationRegistry.share = Animation.extend({
+animation.registry.share = animation.Class.extend({
     selector: ".oe_share",
     start: function () {
         var url = encodeURIComponent(window.location.href);
@@ -180,7 +121,7 @@ animationRegistry.share = Animation.extend({
     }
 });
 
-animationRegistry.media_video = Animation.extend({
+animation.registry.media_video = animation.Class.extend({
     selector: ".media_iframe_video",
     start: function () {
         if (!this.$target.has('.media_iframe_video_size')) {
@@ -191,9 +132,9 @@ animationRegistry.media_video = Animation.extend({
     },
 });
 
-animationRegistry.ul = Animation.extend({
+animation.registry.ul = animation.Class.extend({
     selector: "ul.o_ul_folded, ol.o_ul_folded",
-    start: function () {
+    start: function (editable_mode) {
         this.$('.o_ul_toggle_self').off('click').on('click', function (event) {
             $(this).toggleClass('o_open');
             $(this).closest('li').find('ul,ol').toggleClass('o_close');
@@ -214,12 +155,14 @@ Gallery Animation
 This ads a Modal window containing a slider when an image is clicked 
 inside a gallery 
 -------------------------------------------------------------------------*/
-animationRegistry.gallery = Animation.extend({
+animation.registry.gallery = animation.Class.extend({
     selector: ".o_gallery:not(.o_slideshow)",
     start: function() {
+        var self = this;
         this.$el.on("click", "img", this.click_handler);
     },
     click_handler : function(event) {
+        var self = this;
         var $cur = $(event.currentTarget);
         var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
         
@@ -247,14 +190,14 @@ animationRegistry.gallery = Animation.extend({
             idx = urls.indexOf($img.attr("src"));
 
             milliseconds = $cur.closest(".o_gallery").data("interval") || false;
-            params = {
+            var params = {
                 srcs : urls,
                 index: idx,
                 dim  : dimensions,
                 interval : milliseconds,
                 id: _.uniqueId("slideshow_")
             };
-            var $modal = $(core.qweb.render('website.gallery.slideshow.lightbox', params));
+            var $modal = $(qweb.render('website.gallery.slideshow.lightbox', params));
             $modal.modal({
                 keyboard : true,
                 backdrop : true
@@ -268,15 +211,15 @@ animationRegistry.gallery = Animation.extend({
             $modal.find(".modal-content, .modal-body.o_slideshow").css("height", "100%");
             $modal.appendTo(document.body);
 
-            this.carousel = new animationRegistry.gallery_slider($modal.find(".carousel").carousel());
+            this.carousel = new animation.registry.gallery_slider($modal.find(".carousel").carousel());
         }
     } // click_handler  
 });
-
-animationRegistry.gallery_slider = Animation.extend({
+animation.registry.gallery_slider = animation.Class.extend({
     selector: ".o_slideshow",
     start: function() {
         var $carousel = this.$target.is(".carousel") ? this.$target : this.$target.find(".carousel");
+        var self = this;
         var $indicator = $carousel.find('.carousel-indicators');
         var $lis = $indicator.find('li:not(.fa)');
         var $prev = $indicator.find('li.fa:first');
@@ -321,13 +264,4 @@ animationRegistry.gallery_slider = Animation.extend({
     }
 });
 
-return {
-    Animation: Animation,
-    readyAnimation: readyAnimation,
-    start_animation: start_animation,
-    stop_animation: stop_animation,
-    registry: animationRegistry,
-};
-
 });
-
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 3be81da11ce..86d0717d979 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1,1066 +1,19 @@
 odoo.define('website.snippets.editor', function (require) {
 'use strict';
 
-var ajax = require('web.ajax');
-var Class = require('web.Class');
-var core = require('web.core');
-var Widget = require('web.Widget');
-var editor = require('website.editor');
-
-var animation = require('website.snippets.animation');
-var website = require('website.website');
-
-var dummy = function () {};
-
-var options = {};
-
-var templateOptions = [];
-var globalSelector = {
-    closest: function () { return $(); },
-    all: function () { return $(); },
-    is: function () { return false; },
-};
-var selector = [];
-
-website.add_template_file('/website/static/src/xml/website.snippets.xml');
-
-editor.EditorBar.include({
-    start: function () {
-        var self = this;
-        $(document).on('click', '.o_editable', function (event) {
-            var $this = $(event.srcElement);
-            var tag = $this[0] && $this[0].tagName.toLowerCase();
-            if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
-                self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
-            }
-        });
-        return this._super();
-    },
-    edit: function () {
-        var self = this;
-        animation.stop_animation();
-        this.on('rte:ready', this, function () {
-            var $editable = $(".o_editable");
-            window.snippets = this.snippets = new BuildingBlock(this, $editable);
-            this.snippets.insertAfter(this.$el);
-            animation.start_animation(true);
-            $editable.find("*").off('mousedown mouseup click');
-            this.snippets.on("snippets:ready", this, function () {
-                self.trigger("snippets:ready");
-            });
-        });
-
-        return this._super.apply(this, arguments);
-    },
-    save: function () {
-        this.snippets.clean_for_save();
-        this._super();
-    },
-});
-
-/* ----- SNIPPET SELECTOR ---- */
-
-$.extend($.expr[':'],{
-    o_editable: function(node,i,m){
-        while (node) {
-            if (node.className) {
-                if (node.className.indexOf('o_not_editable')!==-1 ) {
-                    return false;
-                }
-                if (node.className.indexOf('o_editable')!==-1 ) {
-                    return true;
-                }
-            }
-            node = node.parentNode;
-        }
-        return false;
-    },
-    hasData: function(node,i,m){
-        return !!_.toArray(node.dataset).length;
-    },
-    data: function(node,i,m){
-        return $(node).data(m[3]);
-    }
-});
+var widget = require('web_editor.widget');
+var animation = require('web_editor.snippets.animation');
+var options = require('web_editor.snippets.options');
+var snippet_editor = require('web_editor.snippet.editor');
 
 
-var BuildingBlock = Widget.extend({
-    template: 'website.snippets',
-    activeSnippets: [],
-    init: function (parent, $editable) {
-        this.parent = parent;
-        this.$editable = $editable;
-
-        this._super.apply(this, arguments);
-        if(!$('#oe_manipulators').length){
-            $("<div id='oe_manipulators'></div>").appendTo('body');
-        }
-        this.$active_snipped_id = false;
-        this.snippets = [];
-    },
-    start: function() {
-        var self = this;
-        this.$snippet = $("#oe_snippets");
-
-        this.$el
-            .on("mouseenter", function () { self.show(); })
-            .on("mouseleave", function (event) { if (event.clientX>0 && event.clientY>0) self.hide(); });
-
-        $(window).resize(function () {
-            setTimeout('$(document).click()',0);
-        });
-
-        this.fetch_snippet_templates();
-        this.bind_snippet_click_editor();
-
-        $(document).on('click', '.dropdown-submenu a[tabindex]', function (e) {
-            e.preventDefault();
-        });
-
-        var _isNotBreakable = $.summernote.core.dom.isNotBreakable;
-        $.summernote.core.dom.isNotBreakable = function (node, sc, so, ec, eo) {
-            return _isNotBreakable(node, sc, so, ec, eo) || $(node).is('div') || globalSelector.is($(node));
-        };
-
-        $(window).on('resize', function () {
-            if (self.$active_snipped_id && self.$active_snipped_id.data("snippet-editor")) {
-                self.cover_target(self.$active_snipped_id.data("snippet-editor").$overlay, self.$active_snipped_id);
-            }
-        });
-
-        $(document).on('mousemove', function () {
-            if (self.$active_snipped_id && self.$active_snipped_id.data("snippet-editor")) {
-                self.$active_snipped_id.data("snippet-editor").$overlay.removeClass('o_keypress');
-            }
-        });
-        $(document).on('keydown', function (event) {
-            if (self.$active_snipped_id && self.$active_snipped_id.data("snippet-editor")) {
-                self.$active_snipped_id.data("snippet-editor").$overlay.addClass('o_keypress');
-            }
-            if ((event.metaKey || (event.ctrlKey && !event.altKey)) && event.shiftKey && event.keyCode >= 48 && event.keyCode <= 57) {
-                self.$snippet.find('.scroll:first > ul li:eq('+(event.keyCode-49)+') a').trigger("click");
-                self.show();
-                event.preventDefault();
-            }
-        });
-    },
-
+snippet_editor.Class.include({
     _get_snippet_url: function () {
         return '/website/snippets';
-    },
-    _add_check_selector : function (selector, no_check) {
-        var self = this;
-        selector = selector.split(/\s*,/).join(":not(.o_snippet_not_selectable), ") + ":not(.o_snippet_not_selectable)";
-
-        if (no_check) {
-            return {
-                closest: function ($from, parentNode) {
-                    return $from.closest(selector, parentNode);
-                },
-                all: function ($from) {
-                    return $from ? $from.find(selector) : $(selector);
-                },
-                is: function ($from) {
-                    return $from.is(selector);
-                }
-            };
-        } else {
-            selector = selector.split(/\s*,/).join(":o_editable, ") + ":o_editable";
-            return {
-                closest: function ($from, parentNode) {
-                    var parents = self.$editable.get();
-                    return $from.closest(selector, parentNode).filter(function () {
-                        var node = this;
-                        while (node.parentNode) {
-                            if (parents.indexOf(node)!==-1) {
-                                return true;
-                            }
-                            node = node.parentNode;
-                        }
-                        return false;
-                    });
-                },
-                all: function ($from) {
-                    return $from ? $from.find(selector) : self.$editable.parent().find(selector);
-                },
-                is: function ($from) {
-                    return $from.is(selector);
-                }
-            };
-        }
-    },
-
-    fetch_snippet_templates: function () {
-        var self = this;
-        var url = this._get_snippet_url();
-        if (!url || !url.length) {
-            this.$snippet.detach();
-            return;
-        }
-        return ajax.jsonRpc(url, 'call', {}).then(function (html) {
-            self.compute_snippet_templates(html);
-            self.trigger("snippets:ready");
-        });
-    },
-    compute_snippet_templates: function (html) {
-        var self = this;
-        var $html = $(html);
-        var $left_bar = this.$el.find("#o_left_bar");
-        var $ul = $html.siblings("ul");
-        var $scroll = $html.siblings("#o_scroll");
-
-        if (!$scroll.length) {
-            throw new Error("Wrong snippets xml definition");
-        }
-
-        // t-snippet
-        $html.find('[data-oe-type="snippet"][data-oe-name]').each(function () {
-            $('<div/>').insertAfter(this).append(this).attr('name', $(this).data('oe-name'));
-        });
-        // end
-
-        var selector = [];
-        var $styles = $html.find("[data-js], [data-selector]");
-        $styles.each(function () {
-            var $style = $(this);
-            var no_check = $style.data('no-check');
-            var option_id = $style.data('js');
-            var option = {
-                'option' : option_id,
-                'base_selector': $style.data('selector'),
-                'selector': self._add_check_selector($style.data('selector'), no_check),
-                '$el': $style,
-                'drop-near': $style.data('drop-near') && self._add_check_selector($style.data('drop-near'), no_check),
-                'drop-in': $style.data('drop-in') && self._add_check_selector($style.data('drop-in'), no_check),
-                'data': $style.data()
-            };
-            templateOptions.push(option);
-            selector.push(option.selector);
-        });
-        $styles.addClass("hidden");
-        _.extend(globalSelector, {
-            closest: function ($from) {
-                var $temp;
-                var $target;
-                var len = selector.length;
-                for (var i = 0; i<len; i++) {
-                    $temp = selector[i].closest($from, $target && $target[0]);
-                    if (!$target || $temp.length) {
-                        $target = $temp;
-                    }
-                }
-                return $target;
-            },
-            all: function ($from) {
-                var $target;
-                var len = selector.length;
-                for (var i = 0; i<len; i++) {
-                    if (!$target) $target = selector[i].all($from);
-                    else $target = $target.add(selector[i].all($from));
-                }
-                return $target;
-            },
-            is: function ($from) {
-                var len = selector.length;
-                for (var i = 0; i<len; i++) {
-                    if (selector[i].is($from)) {
-                        return true;
-                    }
-                }
-                return false;
-            },
-        });
-
-        // oe_snippet_body
-        self.$snippets = $scroll.find(".o_panel_body").children()
-            .addClass("oe_snippet")
-            .each(function () {
-                if (!$('.oe_snippet_thumbnail', this).size()) {
-                    var $div = $(
-                        '<div class="oe_snippet_thumbnail">'+
-                            '<div class="oe_snippet_thumbnail_img"/>'+
-                            '<span class="oe_snippet_thumbnail_title"></span>'+
-                        '</div>');
-                    $div.find('span').text($(this).attr("name"));
-                    $(this).prepend($div);
-
-                    // from t-snippet
-                    var thumbnail = $("[data-oe-thumbnail]", this).data("oe-thumbnail");
-                    if (thumbnail) {
-                        $div.find('.oe_snippet_thumbnail_img').css('background-image', 'url(' + thumbnail + ')');
-                    }
-                    // end
-                }
-                if (!$(this).data("selector")) {
-                    $("> *:not(.oe_snippet_thumbnail)", this).addClass('oe_snippet_body');
-                }
-            });
-
-        // select all default text to edit (if snippet default text)
-        self.$snippets.find('.oe_snippet_body, .oe_snippet_body *')
-            .contents()
-            .filter(function() {
-                return this.nodeType === 3 && this.textContent.match(/\S/);
-            }).parent().addClass("o_default_snippet_text");
-        $(document).on("mouseup", ".o_default_snippet_text", function (event) {
-            $(event.target).selectContent();
-        });
-        $(document).on("keyup", function () {
-            var r = $.summernote.core.range.create();
-            $(r && r.sc).closest(".o_default_snippet_text").removeClass("o_default_snippet_text");
-        });
-        // end
-
-        // clean t-oe
-        $html.find('[data-oe-model], [data-oe-type]').each(function () {
-            for (var k=0; k<this.attributes.length; k++) {
-                if (this.attributes[k].name.indexOf('data-oe-') === 0) {
-                    $(this).removeAttr(this.attributes[k].name);
-                    k--;
-                }
-            }
-        });
-        // end
-
-        $html.find('.o_not_editable').attr("contentEditable", false);
-
-        $left_bar.append($html);
-
-        // animate for list of snippet blocks
-        $left_bar.on('click', '.scroll-link', function (event) {
-            event.preventDefault();
-            var targetOffset =  $($(this).attr("href")).position().top - $ul.outerHeight() + $scroll[0].scrollTop;
-            $scroll.animate({'scrollTop': targetOffset}, 750);
-        });
-        $scroll.on('scroll', function () {
-            var middle = $scroll.height()/4;
-            var $li = $ul.find("a").parent().removeClass('active');
-            var last;
-            for (var k=0; k<$li.length; k++) {
-                var li = $($li[k]);
-                if (!li.data('target')) {
-                    li.data('target', $($("a", li).attr("href")));
-                }
-                if (li.data('target').position().top > middle) {
-                    break;
-                }
-                last = $li[k];
-            }
-            $(last).addClass("active");
-        });
-        // end
-
-        // display scrollbar
-        $(window).on('resize', function () {
-            $scroll.css("overflow", "");
-            var height = $left_bar.height() - $ul.outerHeight();
-            $scroll.css("height", height);
-            var $last = $scroll.children(":visible").last().children(".o_panel_body");
-            $last.css({'min-height': (height-$last.prev().outerHeight())+'px'});
-            if ($scroll[0].scrollHeight + $ul[0].scrollHeight > document.body.clientHeight) {
-                $scroll.css("overflow", "auto").css("width", "226px");
-            } else {
-                $scroll.css("width", "");
-            }
-        }).trigger('resize');
-        // end
-
-        self.make_snippet_draggable(self.$snippets);
-    },
-
-    cover_target: function ($el, $target){
-        if($el.data('not-cover_target')) return;
-        var pos = $target.offset();
-        var mt = parseInt($target.css("margin-top") || 0);
-        var mb = parseInt($target.css("margin-bottom") || 0);
-        var width = $target.outerWidth();
-        var bigger = pos.left+width > $("body").outerWidth()-8;
-        $el.css({
-            'width': width,
-            'top': pos.top - mt - 5,
-            'left': pos.left-1
-        });
-        $el.find(".oe_handle.e,.oe_handle.w").css({'height': $target.outerHeight() + mt + mb+1});
-        if (bigger) {
-            $el.find(".oe_handle.e").css({right: 0, margin: 0})
-                .find("div").css({right: 0, left: 'auto'});
-        } else {
-            $el.find(".oe_handle.e").css({right: "", margin: ""})
-                .find("div").css({right: "", left: ""});
-        }
-        $el.find(".oe_handle.s").css({'top': $target.outerHeight() + mt + mb});
-        $el.find(".oe_handle.size").css({'top': $target.outerHeight() + mt});
-        $el.find(".oe_handle.s,.oe_handle.n").css({'width': width-2});
-    },
-
-    show_blocks: function () {
-        var cache = {};
-        this.$snippet.find(".tab-pane").each(function () {
-            var catcheck = false;
-            var $category = $(this);
-            $category.find(".oe_snippet_body").each(function () {
-                var $snippet = $(this);
-
-                var check = false;
-
-                for (var k in templateOptions) {
-                    var option = templateOptions[k];
-                    if ($snippet.is(option.base_selector)) {
-
-                        cache[k] = cache[k] || {
-                            'drop-near': option['drop-near'] ? option['drop-near'].all() : [],
-                            'drop-in': option['drop-in'] ? option['drop-in'].all() : []
-                        };
-
-                        if (cache[k]['drop-near'].length || cache[k]['drop-in'].length) {
-                            catcheck = true;
-                            check = true;
-                            break;
-                        }
-                    }
-                }
-
-                if (check) {
-                    $snippet.closest(".oe_snippet").removeClass("disable");
-                } else {
-                    $snippet.closest(".oe_snippet").addClass("disable");
-                }
-            });
-
-            $('#oe_snippets .scroll a[data-toggle="tab"][href="#' + $category.attr("id") + '"]').toggle(catcheck);
-        });
-    },
-    show: function () {
-        this.make_active(false);
-        this.$el.addClass("o_open");
-        this.show_blocks();
-    },
-    hide: function () {
-        this.$el.removeClass("o_open");
-    },
-    bind_snippet_click_editor: function () {
-        var self = this;
-        var snipped_event_flag;
-        $(document).on('click', '*', function (event) {
-            var srcElement = event.srcElement || (event.originalEvent && (event.originalEvent.originalTarget || event.originalEvent.target) || event.target);
-            if (self.editor_busy || snipped_event_flag===srcElement || !srcElement) {
-                return;
-            }
-            snipped_event_flag = srcElement;
-
-            setTimeout(function () {snipped_event_flag = false;}, 0);
-            var $target = $(srcElement);
-
-            if ($target.closest(".oe_overlay, .note-popover").length) {
-                return;
-            }
-
-            if (!globalSelector.is($target)) {
-                $target = globalSelector.closest($target);
-            }
-
-            if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
-                return;
-            }
-            self.make_active($target);
-        });
-    },
-    snippet_blur: function ($snippet) {
-        if ($snippet) {
-            if ($snippet.data("snippet-editor")) {
-                $snippet.data("snippet-editor").on_blur();
-            }
-        }
-    },
-    snippet_focus: function ($snippet) {
-        if ($snippet) {
-            if ($snippet.data("snippet-editor")) {
-                $snippet.data("snippet-editor").on_focus();
-            }
-        }
-    },
-    clean_for_save: function () {
-        var self = this;
-        var template = templateOptions;
-        for (var k in template) {
-            var Option = options[template[k]['option']];
-            if (Option && Option.prototype.clean_for_save !== dummy) {
-                template[k].selector.all().each(function () {
-                    new Option(self, null, $(this), k).clean_for_save();
-                });
-            }
-        }
-        this.$editable.find("*[contentEditable], *[attributeEditable]")
-            .removeAttr('contentEditable')
-            .removeProp('contentEditable')
-            .removeAttr('attributeEditable')
-            .removeProp('attributeEditable');
-    },
-    make_active: function ($snippet) {
-        if ($snippet && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snippet.get(0)) {
-            return;
-        }
-        if (this.$active_snipped_id) {
-            this.snippet_blur(this.$active_snipped_id);
-            this.$active_snipped_id = false;
-        }
-        if ($snippet && $snippet.length) {
-            if(_.indexOf(this.snippets, $snippet.get(0)) === -1) {
-                this.snippets.push($snippet.get(0));
-            }
-            this.$active_snipped_id = $snippet;
-            this.create_overlay(this.$active_snipped_id);
-            this.snippet_focus($snippet);
-        }
-        this.$snippet.trigger('snippet-activated', $snippet);
-        if ($snippet) {
-            $snippet.trigger('snippet-activated', $snippet);
-        }
-    },
-    create_overlay: function ($snippet) {
-        if (typeof $snippet.data("snippet-editor") === 'undefined') {
-            var $targets = this.activate_overlay_zones($snippet);
-            if (!$targets.length) return;
-            $snippet.data("snippet-editor", new SnippetEditor(this, $snippet));
-        }
-        this.cover_target($snippet.data('overlay'), $snippet);
-    },
-
-    // activate drag and drop for the snippets in the snippet toolbar
-    make_snippet_draggable: function($snippets){
-        var self = this;
-        var $tumb = $snippets.find(".oe_snippet_thumbnail_img:first");
-        var left = $tumb.outerWidth()/2;
-        var top = $tumb.outerHeight()/2;
-        var $toInsert, dropped, $snippet;
-
-        $snippets.draggable({
-            greedy: true,
-            helper: 'clone',
-            zIndex: '1000',
-            appendTo: 'body',
-            cursor: "move",
-            handle: ".oe_snippet_thumbnail",
-            cursorAt: {
-                'left': left,
-                'top': top
-            },
-            start: function(){
-                self.hide();
-                dropped = false;
-                // snippet_selectors => to get drop-near, drop-in
-                $snippet = $(this);
-                var $base_body = $snippet.find('.oe_snippet_body');
-                var $selector_siblings = $();
-                var $selector_children = $();
-                var temp = templateOptions;
-                for (var k in temp) {
-                    if ($base_body.is(temp[k].base_selector)) {
-                        if (temp[k]['drop-near']) {
-                            if (!$selector_siblings) $selector_siblings = temp[k]['drop-near'].all();
-                            else $selector_siblings = $selector_siblings.add(temp[k]['drop-near'].all());
-                        }
-                        if (temp[k]['drop-in']) {
-                            if (!$selector_children) $selector_children = temp[k]['drop-in'].all();
-                            else $selector_children = $selector_children.add(temp[k]['drop-in'].all());
-                        }
-                    }
-                }
-
-                $toInsert = $base_body.clone();
-
-                if (!$selector_siblings.length && !$selector_children.length) {
-                    console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: data-drop-near or data-drop-in");
-                    return;
-                }
-
-                self.activate_insertion_zones($selector_siblings, $selector_children);
-
-                $('.oe_drop_zone').droppable({
-                    over:   function(){
-                        dropped = true;
-                        $(this).first().after($toInsert);
-                    },
-                    out:    function(){
-                        var prev = $toInsert.prev();
-                        if(this === prev[0]){
-                            dropped = false;
-                            $toInsert.detach();
-                        }
-                    }
-                });
-            },
-            stop: function(ev, ui){
-                $toInsert.removeClass('oe_snippet_body');
-
-                if (! dropped && self.$editable.find('.oe_drop_zone') && ui.position.top > 3) {
-                    var el = self.$editable.find('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first();
-                    if (el.length) {
-                        el.after($toInsert);
-                        dropped = true;
-                    }
-                }
-
-                self.$editable.find('.oe_drop_zone').droppable('destroy').remove();
-
-                if (dropped) {
-
-                    var prev = $toInsert.first()[0].previousSibling;
-                    var next = $toInsert.last()[0].nextSibling;
-                    var rte = self.parent.rte;
-
-                    if (prev) {
-                        $toInsert.detach();
-                        rte.historyRecordUndo($(prev));
-                        $toInsert.insertAfter(prev);
-                    } else if (next) {
-                        $toInsert.detach();
-                        rte.historyRecordUndo($(next));
-                        $toInsert.insertBefore(next);
-                    } else {
-                        var $parent = $toInsert.parent();
-                        $toInsert.detach();
-                        rte.historyRecordUndo($parent);
-                        $parent.prepend($toInsert);
-                    }
-
-                    var $target = false;
-                    $target = $toInsert;
-
-                    setTimeout(function () {
-                        self.$snippet.trigger('snippet-dropped', $target);
-
-                        animation.start_animation(true, $target);
-
-                        // drop_and_build_snippet
-                        self.create_overlay($target);
-                        if ($target.data("snippet-editor")) {
-                            $target.data("snippet-editor").drop_and_build_snippet();
-                        }
-                        for (var k in templateOptions) {
-                            templateOptions[k].selector.all($target).each(function () {
-                                var $snippet = $(this);
-                                self.create_overlay($snippet);
-                                if ($snippet.data("snippet-editor")) {
-                                    $snippet.data("snippet-editor").drop_and_build_snippet();
-                                }
-                            });
-                        }
-                            $target.closest(".o_editable").trigger("content_changed");
-                        // end
-
-                        self.make_active($target);
-                    },0);
-                } else {
-                    $toInsert.remove();
-                }
-            },
-        });
-    },
-
-    // return the original snippet in the editor bar from a snippet id (string)
-    get_snippet_from_id: function(id){
-        return $('.oe_snippet').filter(function(){
-                return $(this).data('option') === id;
-            }).first();
-    },
-
-    // Create element insertion drop zones. two css selectors can be provided
-    // selector.children -> will insert drop zones as direct child of the selected elements
-    //   in case the selected elements have children themselves, dropzones will be interleaved
-    //   with them.
-    // selector.siblings -> will insert drop zones after and before selected elements
-    activate_insertion_zones: function($selector_siblings, $selector_children){
-        var self = this;
-        var zone_template = $("<div class='oe_drop_zone oe_insert'></div>");
-
-        if ($selector_children) {
-            $selector_children.each(function (){
-                var $zone = $(this);
-                var css = window.getComputedStyle(this);
-                var float = css.float || css.cssFloat;
-                var $drop = zone_template.clone();
-
-                $zone.append($drop);
-                var node = $drop[0].previousSibling;
-                var test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === "BR"));
-                if (test) {
-                    $drop.addClass("oe_vertical oe_vertical_text").css({
-                            'height': parseInt(window.getComputedStyle($zone[0]).lineHeight),
-                            'float': 'none',
-                            'display': 'inline-block'
-                        });
-                } else if (float === "left" || float === "right") {
-                    $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().last().outerHeight()), 30));
-                }
-
-                $drop = $drop.clone();
-
-                $zone.prepend($drop);
-                node = $drop[0].nextSibling;
-                test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === "BR"));
-                if (test) {
-                    $drop.addClass("oe_vertical oe_vertical_text").css({
-                            'height': parseInt(window.getComputedStyle($zone[0]).lineHeight),
-                            'float': 'none',
-                            'display': 'inline-block'
-                        });
-                } else if (float === "left" || float === "right") {
-                    $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().first().outerHeight()), 30));
-                }
-                if (test) {
-                    $drop.css({'float': 'none', 'display': 'inline-block'});
-                }
-            });
-
-            // add children near drop zone
-            $selector_siblings = $(_.uniq(($selector_siblings || $()).add($selector_children.children()).get()));
-        }
-
-        if ($selector_siblings) {
-            $selector_siblings.filter(':not(.oe_drop_zone):not(.oe_drop_clone)').each(function (){
-                var $zone = $(this);
-                var $drop;
-                var css = window.getComputedStyle(this);
-                var float = css.float || css.cssFloat;
-
-                if($zone.prev('.oe_drop_zone:visible').length === 0){
-                    $drop = zone_template.clone();
-                    if (float === "left" || float === "right") {
-                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
-                    }
-                    $zone.before($drop);
-                }
-                if($zone.next('.oe_drop_zone:visible').length === 0){
-                    $drop = zone_template.clone();
-                    if (float === "left" || float === "right") {
-                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
-                    }
-                    $zone.after($drop);
-                }
-            });
-        }
-
-        var count;
-        do {
-            count = 0;
-            $zones = self.$editable.find('.oe_drop_zone > .oe_drop_zone').remove();   // no recursive zones
-            count += $zones.length;
-            $zones.remove();
-        } while (count > 0);
-
-        // Cleaning consecutive zone and up zones placed between floating or inline elements. We do not like these kind of zones.
-        var $zones = self.$editable.find('.oe_drop_zone:not(.oe_vertical)');
-        $zones.each(function (){
-            var zone = $(this);
-            var prev = zone.prev();
-            var next = zone.next();
-            // remove consecutive zone
-            if (prev.is('.oe_drop_zone') || next.is('.oe_drop_zone')) {
-                zone.remove();
-                return;
-            }
-            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();
-            }else if( !( disp_prev === null
-                      || disp_next === null
-                      || disp_prev === 'block'
-                      || disp_next === 'block' )){
-                zone.remove();
-            }
-        });
-    },
-
-    // generate drop zones covering the elements selected by the selector
-    // we generate overlay drop zones only to get an idea of where the snippet are, the drop
-    activate_overlay_zones: function($targets){
-        var self = this;
-
-        function is_visible($el){
-            return     $el.css('display')    != 'none'
-                    && $el.css('opacity')    != '0'
-                    && $el.css('visibility') != 'hidden';
-        }
-
-        // filter out invisible elements
-        $targets = $targets.filter(function(){ return is_visible($(this)); });
-
-        // filter out elements with invisible parents
-        $targets = $targets.filter(function(){
-            var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
-            return parents.length === 0;
-        });
-
-        $targets.each(function () {
-            var $target = $(this);
-            if (!$target.data('overlay')) {
-                var $zone = $(core.qweb.render('website.snippet_overlay'));
-
-                // fix for pointer-events: none with ie9
-                if (document.body && document.body.addEventListener) {
-                    $zone.on("click mousedown mousedown", function passThrough(event) {
-                        event.preventDefault();
-                        $target.each(function() {
-                           // check if clicked point (taken from event) is inside element
-                            event.srcElement = this;
-                            $(this).trigger(event.type);
-                        });
-                        return false;
-                    });
-                }
-
-                $zone.appendTo('#oe_manipulators');
-                $zone.data('target',$target);
-                $target.data('overlay',$zone);
-
-                var timer;
-                $target.closest('.o_editable').on("content_changed", function () {
-                    if ($target.data('overlay') && $target.data('overlay').hasClass("oe_active")) {
-                        clearTimeout(timer);
-                        timer = setTimeout(function () {
-                            self.cover_target($target.data('overlay'), $target);
-                        },50);
-                    }
-                 });
-
-                var resize = function () {
-                    if ($zone.parent().length) {
-                        self.cover_target($zone, $target);
-                    } else {
-                        $('body').off("resize", resize);
-                    }
-                };
-                $('body').on("resize", resize);
-            }
-            self.cover_target($target.data('overlay'), $target);
-        });
-        return $targets;
     }
 });
 
 
-
-var Option = Class.extend({
-    // initialisation (don't overwrite)
-    init: function (BuildingBlock, editor, $target, option_id) {
-        this.BuildingBlock = BuildingBlock;
-        this.editor = editor;
-        this.$target = $target;
-        var option = templateOptions[option_id];
-        var styles = this.$target.data("snippet-option-ids") || {};
-        styles[option_id] = this;
-        this.$target.data("snippet-option-ids", styles);
-        this.$overlay = this.$target.data('overlay') || $('<div>');
-        this.option= option_id;
-        this.$el = option.$el.find(">li").clone();
-        this.data = option.$el.data();
-    },
-
-    // helper for this.$target.find
-    $: function (selector) {
-        return this.$target(selector);
-    },
-
-    _bind_li_menu: function () {
-        this.$el.filter("li:hasData").find('a:first')
-            .off('mouseenter click')
-            .on('mouseenter click', _.bind(this._mouse, this));
-
-        this.$el
-            .off('mouseenter click', "li:hasData a")
-            .on('mouseenter click', "li:hasData a", _.bind(this._mouse, this));
-
-        this.$el.closest("ul").add(this.$el)
-            .off('mouseleave')
-            .on('mouseleave', _.bind(this.reset, this));
-
-        this.$el
-            .off('mouseleave', "ul")
-            .on('mouseleave', "ul", _.bind(this.reset, this));
-
-        this.reset_methods = [];
-    },
-
-    /**
-     * this method handles mouse:over and mouse:leave on the snippet editor menu
-     */
-     _time_mouseleave: null,
-    _mouse: function (event) {
-        var $next = $(event.currentTarget).parent();
-
-        // triggers preview or apply methods if a menu item has been clicked
-        this.select(event.type === "click" ? "click" : "over", $next);
-        if (event.type === 'click') {
-            this.set_active();
-            this.$target.trigger("snippet-option-change", [this]);
-        } else {
-            this.$target.trigger("snippet-option-preview", [this]);
-        }
-    },
-    /*
-    *  select and set item active or not (add highlight item and his parents)
-    *  called before start
-    */
-    set_active: function () {
-        var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
-        this.$el.find('[data-toggle_class], [data-select_class]')
-            .add(this.$el)
-            .filter('[data-toggle_class], [data-select_class]')
-            .removeClass("active")
-            .filter('[data-toggle_class="' + classes.join('"], [data-toggle_class="') + '"] ,'+
-                '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
-            .addClass("active");
-    },
-
-    start: function () {
-        this.set_active();
-        this.$target.on('snippet-option-reset', _.bind(this.set_active, this));
-        this._bind_li_menu();
-    },
-
-    on_focus : function () {
-        this._bind_li_menu();
-    },
-
-    on_blur : function () {
-    },
-
-    on_clone: function () {
-    },
-
-    on_move: function () {
-    },
-
-    on_remove: function () {
-    },
-
-    drop_and_build_snippet: function () {
-    },
-
-    reset: function () {
-        var self = this;
-        var lis = self.$el.add(self.$el.find('li')).filter('.active').get();
-        lis.reverse();
-        _.each(lis, function (li) {
-            var $li = $(li);
-            for (var k in self.reset_methods) {
-                var method = self.reset_methods[k];
-                if ($li.is('[data-'+method+']') || $li.closest('[data-'+method+']').size()) {
-                    delete self.reset_methods[k];
-                }
-            }
-            self.select("reset", $li);
-        });
-
-        for (var k in self.reset_methods) {
-            var method = self.reset_methods[k];
-            if (method) {
-                self[method]("reset", null);
-            }
-        }
-        self.reset_methods = [];
-        self.$target.trigger("snippet-option-reset", [this]);
-    },
-
-    // call data-method args as method (data-only can be used)
-    select: function (type, $li) {
-        var self = this;
-        var $methods = [];
-        var el = $li[0];
-
-        if ($li.data('only') && type !== $li.data('only')) {
-            return;
-        }
-
-        if (type==="click") {
-            this.reset();
-            this.BuildingBlock.parent.rte.historyRecordUndo(this.$target);
-        }
-
-        function filter (k) { return k !== 'oeId' && k !== 'oeModel' && k !== 'oeField' && k !== 'oeXpath' && k !== 'oeSourceId' && k !== 'only';}
-        function hasData(el) {
-            for (var k in el.dataset) {
-                if (filter (k)) {
-                    return true;
-                }
-            }
-            return false;
-        }
-        function method(el) {
-            var data = {};
-            for (var k in el.dataset) {
-                if (filter (k)) {
-                    data[k] = el.dataset[k];
-                }
-            }
-            return data;
-        }
-
-        while (el && this.$el.is(el) || _.some(this.$el.map(function () {return $.contains(this, el);}).get()) ) {
-            if (hasData(el)) {
-                $methods.push(el);
-            }
-            el = el.parentNode;
-        }
-
-        $methods.reverse();
-
-        _.each($methods, function (el) {
-            var $el = $(el);
-            var methods = method(el);
-
-            for (var k in methods) {
-                if (self[k]) {
-                    if (type !== "reset" && self.reset_methods.indexOf(k) === -1) {
-                        self.reset_methods.push(k);
-                    }
-                    self[k](type, methods[k], $el);
-                } else {
-                    console.error("'"+self.option+"' snippet have not method '"+k+"'");
-                }
-            }
-        });
-    },
-
-    // default method for snippet
-    toggle_class: function (type, value) {
-        var $lis = this.$el.find('[data-toggle_class]').add(this.$el).filter('[data-toggle_class]');
-
-        function map ($lis) {
-            return $lis.map(function () {return $(this).data("toggle_class");}).get().join(" ");
-        }
-        var classes = map($lis);
-        var active_classes = map($lis.filter('.active, :has(.active)'));
-
-        this.$target.removeClass(classes);
-        this.$target.addClass(active_classes);
-
-        if (type !== 'reset') {
-            this.$target.toggleClass(value);
-        }
-    },
-    select_class: function (type, value) {
-        var $lis = this.$el.find('[data-select_class]').add(this.$el).filter('[data-select_class]');
-
-        var classes = $lis.map(function () {return $(this).data('select_class');}).get();
-
-        this.$target.removeClass(classes.join(" "));
-        if(value) this.$target.addClass(value);
-    },
-    eval: function (type, value, $li) {
-        var fn = new Function("node", "type", "value", "$li", value);
-        fn.call(this, this, type, value, $li);
-    },
-
-    clean_for_save: dummy
-});
-
-
 var preventParentEmpty = {
     hide_remove_button: function() {
         this.$overlay.find('.oe_snippet_remove, .oe_snippet_move').toggleClass("hidden", !this.$target.siblings().length);
@@ -1080,119 +33,7 @@ var preventParentEmpty = {
 };
 
 
-options.background = Option.extend({
-    start: function ($change_target) {
-        this.$bg = $change_target || this.$target;
-        this._super();
-        var src = this.$bg.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
-        if (this.$bg.hasClass('oe_custom_bg')) {
-            this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
-        }
-    },
-    background: function(type, value) {
-        if (value && value.length) {
-            this.$bg.attr("style", 'background-image: url(' + value + ')' + (this.$bg.attr("style") || '').replace(/background-image:[^;]+/, '') );
-            this.$bg.addClass("oe_img_bg");
-        } else {
-            this.$bg.css("background-image", "");
-            this.$bg.removeClass("oe_img_bg").removeClass("oe_custom_bg");
-        }
-    },
-    choose_image: function(type, value, $li) {
-        if(type !== "click") return;
-
-        var self = this;
-        var $image = $('<img class="hidden"/>');
-        $image.attr("src", value);
-        $image.appendTo(self.$bg);
-
-        var _editor = new editor.MediaDialog(null, $image[0]);
-        _editor.appendTo(document.body);
-        _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
-
-        _editor.on('saved', self, function () {
-            var value = $image.attr("src");
-            $image.remove();
-            self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value);
-            self.background(type, value,$li);
-            self.$bg.addClass('oe_custom_bg');
-            self.$bg.trigger("snippet-option-change", [self]);
-            self.set_active();
-        });
-        _editor.on('cancel', self, function () {
-            $image.remove();
-        });
-    },
-    set_active: function () {
-        var src = this.$bg.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
-        this._super();
-
-        this.$el.find('li[data-background]:not([data-background=""])')
-            .removeClass("active")
-            .each(function () {
-                var background = $(this).data("background") || $(this).attr("data-background");
-                if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
-                    $(this).addClass("active");
-                }
-            });
-
-        if (!this.$el.find('li[data-background].active').size()) {
-            this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active");
-        } else {
-            this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active");
-        }
-    }
-});
-
-options.colorpicker = Option.extend({
-    start: function () {
-        var self = this;
-        var res = this._super();
-
-        if (!this.$el.find('.colorpicker').length) {
-            this.$el.find('li').append( core.qweb.render('website.colorpicker') );
-            }
-
-            if (this.$el.data('area')) {
-                this.$target = this.$target.find(this.$el.data('area'));
-                this.$el.removeData('area').removeAttr('area');
-        }
-
-        var classes = [];
-        this.$el.find(".colorpicker button").map(function () {
-            var $color = $(this);
-            var color = $color.attr("class");
-            if (self.$target.hasClass(color)) {
-                self.color = color;
-                $color.parent().addClass("selected");
-            }
-            classes.push(color);
-        });
-        this.classes = classes.join(" ");
-
-        this.bind_events();
-        return res;
-    },
-    bind_events: function () {
-        var self = this;
-        var $td = this.$el.find(".colorpicker td");
-        var $colors = this.$el.find(".colorpicker button");
-        $colors
-            .mouseenter(function () {
-                self.$target.removeClass(self.classes).addClass($(this).attr("class"));
-            })
-            .mouseleave(function () {
-                self.$target.removeClass(self.classes)
-                    .addClass($td.filter(".selected").children().attr("class"));
-            })
-            .click(function () {
-                $td.removeClass("selected");
-                $(this).parent().addClass("selected");
-            });
-    }
-});
-
-options.slider = Option.extend({
+options.registry.slider = options.Class.extend({
     drop_and_build_snippet: function() {
         this.id = "myCarousel" + new Date().getTime();
         this.$target.attr("id", this.id);
@@ -1201,7 +42,7 @@ options.slider = Option.extend({
         this.rebind_event();
     },
     on_clone: function ($clone) {
-        this.id = "myCarousel" + new Date().getTime();
+        var id = "myCarousel" + new Date().getTime();
         $clone.attr("id", id);
         $clone.find("[data-slide]").attr("href", "#" + id);
         $clone.find("[data-slide-to]").attr("data-target", "#" + id);
@@ -1220,6 +61,7 @@ options.slider = Option.extend({
             .first().addClass("active");
     },
     start : function () {
+        var self = this;
         this._super();
         this.$target.carousel({interval: false});
         this.id = this.$target.attr("id");
@@ -1228,7 +70,7 @@ options.slider = Option.extend({
         this.$target.carousel('pause');
         this.rebind_event();
     },
-    add_slide: function (type) {
+    add_slide: function (type, value) {
         if(type !== "click") return;
 
         var self = this;
@@ -1239,7 +81,7 @@ options.slider = Option.extend({
         this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
 
         // clone the best candidate from template to use new features
-        var $snippets = this.BuildingBlock.$snippets.find('.oe_snippet_body.carousel');
+        var $snippets = this.buildingBlock.$snippets.find('.oe_snippet_body.carousel');
         var point = 0;
         var selection;
         var className = _.compact(this.$target.attr("class").split(" "));
@@ -1260,13 +102,14 @@ options.slider = Option.extend({
         },0);
         return $clone;
     },
-    remove_slide: function (type) {
+    remove_slide: function (type, value) {
         if(type !== "click") return;
 
         if (this.remove_process) {
             return;
         }
         var self = this;
+        var new_index = 0;
         var cycle = this.$inner.find('.item').length - 1;
         var index = this.$inner.find('.item.active').index();
 
@@ -1299,7 +142,7 @@ options.slider = Option.extend({
     },
 });
 
-options.carousel = options.slider.extend({
+options.registry.carousel = options.registry.slider.extend({
     getSize: function () {
         this.grid = this._super();
         this.grid.size = 8;
@@ -1317,6 +160,11 @@ options.carousel = options.slider.extend({
         var self = this;
         this._super();
 
+        // set background and prepare to clean for save
+        var add_class = function (c){
+            if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c;
+            return self._class || "";
+        };
         this.$target.on('slid.bs.carousel', function () {
             if(self.editor && self.editor.styles.background) {
                 self.editor.styles.background.$bg = self.$target.find(".item.active");
@@ -1356,7 +204,7 @@ options.carousel = options.slider.extend({
     },
 });
 
-options.marginAndResize = Option.extend({
+options.registry.marginAndResize = options.Class.extend({
     start: function () {
         var self = this;
         this._super();
@@ -1419,7 +267,7 @@ options.marginAndResize = Option.extend({
                 var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g');
             }
 
-            self.BuildingBlock.editor_busy = true;
+            self.buildingBlock.editor_busy = true;
 
             var cursor = $handle.css("cursor")+'-important';
             var $body = $(document.body);
@@ -1434,7 +282,7 @@ options.marginAndResize = Option.extend({
                     self.$target.css("height", dy+"px");
                     self.$target.css("overflow", "hidden");
                     self.on_resize(compass, null, dy);
-                    self.BuildingBlock.cover_target(self.$overlay, self.$target);
+                    self.buildingBlock.cover_target(self.$overlay, self.$target);
                     return;
                 }
                 var dd = event['page'+XY] - xy + resize[1][begin];
@@ -1457,7 +305,7 @@ options.marginAndResize = Option.extend({
 
                 if (change) {
                     self.on_resize(compass, beginClass, current);
-                    self.BuildingBlock.cover_target(self.$overlay, self.$target);
+                    self.buildingBlock.cover_target(self.$overlay, self.$target);
                 }
             };
 
@@ -1466,19 +314,19 @@ options.marginAndResize = Option.extend({
                 $body.unbind('mouseup', body_mouseup);
                 $body.removeClass(cursor);
                 setTimeout(function () {
-                    self.BuildingBlock.editor_busy = false;
+                    self.buildingBlock.editor_busy = false;
+                    self.$target.closest(".o_editable").trigger("content_changed");
                 },0);
                 self.$target.removeClass("resize_editor_busy");
-                    self.$target.closest(".o_editable").trigger("content_changed");
             };
             $body.mousemove(body_mousemove);
             $body.mouseup(body_mouseup);
         });
-        this.$overlay.find(".oe_handle.size .auto_size").on('click', function (){
+        this.$overlay.find(".oe_handle.size .auto_size").on('click', function (event){
             self.$target.css("height", "");
             self.$target.css("overflow", "");
-            self.BuildingBlock.cover_target(self.$overlay, self.$target);
-                self.$target.closest(".o_editable").trigger("content_changed");
+            self.buildingBlock.cover_target(self.$overlay, self.$target);
+            self.$target.closest(".o_editable").trigger("content_changed");
             return false;
         });
     },
@@ -1518,7 +366,7 @@ options.marginAndResize = Option.extend({
 
         this.$overlay.attr("class", overlay_class);
     },
-
+    
     /* on_resize
     *  called when the box is resizing and the class change, before the cover_target
     *  @compass: resize direction : 'n', 's', 'e', 'w'
@@ -1530,7 +378,7 @@ options.marginAndResize = Option.extend({
     }
 });
 
-options["margin-y"] = options.marginAndResize.extend({
+options.registry["margin-y"] = options.registry.marginAndResize.extend({
     getSize: function () {
         this.grid = this._super();
         var grid = [0,4,8,16,32,48,64,92,128];
@@ -1545,7 +393,7 @@ options["margin-y"] = options.marginAndResize.extend({
     },
 });
 
-options["margin-x"] = options.marginAndResize.extend(preventParentEmpty).extend({
+options.registry["margin-x"] = options.registry.marginAndResize.extend(preventParentEmpty).extend({
     getSize: function () {
         this.grid = this._super();
         var width = this.$target.parents(".row:first").first().outerWidth();
@@ -1553,7 +401,7 @@ options["margin-x"] = options.marginAndResize.extend(preventParentEmpty).extend(
         var grid = [1,2,3,4,5,6,7,8,9,10,11,12];
         this.grid.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
 
-        grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
+        var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
         this.grid.w = [_.map(grid, function (v) {return 'col-md-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
 
         return this.grid;
@@ -1616,7 +464,7 @@ options["margin-x"] = options.marginAndResize.extend(preventParentEmpty).extend(
     },
 });
 
-options.resize = options.marginAndResize.extend({
+options.registry.resize = options.registry.marginAndResize.extend({
     getSize: function () {
         this.grid = this._super();
         this.grid.size = 8;
@@ -1624,7 +472,7 @@ options.resize = options.marginAndResize.extend({
     },
 });
 
-options.parallax = Option.extend({
+options.registry.parallax = options.Class.extend({
     getSize: function () {
         this.grid = this._super();
         this.grid.size = 8;
@@ -1654,6 +502,7 @@ options.parallax = Option.extend({
         this.$target.data("snippet-view").set_values();
     },
     set_active: function () {
+        var value = this.$target.attr('data-scroll-background-ratio') || 0;
         this.$el.find('[data-scroll]').removeClass("active")
             .filter('[data-scroll="' + (this.$target.attr('data-scroll-background-ratio') || 0) + '"]').addClass("active");
     },
@@ -1665,7 +514,7 @@ options.parallax = Option.extend({
     }
 });
 
-options.transform = Option.extend({
+options.registry.transform = options.Class.extend({
     start: function () {
         var self = this;
         this._super();
@@ -1703,12 +552,12 @@ options.transform = Option.extend({
             }
         });
     },
-    style: function (type) {
+    style: function (type, value) {
         if (type !== 'click') return;
         var settings = this.$target.data("transfo").settings;
         this.$target.transfo({ 'hide': (settings.hide = !settings.hide) });
     },
-    clear_style: function (type) {
+    clear_style: function (type, value) {
         if (type !== 'click') return;
         this.$target.removeClass("fa-spin").attr("style", "");
         this.resetTransfo();
@@ -1775,42 +624,16 @@ options.transform = Option.extend({
     }
 });
 
-options.media = Option.extend({
+options.registry.ul = options.Class.extend({
     start: function () {
-        this._super();
-        animation.start_animation(true, this.$target);
-    },
-    edition: function (type) {
-        if(type !== "click") return;
         var self = this;
-        var dialog = new editor.MediaDialog(this.$target.closest('.o_editable'), this.$target[0]);
-        dialog.appendTo(document.body);
-        dialog.on('saved', this, function (item) {
-            self.editor.on_blur();
-            self.BuildingBlock.make_active(false);
-            if (self.$target.parent().data("oe-field") !== "image") {
-                setTimeout(function () {
-                    self.BuildingBlock.make_active($(item));
-                },0);
-            }
-        });
-    },
-    on_focus : function () {
-        var self = this;
-        var $parent = this.$target.parent();
-
-        if ($parent.data("oe-field") === "image" && $parent.hasClass('o_editable')) {
-            this.$overlay.addClass("hidden");
-            self.edition('click', null);
-            self.BuildingBlock.make_active(false);
-        }
-    }
-});
-
-options.ul = Option.extend({
-    start: function () {
         this._super();
         this.$target.data("snippet-view", new animation.registry.ul(this.$target, true));
+        this.$target.on('mouseup', '.o_ul_toggle_self, .o_ul_toggle_next', function () {
+            setTimeout(function () {
+                self.buildingBlock.cover_target(self.$overlay, self.$target);
+            },0);
+        });
     },
     reset_ul: function () {
         this.$target.find('.o_ul_toggle_self, .o_ul_toggle_next').remove();
@@ -1850,13 +673,12 @@ options.ul = Option.extend({
     }
 });
 
-
-options.collapse = Option.extend(preventParentEmpty).extend({
+options.registry.collapse = options.Class.extend(preventParentEmpty).extend({
     start: function () {
         var self = this;
         this._super();
         this.$target.on('shown.bs.collapse hidden.bs.collapse', '[role="tabpanel"]', function () {
-            self.BuildingBlock.cover_target(self.$overlay, self.$target);
+            self.buildingBlock.cover_target(self.$overlay, self.$target);
         });
     },
     create_ids: function ($target) {
@@ -1911,403 +733,4 @@ options.collapse = Option.extend(preventParentEmpty).extend({
 });
 
 
-var SnippetEditor = Class.extend({
-    init: function (BuildingBlock, dom) {
-        this.BuildingBlock = BuildingBlock;
-        this.$target = $(dom);
-        this.$overlay = this.$target.data('overlay');
-        this.load_style_options();
-        this.get_parent_block();
-        this.start();
-    },
-
-    // activate drag and drop for the snippets in the snippet toolbar
-    _drag_and_drop: function(){
-        var self = this;
-        this.dropped = false;
-        this.$overlay.draggable({
-            greedy: true,
-            appendTo: 'body',
-            cursor: "move",
-            handle: ".oe_snippet_move",
-            cursorAt: {
-                left: 18,
-                top: 14
-            },
-            helper: function() {
-                var $clone = $(this).clone().css({width: "24px", height: "24px", border: 0});
-                $clone.find(".oe_overlay_options >:not(:contains(.oe_snippet_move)), .oe_handle").remove();
-                $clone.find(":not(.glyphicon)").css({position: 'absolute', top: 0, left: 0});
-                $clone.appendTo("body").removeClass("hidden");
-                return $clone;
-            },
-            start: _.bind(self._drag_and_drop_start, self),
-            stop: _.bind(self._drag_and_drop_stop, self)
-        });
-    },
-    _drag_and_drop_after_insert_dropzone: function (){},
-    _drag_and_drop_active_drop_zone: function ($zones){
-        var self = this;
-        $zones.droppable({
-            over:   function(){
-                $(".oe_drop_zone.hide").removeClass("hide");
-                $(this).addClass("hide").first().after(self.$target);
-                self.dropped = true;
-            },
-            out:    function(){
-                $(this).removeClass("hide");
-                self.$target.detach();
-                self.dropped = false;
-            },
-        });
-    },
-    _drag_and_drop_start: function (){
-        var self = this;
-        self.BuildingBlock.hide();
-        self.BuildingBlock.editor_busy = true;
-        self.size = {
-            width: self.$target.width(),
-            height: self.$target.height()
-        };
-        self.$target.after("<div class='oe_drop_clone' style='display: none;'/>");
-        self.$target.detach();
-        self.$overlay.addClass("hidden");
-
-        var $selector_siblings;
-        for (var i=0; i<self.selector_siblings.length; i++) {
-            if (!$selector_siblings) $selector_siblings = self.selector_siblings[i].all();
-            else $selector_siblings = $selector_siblings.add(self.selector_siblings[i].all());
-        }
-        var $selector_children;
-        for (i=0; i<self.selector_children.length; i++) {
-            if (!$selector_children) $selector_children = self.selector_children[i].all();
-            else $selector_children = $selector_children.add(self.selector_children[i].all());
-        }
-
-        self.BuildingBlock.activate_insertion_zones($selector_siblings, $selector_children);
-
-        $("body").addClass('move-important');
-
-        self._drag_and_drop_after_insert_dropzone();
-        self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
-    },
-    _drag_and_drop_stop: function (){
-        var self = this;
-        var $dropzone = this.$target.prev();
-        var prev = $dropzone.length && $dropzone[0].previousSibling;
-        var next = this.$target.last()[0].nextSibling;
-        var $parent = this.$target.parent();
-
-        $(".oe_drop_clone").after(this.$target);
-
-        this.$overlay.removeClass("hidden");
-        $("body").removeClass('move-important');
-        $('.oe_drop_zone').droppable('destroy').remove();
-        $(".oe_drop_clone, .oe_drop_to_remove").remove();
-
-        if (this.dropped) {
-            this.BuildingBlock.parent.rte.historyRecordUndo(this.$target);
-
-            if (prev) {
-                this.$target.insertAfter(prev);
-            } else if (next) {
-                this.$target.insertBefore(next);
-            } else {
-                $parent.prepend(this.$target);
-            }
-
-            for (var i in this.styles){
-                this.styles[i].on_move();
-            }
-        }
-
-        self.BuildingBlock.editor_busy = false;
-
-        self.get_parent_block();
-        setTimeout(function () {self.BuildingBlock.create_overlay(self.$target);},0);
-    },
-
-    load_style_options: function () {
-        var self = this;
-        var $styles = this.$overlay.find('.oe_options');
-        var $ul = $styles.find('ul:first');
-        this.styles = {};
-        this.selector_siblings = [];
-        this.selector_children = [];
-        _.each(templateOptions, function (val, option_id) {
-            if (!val.selector.is(self.$target)) {
-                return;
-            }
-            if (val['drop-near']) self.selector_siblings.push(val['drop-near']);
-            if (val['drop-in']) self.selector_children.push(val['drop-in']);
-
-            var option = val.option;
-            var Editor = options[option] || Option;
-            var editor = self.styles[option] = new Editor(self.BuildingBlock, self, self.$target, option_id);
-            $ul.append(editor.$el.addClass("snippet-option-" + option));
-            editor.start();
-        });
-
-        if (!this.selector_siblings.length && !this.selector_children.length) {
-            this.$overlay.find(".oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove").addClass('hidden');
-        }
-
-        if ($ul.find("li").length) {
-            $styles.removeClass("hidden");
-        }
-        this.$overlay.find('[data-toggle="dropdown"]').dropdown();
-    },
-
-    get_parent_block: function () {
-        var self = this;
-        var $button = this.$overlay.find('.oe_snippet_parent');
-        var $parent = globalSelector.closest(this.$target.parent());
-        if ($parent.length) {
-            $button.removeClass("hidden");
-            $button.off("click").on('click', function (event) {
-                event.preventDefault();
-                setTimeout(function () {
-                    self.BuildingBlock.make_active($parent);
-                }, 0);
-            });
-        } else {
-            $button.addClass("hidden");
-        }
-    },
-
-    /*
-    *  start
-    *  This method is called after init and _readXMLData
-    */
-    start: function () {
-        if (!this.$target.parent().is(':o_editable')) {
-            this.$overlay.find('.oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove').remove();
-        } else {
-            this.$overlay.on('click', '.oe_snippet_clone', _.bind(this.on_clone, this));
-            this.$overlay.on('click', '.oe_snippet_remove', _.bind(this.on_remove, this));
-            this._drag_and_drop();
-        }
-    },
-
-    on_clone: function (event) {
-        event.preventDefault();
-        var $clone = this.$target.clone(false);
-
-        this.BuildingBlock.parent.rte.historyRecordUndo(this.$target);
-
-        this.$target.after($clone);
-        for (var i in this.styles){
-            this.styles[i].on_clone($clone);
-        }
-        this.BuildingBlock.create_overlay(this.$target);
-        return false;
-    },
-
-    on_remove: function (event) {
-        event.preventDefault();
-        this.on_blur();
-
-        this.BuildingBlock.parent.rte.historyRecordUndo(this.$target);
-
-        var index = _.indexOf(this.BuildingBlock.snippets, this.$target.get(0));
-        for (var i in this.styles){
-            this.styles[i].on_remove();
-        }
-        delete this.BuildingBlock.snippets[index];
-
-        // remove node and his empty
-        var node = this.$target.parent()[0];
-
-        this.$target.remove();
-        this.$overlay.remove();
-
-        if (node && node.firstChild) {
-            $.summernote.core.dom.removeSpace(node, node.firstChild, 0, node.lastChild, 1);
-            if (!node.firstChild.tagName && node.firstChild.textContent === " ") {
-                node.firstChild.parentNode.removeChild(node.firstChild);
-            }
-        }
-
-        // clean editor if they are image or table in deleted content
-        $(".note-control-selection").hide();
-        $('.o_table_handler').remove();
-
-        return false;
-    },
-
-    /*
-    *  drop_and_build_snippet
-    *  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)
-    */
-    drop_and_build_snippet: function () {
-        for (var i in this.styles){
-            this.styles[i].drop_and_build_snippet();
-        }
-    },
-
-    /* on_focus
-    *  This method is called when the user click inside the snippet in the dom
-    */
-    on_focus : function () {
-        this.$overlay.addClass('oe_active');
-        for (var i in this.styles){
-            this.styles[i].on_focus();
-        }
-    },
-
-    /* on_focus
-    *  This method is called when the user click outside the snippet in the dom, after a focus
-    */
-    on_blur : function () {
-        for (var i in this.styles){
-            this.styles[i].on_blur();
-        }
-        this.$overlay.removeClass('oe_active');
-    },
-});
-
-/* t-field options */
-
-options.many2one = Option.extend({
-    start: function () {
-        var self = this;
-
-        this.Model = this.$target.data('oe-many2one-model');
-        this.ID = +this.$target.data('oe-many2one-id');
-
-        // create search button and bind search bar
-        this.$btn = $(core.qweb.render("website.many2one.button"))
-            .insertAfter(this.$overlay.find('.oe_options'));
-
-        this.$ul = this.$btn.find("ul");
-        this.$search = this.$ul.find('li:first');
-        this.$search.find('input').on('mousedown click mouseup keyup keydown', function (e) {
-            e.stopPropagation();
-        });
-
-        // move menu item
-        setTimeout(function () {
-            if (self.$overlay.find('.oe_options').hasClass('hidden')) {
-                self.$btn.css('height', '0').find('> a').addClass('hidden');
-                self.$ul.show().css({
-                    'top': '-24px', 'margin': '0', 'padding': '2px 0', 'position': 'relative'
-                });
-            } else {
-                self.$btn.find('a').on('click', function () {
-                    self.clear();
-                });
-            }
-        },0);
-
-        // bind search input
-        this.$search.find('input')
-            .focus()
-            .on('keyup', function() {
-                self.find_existing($(this).val());
-            });
-
-        // bind result
-        this.$ul.on('click', "li:not(:first) a", function () {
-            self.select_record(this);
-        });
-    },
-
-    on_focus: function () {
-        this.$target.attr('contentEditable', 'false');
-        this.clear();
-        this._super();
-    },
-
-    clear: function () {
-        var self = this;
-        this.$search.siblings().remove();
-        self.$search.find('input').val("");
-        setTimeout(function () {
-            self.$search.find('input').focus();
-        },0);
-    },
-
-    find_existing: function (name) {
-        var self = this;
-        var domain = [];
-        if (!name || !name.length) {
-            self.$search.siblings().remove();
-            return;
-        }
-        if (isNaN(+name)) {
-            if (this.Model === "res.partner") {
-                domain.push(['name', 'ilike', name]);
-            } else {
-                domain.push('|', ['name', 'ilike', name], ['email', 'ilike', name]);
-            }
-        } else {
-            domain.push(['id', '=', name]);
-        }
-
-        ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: this.Model,
-            method: 'search_read',
-            args: [domain, this.Model === "res.partner" ? ['name', 'display_name', 'city', 'country_id'] : ['name', 'display_name']],
-            kwargs: {
-                order: 'name DESC',
-                limit: 5,
-                context: website.get_context(),
-            }
-        }).then(function (result){
-            self.$search.siblings().remove();
-            self.$search.after(core.qweb.render("website.many2one.search",{contacts:result}));
-        });
-    },
-
-    get_contact_rendering: function (options) {
-        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: 'website.qweb.field.contact',
-            method: 'get_record_to_html',
-            args: [[this.ID]],
-            kwargs: {
-                options: options,
-                context: website.get_context(),
-            }
-        });
-    },
-
-    select_record: function (li) {
-        var self = this;
-
-        this.BuildingBlock.parent.rte.historyRecordUndo(this.$target);
-
-        self.ID = +$(li).data("id");
-        self.$target.attr('data-oe-many2one-id', self.ID).data('oe-many2one-id', self.ID);
-
-        if (self.$target.data('oe-type') === "contact") {
-            $('[data-oe-contact-options]')
-                .filter('[data-oe-model="'+self.$target.data('oe-model')+'"]')
-                .filter('[data-oe-id="'+self.$target.data('oe-id')+'"]')
-                .filter('[data-oe-field="'+self.$target.data('oe-field')+'"]')
-                .filter('[data-oe-contact-options!="'+self.$target.data('oe-contact-options')+'"]')
-                .add(self.$target)
-                .attr('data-oe-many2one-id', self.ID).data('oe-many2one-id', self.ID)
-                .each(function () {
-                    var $node = $(this);
-                    self.get_contact_rendering($node.data('oe-contact-options'))
-                        .then(function (html){
-                            $node.html(html);
-                        });
-                });
-        } else {
-            self.$target.html($(li).data("name"));
-        }
-
-        self.clear();
-    }
-});
-
-return {
-    BuildingBlock: BuildingBlock,
-    options: options,
-    Option: Option,
-    globalSelector: globalSelector,
-};
-
 });
diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js
index 37ab7bc4b4f..4eb09a4837b 100644
--- a/addons/website/static/src/js/website.snippets.gallery.js
+++ b/addons/website/static/src/js/website.snippets.gallery.js
@@ -1,17 +1,21 @@
-odoo.define('website.snippets.gallery', function (require) {
+odoo.define('website.snippets.editor.gallery', function (require) {
 'use strict';
 
+var ajax = require('web.ajax');
 var core = require('web.core');
-var snippets_editor = require('website.snippets.editor');
-var website = require('website.website');
+var base = require('web_editor.base');
+var widget = require('web_editor.widget');
+var animation = require('web_editor.snippets.animation');
+var options = require('web_editor.snippets.options');
+var snippet_editor = require('web_editor.snippet.editor');
 
 var _t = core._t;
-var QWeb = core.qweb;
+var qweb = core.qweb;
 
 /*--------------------------------------------------------------------------
  Template files to load
  --------------------------------------------------------------------------*/
-website.add_template_file('/website/static/src/xml/website.gallery.xml');
+ajax.loadXML('/website/static/src/xml/website.gallery.xml', qweb);
 
 /*--------------------------------------------------------------------------
   Gallery Snippet
@@ -19,7 +23,7 @@ website.add_template_file('/website/static/src/xml/website.gallery.xml');
   This is the snippet responsible for configuring the image galleries.
   Look at /website/views/snippets.xml for the available options
   ------------------------------------------------------------------------*/
-snippets_editor.options.gallery = snippets_editor.Option.extend({
+options.registry.gallery = options.Class.extend({
     start  : function() {
         this._super();
         this.bind_change();
@@ -203,7 +207,7 @@ snippets_editor.options.gallery = snippets_editor.Option.extend({
                 interval : this.$target.data("interval") || false,
                 id: "slideshow_" + (uuid+1)
             },
-            $slideshow = $(QWeb.render('website.gallery.slideshow', params));
+            $slideshow = $(qweb.render('website.gallery.slideshow', params));
         this.replace($slideshow);
         this.$target.find(".item img").each(function (index) {
             $(this).attr('data-index', index).data('index', index);
@@ -214,7 +218,7 @@ snippets_editor.options.gallery = snippets_editor.Option.extend({
         this.$target.off('slide.bs.carousel').off('slid.bs.carousel');
         this.$target.find('li.fa').off('click');
         if (this.$target.data("snippet-view", view)) {
-            var view = new website.snippet.animationRegistry.gallery_slider(this.$target, true);
+            var view = new animation.registry.gallery_slider(this.$target, true);
             this.$target.data("snippet-view", view);
         } else {
             this.$target.data("snippet-view").start(true);
@@ -231,7 +235,7 @@ snippets_editor.options.gallery = snippets_editor.Option.extend({
         if(type !== "click") return;
         var self = this;
         var $container = this.$target.find(".container:first");
-        var editor = new website.editor.MediaDialog(this.$target.closest('.o_editable'), null, {select_images: true});
+        var editor = new widget.MediaDialog(this.$target.closest('.o_editable'), null, {select_images: true});
         editor.appendTo(document.body);
         var index = Math.max(_.map(this.$target.find("img").get(), function (img) { return img.dataset.index | 0; })) + 1;
         editor.on('saved', this, function (attachments) {
@@ -244,7 +248,7 @@ snippets_editor.options.gallery = snippets_editor.Option.extend({
             }
             self.reapply(); // refresh the $target
             setTimeout(function () {
-                self.BuildingBlock.make_active(self.$target);
+                self.buildingBlock.make_active(self.$target);
             },0);
         });
     },
@@ -332,15 +336,15 @@ snippets_editor.options.gallery = snippets_editor.Option.extend({
             .parent().parent().toggle(["grid", "masonry"].indexOf(mode) !== -1);
         this.$el.find('[data-interval]:first').parent().parent().toggle(mode === "slideshow");
     },
-}); // website.snippet.Option.extend
+}); // options.Class.extend
 
 
-snippets_editor.options.gallery_img = snippets_editor.Option.extend({
+options.registry.gallery_img = options.Class.extend({
     position: function (type, value) {
         if (type !== "click") return;
 
         var $parent = this.$target.closest("section");
-        this.BuildingBlock.create_overlay($parent);
+        this.buildingBlock.create_overlay($parent);
         var editor = $parent.data('snippet-editor').styles.gallery;
         var imgs = $parent.find('img').get();
         imgs.sort(function (a,b) { return $(a).data('index')-$(b).data('index'); });
@@ -356,7 +360,7 @@ snippets_editor.options.gallery_img = snippets_editor.Option.extend({
 
         this.$target.data('index',index);
 
-        this.BuildingBlock.make_active(false);
+        this.buildingBlock.make_active(false);
         setTimeout(function () {
             editor.reapply();
         },0);
@@ -365,11 +369,11 @@ snippets_editor.options.gallery_img = snippets_editor.Option.extend({
         if (type !== "click") return;
 
         var self = this;
-        var $parent = snippets_editor.globalSelector.closest(this.$target.parent());
-        this.BuildingBlock.make_active(false);
+        var $parent = snippet_editor.globalSelector.closest(this.$target.parent());
+        this.buildingBlock.make_active(false);
         this.$target.remove();
         setTimeout(function () {
-            self.BuildingBlock.make_active($parent);
+            self.buildingBlock.make_active($parent);
             var gallery = $parent.data('snippet-editor').styles.gallery;
             gallery.reapply();
         }, 0);
diff --git a/addons/website/static/src/js/website.theme.js b/addons/website/static/src/js/website.theme.js
index b3dcbc9b0b6..f0d45c169ac 100644
--- a/addons/website/static/src/js/website.theme.js
+++ b/addons/website/static/src/js/website.theme.js
@@ -4,6 +4,7 @@ odoo.define('website.theme', function (require) {
 var ajax = require('web.ajax');
 var core = require('web.core');
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
 var website = require('website.website');
 
 var QWeb = core.qweb;
@@ -11,7 +12,7 @@ var QWeb = core.qweb;
 ajax.jsonRpc('/web/dataset/call', 'call', {
         'model': 'ir.ui.view',
         'method': 'read_template',
-        'args': ['website.theme_customize', website.get_context()]
+        'args': ['website.theme_customize', base.get_context()]
     }).done(function (data) {
     QWeb.add_template(data);
 });
@@ -19,7 +20,7 @@ ajax.jsonRpc('/web/dataset/call', 'call', {
 ajax.jsonRpc('/web/dataset/call', 'call', {
         'model': 'ir.ui.view',
         'method': 'read_template',
-        'args': ['website.colorpicker', website.get_context()]
+        'args': ['web_editor.colorpicker', base.get_context()]
     }).done(function (data) {
     QWeb.add_template(data);
 });
@@ -276,22 +277,25 @@ function themeError(message) {
     });
 }
 
+function theme_customize() {
+    if (Theme.open && !Theme.open.isDestroyed()) return;
+    Theme.open = new Theme();
+    Theme.open.appendTo("body");
+    
+    var error = window.getComputedStyle(document.body, ':before').getPropertyValue('content');
+    if (error && error !== 'none') {
+        themeError(eval(error));
+    }
+}
 
-website.ready().done(function() {
-    function theme_customize() {
-        if (Theme.open && !Theme.open.isDestroyed()) return;
-        Theme.open = new Theme();
-        Theme.open.appendTo("body");
-        
-        var error = window.getComputedStyle(document.body, ':before').getPropertyValue('content');
-        if (error && error !== 'none') {
-            themeError(eval(error));
+website.TopBar.include({
+    start: function () {
+        this.$el.on('click', "#theme_customize a", theme_customize);
+        if ((window.location.hash || "").indexOf("theme=true") !== -1) {
+            theme_customize();
+            window.location.hash = "";
         }
-    }
-    $(document).on('click', "#theme_customize a",theme_customize);
-    if ((window.location.hash || "").indexOf("theme=true") !== -1) {
-        theme_customize();
-        window.location.hash = "";
+        return this._super();
     }
 });
 
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 02361a3f643..6ba8de14dbf 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -3,12 +3,11 @@ odoo.define('website.tour.banner', function (require) {
 
 var core = require('web.core');
 var Tour = require('web.Tour');
-var website = require('website.website');
-
+var base = require('web_editor.base');
 
 var _t = core._t;
 
-website.ready().done(function () {
+base.ready().done(function () {
 
     Tour.register({
         id:   'banner',
@@ -77,7 +76,7 @@ website.ready().done(function () {
                 popover:   { fixed: true },
             },
             {
-                waitFor:   'button[data-action=save]:not(:visible)',
+                waitFor:   'button[data-action=edit]:visible',
                 title:     _t("Good Job!"),
                 content:   _t("Well done, you created your homepage."),
                 popover:   { next: _t("Continue") },
diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js
index c6a31b779e9..10a861828b0 100644
--- a/addons/website/static/src/js/website.tour.js
+++ b/addons/website/static/src/js/website.tour.js
@@ -2,24 +2,25 @@ odoo.define('website.tour', function (require) {
 'use strict';
 
 var Tour = require('web.Tour');
-var editor = require('website.editor');
+var website = require('website.website');
+var base = require('web_editor.base');
 
-
-editor.EditorBar.include({
+website.TopBar.include({
     tours: [],
     start: function () {
-        var self = this;
-        var menu = $('#help-menu');
-        _.each(Tour.tours, function (tour) {
-            if (tour.mode === "test") {
-                return;
-            }
-            var $menuItem = $($.parseHTML('<li><a href="#">'+tour.name+'</a></li>'));
-            $menuItem.click(function () {
-                Tour.run(tour.id);
+        var $menu = this.$('#help-menu');
+        setTimeout(function () {
+            _.each(Tour.tours, function (tour) {
+                if (tour.mode === "test") {
+                    return;
+                }
+                var $menuItem = $($.parseHTML('<li><a href="#">'+tour.name+'</a></li>'));
+                $menuItem.click(function () {
+                    Tour.run(tour.id);
+                });
+                $menu.append($menuItem);
             });
-            menu.append($menuItem);
-        });
+        }, 0);
         return this._super();
     }
 });
diff --git a/addons/website/static/src/js/website.tour.rte.js b/addons/website/static/src/js/website.tour.rte.js
index b068c11f604..865042fd932 100644
--- a/addons/website/static/src/js/website.tour.rte.js
+++ b/addons/website/static/src/js/website.tour.rte.js
@@ -1,338 +1,170 @@
 odoo.define('website.tour.rte', function (require) {
 'use strict';
 
-var core = require('web.core');
 var Tour = require('web.Tour');
 
-var _t = core._t;
-
-var click_event = function(el, type) {
-    var evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
-    el.dispatchEvent(evt);
-};
-
 Tour.register({
-    id:   'website_rte',
-    name: "Test website RTE",
-    path: '/page/homepage',
+    id:   'rte_translator',
+    name: "Test translator",
     mode: 'test',
     steps: [
         {
+            title:     "click on Add a language",
+            element:   '.js_language_selector a:has(i.fa)',
+        },
+        {
+            title:     "select french",
+            element:   '.modal select[name="lang"]',
+            sampleText: '"fr_BE"',
+        },
+        {
+            title:     "load french",
+            waitFor:   '.modal select[name="lang"]:propValueContains(fr_BE)',
+            element:   '.modal button.oe_highlight',
+        },
+        {
+            title:     "go to english version",
+            element:   '.js_language_selector a[data-lang="en_US"]',
+            onload: function () {
+                localStorage.removeItem('website_translator_nodialog');
+            }
+        },
+        {
+            title:     "Open content menu",
+            element:   '#content-menu-button',
+        },
+        {
+            title:     "click on new page",
+            element:   '[data-action="new_page"]',
+        },
+        {
+            title:     "insert page name",
+            element:   '#editor_new_page input[type="text"]',
+            sampleText: 'rte_translator',
+        },
+        {
+            title:     "create page",
+            waitFor:   'input[type="text"]:propValue(rte_translator)',
+            element:   '.modal:has(#editor_new_page) button.btn-continue',
+        },
+        {
+            title:     "drop a snippet",
+            snippet:   '#snippet_structure .oe_snippet:eq(1)',
+        },
+        {
+            title:     "change content",
+            waitFor:   '.oe_overlay_options .oe_options:visible',
+            onload: function () {
+                $("#wrap p:first").replaceWith('<p>Write one or <font style="background-color: yellow;">two paragraphs <b>describing</b></font> your product or\
+                        <font style="color: rgb(255, 0, 0);">services</font>. To be successful your content needs to be\
+                        useful to your <a href="/999">readers</a>.</p> <input placeholder="test translate placeholder"/>');
+                $("#wrap img").attr("title", "test translate image title");
+            }
+        },
+        {
+            title:     "save",
+            waitFor:   '#wrap p:first b',
+            element:   'button[data-action=save]',
+        },
+        {
+            title:     "click on french version",
+            waitNot:   'button[data-action=save]',
+            element:   '.js_language_selector a[data-lang="fr_BE"]',
+        },
+        {
+            title:     "translate",
+            waitNot:   '#wrap p span',
+            element:   '#oe_editzone button[data-action="translate"]',
+        },
+        {
+            title:     "check if translation is activate",
+            waitFor:   '[data-oe-translation-id]',
+        },
+        {
+            title:     "close modal",
+            element:   '.modal button[data-action="activate"]',
+        },
+        {
+            title:     "translate text",
+            element:   '#wrap p font:first',
+            sampleText: 'translated french text',
+            onload: function () {
+                $(this.element).closest('[data-oe-translation-id]').addClass('o_dirty').trigger('keyup');
+            },
+        },
+        {
+            title:     "click on input",
+            waitFor:   '#wrap .o_dirty font:first:contains(translated french text)',
+            element:   'input:first',
+        },
+        {
+            title:     "translate placeholder",
+            element:   '.modal.web_editor-dialog input:first',
+            sampleText: 'test french placeholder',
+        },
+        {
+            title:     "close modal",
+            waitFor:   '.web_editor-dialog input:propValue(test french placeholder)',
+            element:   '.web_editor-dialog button',
+        },
+        {
+            title:     "close modal",
+            waitNot:   '.web_editor-dialog',
+            element:   'button[data-action=save]',
+        },
+        {
+            title:     "check: content is translated",
+            waitNot:   'button[data-action=save]',
+            waitFor:   '#wrap p font:first:contains(translated french text)',
+        },
+        {
+            title:     "check: placeholder translation",
+            waitFor:   'input[placeholder="test french placeholder"]',
+        },
+        {
+            title:     "return to english version",
+            waitNot:   '#wrap p span',
+            element:   '.js_language_selector a[data-lang="en_US"]',
+        },
+        {
+            title:     "edit english version",
+            waitNot:   '#wrap p font:first:containsExact(paragraphs <b>describing</b>)',
             element:   'button[data-action=edit]',
-            title:     "Edit this page",
-            wait:      250
         },
         {
-            snippet:   '#snippet_structure .oe_snippet:has(.s_text_image)',
-            title:     "Drag & Drop a Text-Image Block",
-        },
-        {
-            element:   '.oe_overlay_options:visible .oe_options a:first',
-            title:     "Customize",
+            title:     "select text",
+            waitFor:   'button[data-action=save]',
+            element:   '#wrap p',
             onload: function () {
-                $(".oe_overlay_options:visible .snippet-option-background > ul").show();
-            }
-        },
-        {
-            element:   '.oe_overlay_options:visible .snippet-option-background > ul li[data-background*="quote"]:first a',
-            title:     "Chose a background image",
-        },
-        {
-            title:     "Change html for this test",
-            waitFor:   '#wrapwrap > main > div > section:first[style*="background-image"]',
-            element:   '#wrapwrap > main > div > section .row > div:first',
-            onload: function () {
-                var $el = $(this.element);
-                var html = '<h1 id="text_title_id">Batnae municipium in Anthemusia</h1>     '+
-                    '\n     <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>'+
-                    '\n     <p>    Quam <img style="width: 25%" src="/website/static/src/img/text_image.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>'+
-                    '\n     <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+
-                    '<p>Harum trium sententiarum nulli prorsus assentior.</p>';
-                $el.html(html);
-            }
-        },
-        {
-            element:   '#wrapwrap > main > div > section .row > div:first',
-            title:     "simulate triple click and change text bg-color",
-            onload: function () {
-                var $el = $(this.element);
-                var $h1 = $('h1', $el);
-                $.summernote.core.range.create($h1[0].firstChild, 0, $('p', $el)[0], 0).select();
-                click_event($h1[0], 'mouseup');
-            }
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first',
-            element:   '.note-popover button[data-event="color"]:visible',
-            title:     "change text bg-color after triple click",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:not(:has(p font)) h1 font',
-            element:   '.note-color button.dropdown-toggle:visible',
-            title:     "change selection to change text color",
-            onload: function () {
-                var $el = $('#wrapwrap > main > div > section .row > div:first:not(:has(p font)) h1 font');
-                $.summernote.core.range.create($el[0].firstChild, 5, $el[0].firstChild, 10).select();
-                click_event($el[0], 'mouseup');
-            }
-        },
-        {
-            element:   'div[data-target-event="foreColor"]:visible .note-color-row:eq(1) button[data-event="foreColor"]:first',
-            title:     "change text color",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first h1 font:eq(2)',
-            element:   '.note-color button.dropdown-toggle:visible',
-            title:     "change selection to change text bg-color again",
-            onload: function () {
-                var $el = $('#wrapwrap > main > div > section .row > div:first h1 font:eq(2)');
-                $.summernote.core.range.create($el.prev()[0].firstChild, 3, $el[0].firstChild, 10).select();
-                click_event($el.prev()[0], 'mouseup');
-            }
-        },
-        {
-            element:   'div[data-target-event="backColor"] .colorpicker button[data-event="backColor"]:first',
-            title:     "change text backColor again",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first h1 font:eq(4)',
-            element:   '.note-color button.dropdown-toggle:visible',
-            title:     "change selection (h1 and p) to change text color with class",
-            onload: function () {
-                var $el = $('#wrapwrap > main > div > section .row > div:first h1 font:eq(4)');
-                $.summernote.core.range.create($el.prev()[0].firstChild, 3, $el.parent("h1").next("p")[0].firstChild, 30).select();
-                click_event($el.prev()[0], 'mouseup');
-            }
-        },
-        {
-            element:   'div[data-target-event="foreColor"]:visible button[data-event="foreColor"][data-value^="text-"]:first',
-            title:     "change text foreColor again",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first p font',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "delete selection",
-            keydown:   46 // delete
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:not(:has(p font)) h1',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "clean and delete (backspace) an other selection",
-            onload: function () {
-                var $el = $(this.waitFor);
-                $.summernote.core.range.createFromNode($el.next("p")[0]).clean();
-                $.summernote.core.range.create($el.find('font:containsExact(ici)')[0].firstChild, 1, $el.next().next()[0].firstChild, 5).select();
-                click_event($el.find('font:last')[0], 'mouseup');
-            },
-            keydown:   8 // backspace
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "delete an other selection",
-            onload: function () {
-                var $el = $(this.waitFor);
-                $.summernote.core.range.create($el.find('font:first')[0].firstChild, 3, $el.next("p")[0].childNodes[2], 8).select();
-                click_event($el.find('font:first')[0], 'mouseup');
-            },
-            keydown:   46
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:has( font:last:containsExact(Bat) )',
-            element:   '.note-image-popover button[data-event="undo"]',
-            title:     "undo",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:has( font:last:containsExact(i) )',
-            element:   '.note-air-popover button[data-event="undo"]',
-            title:     "undo adain",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:not(:has(p font)) h1',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "delete (backspace) after undo",
-            keydown:   8 // backspace
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) )',
-            element:   '#wrapwrap > main > div > section .row > div:first img[style*="25%"]',
-            title:     "click on image",
-        },
-        {
-            element:   '.note-image-popover:visible button[data-event="resize"][data-value="0.5"]',
-            title:     "Click on resize half",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first img[style*="50%"]',
-            element:   '.note-image-popover:visible button[data-event="showImageDialog"]',
-            title:     "Click on edit picture",
-        },
-        {
-            waitFor:   '.modal #editor-media-image',
-            element:   '.modal a[data-toggle="tab"]:contains(Pictogram)',
-            title:     "Click on pictogram tab",
-        },
-        {
-            element:   '#editor-media-icon.active span.fa:first',
-            title:     "select a pictogram",
-        },
-        {
-            waitFor:   '#editor-media-icon.active span.font-icons-selected',
-            element:   '.modal button.save',
-            title:     "save pictogram",
-        },
-        {
-            element:   '.note-image-popover button[data-event="resizefa"][data-value="3"]',
-            title:     "select a size for the pictogram",
-        },
-        {
-            waitFor:   '#wrapwrap span.fa-3x',
-            element:   '.note-image-popover:visible button[data-event="floatMe"][data-value="right"]',
-            title:     "click on float right",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first span.fa.pull-right',
-            element:   '.note-image-popover:visible button[data-event="showLinkDialog"]',
-            title:     "click on create link",
-        },
-        {
-            waitFor:   '.modal a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.pull-right',
-            element:   '.modal .dropdown:has(.link-style) a[data-toggle="dropdown"]',
-            title:     "click on color style",
-        },
-        {
-            element:   '.modal .dropdown ul label.btn-success',
-            title:     "choose success style",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn:containsRegex(/^<span [^>]+><\\/span>$/)',
-            element:   '.modal .select2-container.url-source a.select2-choice',
-            title:     "click to choose an internal page",
-        },
-        {
-            element:   '.select2-drop:visible .select2-search input',
-            title:     "search 'contact'",
-            sampleText: "contact",
-        },
-        {
-            element:   '.select2-drop:visible .select2-results .select2-result div:contains(/page/)',
-            title:     "select /page/contactus",
-        },
-        {
-            waitNot:   '.select2-drop:visible',
-            element:   '#link-text',
-            title:     "change text label",
-            sampleText: "ABC[IMG] DEF",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn:containsRegex(/^ABC<span [^>]+><\\/span> DEF$/)',
-            element:   '.modal button.save',
-            title:     "save link",
-        },
-        {
-            waitNot:   '#link-preview',
-            waitFor:   'a.btn[href^="/"]:has(span.fa.fa-3x.pull-right)',
-            element:   '#wrapwrap > main > div > section .row > div:last img',
-            title:     "click on other picture",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first span.fa.pull-right',
-            element:   '.note-image-popover:visible button[data-event="showLinkDialog"]',
-            title:     "click on create link again",
-        },
-        {
-            waitFor:   '.modal a#link-preview:containsRegex(/^<img [^>]+>$/)',
-            element:   '.modal .dropdown:has(.link-style) a[data-toggle="dropdown"]',
-            title:     "click on color style again",
-        },
-        {
-            element:   '.modal .dropdown ul label.btn-success',
-            title:     "choose success style",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn',
-            element:   '#link-external',
-            sampleText: "test@test.test",
-            title:     "insert an email",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn[href="mailto:test@test.test"]',
-            element:   '.modal button.save',
-            title:     "save link",
-        },
-        {
-            waitNot:   '#link-preview',
-            waitFor:   '#wrapwrap > main > div > section .row > div:eq(1) > a > img',
-            element:   '#wrapwrap > main > div > section .row > div:first p:eq(2)',
-            title:     "triple enter then double backspace",
-            keydown:   [66, 13, 66, 13, 13, 8, 8], // B enter B enter enter backspace backspace
-            onload: function () {
-                var p = $(this.element)[0].firstChild;
-                $.summernote.core.range.create(p, p.textContent.length, p, p.textContent.length).select();
-                click_event(p, 'mouseup');
+                var el = $(this.element)[0];
+                var evt = document.createEvent("MouseEvents");
+                $.summernote.core.range.create(el.childNodes[2], 6, el.childNodes[2], 13).select();
+                evt.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
+                el.dispatchEvent(evt);
             },
         },
         {
-            waitNot:   '#wrapwrap > main > div > section .row > div:first p:eq(4), #wrapwrap > main > div > section .row > div:eq(3)',
-            waitFor:   '#wrapwrap > main > div > section .row > div:first p:eq(3)',
-            title:     "add ul content",
-            onload: function () {
-                var $el = $('#wrapwrap > main > div > section .row > div:first');
-                var html = '  <ul>     '+
-                    '\n     <li>   <p>Batnae municipium.  </p></li>'+
-                    '\n     <li>    Seleucia praeter.</li>'+
-                    '\n     <li><p>Et hanc quidem.</p></li>'+
-                    '\n    </ul>';
-                $el.append(html);
-                var node = $el.find('ul li p:last')[0].firstChild;
-                $.summernote.core.range.create(node, 6).select();
-                click_event(node, 'mouseup');
-            }
+            title:     "underline",
+            element:   '.note-air-popover button[data-event="underline"]',
         },
         {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first ul li p:first',
-            element:   '.note-air-popover .note-style button.dropdown-toggle',
-            title:     "click on style dropdown",
+            title:     "save new change",
+            waitFor:   '#wrap p u',
+            element:   'button[data-action=save]',
         },
         {
-            element:   '.note-air-popover .note-style ul:visible a[data-value="h3"]',
-            title:     "select h3",
-            onload: function () {
-                var node = $('#wrapwrap > main > div > section .row > div:first ul li p:last')[0].firstChild;
-                $.summernote.core.range.create(node, 0).select();
-                click_event(node, 'mouseup');
-            }
+            title:     "return in french",
+            waitNot:   'button[data-action=save]',
+            element:   'html[lang="en-US"] .js_language_selector a[data-lang="fr_BE"]',
         },
         {
-            element:   '#wrapwrap > main > div > section .row > div:first > ul > li > h3',
-            title:     "double tabulation",
-            keydown:   [9, 9] // tabulation
+            title:     "check bis: content is translated",
+            waitNot:   'button[data-action=save]',
+            waitFor:   '#wrap p font:first:contains(translated french text)',
         },
         {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first ul > li > ul > li > ul > li > h3',
-            element:   '.note-air-popover button[data-event="insertOrderedList"]',
-            title:     "click on order list",
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first ul > li > ul > li > ol > li > h3',
-            element:   '#wrapwrap > main > div > section .row > div:first ul li > p:last',
-            title:     "enter in ul",
-            keydown:   [66, 13], // enter
-            onload: function () {
-                $(this.element)[0].firstChild.textContent += "";
-                $.summernote.core.range.create($(this.element)[0].firstChild, 7).select();
-                click_event($(this.element)[0], 'mouseup');
-            }
-        },
-        {
-            element:   '#wrapwrap > main > div > section .row > div:first ul li > p:eq(1):containsRegex(/^municipium./)',
-            title:     "backspace in list",
-            keydown:   8
-        },
-        {
-            waitFor:   '#wrapwrap > main > div > section .row > div:first ul li p:eq(1)',
-            title:     "end",
+            title:     "check bis: placeholder translation",
+            waitFor:   'input[placeholder="test french placeholder"]',
         },
     ]
 });
diff --git a/addons/website/static/src/js/website.translator.js b/addons/website/static/src/js/website.translator.js
index 775012e1aa8..9443e972d47 100644
--- a/addons/website/static/src/js/website.translator.js
+++ b/addons/website/static/src/js/website.translator.js
@@ -2,229 +2,80 @@ odoo.define('website.translator', function (require) {
 'use strict';
 
 var core = require('web.core');
-var editor = require('website.editor');
+var ajax = require('web.ajax');
+var Widget = require('web.Widget');
+var base = require('web_editor.base');
+var translate = require('web_editor.translate');
 var website = require('website.website');
-var ajax = require('ajax');
 
-var QWeb = core.qweb;
+var qweb = core.qweb;
 
-if (!website.translatable) {
-    // Temporary hack until the editor bar is moved to the web client
+if (!translate.translatable) {
     return;
 }
 
-website.add_template_file('/website/static/src/xml/website.translator.xml');
-var nodialog = 'website_translator_nodialog';
 
-editor.EditorBar.include({
-    do_not_translate : ['-','*','!'],
-    start: function () {
-        var self = this;
-        this.initial_content = {};
-        return this._super.apply(this, arguments).then(function () {
-            var $edit_button = $("button[data-action=edit]");
-            $edit_button.removeClass("hidden");
-
-            if(website.no_editor) {
-                $edit_button.removeProp('disabled');
-            } else {
-                $edit_button.parent().after(QWeb.render('website.TranslatorAdditionalButtons'));
-                $('a[data-action=edit_master]').on('click', self, function(ev) {
-                    self.edit_master(ev);
-                });
-            }
-
-            $('.js_hide_on_translate').hide();
-        });
-    },
-    edit: function () {
-        var self = this;
-        var mysuper = this._super;
-        if (!localStorage[nodialog]) {
-            var dialog = new website.TranslatorDialog();
-            dialog.appendTo($(document.body));
-            dialog.on('activate', this, function () {
-                localStorage[nodialog] = dialog.$('input[name=do_not_show]').prop('checked') || '';
-                dialog.$el.modal('hide');
-                self.translate().then(function () {
-                    mysuper.call(self, true);
-                    if(self.gengo_translate){
-                        self.translation_gengo_display()
-                    }
-                });
-            });
+website.TopBar.include({
+    events: _.extend({}, website.TopBar.prototype.events, {
+        'click [data-action="edit_master"]': 'edit_master',
+        'click [data-action="translate"]': 'translate',
+    }),
+    translate: function (ev) {
+        ev.preventDefault();
+        if (translate.edit_translations) {
+            translate.instance.edit();
         } else {
-            this.translate().then(function () {
-                mysuper.call(self, true);
-                if(self.gengo_translate){
-                    self.translation_gengo_display()
-                }
-            });
+            location.search += '&edit_translations';
         }
     },
     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';
-            var url = link.pathname + link.search + window.location.hash;
-            link.pathname = '/website/lang/default';
-            link.search = '?' + $.param({r: url});
-            window.location = link.href;
-        }
-    },
-    translate: function () {
-        var self = this;
-        this.translations = null;
-        return ajax.jsonRpc('/website/get_view_translations', 'call', {
-            'xml_id': $(document.documentElement).data('view-xmlid'),
-            'lang': website.get_context().lang,
-        }).then(function (translations) {
-            self.translations = translations;
-            self.processTranslatableNodes();
-            // Disable non translatable t-fields
-            $('[data-oe-type][data-oe-translate="0"]').removeAttr('data-oe-type');
-        });
-    },
-    processTranslatableNodes: function () {
-        var self = this;
-        var source_attr = 'data-oe-source-id';
-        var $editables = $('[data-oe-model="ir.ui.view"]')
-                .not('link, script')
-                .not('.oe_snippets,.oe_snippet, .oe_snippet *, .navbar-toggle')
-                .not('[data-oe-type]')
-                .add($('[data-oe-translate="1"]:not([data-oe-model="ir.ui.view"])').addClass('o_editable'));
-
-        $editables.each(function () {
-            var $node = $(this);
-            var source_id = $node.parents('[' + source_attr + ']:first').attr(source_attr)|0;
-            var view_id = $node.attr('data-oe-source-id') || source_id || $node.attr('data-oe-id');
-            self.transNode(this, view_id|0);
-        });
-        $('.oe_translatable_text').on('paste', function () {
-            var node = $(this);
-            setTimeout(function () {
-                self.sanitizeNode(node);
-            }, 0);
-        });
-        $(document).on('blur keyup paste', '.oe_translatable_text[contenteditable]', function(ev) {
-            var $node = $(this);
-            setTimeout(function () {
-                // Doing stuff next tick because paste and keyup events are
-                // fired before the content is changed
-                if (ev.type == 'paste') {
-                    self.sanitizeNode($node[0]);
-                }
-                if (self.getInitialContent($node[0]) !== $node.text()) {
-                    $node.addClass('o_dirty').removeClass('oe_translatable_todo oe_translatable_inprogress');
-                }
-            }, 0);
-        });
-    },
-    getInitialContent: function (node) {
-        return this.initial_content[node.attributes['data-oe-nodeid'].value];
-    },
-    sanitizeNode: function (node) {
-        node.text(node.text());
-    },
-    isTextNode: function (node) {
-        return node.nodeType === 3 || node.nodeType === 4;
-    },
-    isTranslatable: function (text) {
-        return text && _.str.trim(text) !== '';
-    },
-    markTranslatableNode: function (node, view_id) {
-        // TODO: link nodes with same content
-        node.className += ' oe_translatable_text';
-        node.setAttribute('data-oe-translation-view-id', view_id);
-        var content = $(node).text().trim();
-        var trans = this.translations.filter(function (t) {
-            return t.res_id === view_id && t.value.trim() === content;
-        });
-        if (trans.length) {
-            node.setAttribute('data-oe-translation-id', trans[0].id);
-            if(trans[0].gengo_translation && (trans[0].state == 'inprogress' || trans[0].state == 'to_translate')){
-                    node.className += ' oe_translatable_inprogress';
-            }
-        } else {
-            node.className += this.do_not_translate.indexOf(node.textContent.trim()) ? ' oe_translatable_todo' : '';
-        }
-        node.contentEditable = true;
-        var nid = _.uniqueId();
-        $(node).attr('data-oe-nodeid', nid);
-        this.initial_content[nid] = content;
-    },
-    save: function () {
-        var self = this;
-        var trans = {};
-        // this._super.apply(this, arguments);
-        $('.oe_translatable_text.o_dirty').each(function () {
-            var $node = $(this);
-            var data = $node.data();
-            if (!trans[data.oeTranslationViewId]) {
-                trans[data.oeTranslationViewId] = [];
-            }
-            trans[data.oeTranslationViewId].push({
-                initial_content: self.getInitialContent(this),
-                new_content: $node.text(),
-                translation_id: data.oeTranslationId || null
-            });
-        });
-        ajax.jsonRpc('/website/set_translations', 'call', {
-            'data': trans,
-            'lang': website.get_context()['lang'],
-        }).then(function () {
-            self._save();
-        }).fail(function () {
-            // TODO: bootstrap alert with error message
-            alert("Could not save translation");
-        });
-    },
-    transNode: function (node, view_id) {
-        // Mostly handling text and cdata nodes here
-        // so avoid jquery usage in this function
-        if (node.attributes['data-oe-type']) {
-            if (node.attributes['data-oe-translate'].value == '1') {
-                node.className += ' oe_translatable_field';
-            }
-                this.markTranslatableNode(node, view_id);
-        } else if (node.childNodes.length === 1
-                && this.isTextNode(node.childNodes[0])
-                && !node.getAttribute('data-oe-model')) {
-            this.markTranslatableNode(node, view_id);
-        } else {
-            for (var i = 0, l = node.childNodes.length; i < l; i ++) {
-                var n = node.childNodes[i];
-                if (this.isTextNode(n)) {
-                    if (this.isTranslatable(n.data)) {
-                        var container = document.createElement('span');
-                        node.insertBefore(container, n);
-                        container.appendChild(n);
-                        this.markTranslatableNode(container, view_id);
-                    }
-                } else {
-                    this.transNode(n, view_id);
-                }
-            }
-        }
+        var $link = $('.js_language_selector a[data-default-lang]');
+        $link[0].search += ($link[0].search ? '&' : '?') + 'enable_editor=1';
+        $link.click();
     },
 });
 
-website.RTE.include({
-    start: function () {
-        this._super.apply(this, arguments);
-        this.$el.hide();
+
+if (!translate.edit_translations) {
+    return;
+}
+
+ajax.loadXML('/website/static/src/xml/website.translator.xml', qweb);
+
+var nodialog = 'website_translator_nodialog';
+
+var Translate = translate.Class.include({
+    onTranslateReady: function () {
+        if(this.gengo_translate){
+            this.translation_gengo_display();
+        }
+        this._super();
     },
-    fetch_editables: function (root) {
-        $(root).click(function (ev) {
-            ev.preventDefault();
-        });
-        return $('[data-oe-translate="1"]');
+    edit: function () {
+        $("#oe_main_menu_navbar").hide();
+        if (!localStorage[nodialog]) {
+            var dialog = new TranslatorDialog();
+            dialog.appendTo($(document.body));
+            dialog.on('activate', this, function () {
+                if (dialog.$('input[name=do_not_show]').prop('checked')) {
+                    localStorage.removeItem(nodialog);
+                } else {
+                    localStorage.setItem(nodialog, true);
+                }
+                dialog.$el.modal('hide');
+            });
+        }
+        return this._super();
+    },
+    cancel: function () {
+        $("#oe_main_menu_navbar").show();
+        return this._super();
     }
 });
 
-website.TranslatorDialog = core.Widget.extend({
-    events: _.extend({}, website.EditorBar.prototype.events, {
+var TranslatorDialog = Widget.extend({
+    events: _.extend({}, website.TopBar.prototype.events, {
         'hidden.bs.modal': 'destroy',
         'click button[data-action=activate]': function (ev) {
             this.trigger('activate');
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 826e29e261c..5d5f8e4c1ba 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -6,10 +6,4 @@
         <span class="o_stat_text oe_publish text-success">Published</span>
     </div>
 
-    <t t-name="FieldTextHtmlFrame">
-        <div class="oe_form_field oe_form_field_html_frame oe_form_embedded_html" t-att-style="widget.node.attrs.style">
-            <iframe/>
-        </div>
-    </t>
-
 </templates>
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index 2256f4bbf33..d6b1fe40b72 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -23,7 +23,7 @@
     </li>
 </t>
 <t t-name="website.contentMenu.dialog.select">
-    <t t-call="website.editor.dialog">
+    <t t-call="web_editor.dialog">
         <t t-set="title">Select a Menu</t>
         <t t-set="button">Continue</t>
         <select class="form-control mb16" t-if="widget.roots">
@@ -34,7 +34,7 @@
     </t>
 </t>
 <t t-name="website.contentMenu.dialog.edit">
-    <t t-call="website.editor.dialog">
+    <t t-call="web_editor.dialog">
         <t t-set="title">Edit Menu</t>
         <select class="form-control mb16" t-if="widget.roots">
             <t t-foreach="widget.roots" t-as="root">
@@ -58,7 +58,7 @@
         </div>
     </t>
 </t>
-<t t-name="website.contentMenu.dialog.add" t-extend="website.editor.dialog.link">
+<t t-name="website.contentMenu.dialog.add" t-extend="web_editor.dialog.link">
     <t t-jquery="t[t-set='title']" t-operation="inner">
         <t t-if="!widget.update_mode">Add Menu Entry</t>
         <t t-if="widget.update_mode">Edit Menu Entry</t>
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 198336650a4..ce58e3a6c1e 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -1,601 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <t t-name="website.editorbar">
-        <div id="website-top-navbar" class="navbar navbar-inverse navbar-fixed-top hidden-xs" style="display: none;">
-            <div class="navbar-header" id="website-top-edit">
-                <ul class="nav navbar-nav js_editor_placeholder" style="position: absolute; left: 180px;">
-                </ul>
-                <form class="navbar-form text-muted">
-                    <button type="button" data-action="save"
-                            class="btn btn-primary btn-xs">Save</button>
-                    <span>or</span>
-                    <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a>
-                </form>
-            </div>
-        </div>
-    </t>
 
-    <t t-name="website.editor.dialog">
-        <div class="modal note-link-dialog" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title"><t t-esc="title"/></h3>
-                    </div>
-                    <div class="modal-body"><t t-raw="0"/></div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-primary save" t-if="!button">Save</button>
-                        <button type="button" class="btn btn-primary save" t-if="button"><t t-raw="button"/></button>
-                        <button type="button" class="btn hidden wait" disabled="disabled"/>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.dialog.link.footer-button">
-        <button type="button" class="btn pull-left remove btn-danger">Remove Link</button>
-    </t>
-    <t t-name="website.editor.dialog.link">
-        <t t-call="website.editor.dialog">
-            <t t-set="title">Link to</t>
-            <form>
-                <div class="list-group">
-                    <div class="form-group list-group-item active">
-                        <h3 class="list-group-item-heading">
-                            <label for="link-new" class="control-label">
-                                Link Label
-                            </label>
-                        </h3>
-                        <input type="text" class="form-control" id="link-text" required="required"/>
-                    </div>
-                </div>
-                <ul class="list-group">
-                    <li class="list-group-item form-group active">
-                        <h4 class="list-group-item-heading">
-                            <label for="link-page" class="control-label">
-                                Page
-                            </label>
-                        </h4>
-                        <input class="page form-control url-source"
-                               id="link-page" type="hidden"/>
-                    </li>
-                    <li class="list-group-item form-group clearfix">
-                        <div class="pull-right" style="display: none;">
-                            <label>
-                                <input type="checkbox" class="window-new"/>
-                                Open in new window
-                            </label>
-                        </div>
-                        <h4 class="list-group-item-heading">
-                            <label for="link-external" class="control-label">
-                                URL or Email Address
-                            </label>
-                        </h4>
-                        <input type="text" class="form-control url email-address url-source"
-                               id="link-external" placeholder="http://openerp.com"/>
-                    </li>
-                </ul>
-                <div class="form-horizontal link-style">
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Style
-                        </label>
-                        <div class="col-sm-4">
-                            <div class="dropdown" style="line-height: 2em;">
-                                <a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-                                    <li>
-                                        <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-success">Success<input value="btn-success" class="link-style" type="radio" name="link-style-type"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="col-sm-4">
-                            <div class="dropdown" style="line-height: 2em;">
-                                <a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-                                    <li>
-                                        <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-horizontal link-style">
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Preview
-                        </label>
-                        <div class="col-sm-10" style="line-height: 2em;">
-                            <div style="overflow: auto; max-width: 100%; max-height: 200px;">
-                                <a id="link-preview" href="#"></a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </form>
+    <t t-extend="web_editor.dialog.link">
+        <t t-jquery=".list-group-item.form-group">
+            this.removeClass('active');
         </t>
-    </t>
-    <t t-name="website.editor.dialog.media">
-        <div class="modal note-image-dialog" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog select-media">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title">Select a Media</h3>
-                    </div>
-                    <div class="modal-body">
-                        <ul class="nav nav-tabs">
-                            <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
-                            <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
-                            <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
-                            <li class="search" style="float: right;">
-                                <ul class="pager mb0 mt0">
-                                    <li class="previous disabled"><a href="#">← Previous</a></li>
-                                    <li class="next disabled"><a href="#">Next →</a></li>
-                                </ul>
-                            </li>
-                            <li class="search" style="float: right;">
-                                <form action="#">
-                                    <div class="form-group font-icons fa fa-search mb0">
-                                        <input type="search" class="form-control" id="icon-search"/>
-                                    </div>
-                                </form>
-                            </li>
-                        </ul>
-
-                        <!-- Tab panes -->
-                        <div class="tab-content">
-                            <div class="tab-pane fade in active" id="editor-media-image">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-icon">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-video">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-primary save">Save</button>
-                        <button type="button" class="btn hidden wait" disabled="disabled"/>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.dialog.image">
-        <div>
-            <form method="POST"
-                  action="/website/attach"
-                  enctype="multipart/form-data"
-                  target="fileframe"
-                  class="form-inline">
-                <div class="well">
-                    <div class="form-group pull-left">
-                        <input type="file" name="upload" accept="image/*" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
-                        <input type="hidden" name="disable_optimization" value=""/>
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
-                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-                                <span class="caret"></span>
-                                <span class="sr-only">Alternate Upload</span>
-                            </button>
-                            <ul class="dropdown-menu" role="menu">
-                                <li><a href="#" class="js_disable_optimization">Upload image without optimization</a></li>
-                            </ul>
-                        </div>
-                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
-                    </div>
-                    <div>
-                        <span class="text-muted"> — or — </span>
-                        <label for="iamgeurl">Add an image URL</label>
-                        <div class="form-group btn-group">
-                            <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
-                            <button class="btn btn-default" type="submit">Add</button>
-                        </div>
-                    </div>
-                </div>
-                <input type="hidden" name="func"/>
-                <div class="help-block"/>
-                <div class="existing-attachments">
-                    <t t-call="website.editor.dialog.image.existing"/>
-                </div>
-            </form>
-        </div>
-        <iframe src="about:blank" name="fileframe" class="hidden"/>
-    </t>
-    <t t-name="website.editor.dialog.image.existing">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog select-image">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title">Select a Picture</h3>
-                    </div>
-                    <div class="modal-body has-error">
-                        <div class="existing-attachments"/>
-                        <div class="help-block"/>
-                    </div>
-                    <div class="modal-footer">
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.dialog.image.existing.content">
-        <div class="existing-attachments">
-            <div class="row mt16" t-foreach="rows" t-as="row">
-                <div class="col-sm-2 existing-attachment-cell"
-                     t-foreach="row" t-as="attachment">
-                    <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/>
-                    <img t-att-src="attachment.website_url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" class="img img-responsive"/>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.dialog.image.existing.error">
-        <div class="help-block">
-            <p>The image could not be deleted because it is used in the
-               following pages or views:</p>
-            <ul t-foreach="views" t-as="view">
-                <li>
-                    <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
-                        <t t-esc="view.name"/>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </t>
-    <t t-name="website.editor.table.panel">
-        <table class="editorbar-panel">
-            <tr t-foreach="rows"><td t-foreach="cols">&#8203;</td></tr>
-        </table>
-    </t>
-    <t t-name="website.editor.table">
-        <table class="table table-bordered table-responsive">
-            <tbody>
-                <tr t-foreach="rows"><td t-foreach="cols">&#8203;</td></tr>
-            </tbody>
-        </table>
-    </t>
-
-    <t t-name="website.editor.discard">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title">Discard edition</h3>
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            If you discard the current edition, <em>all</em>
-                            unsaved changes will be lost.
-                        </p>
-                        <p>You can cancel to return to the edition mode.</p>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-danger">Discard</button>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Cancel</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-
-    <t t-name="website.editor.hoverbutton.link">
-        <button contentEditable="false" type="button" data-event="showLinkDialog" tabindex="-1" class="btn btn-primary hover-edition-button btn-xs">Change</button>
-    </t>
-
-    <t t-name="website.editor.hoverbutton.media">
-        <div contentEditable="false" class="hover-edition dropdown">
-            <a class="btn btn-primary btn-sm" data-toggle="dropdown" href="#">Customize</a>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-                <li><a href="#" class="hover-edition-button">Change Media</a></li>
-                <li><a href="#" class="hover-style-button">Style</a></li>
-                <li class="dropdown-submenu">
-                    <a href="#" tabindex="-1">Rotation</a>
-                    <ul class="dropdown-menu">
-                        <li data-value="fa-spin"><a>Spin</a></li>
-                        <li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
-                        <li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
-                    </ul>
-                </li>
-                <li><a href="#" data-value="fa-border">border</a></li>
-            </ul>
-        </div>
-    </t>
-
-    <t t-name="website.editor.dialog.alt">
-        <t t-call="website.editor.dialog">
-            <t t-set="title">Change media Alt and Title</t>
-            <form action="#" class="form-horizontal">
-                <div class="form-group">
-                    <label for="alt" class="col-sm-2 control-label">Alt:</label>
-                    <div class="col-sm-9"><input id="alt" type="text" class="form-control" required="required" t-att-value="widget.alt"/></div>
-                </div>
-                <div class="form-group">
-                    <label for="title" class="col-sm-2 control-label">Title:</label>
-                    <div class="col-sm-9"><input id="title" type="text" class="form-control" required="required" t-att-value="widget.title"/></div>
-                </div>
-            </form>
-        </t>
-    </t>
-
-    <t t-name="website.editor.dialog.font-icons">
-        <form action="#">
-            <input type="hidden" id="fa-icon"/>
-            <input type="hidden" id="fa-size" value="fa-1x"/>
-            <div class="font-icons-icons">
-                <t t-call="website.editor.dialog.font-icons.icons">
-                    <t t-set="iconsParser" t-value="widget.iconsParser"/>
-                </t>
-            </div>
-        </form>
-    </t>
-    <t t-name="website.editor.dialog.font-icons.icons">
-        <t t-foreach="iconsParser" t-as="data">
-            <span t-foreach="data.icons" t-as="icon"
-                  t-attf-class="#{data.base} font-icons-icon #{icon}"
-                  t-att-data-id="icon"/>
-        </t>
-    </t>
-
-    <t t-name="website.editor.dialog.video">
-        <form action="#" class="form-inline">
-            <div class="well">
-                <div class="form-group btn-group">
-                    <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
-                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left">Set a video URL</label>
-                    <input type="text"
-                        name="url"
-                        class="form-control url pull-left"
-                        style="width: 400px;"
-                        id="urlvideo"
-                        placeholder="//www.youtube.com/embed/yws1tbgNV7k"
-                        t-translation="off"/>
-                    <button class="btn btn-default">Preview</button>
-                </div>
-                <div class="form-group btn-group">
-                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
-                    <input type="text"
-                        name="embed"
-                        class="form-control url pull-left"
-                        style="width: 400px;"
-                        id="embedvideo"
-                        placeholder='&lt;iframe src="//www.youtube.com/embed/yws1tbgNV7k"&gt;&lt;/iframe&gt;'
-                        t-translation="off"/>
-                    <button class="btn btn-default">Preview</button>
-                </div>
-            </div>
-            
-            <div id="video-preview" style="width: 450px; margin: 0 auto;">
-                <div class="media_iframe_video">
-                    <div class="media_iframe_video_size"></div>
-                    <iframe
-                        src=""
-                        frameborder="0"
-                        allowfullscreen="allowfullscreen"></iframe>
-                </div>
-            </div>
-
-            <div class="text-center mt32">
-                <div class="checkbox">
-                    <label><input type="checkbox" id="autoplay"/> Autoplay</label>
-                </div>
-            </div>
-        </form>
-    </t>
-    <t t-name="website.editor.insert.inline.media">
-        <p class="inline-media-link" contenteditable="false">
-            <a class="editor-insert-media fa fa-plus-circle"></a>
-        </p>
-    </t>
-    <t t-name="website.editor.tplButton">
-        <button type="button" t-att-class="'btn btn-default btn-sm btn-small ' +
-                (options.className ? options.className : '') +
-                (options.dropdown ? 'dropdown-toggle' : '') "
-                t-att-data-toggle= "options.dropdown ? 'dropdown' : ''"
-                t-att-title="options.title ? options.title : ''"
-                t-att-data-event="options.event ? options.event : ''"
-                t-att-data-value="options.value ? options.value : ''"
-                t-att-tabindex="-1"><t t-raw="options.sLabel"/>
-                <t t-if="options.dropdown">
-                    <span class="caret"></span>
-                </t>
-        </button>
-        <t t-raw="options.dropdown or ''"/>
-    </t>
-    <t t-name="website.editor.tplAirPopover">
-        <div class="popover bottom in note-air-popover" style="display: none;">
-            <div class="arrow"></div>
-            <div class="popover-content">
-                <t t-foreach="options.airPopover" t-as="group">
-                    <div t-attf-class="note-#{group[0]} btn-group">
-                        <t t-foreach="group[1]" t-as="g">
-                            <t t-call="website.editor.tplButton">
-                                <t t-set="options" t-value="buttonInfo[g](lang ,options)"/>
-                            </t>
-                        </t>
-                    </div>
-                </t>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.tplLinkPopover">
-        <div class="note-link-popover popover bottom in'" style="display: none;">
-            <div class="arrow"></div>
-            <div class="popover-content">
-                <a href="http://www.google.com" target="_blank">www.google.com</a>
-                <div class="note-insert btn-group">
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.link.edit}" data-event="showLinkDialog" tabindex="-1">
-                        <i class="fa fa-pencil-square-o"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.link.unlink}" data-event="unlink" tabindex="-1">
-                         <i class="fa fa-chain-broken"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.tplLinkImagePopover">
-        <div class="note-link-image-popover popover bottom in'" style="display: none;">
-            <div class="arrow"></div>
-            <div class="popover-content">
-                <a href="http://www.google.com" target="_blank">www.google.com</a>
-                <div class="note-insert btn-group">
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.image}" data-event="showImageDialog" tabindex="-1">
-                        <i class="fa fa-picture-o"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.tplImagePopover">
-        <div class="note-image-popover popover bottom in'" style="display: none;">
-            <div class="arrow"></div>
-            <div class="popover-content">
-                <a href="http://www.google.com" target="_blank">www.google.com</a>
-                <div class="note-insert btn-group">
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.resizeFull}" data-event="resize" data-value="1" tabindex="-1">
-                        <span class="note-fontsize-10">100%</span>
-                    </button>
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.resizeHalf}" data-event="resize" data-value="0.5" tabindex="-1">
-                        <span class="note-fontsize-10">50%</span>
-                    </button>
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.resizeQuarter}" data-event="resize" data-value="0.25" tabindex="-1">
-                        <span class="note-fontsize-10">25%</span>
-                    </button>
-                </div>
-                <div class="note-insert btn-group">
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.floatLeft}" data-event="floatMe" data-value="left" tabindex="-1">
-                        <i class="fa fa-align-left"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.floatRight}" data-event="floatMe" data-value="right" tabindex="-1">
-                        <i class="fa fa-align-right"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.floatNone}" data-event="floatMe" data-value="none" tabindex="-1">
-                        <i class="fa fa-align-justify"></i>
-                    </button>
-                </div>
-                <div class="note-insert btn-group">
-                    <button type="button" class="btn btn-default btn-sm btn-small" t-attf-title="#{lang.image.remove}" data-event="removeMedia" data-value="none" tabindex="-1">
-                        <i class="fa fa-trash-o "></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.tplPopovers">
-        <div class="note-popover">
-            <t t-call="website.editor.tplLinkPopover"/>
-            <t t-call="website.editor.tplLinkImagePopover"/>
-            <t t-call="website.editor.tplImagePopover"/>
-            <t t-if="options.airMode">
-                <t t-call="website.editor.tplAirPopover"/>
-            </t>
-        </div>
-    </t>
-
-    <t t-name="website.editor.tplHandles">
-        <div class="note-handle">
-            <div class="note-control-selection">
-                <div class="note-control-selection-bg"></div>
-                <div class="note-control-holder note-control-nw"></div>
-                <div class="note-control-holder note-control-ne"></div>
-                <div class="note-control-holder note-control-sw"></div>
-                <div class="note-control-sizing note-control-se"></div>
-                <div class="note-control-selection-info"></div>
-            </div>
-        </div>
-    </t>
-    <t t-name="website.editor.table">
-        <ul class="dropdown-menu">
-            <div class="note-dimension-picker">
-                <div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1"></div>
-                <div class="note-dimension-picker-highlighted"></div>
-                <div class="note-dimension-picker-unhighlighted"></div>
-            </div>
-            <div class="note-dimension-display"> 1 x 1 </div>
-        </ul>
-    </t>
-    <t t-name="website.editor.color">
-        <ul class="dropdown-menu">
-            <li>
-                <div class="btn-group">
-                    <div class="note-palette-title"><t t-raw="lang.color.background"/></div>
-                    <div class="note-color-reset" data-event="backColor" data-value="inherit" t-att-title="lang.color.transparent">
-                        <t t-raw="lang.color.setTransparent"/>
-                    </div>
-                    <div class="note-color-palette" data-target-event="backColor"></div>
-                </div>
-                <div class="btn-group">
-                    <div class="note-palette-title"><t t-raw="lang.color.foreground"/></div>
-                    <div class="note-color-reset" data-event="foreColor" data-value="inherit" t-att-title="lang.color.reset">
-                        <t t-raw="lang.color.resetToDefault"/>
-                    </div>
-                    <div class="note-color-palette" data-target-event="foreColor"></div>
-                </div>
+        <t t-jquery=".list-group-item.form-group:has(#link-external)" t-operation="before">
+            <li class="list-group-item form-group">
+                <h4 class="list-group-item-heading">
+                    <label for="link-page" class="control-label">
+                        Page
+                    </label>
+                </h4>
+                <input class="page form-control url-source" id="link-page" type="hidden"/>
             </li>
-        </ul>
-    </t>
-    <t t-name="website.editor.paragraph">
-        <div class="dropdown-menu">
-            <div class="note-align btn-group">
-                <t t-call="website.editor.tplButton">
-                    <t t-set="options" t-value="leftButton"/>
-                </t>
-                <t t-call="website.editor.tplButton">
-                    <t t-set="options" t-value="centerButton"/>
-                </t>
-                <t t-call="website.editor.tplButton">
-                    <t t-set="options" t-value="rightButton"/>
-                </t>
-                <t t-call="website.editor.tplButton">
-                    <t t-set="options" t-value="justifyButton"/>
-                </t>
-            </div>
-            <div class="note-list btn-group">
-                <t t-call="website.editor.tplButton">
-                    <t t-set="options" t-value="indentButton"/>
-                </t>
-                <t t-call="website.editor.tplButton">
-                    <t t-set="options" t-value="outdentButton"/>
-                </t>
-            </div>
-        </div>
+        </t>
     </t>
+
 </templates>
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index bf25990a713..21fe07dca4a 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -18,7 +18,7 @@
                         <h4 class="modal-title">Add images</h4>
                     </div>
                     <div class="modal-body">
-                        <form action="/website/attach" method="post" enctype="multipart/form-data" >
+                        <form action="/web_editor/attachment/add" method="post" enctype="multipart/form-data" >
                             <div class="form-group">
                                 <input name="upload" type="file" value="Choose images" multiple="multiple" accept="image/*"/> 
                             </div>
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index e76d6ee55af..c5522596a74 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-name="website.editorbar.menu.promote">
+    <t t-name="website.TopBar.menu.promote">
         <li><a data-action="promote-current-page" href="#"><span title="Promote page on the web">Promote</span></a></li>
     </t>
     
diff --git a/addons/website/static/src/xml/website.translator.xml b/addons/website/static/src/xml/website.translator.xml
index 0019f8d9d3a..3e5d896faf9 100644
--- a/addons/website/static/src/xml/website.translator.xml
+++ b/addons/website/static/src/xml/website.translator.xml
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
+
 <t t-name="website.TranslatorAdditionalButtons">
     <li><a class="btn btn-link" data-action="edit_master" href="#"> or Edit Master</a></li>
 </t>
+
 <t t-name="website.TranslatorDialog">
     <div class="modal fade oe_website_translator" tabindex="-1" role="dialog">
         <div class="modal-dialog">
@@ -19,10 +21,10 @@
                         <p>
                             Here are the visuals used to help you translate efficiently:
                             <ul class="oe_translate_examples">
-                                <li class="oe_translatable_todo">
+                                <li data-oe-translation-state="to_translate">
                                     Content to translate
                                 </li>
-                                <li class="oe_translatable_text">
+                                <li data-oe-translation-state="translated">
                                     Translated content
                                 </li>
                             </ul>
@@ -37,13 +39,11 @@
                     </section>
                 </div>
                 <div class="modal-footer">
-                    <div class="pull-right">
+                    <div class="pull-left">
                         <input type="checkbox" name="do_not_show"/>
                         Do not show this dialog later.
                     </div>
                     <button type="button" data-action="activate" class="btn btn-primary">Ok</button>
-                    or
-                    <a data-action="discard" data-dismiss="modal" href="#">Cancel</a>
                 </div>
             </div>
         </div>
diff --git a/addons/website/tests/test_converter.py b/addons/website/tests/test_converter.py
index 0ab71829f9e..ba60e2fac95 100644
--- a/addons/website/tests/test_converter.py
+++ b/addons/website/tests/test_converter.py
@@ -1,15 +1,8 @@
 # -*- coding: utf-8 -*-
-import textwrap
 import unittest2
-
-from lxml import etree, html
-from lxml.builder import E
-
-from openerp.tests import common
-from openerp.addons.base.ir import ir_qweb
-from openerp.addons.website.models.ir_qweb import html_to_text
 from openerp.addons.website.models.website import slugify, unslug
 
+
 class TestUnslug(unittest2.TestCase):
     def test_unslug(self):
         tests = {
@@ -31,237 +24,6 @@ class TestUnslug(unittest2.TestCase):
             self.assertEqual(unslug(slug), expected)
 
 
-class TestHTMLToText(unittest2.TestCase):
-    def test_rawstring(self):
-        self.assertEqual(
-            "foobar",
-            html_to_text(E.div("foobar")))
-
-    def test_br(self):
-        self.assertEqual(
-            "foo\nbar",
-            html_to_text(E.div("foo", E.br(), "bar")))
-
-        self.assertEqual(
-            "foo\n\nbar\nbaz",
-            html_to_text(E.div(
-                "foo", E.br(), E.br(),
-                "bar", E.br(),
-                "baz")))
-
-    def test_p(self):
-        self.assertEqual(
-            "foo\n\nbar\n\nbaz",
-            html_to_text(E.div(
-                "foo",
-                E.p("bar"),
-                "baz")))
-
-        self.assertEqual(
-            "foo",
-            html_to_text(E.div(E.p("foo"))))
-
-        self.assertEqual(
-            "foo\n\nbar",
-            html_to_text(E.div("foo", E.p("bar"))))
-        self.assertEqual(
-            "foo\n\nbar",
-            html_to_text(E.div(E.p("foo"), "bar")))
-
-        self.assertEqual(
-            "foo\n\nbar\n\nbaz",
-            html_to_text(E.div(
-                E.p("foo"),
-                E.p("bar"),
-                E.p("baz"),
-            )))
-
-    def test_div(self):
-        self.assertEqual(
-            "foo\nbar\nbaz",
-            html_to_text(E.div(
-                "foo",
-                E.div("bar"),
-                "baz"
-            )))
-
-        self.assertEqual(
-            "foo",
-            html_to_text(E.div(E.div("foo"))))
-
-        self.assertEqual(
-            "foo\nbar",
-            html_to_text(E.div("foo", E.div("bar"))))
-        self.assertEqual(
-            "foo\nbar",
-            html_to_text(E.div(E.div("foo"), "bar")))
-
-        self.assertEqual(
-            "foo\nbar\nbaz",
-            html_to_text(E.div(
-                "foo",
-                E.div("bar"),
-                E.div("baz")
-            )))
-
-    def test_other_block(self):
-        self.assertEqual(
-            "foo\nbar\nbaz",
-            html_to_text(E.div(
-                "foo",
-                E.section("bar"),
-                "baz"
-            )))
-
-    def test_inline(self):
-        self.assertEqual(
-            "foobarbaz",
-            html_to_text(E.div("foo", E.span("bar"), "baz")))
-
-    def test_whitespace(self):
-        self.assertEqual(
-            "foo bar\nbaz",
-            html_to_text(E.div(
-                "foo\nbar",
-                E.br(),
-                "baz")
-            ))
-
-        self.assertEqual(
-            "foo bar\nbaz",
-            html_to_text(E.div(
-                E.div(E.span("foo"), " bar"),
-                "baz")))
-
-class TestConvertBack(common.TransactionCase):
-    def setUp(self):
-        super(TestConvertBack, self).setUp()
-
-    def field_rountrip_result(self, field, value, expected):
-        model = 'website.converter.test'
-        Model = self.registry(model)
-        id = Model.create(
-            self.cr, self.uid, {
-                field: value
-            })
-        [record] = Model.browse(self.cr, self.uid, [id])
-
-        e = etree.Element('span')
-        field_value = 'record.%s' % field
-        e.set('t-field', field_value)
-
-        rendered = self.registry('website.qweb').render_tag_field(
-            e, {'field': field_value}, '', ir_qweb.QWebContext(self.cr, self.uid, {
-                'record': record,
-            }, context={'inherit_branding': True}))
-        element = html.fromstring(
-            rendered, parser=html.HTMLParser(encoding='utf-8'))
-
-        converter = self.registry('website.qweb').get_converter_for(
-            element.get('data-oe-type'))
-
-        value_back = converter.from_html(
-            self.cr, self.uid, model, Model._fields[field], element)
-
-        if isinstance(expected, str):
-            expected = expected.decode('utf-8')
-        self.assertEqual(value_back, expected)
-
-    def field_roundtrip(self, field, value):
-        self.field_rountrip_result(field, value, value)
-
-    def test_integer(self):
-        self.field_roundtrip('integer', 42)
-
-    def test_float(self):
-        self.field_roundtrip('float', 42.567890)
-        self.field_roundtrip('float', 324542.567890)
-
-    def test_numeric(self):
-        self.field_roundtrip('numeric', 42.77)
-
-    def test_char(self):
-        self.field_roundtrip('char', "foo bar")
-
-        self.field_roundtrip('char', "ⒸⓄⓇⒼⒺ")
-
-    def test_selection(self):
-        self.field_roundtrip('selection', 3)
-
-    def test_selection_str(self):
-        self.field_roundtrip('selection_str', 'B')
-
-    def test_text(self):
-        self.field_roundtrip('text', textwrap.dedent("""\
-            You must obey the dance commander
-            Givin' out the order for fun
-            You must obey the dance commander
-            You know that he's the only one
-            Who gives the orders here,
-            Alright
-            Who gives the orders here,
-            Alright
-
-            It would be awesome
-            If we could dance-a
-            It would be awesome, yeah
-            Let's take the chance-a
-            It would be awesome, yeah
-            Let's start the show
-            Because you never know
-            You never know
-            You never know until you go"""))
-
-    def test_m2o(self):
-        """ the M2O field conversion (from html) is markedly different from
-        others as it directly writes into the m2o and returns nothing at all.
-        """
-        model = 'website.converter.test'
-        field = 'many2one'
-
-        Sub = self.registry('website.converter.test.sub')
-        sub_id = Sub.create(self.cr, self.uid, {'name': "Foo"})
-        sub2_id = Sub.create(self.cr, self.uid, {'name': "Bar"})
-
-        Model = self.registry(model)
-        id = Model.create(self.cr, self.uid, {field: sub_id})
-        [record] = Model.browse(self.cr, self.uid, [id])
-
-        e = etree.Element('span')
-        field_value = 'record.%s' % field
-        e.set('t-field', field_value)
-
-        rendered = self.registry('website.qweb').render_tag_field(
-            e, {'field': field_value}, '', ir_qweb.QWebContext(self.cr, self.uid, {
-                'record': record,
-            }, context={'inherit_branding': True}))
-
-        element = html.fromstring(rendered, parser=html.HTMLParser(encoding='utf-8'))
-        # emulate edition
-        element.set('data-oe-many2one-id', str(sub2_id))
-        element.text = "New content"
-
-        converter = self.registry('website.qweb').get_converter_for(
-            element.get('data-oe-type'))
-
-        value_back = converter.from_html(
-            self.cr, self.uid, model, Model._fields[field], element)
-
-        self.assertIsNone(
-            value_back, "the m2o converter should return None to avoid spurious"
-                        " or useless writes on the parent record")
-
-        self.assertEqual(
-            Sub.browse(self.cr, self.uid, sub_id).name,
-            "Foo",
-            "element edition can't change directly the m2o record"
-        )
-        self.assertEqual(
-            Model.browse(self.cr, self.uid, id).many2one.name,
-            "Bar",
-            "element edition should have been change the m2o id"
-        )
-
 class TestTitleToSlug(unittest2.TestCase):
     """
     Those tests should pass with or without python-slugify
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index a944a9ce3d6..f2729f934b6 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -3,13 +3,13 @@ import openerp.tests
 
 class TestUi(openerp.tests.HttpCase):
     def test_01_public_homepage(self):
-        self.phantom_js("/", "console.log('ok')", "odoo.__DEBUG__.services['website.snippets.animation']")
+        self.phantom_js("/", "console.log('ok')", "'website.snippets.animation' in odoo.__DEBUG__.services")
 
     def test_02_admin_homepage(self):
-        self.phantom_js("/", "console.log('ok')", "odoo.__DEBUG__.services['website.snippets.editor']", login='admin')
+        self.phantom_js("/", "console.log('ok')", "'website.snippets.editor' in odoo.__DEBUG__.services", login='admin')
 
-    def test_03_admin_rte(self):
-        self.phantom_js("/", "odoo.__DEBUG__.services['web.Tour'].run('website_rte', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.website_rte", login='admin')
-
-    def test_04_admin_tour_banner(self):
+    def test_03_admin_tour_banner(self):
         self.phantom_js("/", "odoo.__DEBUG__.services['web.Tour'].run('banner', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.banner", login='admin')
+
+    def test_03_admin_tour_rte_translator(self):
+        self.phantom_js("/", "odoo.__DEBUG__.services['web.Tour'].run('rte_translator', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.rte_translator", login='admin')
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index af66c71d373..606e95c8503 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -888,13 +888,13 @@
 </div>
 
 <div id="snippet_options" class="hidden">
-
     <t t-call="website.snippet_options"/>
-
 </div>
 </template>
 
 <template id="snippet_options">
+    
+    <t t-call="web_editor.snippet_options"/>
 
     <div data-js='blog-style'
         data-selector="section:not(.carousel):not(.parallax):not(.o_gallery)">
@@ -1018,11 +1018,6 @@
         <li data-remove="remove"><a>Remove from gallery</a></li>
     </div>
 
-    <div data-js='media'
-        data-selector="img, .media_iframe_video, span.fa, i.fa, .glyphicon">
-        <li data-edition="edition"><a>Change...</a></li>
-    </div>
-
     <div data-js='carousel'
         data-selector=":not(.o_gallery > .container) > .carousel">
         <li class="dropdown-submenu">
@@ -1123,14 +1118,6 @@
          data-selector='.panel-group > .panel:has(> .panel-collapse)'
          data-drop-in='.panel-group:has(> .panel > .panel-collapse)'>
     </div>
-
-    <!-- t-field -->
-
-    <div data-js='many2one'
-        data-selector="[data-oe-many2one-model]"
-        data-no-check="true">
-    </div>
-
 </template>
 
 
diff --git a/addons/website/views/website.backend.xml b/addons/website/views/website.backend.xml
index 2590051499c..1e10a49dfa7 100644
--- a/addons/website/views/website.backend.xml
+++ b/addons/website/views/website.backend.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <openerp>
-    <data>
 
 <template id="assets_backend" name="website assets for backend" inherit_id="web.assets_backend">
     <xpath expr="." position="inside">
@@ -9,68 +8,4 @@
     </xpath>
 </template>
 
-<template id="assets_backend_editor" name="assets for backend editor">
-    <t t-call="web.assets_common"/>
-    <script type="text/javascript" src="/web/static/src/js/watch.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
-    <script type="text/javascript" src="/web/static/lib/bootstrap/js/bootstrap.js"></script>
-    <link rel="stylesheet" href='/website/static/src/css/website.css'/>
-    <link id="bootstrap_css" rel='stylesheet' href='/web/static/lib/bootstrap/css/bootstrap.css'/>
-    <t t-call="website.summernote"/>
-    <t t-call="website.editor"/>
-    <script type="text/javascript" src="/website/static/src/js/website.backend.iframe.js"></script>
-    <style>.note-popover .popover { left: 5px !important; }</style>
-</template>
-
-<template id="editor_layout" name="Editor layout">&lt;!DOCTYPE html&gt;
-    <html t-att-lang="lang and lang.replace('_', '-')"
-          t-att-data-website-id="website.id if editable and website else None"
-          t-att-data-editable="1"
-          t-att-data-translatable="'1' if translatable else None"
-          t-att-data-main-object="repr(main_object) if editable else None"
-          t-att-data-oe-company-name="res_company.name">
-        <head>
-            <meta charset="utf-8" />
-            <title>Odoo Editor layout</title>
-            <meta name="viewport" content="initial-scale=1"/>
-            <t t-set="languages" t-value="website.get_languages() if website else None"/>
-            <t t-if="request and request.website_multilang and website">
-                <t t-foreach="website.get_alternate_languages(request.httprequest)" t-as="lang">
-                    <link rel="alternate" t-att-hreflang="lang['hreflang']" t-att-href="lang['href']"/>
-                </t>
-            </t>
-            <script>
-                var snippets_url = '<t t-esc="snippets or ''"/>';
-                var callback = window.location.href.match(/callback=([^&amp;=]+)/)[1];
-                window.top.odoo[callback+"_set_value"] = function (value, fields_values) {
-                    var editable = document.getElementsByClassName("o_editable")[0];
-                    if (value !== editable.innerHTML) {
-                        editable.innerHTML = value;
-                    }
-                };
-            </script>
-            <t t-if="not dont_load_assets">
-                <t t-call-assets="website.assets_backend_editor"/>
-            </t>
-            <t t-raw="head or ''"/>
-        </head>
-        <body onload="window.top.odoo[callback+'_content']();">
-            <div id="wrapwrap">
-                <main>
-                    <t t-raw="0"/>
-                </main>
-            </div>
-            <t t-raw="add_html or ''"/>
-        </body>
-    </html>
-</template>
-
-<template id="FieldTextHtml" name="Editor layout">
-    <t t-call="website.editor_layout">
-        <div class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
-    </t>
-</template>
-
-    </data>
 </openerp>
diff --git a/addons/website/views/website_backend_navbar.xml b/addons/website/views/website_backend_navbar.xml
index cd023bd3790..ad476a55b43 100644
--- a/addons/website/views/website_backend_navbar.xml
+++ b/addons/website/views/website_backend_navbar.xml
@@ -35,8 +35,10 @@
             </li>
         </ul>
 
-        <ul id="oe_editzone" class="nav navbar-nav hidden-xs" style="padding-left: 20px; display: none;" groups="base.group_website_publisher">
-            <li><button type="button" data-action="edit" class="btn btn-primary btn-xs">Edit</button></li>
+        <ul id="oe_editzone" class="nav navbar-nav hidden-xs" style="padding-left: 20px;" groups="base.group_website_publisher">
+            <li t-if="not translatable"><button type="button" data-action="edit" class="btn btn-primary btn-xs">Edit</button></li>
+            <li t-if="translatable"><button type="button" data-action="translate" class="btn btn-primary btn-xs">Translate</button></li>
+            <li t-if="translatable"><a class="btn btn-link" data-action="edit_master" href="#"> or Edit Master</a></li>
         </ul>
 
         <ul id="oe_systray" class="nav navbar-nav navbar-right pull-right hidden-xs">
@@ -68,7 +70,7 @@
             </li>
 
             <!-- Content -->
-            <li class="dropdown" groups="base.group_website_publisher">
+            <li class="dropdown" groups="base.group_website_publisher" t-if="editable">
                 <a id="content-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">
                     Content <span class="caret"></span>
                 </a>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 8c2a6c3c9fb..e0f1e0899ec 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -4,69 +4,9 @@
 
 <!-- Assets -->
 
-<template id="summernote" name="Summernote">
-    <script type="text/javascript" src="/website/static/src/js/openerp.define.js"></script>
-    <script>odoo.enable_website_define();</script>
-    <script>odoo.website_next_define = 'summernote/core/async';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/async.js"></script>
-    <script>odoo.website_next_define = 'summernote/core/func';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/func.js"></script>
-    <script>odoo.website_next_define = 'summernote/core/agent';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/agent.js"></script>
-    <script>odoo.website_next_define = 'summernote/core/list';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/list.js"></script>
-    <script>odoo.website_next_define = 'summernote/core/dom';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/dom.js"></script>
-    <script>odoo.website_next_define = 'summernote/core/key';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/key.js"></script>
-    <script>odoo.website_next_define = 'summernote/core/range';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/core/range.js"></script>
-
-    <script>odoo.website_next_define = 'summernote/editing/Bullet';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/editing/Bullet.js"></script>
-    <script>odoo.website_next_define = 'summernote/editing/History';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/editing/History.js"></script>
-    <script>odoo.website_next_define = 'summernote/editing/Style';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/editing/Style.js"></script>
-    <script>odoo.website_next_define = 'summernote/editing/Table';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/editing/Table.js"></script>
-    <script>odoo.website_next_define = 'summernote/editing/Typing';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/editing/Typing.js"></script>
-    <script>odoo.website_next_define = 'summernote/editing/Editor';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/editing/Editor.js"></script>
-
-    <script>odoo.website_next_define = 'summernote/module/Button';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/module/Button.js"></script>
-    <script>odoo.website_next_define = 'summernote/module/Dialog';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/module/Dialog.js"></script>
-    <script>odoo.website_next_define = 'summernote/module/Handle';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/module/Handle.js"></script>
-    <script>odoo.website_next_define = 'summernote/module/Popover';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/module/Popover.js"></script>
-    <script>odoo.website_next_define = 'summernote/module/Toolbar';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/module/Toolbar.js"></script>
-
-    <script>odoo.website_next_define = 'summernote/Renderer';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/Renderer.js"></script>
-    <script>odoo.website_next_define = 'summernote/EventHandler';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/EventHandler.js"></script>
-
-    <script>odoo.website_next_define = 'summernote/settings';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/settings.js"></script>
-
-    <script>odoo.website_next_define = 'summernote/summernote';</script>
-    <script type="text/javascript" src="/website/static/lib/summernote/src/js/summernote.js"></script>
-    <script>odoo.website_next_define = 'summernote/openerp';</script>
-    <script type="text/javascript" src="/website/static/src/js/summernote.js"></script>
-    <script>odoo.disable_website_define();</script>
-
-    <!--link rel="stylesheet" href="/website/static/lib/summernote/src/less/summernote.less"/-->
-    <link rel="stylesheet" href="/website/static/lib/summernote/summernote.css"/>
-</template>
-
-<template id="assets_common" inherit_id="web.assets_common" name="Website common assets">
-    <xpath expr='.' position="inside">
-        <t t-call="website.summernote"/>
+<template id="assets_common" inherit_id="web.assets_common" name="Website assets">
+    <xpath expr="." position="inside">
+        <script groups="base.group_website_designer" type="text/javascript" src="/website/static/src/js/website.tour.rte.js"></script>
     </xpath>
 </template>
 
@@ -80,18 +20,8 @@
     <script type="text/javascript" src="/website/static/src/js/website.share.js"></script>
 
     <script type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
-    <script src="/web/static/lib/bootstrap/js/affix.js"></script>
-    <script src="/web/static/lib/bootstrap/js/alert.js"></script>
-    <script src="/web/static/lib/bootstrap/js/button.js"></script>
-    <script src="/web/static/lib/bootstrap/js/carousel.js"></script>
-    <script src="/web/static/lib/bootstrap/js/collapse.js"></script>
-    <script src="/web/static/lib/bootstrap/js/dropdown.js"></script>
-    <script src="/web/static/lib/bootstrap/js/modal.js"></script>
-    <script src="/web/static/lib/bootstrap/js/tooltip.js"></script>
-    <script src="/web/static/lib/bootstrap/js/popover.js"></script>
-    <script src="/web/static/lib/bootstrap/js/scrollspy.js"></script>
-    <script src="/web/static/lib/bootstrap/js/tab.js"></script>
-    <script src="/web/static/lib/bootstrap/js/transition.js"></script>
+
+    <t t-call="web.bootstrap"/>
 </template>
 
 <template id="assets_backend" name="website assets for backend" inherit_id="web.assets_backend">
@@ -101,41 +31,27 @@
     </xpath>
 </template>
 
-<template id="editor" name="Editor">
-    <link rel='stylesheet' href='/website/static/src/css/snippets.css'/>
-    <link rel='stylesheet' href='/website/static/src/css/editor.css'/>
-    <link rel='stylesheet' href="/web/static/lib/jquery.ui/jquery-ui.css"/>
-    <script type="text/javascript" src="/website/static/lib/jQuery.transfo.js"></script>
-    <t t-call="web.jqueryui_conflict">
-        <script type="text/javascript" src="/web/static/lib/jquery.ui/jquery-ui.js"></script>
-    </t>
-    <script type="text/javascript" src='/website/static/lib/nearest/jquery.nearest.js'></script>
-
-    <!-- mutation observers shim backed by mutation events (8 < IE < 11, Safari < 6, FF < 14, Chrome < 17) -->
-    <script type="text/javascript" src="/website/static/lib/MutationObservers/test/sidetable.js"></script>
-    <script type="text/javascript" src="/website/static/lib/MutationObservers/MutationObserver.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.editor.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.snippets.gallery.js" />
-</template>
-
 <template id="assets_editor" name="Editor assets">
-    <t t-call="website.editor"/>
+    <script type="text/javascript" src="/website/static/src/js/website.editor.js"></script>
+    <script type="text/javascript" src="/website/static/lib/jQuery.transfo.js"></script>
     <script type="text/javascript" src="/website/static/lib/ace/ace.js"></script>
     <script type="text/javascript" src="/website/static/lib/ace/theme-monokai.js"></script>
     <script type="text/javascript" src="/website/static/lib/ace/mode-xml.js"></script>
     <script type="text/javascript" src="/website/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js"></script>
-    <script type="text/javascript" src="/website/static/lib//jquery.mjs.nestedSortable/jquery.mjs.nestedSortable.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.contentMenu.js"></script> <!-- groups="base.group_website_designer" -->
+    <script type="text/javascript" src="/website/static/lib/jquery.mjs.nestedSortable/jquery.mjs.nestedSortable.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.mobile.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.seo.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.tour.js"></script>
-    <script type="text/javascript" src="/website/static/src/js/website.tour.banner.js"></script> <!-- groups="base.group_website_designer" -->
-    <script type="text/javascript" src="/website/static/src/js/website.tour.rte.js"></script>
+    <script type="text/javascript" src="/website/static/src/js/website.tour.banner.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.ace.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.translator.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.theme.js"></script>
     <script type="text/javascript" src="/website/static/src/js/web_planner_website.js"></script>
+    <script type="text/javascript" src="/website/static/src/js/website.contentMenu.js"></script>
+    <link rel='stylesheet' href='/web_editor/static/src/css/web_editor.css'/>
+    <link rel="stylesheet" href="/website/static/src/css/website.editor.css"/>
+    <script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
+    <script type="text/javascript" src="/website/static/src/js/website.snippets.gallery.js"></script>
 </template>
 
 <!-- Layout -->
@@ -169,7 +85,8 @@
           t-att-data-website-id="website.id if editable and website else None"
           t-att-data-editable="'1' if editable else None"
           t-att-data-translatable="'1' if translatable else None"
-          t-att-data-view-xmlid="xmlid if editable else None"
+          t-att-data-edit_translations="'1' if edit_translations else None"
+          t-att-data-view-xmlid="xmlid if editable or translatable else None"
           t-att-data-main-object="repr(main_object) if editable else None"
           t-att-data-oe-company-name="res_company.name">
         <head>
@@ -245,7 +162,7 @@
                                             </b>
                                         </a>
                                         <ul class="dropdown-menu js_usermenu" role="menu">
-                                            <li><a t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout</a></li>
+                                            <li id="o_logout"><a t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout</a></li>
                                         </ul>
                                     </li>
                                 </ul>
@@ -275,6 +192,10 @@
 </template>
 
 <template id="layout_editor" inherit_id="website.layout" name="Editor" groups="base.group_website_publisher,base.group_website_designer">
+    <xpath expr='//t[@t-call-assets="website.assets_frontend"][@t-css="false"]' position="before">
+        <t groups="base.group_website_designer" t-call-assets="web_editor.summernote"/>
+        <t groups="base.group_website_designer" t-call-assets="web_editor.editor"/>
+    </xpath>
     <xpath expr='//t[@t-call-assets="website.assets_frontend"][@t-css="false"]' position="after">
         <t t-call-assets="website.assets_editor" async="True"/>
     </xpath>
@@ -302,8 +223,6 @@
     </xpath>
 </template>
 
-
-
 <!--
     Optional Bundle for PDFJS lib
     Since PDFJS is quite huge (40000 lines), please only load it when it is necessary.
@@ -377,7 +296,7 @@
     <script type="text/javascript" src="/website/static/lib/pdfjs/pdf.js"></script>
 </template>
 
-
+<!-- Features template -->
 
 <template id="login_layout" inherit_id="web.login_layout" name="Website Login Layout">
     <xpath expr="t" position="replace">
@@ -430,11 +349,11 @@
 </template>
 
 <template id="language_selector">
-    <ul class="list-inline js_language_selector mt16" t-if="(request and request.website_multilang and len(languages) &gt; 1) or (website and editable)">
+    <ul class="list-inline js_language_selector mt16" t-if="(request and request.website_multilang and len(languages) &gt; 1) or (website and (editable or translatable))">
         <li t-foreach="languages" t-as="lg">
           <a
             t-att-href="url_for(request.httprequest.path + '?' + keep_query(), lang=lg[0])"
-            t-att-data-default-lang="editable and 'true' if website and lg[0] == website.default_lang_code else None"
+            t-att-data-default-lang="(editable or translatable) and 'true' if website and lg[0] == website.default_lang_code else None"
             t-att-data-lang="lg[0]"
             class="js_change_lang"
           >
@@ -585,21 +504,6 @@
   </div>
 </template>
 
-<!-- color-picker -->
-<!-- HTML class to hide option for one mode : only-text, only-bg -->
-
-<template id="website.colorpicker" name="Color-Picker">
-    <table class="colorpicker">
-        <tr>
-            <td><button class="bg-primary" title="Primary Color"/></td>
-            <td><button class="bg-success" title="Success Color"/></td>
-            <td><button class="bg-info" title="Info Color"/></td>
-            <td><button class="bg-warning" title="Warning Color"/></td>
-            <td><button class="bg-danger" title="Danger Color"/></td>
-        </tr>
-    </table>
-</template>
-
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>
@@ -871,18 +775,7 @@
             <link rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
             <link rel='stylesheet' href='/website/static/src/css/website.css'/>
             <script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
-            <script src="/web/static/lib/bootstrap/js/affix.js"></script>
-            <script src="/web/static/lib/bootstrap/js/alert.js"></script>
-            <script src="/web/static/lib/bootstrap/js/button.js"></script>
-            <script src="/web/static/lib/bootstrap/js/carousel.js"></script>
-            <script src="/web/static/lib/bootstrap/js/collapse.js"></script>
-            <script src="/web/static/lib/bootstrap/js/dropdown.js"></script>
-            <script src="/web/static/lib/bootstrap/js/modal.js"></script>
-            <script src="/web/static/lib/bootstrap/js/tooltip.js"></script>
-            <script src="/web/static/lib/bootstrap/js/popover.js"></script>
-            <script src="/web/static/lib/bootstrap/js/scrollspy.js"></script>
-            <script src="/web/static/lib/bootstrap/js/tab.js"></script>
-            <script src="/web/static/lib/bootstrap/js/transition.js"></script>
+            <t t-call-assets="web.bootstrap"/>
             <script>
                 $(document).ready(function() {
                     var button = $('#reset_templates_button');
diff --git a/addons/website_blog/controllers/main.py b/addons/website_blog/controllers/main.py
index 5aa132d48c8..54af8cdac44 100644
--- a/addons/website_blog/controllers/main.py
+++ b/addons/website_blog/controllers/main.py
@@ -358,7 +358,7 @@ class WebsiteBlog(http.Controller):
     def change_bg(self, post_id=0, cover_properties={}, **post):
         if not post_id:
             return False
-        return request.registry['blog.post'].write(request.cr, request.uid, [int(post_id)], {'cover_properties': cover_properties}, request.context)
+        return request.registry['blog.post'].write(request.cr, request.uid, [int(post_id)], {'cover_properties': json.dumps(cover_properties)}, request.context)
 
     @http.route('/blog/get_user/', type='json', auth="public", website=True)
     def get_user(self, **post):
diff --git a/addons/website_blog/static/src/js/website.tour.blog.js b/addons/website_blog/static/src/js/website.tour.blog.js
index fd2e2f55514..404f1d2fd2d 100644
--- a/addons/website_blog/static/src/js/website.tour.blog.js
+++ b/addons/website_blog/static/src/js/website.tour.blog.js
@@ -3,12 +3,12 @@ odoo.define('website_blog.tour', function (require) {
 
 var core = require('web.core');
 var Tour = require('web.Tour');
-var website = require('website.website');
+var base = require('web_editor.base');
 
 var _t = core._t;
 
+base.ready().done(function () {
 
-website.ready().done(function () {
     Tour.register({
         id:   'blog',
         name: _t("Create a blog post"),
@@ -95,7 +95,7 @@ website.ready().done(function () {
                 popover:   { fixed: true },
             },
             {
-                waitFor:   'button[data-action=save]:not(:visible)',
+                waitNot:   'button[data-action=save]:visible',
                 element:   'a[data-action=show-mobile-preview]',
                 placement: 'bottom',
                 title:     _t("Mobile Preview"),
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index 47df7df0525..cfb2fc670c4 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -4,20 +4,19 @@ odoo.define('website_blog.editor', function (require) {
 var ajax = require('web.ajax');
 var core = require('web.core');
 var Model = require('web.Model');
-var contentMenu = require('website.contentMenu');
-var website_define = require('website.define');
-var editor = require('website.editor');
-var snippet_editor = require('website.snippets.editor');
+var base = require('web_editor.base');
+var widget = require('web_editor.widget');
+var options = require('web_editor.snippets.options');
 var website = require('website.website');
-
+var contentMenu = require('website.contentMenu');
+var rte = require('web_editor.rte');
 
 var _t = core._t;
 
-contentMenu.EditorBarContent.include({
+contentMenu.TopBar.include({
     new_blog_post: function () {
         var model = new Model('blog.blog');
-        model.call('name_search', [], { context: website.get_context() })
-        .then(function (blog_ids) {
+        model.call('name_search', [], { context: base.get_context() }).then(function (blog_ids) {
             if (blog_ids.length == 1) {
                 document.location = '/blog/' + blog_ids[0][0] + '/post/new';
             } else if (blog_ids.length > 1) {
@@ -38,36 +37,25 @@ contentMenu.EditorBarContent.include({
 
 website.if_dom_contains('.website_blog', function() {
 
-    editor.EditorBar.include({
-        edit: function () {
-            $('.popover').remove();
-            $('.cover_footer').off('click');
-            this._super();
-        },
-        save : function () {
-            var args = arguments;
-            var super_call = this._super;
-            var self = this;
-            if ($('#js_blogcover').length) {
-                var properties = {
-                    "background-image": $('#js_blogcover').css("background-image").replace(/"/g, ''),
-                    "background-color": $('#js_blogcover').attr("class"),
-                    "opacity": $('#js_blogcover').css("opacity"),
-                    "resize_class": $('#title').attr('class'),
-                };
-                ajax.jsonRpc("/blog/post_change_background", 'call', {
-                    'post_id' : $('h1[data-oe-expression="blog_post.name"]').attr('data-oe-id'),
-                    'cover_properties' : JSON.stringify(properties),
-                }).always(function() {
-                    super_call.apply(self, args);
+    rte.Class.include({
+        saveElement: function ($el, context) {
+            if ($el.is('#js_blogcover')) {
+                return ajax.jsonRpc("/blog/post_change_background", 'call', {
+                    'post_id' : +$('#blog_post_name').data('oe-id'),
+                    'cover_properties' : {
+                        "background-image": $el.css("background-image").replace(/"/g, ''),
+                        "background-color": $el.attr("class"),
+                        "opacity": $el.css("opacity"),
+                        "resize_class": $('#title').attr('class'),
+                    }
                 });
-            } else {
-                super_call.apply(self, args);
             }
+            return this._super($el, context);
         },
     });
 
-    snippet_editor.options.many2one.include({
+
+    options.registry.many2one.include({
         select_record: function (li) {
             var self = this;
             this._super(li);
@@ -77,14 +65,14 @@ website.if_dom_contains('.website_blog', function() {
                     var $img = $(this).find("img");
                     var css = window.getComputedStyle($img[0]);
                     $img.css({ width: css.width, height: css.height });
-                    $img.attr("src", "/website/image/res.partner/"+self.ID+"/image");
+                    $img.attr("src", "/web_editor/image/res.partner/"+self.ID+"/image");
                 });
                 setTimeout(function () { $nodes.removeClass('o_dirty'); },0);
             }
         }
     });
 
-    snippet_editor.options.website_blog = snippet_editor.Option.extend({
+    options.registry.website_blog = options.Class.extend({
         start : function(type, value, $li) {
             this._super();
             this.src = this.$target.css("background-image").replace(/url\(|\)|"|'/g,'').replace(/.*none$/,'');
@@ -93,44 +81,21 @@ website.if_dom_contains('.website_blog', function() {
         clear : function(type, value, $li) {
             if (type !== 'click') return;
             this.src = null;
-            this.$target.find('#js_blogcover').css({"background-image": '', "opacity": "1.0"}).attr("class", "oe_none");
-            this.$target.attr("class", "");
+            this.$target.css({"background-image": '', 'min-height': $(window).height()});
             this.$image.removeAttr("src");
         },
         change : function(type, value, $li) {
             if (type !== 'click') return;
             var self = this;
-            var _editor  = new editor.MediaDialog(this.$image, this.$image[0], {only_images: true});
-            _editor.appendTo('body');
-            _editor.on('saved', self, function (event, img) {
+            var editor  = new widget.MediaDialog(this.$image, this.$image[0], {only_images: true});
+            editor.appendTo('body');
+            editor.on('saved', self, function (event, img) {
                 var url = self.$image.attr('src');
-                self.$target.find('#js_blogcover').css({"background-image": url ? 'url(' + url + ')' : ""});
-                self.$target.attr("class","cover cover_full");
-                this.$el.parent().find('.snippet-option-website_blog:not(li[data-change])').removeClass("hidden");
+                self.$target.find('#js_blogcover').css({"background-image": url ? 'url(' + url + ')' : "", 'min-height': $(window).height()-$('#js_blogcover').offset().top});
+                self.$target.find('#js_blogcover').addClass('o_dirty');
+                self.buildingBlock.parent.rte_changed();
             });
         },
-        cover_class : function(type, value, $li) {
-            this.$target.attr("class", (type === 'over' || type === 'click') ? value : this.class);
-        },
-        opacity : function(type, value, $li) {
-            this.$target.find('#js_blogcover').css("opacity", (type === 'over' || type === 'click') ? value : this.value);
-        },
-        bgcolor : function(type, value, $li) {
-            this.$target.find('#js_blogcover').attr("class", (type === 'over' || type === 'click') ? value : this.background);
-        },
-        set_active: function(){
-            this.background = this.$target.find('#js_blogcover').attr("class");
-            this.class = this.$target.attr('class');
-            this.value = this.$target.find('#js_blogcover').css('opacity');
-            if ( this.$target.hasClass("cover") ) {
-              this.$el.parent().find('.snippet-option-website_blog:not(li[data-change])').removeClass("hidden");
-            } else {
-                this.$el.parent().find('.snippet-option-website_blog:not(li[data-change])').addClass("hidden");
-            }
-            this.$el.find('li[data-bgcolor]').removeClass("active").siblings('[data-bgcolor="' + this.background + '"]').addClass("active");
-            this.$el.find('li[data-opacity]').removeClass("active").siblings('[data-opacity="' + parseFloat(this.value).toFixed(1) + '"]').addClass("active");
-            this.$el.find('li[data-cover_class]').removeClass("active").siblings('[data-cover_class="' + this.class + '"]').addClass("active");
-        },
     });
 
 });
diff --git a/addons/website_blog/static/src/js/website_blog.inline.discussion.js b/addons/website_blog/static/src/js/website_blog.inline.discussion.js
index b1c734432be..5386ec7dc5b 100644
--- a/addons/website_blog/static/src/js/website_blog.inline.discussion.js
+++ b/addons/website_blog/static/src/js/website_blog.inline.discussion.js
@@ -5,35 +5,30 @@ odoo.define('website_blog.InlineDiscussion', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
-var website = require('website.website');
-
+var base = require('web_editor.base');
 
 var qweb = core.qweb;
 
+ajax.loadXML('/website_blog/static/src/xml/website_blog.inline.discussion.xml', qweb);
+
+
 var InlineDiscussion = core.Class.extend({
     init: function(options) {
-        var self = this ;
-        self.discus_identifier;
         var defaults = {
             position: 'right',
             post_id: $('#blog_post_name').attr('data-blog-id'),
             content : false,
             public_user: false,
         };
-        self.settings = $.extend({}, defaults, options);
-
-        // TODO: bundlify qweb templates
-        website.add_template_file('/website_blog/static/src/xml/website_blog.inline.discussion.xml').then(function () {
-            self.do_render(self);
-        });
+        this.settings = $.extend({}, defaults, options);
     },
-    do_render: function() {
+    start: function() {
         var self = this;
-        if ($('#discussions_wrapper').length === 0 && self.settings.content.length > 0) {
+        if ($('#discussions_wrapper').length === 0 && this.settings.content.length > 0) {
             $('<div id="discussions_wrapper"></div>').insertAfter($('#blog_content'));
         }
         // Attach a discussion to each paragraph.
-        self.discussions_handler(self.settings.content);
+        this.discussions_handler(this.settings.content);
 
         // Hide the discussion.
         $('html').click(function(event) {
diff --git a/addons/website_blog/static/src/js/website_blog.js b/addons/website_blog/static/src/js/website_blog.js
index 34fd94fd385..26fcb0a828b 100644
--- a/addons/website_blog/static/src/js/website_blog.js
+++ b/addons/website_blog/static/src/js/website_blog.js
@@ -35,13 +35,17 @@ $(document).ready(function() {
         if (content) {
             ajax.jsonRpc("/blog/get_user/", 'call', {}).then(function(data){
                 $('#discussions_wrapper').empty();
-                new InlineDiscussion({'content' : content, 'public_user':data[0]});
+                new InlineDiscussion({'content' : content, 'public_user':data[0]}).start();
             });
         }
 
         $(".js_tweet").share({'author_name': $('#blog_author').text()});
         $('.cover_footer').on('click', page_transist);
         $('a[href^="#blog_content"]').on('click', animate);
+
+        if ($('#js_blogcover').length) {
+            $('#js_blogcover[style*="background-image: url"]').css('min-height', $(window).height()-$('#js_blogcover').offset().top);
+        }
     }
 
 });
diff --git a/addons/website_crm_claim/website_claim_view.xml b/addons/website_crm_claim/website_claim_view.xml
index cf0e2f25852..c3b088e6839 100644
--- a/addons/website_crm_claim/website_claim_view.xml
+++ b/addons/website_crm_claim/website_claim_view.xml
@@ -2,7 +2,7 @@
 <odoo>
 
     <template id="website_crm_claim.link_claims" name="Claims Link from User Account" inherit_id="website.layout" groups="base.group_portal">
-        <xpath expr="//li[@class='dropdown']/ul/li[contains(.,'Logout')]" position="before">
+        <xpath expr="//li[@id='o_logout']" position="before">
             <li><a href="/web#action=website_crm_claim.crm_claim_category_claim0" role="menuitem">Claims</a></li>
         </xpath>
     </template>
diff --git a/addons/website_crm_score/static/src/js/set_score.js b/addons/website_crm_score/static/src/js/set_score.js
index 29caf860250..f5cc2cfafe8 100644
--- a/addons/website_crm_score/static/src/js/set_score.js
+++ b/addons/website_crm_score/static/src/js/set_score.js
@@ -1,18 +1,22 @@
 odoo.define('website_crm_score.set_score', function (require) {
 "use strict";
 
+var ajax = require('web.ajax');
 var Model = require('web.Model');
 var seo = require('website.seo');
-var website = require('website.website');
+var base = require('web_editor.base');
+var core = require('web.core');
 
-website.add_template_file('/website_crm_score/static/src/xml/track_page.xml');
+var qweb = core.qweb;
+
+ajax.loadXML('/website_crm_score/static/src/xml/track_page.xml', qweb);
 
 seo.Configurator.include({
     track: null,
     start: function() {
         this._super.apply(this, arguments);
         var self = this;
-        var obj = website.seo.Configurator.prototype.getMainObject();
+        var obj = seo.Configurator.prototype.getMainObject();
         // only display checkbox for website page
         if (obj && obj.model === 'ir.ui.view') {
             this.is_tracked().then(function(data){
@@ -33,7 +37,7 @@ seo.Configurator.include({
         if (!obj) {
             return $.Deferred().reject();
         } else {
-            return new Model(obj.model).call('read', [[obj.id], ['track'], website.get_context()]);
+            return new Model(obj.model).call('read', [[obj.id], ['track'], base.get_context()]);
         }
     },
     update: function () {
@@ -54,7 +58,7 @@ seo.Configurator.include({
         if (!obj) {
             return $.Deferred().reject();
         } else {
-            return new Model(obj.model).call('write', [[obj.id], { track: val }, website.get_context()]);
+            return new Model(obj.model).call('write', [[obj.id], { track: val }, base.get_context()]);
         }
     },
 });
diff --git a/addons/website_event/static/src/js/website.tour.event.js b/addons/website_event/static/src/js/website.tour.event.js
index 2143ba234d1..d56c5c82013 100644
--- a/addons/website_event/static/src/js/website.tour.event.js
+++ b/addons/website_event/static/src/js/website.tour.event.js
@@ -3,12 +3,13 @@ odoo.define('website_event.tour', function (require) {
 
 var core = require('web.core');
 var Tour = require('web.Tour');
+var base = require('web_editor.base');
 var website = require('website.website');
 
 
 var _t = core._t;
 
-website.ready().done(function () {
+base.ready().done(function () {
     Tour.register({
         id:   'event',
         name: _t("Create an event"),
diff --git a/addons/website_event/static/src/js/website_event.editor.js b/addons/website_event/static/src/js/website_event.editor.js
index 3bec1afa8f1..3824b5d26e3 100644
--- a/addons/website_event/static/src/js/website_event.editor.js
+++ b/addons/website_event/static/src/js/website_event.editor.js
@@ -7,7 +7,7 @@ var website = require('website.website');
 
 var _t = core._t;
 
-contentMenu.EditorBarContent.include({
+contentMenu.TopBar.include({
     new_event: function() {
         website.prompt({
             id: "editor_new_event",
diff --git a/addons/website_event/static/src/js/website_geolocation.js b/addons/website_event/static/src/js/website_geolocation.js
index 6223500aed7..54a67499cdb 100644
--- a/addons/website_event/static/src/js/website_geolocation.js
+++ b/addons/website_event/static/src/js/website_geolocation.js
@@ -1,9 +1,9 @@
 odoo.define('website_event.geolocation', function (require) {
 "use strict";
 
-var animation = require('website.snippets.animation');
+var animation = require('web_editor.snippets.animation');
 
-animation.registry.visitor = animation.Animation.extend({
+animation.registry.visitor = animation.Class.extend({
     selector: ".oe_country_events",
     start: function () {
         $.post( "/event/get_country_event_list", function( data ) {
@@ -14,4 +14,4 @@ animation.registry.visitor = animation.Animation.extend({
     }
 });
 
-});
+});
\ No newline at end of file
diff --git a/addons/website_event_sale/static/src/js/website.tour.event_sale.js b/addons/website_event_sale/static/src/js/website.tour.event_sale.js
index fa109550dc4..c756a4a3ae8 100644
--- a/addons/website_event_sale/static/src/js/website.tour.event_sale.js
+++ b/addons/website_event_sale/static/src/js/website.tour.event_sale.js
@@ -2,9 +2,10 @@ odoo.define('website_event_sale.tour', function (require) {
 'use strict';
 
 var Tour = require('web.Tour');
+var base = require('web_editor.base');
 var website = require('website.website');
 
-website.ready().done(function () {
+base.ready().done(function () {
     Tour.register({
         id:   'event_buy_tickets',
         name: "Buy tickets for the Conference on Business Apps",
diff --git a/addons/website_forum/static/src/js/website_forum.editor.js b/addons/website_forum/static/src/js/website_forum.editor.js
index ff7f3ba0957..cecdc2df992 100644
--- a/addons/website_forum/static/src/js/website_forum.editor.js
+++ b/addons/website_forum/static/src/js/website_forum.editor.js
@@ -7,7 +7,7 @@ var website = require('website.website');
 
 var _t = core._t;
 
-contentMenu.EditorBarContent.include({
+contentMenu.TopBar.include({
     new_forum: function() {
         website.prompt({
             id: "editor_new_forum",
diff --git a/addons/website_forum/static/src/js/website_forum.share.js b/addons/website_forum/static/src/js/website_forum.share.js
index 766008b297f..54f18fd9e34 100644
--- a/addons/website_forum/static/src/js/website_forum.share.js
+++ b/addons/website_forum/static/src/js/website_forum.share.js
@@ -3,12 +3,13 @@ odoo.define('website_forum.share', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
+var base = require('web_editor.base');
 var SocialShare = require('website.share');
 var website = require('website.website');
 website.if_dom_contains('.website_forum', function () {
 
 var qweb = core.qweb;
-website.add_template_file('/website_forum/static/src/xml/website_forum_share_templates.xml');
+ajax.loadXML('/website_forum/static/src/xml/website_forum_share_templates.xml', qweb);
 
 var ForumShare = SocialShare.extend({
     init: function (parent, target_type) {
@@ -39,7 +40,7 @@ var ForumShare = SocialShare.extend({
     }
 });
 
-website.ready().done(function() {
+base.ready().done(function() {
 
     // Store social share data to display modal on next page
     $(document.body).on('click', ':not(.karma_required).oe_social_share_call', function() {
diff --git a/addons/website_gengo/static/src/css/website_gengo.css b/addons/website_gengo/static/src/css/website_gengo.css
index 24f2c229cc0..c623e749963 100644
--- a/addons/website_gengo/static/src/css/website_gengo.css
+++ b/addons/website_gengo/static/src/css/website_gengo.css
@@ -1,3 +1,3 @@
-.oe_translatable_inprogress {
+.o_translatable_inprogress {
   background: #b7e4ff;
 }
\ No newline at end of file
diff --git a/addons/website_gengo/static/src/js/website_gengo.js b/addons/website_gengo/static/src/js/website_gengo.js
index 0c22f70e422..4cd6fbbf4a3 100644
--- a/addons/website_gengo/static/src/js/website_gengo.js
+++ b/addons/website_gengo/static/src/js/website_gengo.js
@@ -4,20 +4,22 @@ odoo.define('website_gengo.website_gengo', function (require) {
 var ajax = require('web.ajax');
 var core = require('web.core');
 var Widget = require('web.Widget');
-var editor = require('website.editor');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
+var translate = require('web_editor.translate');
 var website = require('website.website');
 
 var qweb = core.qweb;
 
-if (!website.translatable) {
+if (!translate.edit_translations) {
     // Temporary hack until the editor bar is moved to the web client
     return;
 }
 
-website.add_template_file('/website_gengo/static/src/xml/website.gengo.xml');
+ajax.loadXML('/website_gengo/static/src/xml/website.gengo.xml', qweb);
 
-editor.EditorBar.include({
-    events: _.extend({}, website.EditorBar.prototype.events, {
+website.TopBar.include({
+    events: _.extend({}, website.TopBar.prototype.events, {
         'click a[data-action=translation_gengo_post]': 'translation_gengo_post',
         'click a[data-action=translation_gengo_info]': 'translation_gengo_info',
     }),
@@ -26,7 +28,7 @@ editor.EditorBar.include({
         this._super.apply(this, arguments);
         var self = this;
         var gengo_langs = ["ar_SY","id_ID","nl_NL","fr_CA","pl_PL","zh_TW","sv_SE","ko_KR","pt_PT","en_US","ja_JP","es_ES","zh_CN","de_DE","fr_FR","fr_BE","ru_RU","it_IT","pt_BR","pt_BR","th_TH","nb_NO","ro_RO","tr_TR","bg_BG","da_DK","en_GB","el_GR","vi_VN","he_IL","hu_HU","fi_FI"];
-        if (gengo_langs.indexOf(website.get_context()['lang']) !== -1){
+        if (gengo_langs.indexOf(base.get_context()['lang']) !== -1){
             self.$('.gengo_post,.gengo_wait,.gengo_inprogress,.gengo_info').remove();
             self.$('button[data-action=save]')
             .after(qweb.render('website.ButtonGengoTranslator'));
@@ -34,7 +36,7 @@ editor.EditorBar.include({
     },
     translation_gengo_display:function(){
         var self = this;
-        if($('.oe_translatable_todo').length === 0){
+        if($('[data-oe-translation-state="to_translate"], [data-oe-translation-state="None"]').length === 0){
             self.$el.find('.gengo_post').addClass("hidden");
             self.$el.find('.gengo_inprogress').removeClass("hidden");
         }
@@ -42,7 +44,7 @@ editor.EditorBar.include({
     translation_gengo_post: function () {
         var self = this;
         this.new_words =  0;
-        $('.oe_translatable_todo').each(function () {
+        $('[data-oe-translation-state="to_translate"], [data-oe-translation-state="None"]').each(function () {
             self.new_words += $(this).text().trim().replace(/ +/g," ").split(" ").length;
         });
         ajax.jsonRpc('/website/check_gengo_set', 'call', {
@@ -56,7 +58,7 @@ editor.EditorBar.include({
                     self.$el.find('.gengo_post').addClass("hidden");
                     self.$el.find('.gengo_wait').removeClass("hidden");
                     var trans ={}
-                    $('.oe_translatable_todo').each(function () {
+                    $('[data-oe-translation-state="to_translate"], [data-oe-translation-state="None"]').each(function () {
                         var $node = $(this);
                         var data = $node.data();
                         if (!trans[data.oeTranslationViewId]) {
@@ -72,9 +74,8 @@ editor.EditorBar.include({
                     });
                     ajax.jsonRpc('/website/set_translations', 'call', {
                         'data': trans,
-                        'lang': website.get_context()['lang'],
+                        'lang': base.get_context()['lang'],
                     }).then(function () {
-                        $('.oe_translatable_todo').addClass('oe_translatable_inprogress').removeClass('oe_translatable_todo');
                         self.$el.find('.gengo_wait').addClass("hidden");
                         self.$el.find('.gengo_inprogress,.gengo_discard').removeClass("hidden");
                         ajax.jsonRpc('/website/post_gengo_jobs', 'call', {});
@@ -91,7 +92,6 @@ editor.EditorBar.include({
                 });
             }
         });
-
     },
     translation_gengo_info: function () {
         var repr =  $(document.documentElement).data('mainObject');
@@ -101,7 +101,7 @@ editor.EditorBar.include({
         });
         ajax.jsonRpc('/website/get_translated_length', 'call', {
             'translated_ids': translated_ids,
-            'lang': website.get_context()['lang'],
+            'lang': base.get_context()['lang'],
         }).done(function(res){
             var dialog = new GengoTranslatorStatisticDialog(res);
             dialog.appendTo($(document.body));
@@ -111,7 +111,7 @@ editor.EditorBar.include({
 });
 
 var GengoTranslatorPostDialog = Widget.extend({
-    events: _.extend({}, editor.EditorBar.prototype.events, {
+    events: _.extend({}, website.TopBar.prototype.events, {
         'hidden.bs.modal': 'destroy',
         'click button[data-action=service_level]': function () {
             this.trigger('service_level');
@@ -128,7 +128,7 @@ var GengoTranslatorPostDialog = Widget.extend({
 });
 
 var GengoTranslatorStatisticDialog = Widget.extend({
-    events: _.extend({}, editor.EditorBar.prototype.events, {
+    events: _.extend({}, website.TopBar.prototype.events, {
         'hidden.bs.modal': 'destroy',
     }),
     template: 'website.GengoTranslatorStatisticDialog',
@@ -137,10 +137,10 @@ var GengoTranslatorStatisticDialog = Widget.extend({
         this.inprogess =  0;
         this.new_words =  0;
         this.done =  res.done;
-        $('.oe_translatable_todo').each(function () {
+        $('[data-oe-translation-state="to_translate"], [data-oe-translation-state="None"]').each(function () {
             self.new_words += $(this).text().trim().replace(/ +/g," ").split(" ").length;
         });
-        $('.oe_translatable_inprogress').each(function () {
+        $('[data-oe-translation-state="inprogress"]').each(function () {
             self.inprogess += $(this).text().trim().replace(/ +/g," ").split(" ").length;
         });
         this.total = this.done + this.inprogess;
@@ -152,7 +152,7 @@ var GengoTranslatorStatisticDialog = Widget.extend({
 });
 
 var GengoApiConfigDialog = Widget.extend({
-    events: _.extend({}, editor.EditorBar.prototype.events, {
+    events: _.extend({}, website.TopBar.prototype.events, {
         'hidden.bs.modal': 'destroy',
         'click button[data-action=set_config]': 'set_config'
     }),
diff --git a/addons/website_gengo/static/src/xml/website.gengo.xml b/addons/website_gengo/static/src/xml/website.gengo.xml
index a867f6eb478..b4d8c720744 100644
--- a/addons/website_gengo/static/src/xml/website.gengo.xml
+++ b/addons/website_gengo/static/src/xml/website.gengo.xml
@@ -23,10 +23,10 @@
                                 <li style="background:#ffffb6;">
                                     Content to translate or you can post them to <b><a href="http://gengo.com/" >Gengo</a></b> for translation. 
                                 </li>
-                                <li class="oe_translatable_inprogress">
+                                <li data-oe-translation-state="inprogress">
                                     Translation in process (Gengo)
                                 </li>
-                                <li class="oe_translatable_text">
+                                <li data-oe-translation-state="translated">
                                     Already translated content
                                 </li>
                             </ul>
diff --git a/addons/website_gengo/views/website_gengo.xml b/addons/website_gengo/views/website_gengo.xml
index e8ae43fee1c..0e3e7c1e6eb 100644
--- a/addons/website_gengo/views/website_gengo.xml
+++ b/addons/website_gengo/views/website_gengo.xml
@@ -3,7 +3,7 @@
 <data>
 
 <template id="gengo_assets_editor" inherit_id="website.assets_editor" name="Editor Head" groups="base.group_website_publisher">
-    <xpath expr='//script[@src="/website/static/src/js/website.translator.js"]' position="after">
+    <xpath expr='.' position="inside">
         <link rel="stylesheet" href="/website_gengo/static/src/css/website_gengo.css"></link>
         <script type="text/javascript" src="/website_gengo/static/src/js/website_gengo.js"></script>
     </xpath>
diff --git a/addons/website_links/__init__.py b/addons/website_links/__init__.py
index 12ce74572a7..a064711b06f 100644
--- a/addons/website_links/__init__.py
+++ b/addons/website_links/__init__.py
@@ -1,3 +1,2 @@
 # -*- coding: utf-8 -*-
-import models
-import controller
\ No newline at end of file
+import controller
diff --git a/addons/website_links/__openerp__.py b/addons/website_links/__openerp__.py
index fd195a0eda1..732ec607791 100644
--- a/addons/website_links/__openerp__.py
+++ b/addons/website_links/__openerp__.py
@@ -2,14 +2,13 @@
     'name': 'Link Tracker',
     'category': 'Hidden',
     'description': """
-Create short and trackable URLs.
+Website interface to create short and trackable URLs.
 =====================================================
 
         """,
     'version': '1.0',
-    'depends':['website','marketing', 'utm'],
-    'data' : [
-        'views/website_links.xml',
+    'depends': ['website', 'marketing', 'link_tracker'],
+    'data': [
         'views/website_links_template.xml',
         'views/website_links_graphs.xml',
         'security/ir.model.access.csv',
diff --git a/addons/website_links/controller/main.py b/addons/website_links/controller/main.py
index 46da968a5c4..a91021161e2 100644
--- a/addons/website_links/controller/main.py
+++ b/addons/website_links/controller/main.py
@@ -10,7 +10,7 @@ class Website_Url(http.Controller):
     def create_shorten_url(self, **post):
         if 'url' not in post or post['url'] == '':
             return {'error': 'empty_url'}
-        return request.env['website.links'].create(post).read()
+        return request.env['link.tracker'].create(post).read()
 
     @http.route('/r', type='http', auth='user', website=True)
     def shorten_url(self, **post):
@@ -18,28 +18,22 @@ class Website_Url(http.Controller):
 
     @http.route('/website_links/add_code', type='json', auth='user')
     def add_code(self, **post):
-        link_id = request.env['website.links.code'].search([('code', '=', post['init_code'])], limit=1).link_id.id
-        new_code = request.env['website.links.code'].search_count([('code', '=', post['new_code']), ('link_id', '=', link_id)])
+        link_id = request.env['link.tracker.code'].search([('code', '=', post['init_code'])], limit=1).link_id.id
+        new_code = request.env['link.tracker.code'].search_count([('code', '=', post['new_code']), ('link_id', '=', link_id)])
         if new_code > 0:
             return new_code.read()
         else:
-            return request.env['website.links.code'].create({'code': post['new_code'], 'link_id': link_id})[0].read()
+            return request.env['link.tracker.code'].create({'code': post['new_code'], 'link_id': link_id})[0].read()
 
     @http.route('/website_links/recent_links', type='json', auth='user')
     def recent_links(self, **post):
-        return request.env['website.links'].recent_links(post['filter'], post['limit'])
+        return request.env['link.tracker'].recent_links(post['filter'], post['limit'])
 
     @http.route('/r/<string:code>+', type='http', auth="user", website=True)
     def statistics_shorten_url(self, code, **post):
-        code = request.env['website.links.code'].search([('code', '=', code)], limit=1)
+        code = request.env['link.tracker.code'].search([('code', '=', code)], limit=1)
 
         if code:
             return request.website.render("website_links.graphs", code.link_id.read()[0])
         else:
             return werkzeug.utils.redirect('', 301)
-
-    @http.route('/r/<string:code>', type='http', auth='none', website=True)
-    def full_url_redirect(self, code, **post):
-        request.env['website.links.click'].add_click(code, request.httprequest.remote_addr, request.session['geoip'].get('country_code'), stat_id=False)
-        redirect_url = request.env['website.links'].get_url_from_code(code)
-        return werkzeug.utils.redirect(redirect_url or '', 301)
diff --git a/addons/website_links/security/ir.model.access.csv b/addons/website_links/security/ir.model.access.csv
index 56f1e1dd457..6e1368eb93d 100644
--- a/addons/website_links/security/ir.model.access.csv
+++ b/addons/website_links/security/ir.model.access.csv
@@ -1,10 +1,4 @@
 id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
-access_website_links_user,website.links,model_website_links,base.group_user,1,0,0,0
-access_website_links_manager,website.links,model_website_links,base.group_website_designer,1,1,1,1
-access_website_links_public,website.links,model_website_links,base.group_public,1,0,0,0
-access_website_links_code_user,website.links.code,model_website_links_code,base.group_user,1,0,0,0
-access_website_links_code_manager,website.links.code,model_website_links_code,base.group_website_designer,1,1,1,1
-access_website_links_code_public,website.links.code,model_website_links_code,base.group_public,1,0,0,0
-access_website_links_click_user,website.links.click,model_website_links_click,base.group_user,1,0,0,0
-access_website_links_click_manager,website.links.click,model_website_links_click,base.group_website_designer,1,1,1,1
-access_website_links_click_public,website.links.click,model_website_links_click,base.group_public,1,0,0,0
+access_link_tracker_manager,link.tracker,link_tracker.model_link_tracker,base.group_website_designer,1,1,1,1
+access_link_tracker_code_manager,link.tracker.code,link_tracker.model_link_tracker_code,base.group_website_designer,1,1,1,1
+access_link_tracker_click_manager,link.tracker.click,link_tracker.model_link_tracker_click,base.group_website_designer,1,1,1,1
diff --git a/addons/website_links/static/src/js/website_links.js b/addons/website_links/static/src/js/website_links.js
index 1fe6a467809..053bb2756c7 100644
--- a/addons/website_links/static/src/js/website_links.js
+++ b/addons/website_links/static/src/js/website_links.js
@@ -4,9 +4,11 @@ odoo.define('website_links.website_links', function (require) {
 var ajax = require('web.ajax');
 var core = require('web.core');
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
 var website = require('website.website');
 var Model = require('web.Model');
 
+var qweb = core.qweb;
 var _t = core._t;
 var ZeroClipboard = window.ZeroClipboard;
 
@@ -235,7 +237,9 @@ website.if_dom_contains('div.o_website_links_create_tracked_url', function() {
         },
     });
 
-    website.ready().done(function() {
+    ajax.loadXML('/website_links/static/src/xml/recent_link.xml', qweb);
+
+    base.ready().done(function() {
 
         ZeroClipboard.config({swfPath: location.origin + "/web/static/lib/zeroclipboard/ZeroClipboard.swf" });
 
@@ -250,28 +254,24 @@ website.if_dom_contains('div.o_website_links_create_tracked_url', function() {
         source_select.start($("#source-select"), _t('e.g. Search Engine, Website page, ..'));
 
         // Recent Links Widgets
-        var recent_links;
-        website.add_template_file('/website_links/static/src/xml/recent_link.xml')
-            .then(function() {
-                recent_links = new RecentLinks();
-                recent_links.appendTo($("#o_website_links_recent_links"));
-                recent_links.get_recent_links('newest');
+        var recent_links = new RecentLinks();
+            recent_links.appendTo($("#o_website_links_recent_links"));
+            recent_links.get_recent_links('newest');
 
-                $('#filter-newest-links').click(function() {
-                    recent_links.remove_links();
-                    recent_links.get_recent_links('newest');
-                });
+        $('#filter-newest-links').click(function() {
+            recent_links.remove_links();
+            recent_links.get_recent_links('newest');
+        });
 
-                $('#filter-most-clicked-links').click(function() {
-                    recent_links.remove_links();
-                    recent_links.get_recent_links('most-clicked');
-                });
+        $('#filter-most-clicked-links').click(function() {
+            recent_links.remove_links();
+            recent_links.get_recent_links('most-clicked');
+        });
 
-                $('#filter-recently-used-links').click(function() {
-                    recent_links.remove_links();
-                    recent_links.get_recent_links('recently-used');
-                });
-            });
+        $('#filter-recently-used-links').click(function() {
+            recent_links.remove_links();
+            recent_links.get_recent_links('recently-used');
+        });
         
         // Clipboard Library
         var client = new ZeroClipboard($("#btn_shorten_url"));
diff --git a/addons/website_links/static/src/js/website_links_charts.js b/addons/website_links/static/src/js/website_links_charts.js
index 10e89364052..3db653b688b 100644
--- a/addons/website_links/static/src/js/website_links_charts.js
+++ b/addons/website_links/static/src/js/website_links_charts.js
@@ -2,13 +2,13 @@ odoo.define('website_links.charts', function (require) {
 'use strict';
 
 var Widget = require('web.Widget');
+var base = require('web_editor.base');
 var website = require('website.website');
 var Model = require('web.Model');
 
 var exports = {};
 
 website.if_dom_contains('div.o_website_links_chart', function() {
-    
     var BarChart = Widget.extend({
         init: function($element, begin_date, end_date, dates) {
             this.$element = $element;
@@ -119,7 +119,7 @@ website.if_dom_contains('div.o_website_links_chart', function() {
         },
     });
 
-    website.ready().done(function() {
+    base.ready().done(function() {
         // Resize the chart when a tab is opened, because NVD3 automatically reduce the size
         // of the chart to 5px width when the bootstrap tab is closed.
         $(".graph-tabs li a").click(function (e) {
@@ -131,7 +131,7 @@ website.if_dom_contains('div.o_website_links_chart', function() {
         // Get the code of the link
         var link_id = $('#link_id').val();
 
-        var clicks = new Model('website.links.click');
+        var clicks = new Model('link.tracker.click');
         var links_domain = ['link_id', '=', parseInt(link_id)];
 
         var total_clicks = function() {
diff --git a/addons/website_links/static/src/js/website_links_code_editor.js b/addons/website_links/static/src/js/website_links_code_editor.js
index ec36416c359..afd11a62f43 100644
--- a/addons/website_links/static/src/js/website_links_code_editor.js
+++ b/addons/website_links/static/src/js/website_links_code_editor.js
@@ -2,9 +2,10 @@ odoo.define('website_links.code_editor', function (require) {
 'use strict';
 
 var ajax = require('web.ajax');
+var base = require('web_editor.base');
 var website = require('website.website');
 
-website.ready().done(function() {
+base.ready().done(function() {
 website.if_dom_contains('.o_website_links_edit_code', function() {
 
     // Edit the short URL code
diff --git a/addons/website_mail/__openerp__.py b/addons/website_mail/__openerp__.py
index 5496274ea67..0d0814a00f8 100644
--- a/addons/website_mail/__openerp__.py
+++ b/addons/website_mail/__openerp__.py
@@ -10,19 +10,7 @@
     'author': 'OpenERP SA',
     'depends': ['website', 'mail'],
     'data': [
-        'views/snippets.xml',
         'views/website_mail.xml',
-        'views/website_email_designer.xml',
-        'views/snippet_options.xml',
-        'views/theme_list.xml',
-        'views/theme/neopolitan_snippets.xml',
-        'views/theme/skyline_snippets.xml',
-        'views/theme/narrative_snippets.xml',
-        'views/theme/sunday_snippets.xml',
-        'views/theme/go_snippets.xml',
-        'views/theme/airmail_snippets.xml',
-        'views/theme/zenflat_snippets.xml',
-        'views/theme/cleave_snippets.xml',
         'data/mail_channels.xml',
     ],
     'qweb': [
diff --git a/addons/website_mail/controllers/__init__.py b/addons/website_mail/controllers/__init__.py
index d70eef6b8ee..8ee9bae18d9 100644
--- a/addons/website_mail/controllers/__init__.py
+++ b/addons/website_mail/controllers/__init__.py
@@ -1,2 +1 @@
-import email_designer
 import main
diff --git a/addons/website_mail/controllers/email_designer.py b/addons/website_mail/controllers/email_designer.py
deleted file mode 100644
index 16ef40095a5..00000000000
--- a/addons/website_mail/controllers/email_designer.py
+++ /dev/null
@@ -1,96 +0,0 @@
-# -*- coding: utf-8 -*-
-
-import io
-from PIL import Image, ImageFont, ImageDraw
-import werkzeug.wrappers
-
-from openerp import addons
-from openerp.addons.web import http
-from openerp.addons.web.http import request
-import time
-
-
-class WebsiteEmailDesigner(http.Controller):
-
-    @http.route(['/website_mail/snippets'], type='json', auth="user", website=True)
-    def snippets(self):
-        return request.website._render('website_mail.email_designer_snippets')
-
-    @http.route([
-        '/website_mail/font_to_img/<icon>',
-        '/website_mail/font_to_img/<icon>/<color>',
-        '/website_mail/font_to_img/<icon>/<color>/<int:size>',
-        '/website_mail/font_to_img/<icon>/<color>/<int:size>/<int:alpha>',
-        ], auth="public", website=True)
-    def export_icon_to_png(self, icon, color='#000', size=100, alpha=255, font='/web/static/lib/fontawesome/fonts/fontawesome-webfont.ttf'):
-        """ This method converts FontAwesom pictograms to Images and is Used only
-            for mass mailing becuase custom fonts are not supported in mail.
-            :param icon : character from FontAwesom cheatsheet
-            :param color : RGB code of the color
-            :param size : Pixels in integer
-            :param alpha : transparency of the image from 0 to 255
-            :param font : font path
-
-            :returns PNG image converted from given font
-        """
-        # Initialize font
-        addons_path = http.addons_manifest['web']['addons_path']
-        font_obj = ImageFont.truetype(addons_path + font, size)
-
-        # Determine the dimensions of the icon
-        image = Image.new("RGBA", (size, size), color=(0, 0, 0, 0))
-        draw = ImageDraw.Draw(image)
-
-        boxw, boxh = draw.textsize(icon, font=font_obj)
-        draw.text((0, 0), icon, font=font_obj)
-        left, top, right, bottom = image.getbbox()
-
-        # Create an alpha mask
-        imagemask = Image.new("L", (boxw, boxh), 0)
-        drawmask = ImageDraw.Draw(imagemask)
-        drawmask.text((-left, -top), icon, font=font_obj, fill=alpha)
-
-        # Create a solid color image and apply the mask
-        if color.startswith('rgba'):
-            color = color.replace('rgba', 'rgb')
-            color = ','.join(color.split(',')[:-1])+')'
-        iconimage = Image.new("RGBA", (boxw, boxh), color)
-        iconimage.putalpha(imagemask)
-
-        # Create output image
-        outimage = Image.new("RGBA", (boxw, size), (0, 0, 0, 0))
-        outimage.paste(iconimage, (left, top))
-
-        # output image
-        output = io.BytesIO()
-        outimage.save(output, format="PNG")
-        response = werkzeug.wrappers.Response()
-        response.mimetype = 'image/png'
-        response.data = output.getvalue()
-        response.headers['Cache-Control'] = 'public, max-age=604800'
-        response.headers['Access-Control-Allow-Origin'] = '*'
-        response.headers['Access-Control-Allow-Methods'] = 'GET, POST'
-        response.headers['Connection'] = 'close'
-        response.headers['Date'] = time.strftime("%a, %d-%b-%Y %T GMT", time.gmtime())
-        response.headers['Expires'] = time.strftime("%a, %d-%b-%Y %T GMT", time.gmtime(time.time()+604800*60))
-
-        return response
-
-
-class Website(addons.website.controllers.main.Website):
-
-    #------------------------------------------------------
-    # Backend email template field
-    #------------------------------------------------------
-    @http.route('/website_mail/field/email', type='http', auth="public", website=True)
-    def FieldTextHtmlEmail(self, model=None, res_id=None, field=None, callback=None, **kwargs):
-        kwargs['template'] = "website_mail.FieldTextHtmlEmail"
-        return self.FieldTextHtml(model, res_id, field, callback, **kwargs)
-
-    @http.route('/website_mail/field/email_template', type='http', auth="public", website=True)
-    def FieldTextHtmlEmailTemplate(self, model=None, res_id=None, field=None, callback=None, **kwargs):
-        cr, uid, context = request.cr, request.uid, request.context
-        kwargs['theme'] = True
-        kwargs['snippets'] = 'snippets' not in kwargs and '/website_mail/snippets' or kwargs['snippets']
-        kwargs['dont_load_assets'] = not kwargs.get('enable_editor')
-        return self.FieldTextHtmlEmail(model, res_id, field, callback, **kwargs)
diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
index a81238a9c53..3e4efb78acc 100644
--- a/addons/website_mail/static/src/js/follow.js
+++ b/addons/website_mail/static/src/js/follow.js
@@ -2,14 +2,13 @@ odoo.define('website_mail.follow', function (require) {
 'use strict';
 
 var ajax = require('web.ajax');
-var animation = require('website.snippets.animation');
+var animation = require('web_editor.snippets.animation');
 
-animation.registry.follow = animation.Animation.extend({
+animation.registry.follow = animation.Class.extend({
     selector: ".js_follow",
     start: function (editable_mode) {
         var self = this;
         this.is_user = false;
-
         ajax.jsonRpc('/website_mail/is_follower', 'call', {
             model: this.$target.data('object'),
             id: this.$target.data('id'),
diff --git a/addons/website_mail/views/website_email_designer.xml b/addons/website_mail/views/website_email_designer.xml
deleted file mode 100644
index 87e060c4a8b..00000000000
--- a/addons/website_mail/views/website_email_designer.xml
+++ /dev/null
@@ -1,85 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<openerp>
-    <data>
-
-<record id="mail_wizard_invite_form" model="ir.ui.view">
-    <field name="name">Add Followers</field>
-    <field name="model">mail.wizard.invite</field>
-    <field name="inherit_id" ref="mail.mail_wizard_invite_form"/>
-    <field name="arch" type="xml">
-        <data>
-            <field name="message" position="attributes">
-                <attribute name="options">{'editor_url': '/website_mail/field/email'}</attribute>
-            </field>
-        </data>
-    </field>
-</record>
-
-<record id="email_compose_message_wizard_form" model="ir.ui.view">
-    <field name="name">mail.compose.message.form</field>
-    <field name="model">mail.compose.message</field>
-    <field name="inherit_id" ref="mail.email_compose_message_wizard_form"/>
-    <field name="arch" type="xml">
-        <data>
-            <field name="body" position="attributes">
-                <attribute name="options">{'editor_url': '/website_mail/field/email'}</attribute>
-            </field>
-        </data>
-    </field>
-</record>
-
-<!-- Template Choice page -->
-<template id="FieldTextHtmlEmail" name="Editor layout">
-    
-    <t t-set="head">
-        <t t-if="enable_editor">
-            <link rel="stylesheet" href="/website_mail/static/src/css/snippets.css" type="text/css"/>
-            <script type="text/javascript" src="/website_mail/static/src/js/website_email_designer.js"></script>
-        </t>
-        <link rel="stylesheet" href="/website_mail/static/src/css/website_mail_iframe.css" type="text/css"/>
-    </t>
-
-    <t t-set="add_html">
-        <t t-if="theme and enable_editor">
-            <span t-if="theme" id="choose_template" class="o_not_editable btn btn-primary"><span>Theme</span><span class="hidden">Cancel selection</span></span>
-        </t>
-    </t>
-
-    <t t-call="website.editor_layout">
-        <div>
-            <div class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
-        </div>
-        <div id="templates" class="o_not_editable hidden" t-if="theme and enable_editor">
-            <h1 class="page-header mt16 email_head panel-primary">
-                Select a theme 
-                <button type="button" class="btn btn-sm btn-default info_popover fa fa-info-circle" data-toggle="popover" data-trigger="focus" title="Help" data-content="Here you can design your own template from scratch by selecting your favorite theme."></button>
-            </h1>  
-            <t t-call="website_mail.mass_mail_theme_list"/>
-
-            <div class="hidden">
-                <h1 class="page-header mt16">
-                    Choose a Template
-                </h1>
-                <div id="email_template_list">
-                    <div class="hidden">
-                        <div class="theme_thumbnail">
-                            <div class="overlay text-center">
-                                <p>template</p>
-                                <a class="btn btn-primary btn-sm js_template_set"> Select </a>
-                            </div>
-                            <div class="template_preview js_content"/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    </t>
-</template>
-
-
-    </data>
-</openerp>
-
-
-
diff --git a/addons/website_mail/views/website_mail.xml b/addons/website_mail/views/website_mail.xml
index b8207839b02..5a5d102908e 100644
--- a/addons/website_mail/views/website_mail.xml
+++ b/addons/website_mail/views/website_mail.xml
@@ -23,7 +23,6 @@
     <xpath expr="." position="inside">
         <script type="text/javascript" src="/website_mail/static/src/js/follow.js"></script>
         <link rel='stylesheet' href='/website_mail/static/src/css/website_mail.css'/>
-        <link rel='stylesheet' href='/website_mail/static/src/css/snippets.css'/>
     </xpath>
 </template>
 
diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js b/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
index 345aba2f75b..3e5d5f41129 100644
--- a/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
+++ b/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
@@ -3,14 +3,15 @@ odoo.define('website_mail_channel.editor', function (require) {
 
 var core = require('web.core');
 var Model = require('web.Model');
-var snippet_editor = require('website.snippets.editor');
+var base = require('web_editor.base');
+var options = require('web_editor.snippets.options');
+var snippet_editor = require('web_editor.snippet.editor');
 var website = require('website.website');
 
 var _t = core._t;
 
-
-snippet_editor.options.subscribe = snippet_editor.Option.extend({
-    choose_mailing_list: function (type, value) {
+options.subscribe = options.Class.extend({
+    select_mailing_list: function (type, value) {
         var self = this;
         if (type !== "click") return;
         return website.prompt({
@@ -19,7 +20,7 @@ snippet_editor.options.subscribe = snippet_editor.Option.extend({
             select: _t("Discussion List"),
             init: function (field) {
                 return new Model('mail.channel')
-                        .call('name_search', ['', [['public','=','public']]], { context: website.get_context() });
+                        .call('name_search', ['', [['public','=','public']]], { context: base.get_context() });
             },
         }).then(function (mail_channel_id) {
             self.$target.attr("data-id", mail_channel_id);
@@ -28,7 +29,7 @@ snippet_editor.options.subscribe = snippet_editor.Option.extend({
     drop_and_build_snippet: function() {
         var self = this;
         this._super();
-        this.choose_mailing_list("click").fail(function () {
+        this.select_mailing_list("click").fail(function () {
             self.editor.on_remove();
         });
     },
@@ -36,4 +37,5 @@ snippet_editor.options.subscribe = snippet_editor.Option.extend({
         this.$target.addClass("hidden");
     },
 });
+
 });
diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js b/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js
index bf8389e5e77..429fd7f1186 100644
--- a/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js
+++ b/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js
@@ -2,14 +2,14 @@ odoo.define('website_mail_channel.snippet', function (require) {
 'use strict';
 
 var ajax = require('web.ajax');
-var animation = require('website.snippets.animation');
+var base = require('web_editor.base');
+var animation = require('web_editor.snippets.animation');
 
-animation.registry.follow_alias = animation.Animation.extend({
+animation.registry.follow_alias = animation.Class.extend({
     selector: ".js_follow_alias",
     start: function (editable_mode) {
         var self = this;
         this.is_user = false;
-
         ajax.jsonRpc('/website_mail/is_follower', 'call', {
             model: this.$target.data('object'),
             id: this.$target.data('id'),
@@ -85,7 +85,8 @@ animation.registry.follow_alias = animation.Animation.extend({
     }
 });
 
-$(document).ready(function () {
+
+base.dom_ready.then(function () {
     $('.js_follow_btn').on('click', function (ev) {
         var email = $(ev.currentTarget).parents('.js_mg_follow_form').first().find('.js_follow_email').val();
         $(document).find('.js_follow_email').val(email);
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
index 7356a1a7ba4..02401cb4540 100644
--- a/addons/website_mail_channel/views/snippets.xml
+++ b/addons/website_mail_channel/views/snippets.xml
@@ -41,7 +41,7 @@
             data-selector=".js_follow_alias"
             data-drop-near="p, h1, h2, h3, blockquote, .well, .panel"
            >
-            <li data-choose_mailing_list=""><a>Change Discussion List</a></li>
+            <li data-select_mailing_list=""><a>Change Discussion List</a></li>
         </div>
     </xpath>
 
diff --git a/addons/website_mass_mailing/__init__.py b/addons/website_mass_mailing/__init__.py
new file mode 100644
index 00000000000..0c5de3a1093
--- /dev/null
+++ b/addons/website_mass_mailing/__init__.py
@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+import controllers
diff --git a/addons/website_mass_mailing/__openerp__.py b/addons/website_mass_mailing/__openerp__.py
new file mode 100644
index 00000000000..471bc0f985a
--- /dev/null
+++ b/addons/website_mass_mailing/__openerp__.py
@@ -0,0 +1,16 @@
+{
+    'name': 'Website Mass Mailing Campaigns',
+    'description': """
+Add a snippet in the website builder to subscribe a mass_mailing list
+    """,
+    'version': '1.0',
+    'author': 'Odoo',
+    'category': 'Hidden',
+    'depends': ['website', 'mass_mailing'],
+    'data': [
+        'views/website_mass_mailing.xml',
+        'views/unsubscribe.xml',
+        'views/snippets.xml',
+    ],
+    'auto_install': True,
+}
diff --git a/addons/website_mass_mailing/controllers/__init__.py b/addons/website_mass_mailing/controllers/__init__.py
new file mode 100644
index 00000000000..bbd183e955b
--- /dev/null
+++ b/addons/website_mass_mailing/controllers/__init__.py
@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+import main
diff --git a/addons/website_mass_mailing/controllers/main.py b/addons/website_mass_mailing/controllers/main.py
new file mode 100644
index 00000000000..49ca5d5f1a1
--- /dev/null
+++ b/addons/website_mass_mailing/controllers/main.py
@@ -0,0 +1,72 @@
+# -*- coding: utf-8 -*-
+
+from openerp import http, SUPERUSER_ID
+from openerp.http import request
+
+
+class MassMailController(http.Controller):
+
+    @http.route(['/mail/mailing/<int:mailing_id>/unsubscribe'], type='http', website=True, auth='none')
+    def mailing(self, mailing_id, email=None, res_id=None, **post):
+        mailing = request.env['mail.mass_mailing'].sudo().browse(mailing_id)
+        if mailing.exists():
+            if mailing.mailing_model == 'mail.mass_mailing.contact':
+                contacts = request.env['mail.mass_mailing.contact'].sudo().search([('email', 'ilike', email)])
+                return request.website.render('mass_mailing.page_unsubscribe', {
+                    'contacts': contacts,
+                    'email': email,
+                    'mailing_id': mailing_id})
+            else:
+                mailing.update_opt_out(mailing_id, email, [res_id], True)
+                return request.website.render('mass_mailing.page_unsubscribed')
+
+    @http.route(['/mail/mailing/unsubscribe'], type='json', auth='none')
+    def unsubscribe(self, mailing_id, opt_in_ids, opt_out_ids, email):
+        mailing = request.env['mail.mass_mailing'].sudo().browse(mailing_id)
+        if mailing.exists():
+            mailing.update_opt_out(mailing_id, email, opt_in_ids, False)
+            mailing.update_opt_out(mailing_id, email, opt_out_ids, True)
+
+    @http.route('/website_mass_mailing/is_subscriber', type='json', website=True, auth="public")
+    def is_subscriber(self, list_id, **post):
+        cr, uid, context = request.cr, request.uid, request.context
+        Contacts = request.registry['mail.mass_mailing.contact']
+        Users = request.registry['res.users']
+
+        is_subscriber = False
+        email = None
+        if uid != request.website.user_id.id:
+            email = Users.browse(cr, SUPERUSER_ID, uid, context).email
+        elif request.session.get('mass_mailing_email'):
+            email = request.session['mass_mailing_email']
+
+        if email:
+            contact_ids = Contacts.search(cr, SUPERUSER_ID, [('list_id', '=', int(list_id)), ('email', '=', email), ('opt_out', '=', False)], context=context)
+            is_subscriber = len(contact_ids) > 0
+
+        return {'is_subscriber': is_subscriber, 'email': email}
+
+    @http.route('/website_mass_mailing/subscribe', type='json', website=True, auth="public")
+    def subscribe(self, list_id, email, **post):
+        cr, uid, context = request.cr, request.uid, request.context
+        Contacts = request.registry['mail.mass_mailing.contact']
+
+        contact_ids = Contacts.search_read(cr, SUPERUSER_ID, [('list_id', '=', int(list_id)), ('email', '=', email)], ['opt_out'], context=context)
+        if not contact_ids:
+            Contacts.add_to_list(cr, SUPERUSER_ID, email, int(list_id), context=context)
+        else:
+            if contact_ids[0]['opt_out']:
+                Contacts.write(cr, SUPERUSER_ID, [contact_ids[0]['id']], {'opt_out': False}, context=context)
+        # add email to session
+        request.session['mass_mailing_email'] = email
+        return True
+
+    @http.route(['/website_mass_mailing/get_content'], type='json', website=True, auth="public")
+    def get_mass_mailing_content(self, newsletter_id, **post):
+        data = self.is_subscriber(newsletter_id, **post)
+        mass_mailing_list = request.registry['mail.mass_mailing.list'].browse(request.cr, SUPERUSER_ID, int(newsletter_id), request.context)
+        data.update({
+            'content': mass_mailing_list.popup_content,
+            'redirect_url': mass_mailing_list.popup_redirect_url
+            })
+        return data
diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
new file mode 100644
index 00000000000..eced083d6d0
--- /dev/null
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
@@ -0,0 +1,101 @@
+odoo.define('website_mass_mailing.editor', function (require) {
+'use strict';
+
+var Model = require('web.Model');
+var ajax = require('web.ajax');
+var core = require('web.core');
+var base = require('web_editor.base');
+var web_editor = require('web_editor.editor');
+var options = require('web_editor.snippets.options');
+var snippet_editor = require('web_editor.snippet.editor');
+var website = require('website.website');
+var _t = core._t;
+
+
+var mass_mailing_common = options.Class.extend({
+    popup_template_id: "editor_new_mailing_list_subscribe_button",
+    popup_title: _t("Add a Newsletter Subscribe Button"),
+    select_mailing_list: function (type, value) {
+        var self = this;
+        if (type !== "click") return;
+        return website.prompt({
+            'id': this.popup_template_id,
+            'window_title': this.popup_title,
+            'select': _t("Newsletter"),
+            'init': function (field) {
+                return new Model('mail.mass_mailing.list').call('name_search', ['', []], { context: base.get_context() });
+            },
+        }).then(function (mailing_list_id) {
+            self.$target.attr("data-list-id", mailing_list_id);
+        });
+    },
+    drop_and_build_snippet: function() {
+        var self = this;
+        this._super();
+        this.select_mailing_list('click').fail(function () {
+            self.editor.on_remove($.Event( "click" ));
+        });
+    },
+});
+
+options.registry.mailing_list_subscribe = mass_mailing_common.extend({
+    clean_for_save: function () {
+        this.$target.addClass("hidden");
+    },
+});
+
+options.registry.newsletter_popup = mass_mailing_common.extend({
+    popup_template_id: "editor_new_mailing_list_subscribe_popup",
+    popup_title: _t("Add a Newsletter Subscribe Popup"),
+    select_mailing_list: function (type, value) {
+        return this._super(type, value).then(function (mailing_list_id) {
+                ajax.jsonRpc('/web/dataset/call', 'call', {
+                    model: 'mail.mass_mailing.list',
+                    method: 'read',
+                    args: [[parseInt(mailing_list_id)], ['popup_content'], base.get_context()],
+                }).then(function (data) {
+                    self.$target.find(".o_popup_content_dev").empty();
+                    if (data && data[0].popup_content) {
+                        $(data[0].popup_content).appendTo(self.$target.find(".o_popup_content_dev"));
+                    }
+                });
+            });
+    },
+});
+
+web_editor.Class.include({
+    edit: function () {
+        this._super();
+        $('body').on('click','#edit_dialog',_.bind(this.edit_dialog, this.rte.editor));
+    },
+    save : function() {
+        var $target = $('#wrapwrap').find('#o_newsletter_popup');
+        if ($target && $target.length) {
+            $target.modal('hide');
+            $target.css("display", "none");
+            $('.o_popup_bounce_small').show();
+            if (!$target.find('.o_popup_content_dev').length) {
+                $target.find('.o_popup_modal_body').prepend($('<div class="o_popup_content_dev" data-oe-placeholder="' + _t("Type Here ...") + '"></div>'));
+            }
+            var content = $('#wrapwrap .o_popup_content_dev').html();
+            var newsletter_id = $target.parent().attr('data-list-id');
+            ajax.jsonRpc('/web/dataset/call', 'call', {
+                model: 'mail.mass_mailing.list',
+                method: 'write',
+                args: [parseInt(newsletter_id),
+                   {'popup_content':content},
+                   base.get_context()],
+            });
+        }
+        return this._super();
+    },
+    edit_dialog : function() {
+        $('#wrapwrap').find('#o_newsletter_popup').modal('show');
+        $('.o_popup_bounce_small').hide();
+        $('.modal-backdrop').css("z-index", "0");
+    },
+});
+
+});
+
+
diff --git a/addons/mass_mailing/static/src/js/website_mass_mailing.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
similarity index 94%
rename from addons/mass_mailing/static/src/js/website_mass_mailing.js
rename to addons/website_mass_mailing/static/src/js/website_mass_mailing.js
index 5af42260990..2d0760a202a 100644
--- a/addons/mass_mailing/static/src/js/website_mass_mailing.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
@@ -3,10 +3,11 @@ odoo.define('mass_mailing.website_integration', function (require) {
 
 var ajax = require('web.ajax');
 var utils = require('web.utils');
-var animation = require('website.snippets.animation');
+var animation = require('web_editor.snippets.animation');
 var website = require('website.website');
 
-animation.registry.subscribe = animation.Animation.extend({
+
+animation.registry.subscribe = animation.Class.extend({
     selector: ".js_subscribe",
     start: function (editable_mode) {
         var self = this;
@@ -59,7 +60,7 @@ animation.registry.subscribe = animation.Animation.extend({
     },
 });
 
-animation.registry.newsletter_popup = animation.Animation.extend({
+animation.registry.newsletter_popup = animation.Class.extend({
     selector: ".o_newsletter_popup",
     start: function (editable_mode) {
         var self = this;
@@ -96,11 +97,11 @@ animation.registry.newsletter_popup = animation.Animation.extend({
         ajax.jsonRpc('/website_mass_mailing/subscribe', 'call', {
             'list_id': self.$target.data('list-id'),
             'email': $email.length ? $email.val() : false
-        }).then(function () {
+        }).then(function (subscribe) {
             self.$target.find('#o_newsletter_popup').modal('hide');
             $(document).off('mouseleave');
             if (self.redirect_url) {
-                if (_.contains(self.redirect_url.split('/'), window.location.host) || self.redirect_url.indexOf('/')=== 0) {
+                if (_.contains(self.redirect_url.split('/'), window.location.host) || self.redirect_url.indexOf('/')== 0) {
                     window.location.href = self.redirect_url;
                 } else { window.open(self.redirect_url, '_blank'); }
             }
@@ -136,12 +137,12 @@ website.if_dom_contains('div.o_unsubscribe_form', function() {
         });
 
         ajax.jsonRpc('/mail/mailing/unsubscribe', 'call', {'opt_in_ids': checked_ids, 'opt_out_ids': unchecked_ids, 'email': email, 'mailing_id': mailing_id})
-            .then(function() {
+            .then(function(result) {
                 $('.alert-info').html('Your changes has been saved.').removeClass('alert-info').addClass('alert-success');
             })
             .fail(function() {
                 $('.alert-info').html('You changes has not been saved, try again later.').removeClass('alert-info').addClass('alert-warning');
-            }); 
+            });
     });
 });
 
diff --git a/addons/website_mass_mailing/views/snippets.xml b/addons/website_mass_mailing/views/snippets.xml
new file mode 100644
index 00000000000..14757594900
--- /dev/null
+++ b/addons/website_mass_mailing/views/snippets.xml
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+
+<template id="mailing_list_subscribe" inherit_id="website.snippets" name="Subscribe to Newsletter">
+
+    <xpath expr="//div[@id='snippet_content']/div[@class='o_panel_body']" position="inside">
+        <div>
+            <div class="oe_snippet_thumbnail">
+                <img class="oe_snippet_thumbnail_img" src="/mass_mailing/static/src/img/blocks/button_newsletter.png"/>
+                <span class="oe_snippet_thumbnail_title">Newsletter</span>
+            </div>
+
+            <div class="oe_snippet_body input-group js_subscribe"
+                      data-list-id="0">
+                <input
+                      type="email"
+                      name="email"
+                      class="js_subscribe_email form-control"
+                      placeholder="your email..."/>
+                <span class="input-group-btn">
+                    <a href="#" class="btn btn-primary js_subscribe_btn">Subscribe</a>
+                    <a href="#" class="btn btn-success js_subscribed_btn hidden" disabled="disabled">Thanks</a>
+                </span>
+                <div class="alert alert-success hidden">Thanks for your subscription!</div>
+            </div>
+
+        </div>
+    </xpath>
+
+    <xpath expr="//div[@id='snippet_options']" position="inside">
+        <div data-js='mailing_list_subscribe'
+            data-selector=".js_subscribe"
+            data-drop-near="p, h1, h2, h3, blockquote, .well, .panel">
+            <li data-select_mailing_list=""><a>Change Newsletter</a></li>
+        </div>
+    </xpath>
+
+</template>
+
+<template id="website_popup_snippet" name="popup snippet" inherit_id="website.snippets">
+    <xpath expr="//div[@id='snippet_feature']/div[@class='o_panel_body']" position="inside">
+        <div>
+            <div class="oe_snippet_thumbnail">
+                <img class="oe_snippet_thumbnail_img" src="/mass_mailing/static/src/img/blocks/bounce.png" />
+                <span class="oe_snippet_thumbnail_title">Newsletter Popup</span>
+            </div>
+
+            <div class="o_newsletter_popup" data-list-id="0">
+                <div class="alert alert-warning alert-dismissible fade in css_non_editable_mode_hidden o_not_editable" role="alert">
+                    <strong>Newsletter Popup!</strong> The newsletter popup snippet effect is active on this page. Click <a id="edit_dialog" href="#">Here To Edit Dialog Content</a>
+                </div>
+                <div class="modal modal-dialog modal-md fade fade-custom" id="o_newsletter_popup" tabindex="-1" role="dialog">
+                    <div class="modal-content o_popup_modal_content">
+                        <a href="#" class="o_popup_btn_close o_not_editable" data-dismiss="modal">&amp;times;</a>
+
+                        <div class="o_popup_modal_body text-center">
+                            <div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."/>
+                            <div class="input-group o_not_editable o_popup_animated o_popup_bounce_del500ms o_popup_bounce_small" >
+                                <input type="email" name="email" class="popup_subscribe_email form-control" placeholder="your email..." autofocus="autofocus"/>
+                                <span class="input-group-btn">
+                                    <a href="#" class="btn btn-success popup_subscribe_btn">Subscribe</a>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </xpath>
+</template>
+
+<template id="website_popup_options" name="Popup Options" inherit_id="website.snippet_options">
+    <xpath expr="//div" position="after">
+        <div data-js='newsletter_popup'
+            data-selector=".o_newsletter_popup"
+            data-drop-in=".oe_structure, [data-oe-type=html]">
+            <li data-select_mailing_list=""><a>Change Newsletter</a></li>
+        </div>
+    </xpath>
+</template>
+
+<template id="FieldTextHtmlPopupContent" name="Editor layout">
+    <t t-set="head">
+        <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor.css" type="text/css"/>
+        <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor_thumb.css" type="text/css"/>
+        <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_popup.css" type="text/css"/>
+     </t>
+    <t t-call="web_editor.layout">
+        <div class="modal-dialog modal-md show" id="o_newsletter_popup">
+            <div class="modal-content o_popup_modal_content">
+                <div class="o_popup_modal_body text-center">
+                    <div class="o_popup_content_dev">
+                        <div class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html">
+                            <!-- Can be removed once default values are ok for the editor -->
+                            <t t-raw="content">
+                                <div class="o_popup_modal_header text-center">
+                                    <h3 class="o_popup_modal_title mt8">Odoo Presents</h3>
+                                </div>
+                                <div class="o_popup_message">
+                                    <font>7</font>
+                                    <strong>Business Hacks</strong>
+                                    <span> to<br/>boost your marketing</span>
+                                </div>
+                                <p class="o_message_paragraph">Join our Marketing newsletter and get <strong>this white paper instantly</strong></p>
+                            </t>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+ </template>
+
+</data>
+</openerp>
diff --git a/addons/mass_mailing/views/unsubscribe.xml b/addons/website_mass_mailing/views/unsubscribe.xml
similarity index 95%
rename from addons/mass_mailing/views/unsubscribe.xml
rename to addons/website_mass_mailing/views/unsubscribe.xml
index 606dbabe51d..11d6de1213f 100644
--- a/addons/mass_mailing/views/unsubscribe.xml
+++ b/addons/website_mass_mailing/views/unsubscribe.xml
@@ -59,13 +59,13 @@
 
         <template id="page_unsubscribe" name="Unsubscribe">
             <t t-call="website.layout">
-                <t t-call="mass_mailing.unsubscribe"/>
+                <t t-call="website_mass_mailing.unsubscribe"/>
             </t>
         </template>
 
         <template id="page_unsubscribed" name="Unsubscribed">
             <t t-call="website.layout">
-                <t t-call="mass_mailing.unsubscribed"/>
+                <t t-call="website_mass_mailing.unsubscribed"/>
             </t>
         </template>
     </data>
diff --git a/addons/website_mass_mailing/views/website_mass_mailing.xml b/addons/website_mass_mailing/views/website_mass_mailing.xml
new file mode 100644
index 00000000000..ad5d201343a
--- /dev/null
+++ b/addons/website_mass_mailing/views/website_mass_mailing.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+
+<template id="assets_frontend" inherit_id="website.assets_frontend" name="Mail Frontend Assets">
+    <xpath expr="." position="inside">
+        <script type="text/javascript" src="/website_mass_mailing/static/src/js/website_mass_mailing.js"></script>
+    </xpath>
+</template>
+
+<template id="assets_editor" inherit_id="website.assets_editor" name="wesbite_mass_mailing Editor assets">
+    <xpath expr="/t" position="inside">
+        <script type="text/javascript" src="/website_mass_mailing/static/src/js/website_mass_mailing.editor.js" groups="base.group_website_publisher"></script>
+    </xpath>
+</template>
+
+    </data>
+</openerp>
diff --git a/addons/website_portal/static/src/js/website_portal.js b/addons/website_portal/static/src/js/website_portal.js
index 4a89baa1a89..9779f60a98a 100644
--- a/addons/website_portal/static/src/js/website_portal.js
+++ b/addons/website_portal/static/src/js/website_portal.js
@@ -1,9 +1,9 @@
 odoo.define('website_portal', function(require) {
     'use strict';
 
-    var website = require('website.website');
+    var base = require('web_editor.base');
     var qweb = require('qweb');
-    website.ready().done(function() {
+    base.ready().done(function() {
 
         $('.oe_website_portal').on('change', "select[name='country_id']", function () {
             var $select = $("select[name='state_id']");
diff --git a/addons/website_portal/views/templates.xml b/addons/website_portal/views/templates.xml
index 35ed0a5618a..9b5381e0cef 100644
--- a/addons/website_portal/views/templates.xml
+++ b/addons/website_portal/views/templates.xml
@@ -280,7 +280,7 @@
                       <t t-foreach="order.order_line" t-as="ol">
                         <div class="row orders_vertical_align">
                             <div class="col-md-1 text-center">
-                                <img t-att-src="'/website/image/product.product/%s/image_small/48x48' % ol.product_id.id"/>
+                                <img t-att-src="'/web_editor/image/product.product/%s/image_small/48x48' % ol.product_id.id"/>
                             </div>
                             <div id='product_name' class="col-md-5">
                               <span t-esc="ol.product_id.name"/>
@@ -445,7 +445,7 @@
     </template>
 
     <template id="my_account_link" name="Link to frontend portal" inherit_id="website.layout">
-        <xpath expr="//li[@class='dropdown']/ul/li[contains(.,'Logout')]" position="before">
+        <xpath expr="//li[@id='o_logout']" position="before">
             <li><a href="/my/home" role="menuitem">My Account</a></li>
         </xpath>
     </template>
diff --git a/addons/website_project_issue/website_project_issue_view.xml b/addons/website_project_issue/website_project_issue_view.xml
index e45ed420d88..278a6cbcad1 100644
--- a/addons/website_project_issue/website_project_issue_view.xml
+++ b/addons/website_project_issue/website_project_issue_view.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <template id="website_project_issue.link_issues" name="Issues Link from User Account" inherit_id="website.layout" groups="base.group_portal">
-        <xpath expr="//li[@class='dropdown']/ul/li[contains(.,'Logout')]" position="before">
+        <xpath expr="//li[@id='o_logout']" position="before">
             <li><a href="/web#action=website_project_issue.open_view_issue" role="menuitem">Issues</a></li>
         </xpath>
     </template>
diff --git a/addons/website_report/__init__.py b/addons/website_report/__init__.py
deleted file mode 100644
index a0526c7c636..00000000000
--- a/addons/website_report/__init__.py
+++ /dev/null
@@ -1,2 +0,0 @@
-import controllers
-import report
diff --git a/addons/website_report/__openerp__.py b/addons/website_report/__openerp__.py
deleted file mode 100644
index f35b5032c57..00000000000
--- a/addons/website_report/__openerp__.py
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-    'name': 'Website Report',
-    'category': 'Website',
-    'summary': 'Website Editor on reports',
-    'version': '1.0',
-    'description': """
-Use the website editor to customize your reports.
-        """,
-    'author': 'OpenERP SA',
-    'depends': ['base', 'website', 'report'],
-    'data': [
-        'views/layouts.xml',
-    ],
-    'installable': True,
-    'auto_install': True,
-}
diff --git a/addons/website_report/i18n/cs.po b/addons/website_report/i18n/cs.po
deleted file mode 100644
index f5b01f3fe40..00000000000
--- a/addons/website_report/i18n/cs.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Czech translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-11-18 12:54+0000\n"
-"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
-"Language-Team: Czech <cs@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-11-19 06:46+0000\n"
-"X-Generator: Launchpad (build 17252)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr ""
diff --git a/addons/website_report/i18n/de.po b/addons/website_report/i18n/de.po
deleted file mode 100644
index 4f73edf3981..00000000000
--- a/addons/website_report/i18n/de.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# German translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-08-18 20:18+0000\n"
-"Last-Translator: Ralf Hilgenstock <rh@dialoge.info>\n"
-"Language-Team: German <de@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-08-19 07:06+0000\n"
-"X-Generator: Launchpad (build 17156)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Eine Sprache hinzufügen..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "Container"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/es.po b/addons/website_report/i18n/es.po
deleted file mode 100644
index 8e41ea3b0ce..00000000000
--- a/addons/website_report/i18n/es.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Spanish translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-08-14 21:31+0000\n"
-"Last-Translator: Pedro Manuel Baeza <pedro.baeza@gmail.com>\n"
-"Language-Team: Spanish <es@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-08-15 07:58+0000\n"
-"X-Generator: Launchpad (build 17156)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Añadir un idioma..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "contenedor"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/it.po b/addons/website_report/i18n/it.po
deleted file mode 100644
index a493f2b699d..00000000000
--- a/addons/website_report/i18n/it.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Italian translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-10-03 12:41+0000\n"
-"Last-Translator: Nicola Riolini - Micronaet <nicola.riolini@gmail.com>\n"
-"Language-Team: Italian <it@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-10-04 06:50+0000\n"
-"X-Generator: Launchpad (build 17196)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Aggiungi una lingua..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "contenitore"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/mk.po b/addons/website_report/i18n/mk.po
deleted file mode 100644
index ae5673b62df..00000000000
--- a/addons/website_report/i18n/mk.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Macedonian translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-10-16 11:25+0000\n"
-"Last-Translator: Tome Barbov <tome.barbov@eskon.com.mk>\n"
-"Language-Team: Macedonian <mk@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-10-17 06:28+0000\n"
-"X-Generator: Launchpad (build 17196)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Додади јазик..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/nl.po b/addons/website_report/i18n/nl.po
deleted file mode 100644
index b9a80dd5273..00000000000
--- a/addons/website_report/i18n/nl.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Dutch translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-08-18 18:01+0000\n"
-"Last-Translator: Leen Sonneveld <leen.sonneveld@opensol.nl>\n"
-"Language-Team: Dutch <nl@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-08-19 07:06+0000\n"
-"X-Generator: Launchpad (build 17156)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Voeg een taal toe..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "container"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/pt.po b/addons/website_report/i18n/pt.po
deleted file mode 100644
index dd7385bbd82..00000000000
--- a/addons/website_report/i18n/pt.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Portuguese translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-08-19 22:50+0000\n"
-"Last-Translator: Opencloud - PT <Unknown>\n"
-"Language-Team: Portuguese <pt@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-08-20 06:28+0000\n"
-"X-Generator: Launchpad (build 17163)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Adicionar uma língua"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "contentor"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/pt_BR.po b/addons/website_report/i18n/pt_BR.po
deleted file mode 100644
index 14e4d12d58d..00000000000
--- a/addons/website_report/i18n/pt_BR.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Brazilian Portuguese translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-09-17 11:17+0000\n"
-"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
-"Language-Team: Brazilian Portuguese <pt_BR@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-09-19 08:22+0000\n"
-"X-Generator: Launchpad (build 17196)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr ""
diff --git a/addons/website_report/i18n/ro.po b/addons/website_report/i18n/ro.po
deleted file mode 100644
index b3165ae7e9c..00000000000
--- a/addons/website_report/i18n/ro.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Romanian translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-10-11 14:57+0000\n"
-"Last-Translator: Dorin <dhongu@gmail.com>\n"
-"Language-Team: Romanian <ro@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-10-12 07:21+0000\n"
-"X-Generator: Launchpad (build 17196)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Adaugă o limbă..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "container"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/tr.po b/addons/website_report/i18n/tr.po
deleted file mode 100644
index 6599296bd50..00000000000
--- a/addons/website_report/i18n/tr.po
+++ /dev/null
@@ -1,48 +0,0 @@
-# Turkish translation for openobject-addons
-# Copyright (c) 2014 Rosetta Contributors and Canonical Ltd 2014
-# This file is distributed under the same license as the openobject-addons package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2014.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: openobject-addons\n"
-"Report-Msgid-Bugs-To: FULL NAME <EMAIL@ADDRESS>\n"
-"POT-Creation-Date: 2014-08-14 13:09+0000\n"
-"PO-Revision-Date: 2014-10-10 11:24+0000\n"
-"Last-Translator: Ediz Duman <neps1192@gmail.com>\n"
-"Language-Team: Turkish <tr@li.org>\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"X-Launchpad-Export-Date: 2014-10-11 05:17+0000\n"
-"X-Generator: Launchpad (build 17196)\n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr "Bir dil ekleyin ..."
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr "Konteyner"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr "data_report_dpi if data_report_dpi else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr "data_report_header_spacing if data_report_header_spacing else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr "data_report_margin_top if data_report_margin_top else None"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr "website_report.layout"
diff --git a/addons/website_report/i18n/website_report.pot b/addons/website_report/i18n/website_report.pot
deleted file mode 100644
index df167424e3d..00000000000
--- a/addons/website_report/i18n/website_report.pot
+++ /dev/null
@@ -1,47 +0,0 @@
-# Translation of Odoo Server.
-# This file contains the translation of the following modules:
-#	* website_report
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: Odoo Server 8.0\n"
-"Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-01-21 14:09+0000\n"
-"PO-Revision-Date: 2015-01-21 14:09+0000\n"
-"Last-Translator: <>\n"
-"Language-Team: \n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: \n"
-"Plural-Forms: \n"
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "Add a language..."
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "container"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_dpi if data_report_dpi else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_header_spacing if data_report_header_spacing else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "data_report_margin_top if data_report_margin_top else None"
-msgstr ""
-
-#. module: website_report
-#: view:website:website_report.layout
-msgid "website_report.layout"
-msgstr ""
-
diff --git a/addons/website_report/views/layouts.xml b/addons/website_report/views/layouts.xml
deleted file mode 100644
index d3fc460ca85..00000000000
--- a/addons/website_report/views/layouts.xml
+++ /dev/null
@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
-
-<template id="layout" inherit_id="website.layout" primary="True">
-    <!-- Add report attributes -->
-    <xpath expr="//html" position="attributes">
-        <attribute name="t-att-data-report-margin-top">data_report_margin_top if data_report_margin_top else None</attribute>
-        <attribute name="t-att-data-report-header-spacing">data_report_header_spacing if data_report_header_spacing else None</attribute>
-        <attribute name="t-att-data-report-dpi">data_report_dpi if data_report_dpi else None</attribute>
-    </xpath>
-    <!-- Add report style -->
-    <xpath expr="//head" position="inside">
-        <style type="text/css">
-            <t t-call="report.style"/>
-            /* To avoid broken snippets in report rendering */
-            .jumbotron, .panel, .carousel, section{
-                page-break-inside:avoid;
-            }
-            /* Wkhtmltopdf don't support very well the media-print CSS (depends on the version) */
-            .hidden-print{
-                display:none;
-            }
-        </style>
-    </xpath>
-    <xpath expr="//body" position="attributes">
-        <attribute name="class">container</attribute>
-    </xpath>
-    <xpath expr="//header" position="replace"/>
-    <xpath expr="//footer" position="replace">
-        <t t-call="website.language_selector"/>
-    </xpath>
-</template>
-
-<template id="website_html_container" inherit_id="report.html_container">
-    <xpath expr="//t[@t-call='report.layout']" position="replace">
-        <t t-call="website_report.layout">
-            <t t-raw="0"/>
-        </t>
-    </xpath>
-</template>
-</data>
-</openerp>
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index b7d69b8c257..9c914a1f082 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -5,13 +5,13 @@ var ajax = require('web.ajax');
 var core = require('web.core');
 var Model = require('web.Model');
 var contentMenu = require('website.contentMenu');
-var snippet_editor = require('website.snippets.editor');
+var options = require('web_editor.snippets.options');
+
 var website = require('website.website');
 
 var _t = core._t;
 
-
-contentMenu.EditorBarContent.include({
+contentMenu.TopBar.include({
     new_product: function() {
         website.prompt({
             id: "editor_new_product",
@@ -25,7 +25,7 @@ contentMenu.EditorBarContent.include({
     },
 });
 
-snippet_editor.options.website_sale = snippet_editor.Option.extend({
+options.registry.website_sale = options.Class.extend({
     start: function () {
         var self = this;
         this.product_tmpl_id = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 2113156d7a3..ab3b639d104 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -2,11 +2,11 @@ odoo.define('website_sale.website_sale', function (require) {
 "use strict";
 
 var ajax = require('web.ajax');
-var session = require('web.session');
 var core = require('web.core');
 var _t = core._t;
+var base = require('web_editor.base');
 
-$(document).ready(function () {
+base.dom_ready.then(function () {
 
 $('#o_shop_collapse_category').on('click', '.fa-chevron-right',function(){
     $(this).parent().siblings().find('.fa-chevron-down:first').click();
@@ -20,7 +20,6 @@ $('#o_shop_collapse_category').on('click', '.fa-chevron-down',function(){
 });
 
 
-
 var shopping_cart_link = $('ul#top_menu li a[href^="/shop/cart"]');
 var shopping_cart_link_counter;
 shopping_cart_link.popover({
@@ -207,11 +206,15 @@ $('.oe_website_sale').each(function () {
         return false;
     });
 
-    $('.oe_website_sale .a-submit, #comment .a-submit').off('click').on('click', function () {
-        $(this).closest('form').submit();
+    $('.oe_website_sale .a-submit, #comment .a-submit').off('click').on('click', function (event) {
+        if (!event.isDefaultPrevented()) {
+            $(this).closest('form').submit();
+        }
     });
-    $('form.js_attributes input, form.js_attributes select', oe_website_sale).on('change', function () {
-        $(this).closest("form").submit();
+    $('form.js_attributes input, form.js_attributes select', oe_website_sale).on('change', function (event) {
+        if (!event.isDefaultPrevented()) {
+            $(this).closest("form").submit();
+        }
     });
 
     // change price when they are variants
@@ -243,7 +246,7 @@ $('.oe_website_sale').each(function () {
         $parent.find(".oe_price:first .oe_currency_value").html(price_to_str(+$(this).data('price')) );
 
         var $img = $(this).closest('tr.js_product, .oe_website_sale').find('span[data-oe-model^="product."][data-oe-type="image"] img:first, img.product_detail_img');
-        $img.attr("src", "/website/image/product.product/" + $(this).val() + "/image");
+        $img.attr("src", "/web_editor/image/product.product/" + $(this).val() + "/image");
     });
 
     $(oe_website_sale).on('change', 'input.js_variant_change, select.js_variant_change, ul[data-attribute_value_ids]', function (ev) {
@@ -280,7 +283,7 @@ $('.oe_website_sale').each(function () {
 
         if (product_id) {
             var $img = $(this).closest('tr.js_product, .oe_website_sale').find('span[data-oe-model^="product."][data-oe-type="image"] img:first, img.product_detail_img');
-            $img.attr("src", "/website/image/product.product/" + product_id + "/image");
+            $img.attr("src", "/web_editor/image/product.product/" + product_id + "/image");
             $img.parent().attr('data-oe-model', 'product.product').attr('data-oe-id', product_id)
                 .data('oe-model', 'product.product').data('oe-id', product_id);
         }
@@ -333,6 +336,7 @@ $('.oe_website_sale').each(function () {
     });
     $(oe_website_sale).find("select[name='shipping_country_id']").change();
 });
+
 });
 
 });
diff --git a/addons/website_sale/static/src/js/website_sale_tour_shop.js b/addons/website_sale/static/src/js/website_sale_tour_shop.js
index 2e0d2e84db5..d36873e9e8c 100644
--- a/addons/website_sale/static/src/js/website_sale_tour_shop.js
+++ b/addons/website_sale/static/src/js/website_sale_tour_shop.js
@@ -3,11 +3,12 @@ odoo.define('website_sale.tour_shop', function (require) {
 
 var core = require('web.core');
 var Tour = require('web.Tour');
+var base = require('web_editor.base');
 var website = require('website.website');
 
 var _t = core._t;
 
-website.ready().done(function () {
+base.ready().done(function () {
     Tour.register({
         id: 'shop',
         name: _t("Create a product"),
@@ -72,7 +73,7 @@ website.ready().done(function () {
                 content:   _t("Choose an image from the library."),
                 popover:   { fixed: true },
                 onload: function () {
-                    $('form[action="/website/attach"] .well > *').hide();
+                    $('form[action="/web_editor/attachment/add"] .well > *').hide();
                 }
             },
             {
@@ -98,7 +99,7 @@ website.ready().done(function () {
                 popover:   { fixed: true },
             },
             {
-                waitFor:   '#website-top-navbar:hidden',
+                waitNot:   '#web_editor-top-edit',
                 element:   '.js_publish_management button.js_publish_btn.btn-danger',
                 placement: 'top',
                 title:     _t("Publish your product"),
diff --git a/addons/website_sale_options/static/src/js/website_sale.js b/addons/website_sale_options/static/src/js/website_sale.js
index e26c199b2a9..dca3232296a 100644
--- a/addons/website_sale_options/static/src/js/website_sale.js
+++ b/addons/website_sale_options/static/src/js/website_sale.js
@@ -3,11 +3,10 @@ odoo.define('website_sale_options.website_sale', function(require) {
 
 var ajax = require('web.ajax');
 var website = require('website.website');
+var base = require('web_editor.base');
+
+website.if_dom_contains("ul.js_add_cart_variants[data-attribute_value_ids]", function () {
 
-$(document).ready(function () {
-    if(! $("ul.js_add_cart_variants[data-attribute_value_ids]").length){
-        return;
-    }
 $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
     .off('click')
     .removeClass('a-submit')
@@ -18,13 +17,13 @@ $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
         event.preventDefault();
         ajax.jsonRpc("/shop/modal", 'call', {
                 'product_id': product_id,
-                kwargs: {
-                   context: _.extend({'quantity': quantity}, website.get_context())
+                'kwargs': {
+                   'context': _.extend({'quantity': quantity}, base.get_context())
                 },
             }).then(function (modal) {
                 var $modal = $(modal);
 
-                $modal.find('img:first').attr("src", "/website/image/product.product/" + product_id + "/image_medium");
+                $modal.find('img:first').attr("src", "/web_editor/image/product.product/" + product_id + "/image_medium");
 
                 $modal.appendTo($form)
                     .modal()
@@ -36,7 +35,7 @@ $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
                     var $a = $(this);
                     $form.ajaxSubmit({
                         url:  '/shop/cart/update_option',
-                        data: {lang: website.get_context().lang},
+                        data: {lang: base.get_context().lang},
                         success: function (quantity) {
                             if (!$a.hasClass('js_goto_shop')) {
                                 window.location.href = window.location.href.replace(/shop([\/?].*)?$/, "shop/cart");
@@ -113,6 +112,7 @@ $('#cart_products input.js_quantity').change(function () {
         $next = $next.next('.optional_product');
     }
 });
+
 });
 
 });
diff --git a/addons/website_sale_options/static/src/js/website_sale.test.js b/addons/website_sale_options/static/src/js/website_sale.test.js
index c6bdc19f423..69ddb27468c 100644
--- a/addons/website_sale_options/static/src/js/website_sale.test.js
+++ b/addons/website_sale_options/static/src/js/website_sale.test.js
@@ -26,6 +26,7 @@ Tour.register({
         {
             title:     "open customize menu",
             element:   '#customize-menu-button',
+            wait: 250
         },
         {
             title:     "click on 'Product Attribute's Filters'",
@@ -83,6 +84,7 @@ Tour.register({
             title:     "open customize menu bis",
             waitFor:   '#products_grid_before .js_attributes',
             element:   '#customize-menu-button',
+            wait: 250
         },
         {
             title:     "remove 'Product Attribute's Filters'",
diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index 0076ac17671..2570e575323 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -258,7 +258,7 @@ class website_slides(http.Controller):
 
         def slide_mapped_dict(slide):
             return {
-                'img_src': '/website/image/slide.slide/%s/image_thumb' % (slide.id),
+                'img_src': '/web_editor/image/slide.slide/%s/image_thumb' % (slide.id),
                 'caption': slide.name,
                 'url': slide.website_url
             }
diff --git a/addons/website_slides/data/website_slides_data.xml b/addons/website_slides/data/website_slides_data.xml
index 04372a644e4..00c0634d69a 100644
--- a/addons/website_slides/data/website_slides_data.xml
+++ b/addons/website_slides/data/website_slides_data.xml
@@ -43,7 +43,7 @@
     </tr><tr>
         <td style="width: 600px; vertical-align:top; text-align:center; background-color:#FFFFF; color:#414141">
             <a href="${object.website_url}" style="color: #a24689;">
-                <img alt="${object.name}" src="${ctx['base_url']}/website/image/slide.slide/${object.id}/image" style="height:auto; width:500px; background-color: #cccccc; margin: 16px;">
+                <img alt="${object.name}" src="${ctx['base_url']}/web_editor/image/slide.slide/${object.id}/image" style="height:auto; width:500px; background-color: #cccccc; margin: 16px;">
             </a>
             <p style="font-size:24px; font-weight:bold"><a href="${object.website_url}">${object.name}</a></p>
             <p style="color: #ccc;">Published on ${object.write_date}</p>
@@ -94,7 +94,7 @@
     </tr><tr>
         <td style="width: 600px; vertical-align:top; text-align:center; background-color:#FFFFF; color:#414141">
             <a href="${object.website_url}" style="color: #a24689;">
-                <img alt="${object.name}" src="${ctx['base_url']}/website/image/slide.slide/${object.id}/image"
+                <img alt="${object.name}" src="${ctx['base_url']}/web_editor/image/slide.slide/${object.id}/image"
                     style="height:auto; width:500px; background-color: #cccccc; margin: 16px;">
             </a>
             <p style="font-size:24px; font-weight:bold"><a href="${object.website_url}">${object.name}</a></p>
diff --git a/addons/website_slides/static/src/js/slides_embed.js b/addons/website_slides/static/src/js/slides_embed.js
index 5c6e89ef70d..67000eba25f 100644
--- a/addons/website_slides/static/src/js/slides_embed.js
+++ b/addons/website_slides/static/src/js/slides_embed.js
@@ -26,7 +26,7 @@ $(document).ready(function () {
             });
         };
         EmbeddedViewer.prototype.__proto__ = {
-            // jquery inside the object (like openerp.Widget)
+            // jquery inside the object (like Widget)
             $: function(selector){
                 return this.viewer.find($(selector));
             },
@@ -170,7 +170,7 @@ $(document).ready(function () {
             embedded_viewer.$('.slide_embed_code').val(new_code);
         });
 
-        // To avoid create a dependancy to openerpframework.js, we use JQuery AJAX to post data instead of openerp.jsonRpc
+        // To avoid create a dependancy to openerpframework.js, we use JQuery AJAX to post data instead of ajax.jsonRpc
         $('.oe_slide_js_share_email button').on('click', function () {
             var widget = $('.oe_slide_js_share_email');
             var input = widget.find('input');
diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js
index c1d0c68d028..b8b5250372e 100644
--- a/addons/website_slides/static/src/js/slides_upload.js
+++ b/addons/website_slides/static/src/js/slides_upload.js
@@ -5,354 +5,358 @@ odoo.define('website_slides.upload', function (require) {
 var ajax = require('web.ajax');
 var core = require('web.core');
 var Widget = require('web.Widget');
-var website = require('website.website');
+var base = require('web_editor.base');
 var slides = require('website_slides.slides');
+var website = require('website.website');
 
+var qweb = core.qweb;
 var _t = core._t;
 
 website.if_dom_contains('.oe_slide_js_upload', function () {
 
-    website.add_template_file('/website_slides/static/src/xml/website_slides.xml');
+ajax.loadXML('/website_slides/static/src/xml/website_slides.xml', qweb);
 
-    var SlideDialog = Widget.extend({
-        template: 'website.slide.upload',
-        events: {
-            'hidden.bs.modal': 'destroy',
-            'click button.save': 'save',
-            'click button[data-dismiss="modal"]': 'cancel',
-            'change input#upload': 'slide_upload',
-            'change input#url': 'slide_url',
-            'click .list-group-item': function (ev) {
-                this.$('.list-group-item').removeClass('active');
-                $(ev.target).closest('li').addClass('active');
+var SlideDialog = Widget.extend({
+    template: 'website.slide.upload',
+    events: {
+        'hidden.bs.modal': 'destroy',
+        'click button.save': 'save',
+        'click button[data-dismiss="modal"]': 'cancel',
+        'change input#upload': 'slide_upload',
+        'change input#url': 'slide_url',
+        'click .list-group-item': function (ev) {
+            this.$('.list-group-item').removeClass('active');
+            $(ev.target).closest('li').addClass('active');
+        }
+    },
+    init: function (el, channel_id) {
+        this._super(el, channel_id);
+        this.channel_id = parseInt(channel_id, 10);
+        this.file = {};
+        this.index_content = "";
+    },
+    start: function () {
+        this.$el.modal({
+            backdrop: 'static'
+        });
+        this.set_category_id();
+        this.set_tag_ids();
+    },
+    slide_url: function (ev) {
+        var self = this,
+            value = {
+                'url': $(ev.target).val(),
+                'channel_id': self.channel_id
+            };
+        this.$('.alert-warning').remove();
+        this.is_valid_url = false;
+        this.$('.save').button('loading');
+        ajax.jsonRpc('/slides/dialog_preview/', 'call', value).then(function (data) {
+            self.$('.save').button('reset');
+            if (data.error) {
+                self.display_alert(data.error);
+            } else {
+                self.$("#slide-image").attr("src", data.url_src);
+                self.$('#name').val(data.title);
+                self.$('#description').val(data.description);
+                self.is_valid_url = true;
             }
-        },
-        init: function (el, channel_id) {
-            this._super(el, channel_id);
-            this.channel_id = parseInt(channel_id, 10);
-            this.file = {};
-            this.index_content = "";
-        },
-        start: function () {
-            this.$el.modal({
-                backdrop: 'static'
-            });
-            this.set_category_id();
-            this.set_tag_ids();
-        },
-        slide_url: function (ev) {
-            var self = this,
-                value = {
-                    'url': $(ev.target).val(),
-                    'channel_id': self.channel_id
-                };
-            this.$('.alert-warning').remove();
-            this.is_valid_url = false;
+        });
+    },
+    check_unique_slide: function (file_name) {
+        var self = this;
+        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+            model: 'slide.slide',
+            method: 'search_count',
+            args: [[['channel_id', '=', self.channel_id], ['name', '=', file_name]]],
+            kwargs: {}
+        });
+    },
+    slide_upload: function (ev) {
+        var self = this,
+            file = ev.target.files[0],
+            is_image = /^image\/.*/.test(file.type),
+            loaded = false;
+        this.file.name = file.name;
+        this.file.type = file.type;
+        if (!(is_image || this.file.type === 'application/pdf')) {
+            this.display_alert(_t("Invalid file type. Please select pdf or image file"));
+            this.reset_file();
+            return;
+        }
+        if (file.size / 1024 / 1024 > 15) {
+            this.display_alert(_t("File is too big. Please select file upto 15MB"));
+            this.reset_file();
+            return;
+        }
+        this.$('.alert-warning').remove();
+        var BinaryReader = new FileReader();
+        // file read as DataURL
+        BinaryReader.readAsDataURL(file);
+        BinaryReader.onloadend = function (upload) {
+            var buffer = upload.target.result;
+            if (is_image) {
+                self.$("#slide-image").attr("src", buffer);
+            }
+            buffer = buffer.split(',')[1];
+            self.file.data = buffer;
+        };
+
+        if (file.type === 'application/pdf') {
+            var ArrayReader = new FileReader();
             this.$('.save').button('loading');
-            ajax.jsonRpc('/slides/dialog_preview/', 'call', value).then(function (data) {
-                self.$('.save').button('reset');
-                if (data.error) {
-                    self.display_alert(data.error);
-                } else {
-                    self.$("#slide-image").attr("src", data.url_src);
-                    self.$('#name').val(data.title);
-                    self.$('#description').val(data.description);
-                    self.is_valid_url = true;
-                }
-            });
-        },
-        check_unique_slide: function (file_name) {
-            var self = this;
-            return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-                model: 'slide.slide',
-                method: 'search_count',
-                args: [[['channel_id', '=', self.channel_id], ['name', '=', file_name]]],
-                kwargs: {}
-            });
-        },
-        slide_upload: function (ev) {
-            var self = this,
-                file = ev.target.files[0],
-                is_image = /^image\/.*/.test(file.type),
-                loaded = false;
-            this.file.name = file.name;
-            this.file.type = file.type;
-            if (!(is_image || this.file.type === 'application/pdf')) {
-                this.display_alert(_t("Invalid file type. Please select pdf or image file"));
-                this.reset_file();
-                return;
-            }
-            if (file.size / 1024 / 1024 > 15) {
-                this.display_alert(_t("File is too big. Please select file upto 15MB"));
-                this.reset_file();
-                return;
-            }
-            this.$('.alert-warning').remove();
-            var BinaryReader = new FileReader();
-            // file read as DataURL
-            BinaryReader.readAsDataURL(file);
-            BinaryReader.onloadend = function (upload) {
-                var buffer = upload.target.result;
-                if (is_image) {
-                    self.$("#slide-image").attr("src", buffer);
-                }
-                buffer = buffer.split(',')[1];
-                self.file.data = buffer;
-            };
-
-            if (file.type === 'application/pdf') {
-                var ArrayReader = new FileReader();
-                this.$('.save').button('loading');
-                // file read as ArrayBuffer for PDFJS get_Document API
-                ArrayReader.readAsArrayBuffer(file);
-                ArrayReader.onload = function (evt) {
-                    var buffer = evt.target.result;
-                    var passwordNeeded = function () {
-                        self.display_alert(_t("You can not upload password protected file."));
-                        self.reset_file();
-                        self.$('.save').button('reset');
-                    };
-                    PDFJS.getDocument(new Uint8Array(buffer), null, passwordNeeded).then(function getPdf(pdf) {
-                        pdf.getPage(1).then(function getFirstPage(page) {
-                            var scale = 1;
-                            var viewport = page.getViewport(scale);
-                            var canvas = document.getElementById('data_canvas');
-                            var context = canvas.getContext('2d');
-                            canvas.height = viewport.height;
-                            canvas.width = viewport.width;
-                            // Render PDF page into canvas context
-                            page.render({
-                                canvasContext: context,
-                                viewport: viewport
-                            }).then(function () {
-                                var image_data = self.$('#data_canvas')[0].toDataURL();
-                                self.$("#slide-image").attr("src", image_data);
-                                if (loaded) {
-                                    self.$('.save').button('reset');
-                                }
-                                loaded = true;
-
-                            });
-                        });
-                        var maxPages = pdf.pdfInfo.numPages;
-                        var page, j;
-                        self.index_content = "";
-                        for (j = 1; j <= maxPages; j += 1) {
-                            page = pdf.getPage(j);
-                            page.then(function (page_obj) {
-                                var page_number = page_obj.pageIndex + 1;
-                                page_obj.getTextContent().then(function (data) {
-                                    var page_content = '';
-                                    _.each(data.items, function (obj) {
-                                        page_content = page_content + obj.str + " ";
-                                    });
-                                    self.index_content = self.index_content + page_number + ". " + page_content + '\n';
-                                    if (maxPages === page_number) {
-                                        if (loaded) {
-                                            self.$('.save').button('reset');
-                                        }
-                                        loaded = true;
-                                    }
-                                });
-                            });
-                        }
-                    });
+            // file read as ArrayBuffer for PDFJS get_Document API
+            ArrayReader.readAsArrayBuffer(file);
+            ArrayReader.onload = function (evt) {
+                var buffer = evt.target.result;
+                var passwordNeeded = function () {
+                    self.display_alert(_t("You can not upload password protected file."));
+                    self.reset_file();
+                    self.$('.save').button('reset');
                 };
-            }
+                PDFJS.getDocument(new Uint8Array(buffer), null, passwordNeeded).then(function getPdf(pdf) {
+                    pdf.getPage(1).then(function getFirstPage(page) {
+                        var scale = 1;
+                        var viewport = page.getViewport(scale);
+                        var canvas = document.getElementById('data_canvas');
+                        var context = canvas.getContext('2d');
+                        canvas.height = viewport.height;
+                        canvas.width = viewport.width;
+                        // Render PDF page into canvas context
+                        page.render({
+                            canvasContext: context,
+                            viewport: viewport
+                        }).then(function () {
+                            var image_data = self.$('#data_canvas')[0].toDataURL();
+                            self.$("#slide-image").attr("src", image_data);
+                            if (loaded) {
+                                self.$('.save').button('reset');
+                            }
+                            loaded = true;
 
-            var input = file.name;
-            var input_val = input.substr(0, input.lastIndexOf('.')) || input;
-            this.check_unique_slide(input_val).then(function (exist) {
-                if (exist) {
-                    var message = _t("Channel contains the given title, please change before Save or Publish.");
-                    self.display_alert(message);
-                }
-                self.$('#name').val(input_val);
-            });
-        },
-        reset_file: function () {
-            var control = this.$('#upload');
-            control.replaceWith(control = control.clone(true));
-            this.file.name = false;
-        },
-        display_alert: function (message) {
-            this.$('.alert-warning').remove();
-            $('<div class="alert alert-warning" role="alert">' + message + '</div>').insertBefore(this.$('form'));
-        },
-
-        /**
-            Wrapper for select2 load data from server at once and store it.
-
-            @param {String} Placeholder for element.
-            @param {bool}  true for multiple selection box, false for single selection
-            @param {Function} Function to fetch data from remote location should return $.deferred object
-            resolved data should be array of object with id and name. eg. [{'id': id, 'name': 'text'}, ...]
-            @returns {Object} select2 wrapper object
-        */
-        select2_wrapper: function (tag, multi, fetch_fnc) {
-            return {
-                width: '100%',
-                placeholder: tag,
-                allowClear: true,
-                formatNoMatches: _.str.sprintf(_t("No matches found. Type to create new %s"), tag),
-                multiple: multi,
-                selection_data: false,
-                fetch_rpc_fnc : fetch_fnc,
-                formatSelection: function (data) {
-                    if (data.tag) {
-                        data.text = data.tag;
-                    }
-                    return data.text;
-                },
-                createSearchChoice: function (term) {
-                    return {
-                        id: _.uniqueId('tag_'),
-                        create: true,
-                        tag: term,
-                        text: _.str.sprintf(_t("Create New %s '%s'"), tag, term)
-                    };
-                },
-                fill_data: function (query, data) {
-                    var that = this,
-                        tags = {results: []};
-                    _.each(data, function (obj) {
-                        if (that.matcher(query.term, obj.name)) {
-                            tags.results.push({id: obj.id, text: obj.name });
-                        }
-                    });
-                    query.callback(tags);
-                },
-                query: function (query) {
-                    var that = this;
-                    // fetch data only once and store it
-                    if (!this.selection_data) {
-                        this.fetch_rpc_fnc().then(function (data) {
-                            that.fill_data(query, data);
-                            that.selection_data = data;
                         });
-                    } else {
-                        this.fill_data(query, this.selection_data);
-                    }
-                }
-            };
-        },
-        // Category management from select2
-        set_category_id: function () {
-            var self =  this;
-            $('#category_id').select2(this.select2_wrapper(_t('Category'), false,
-                function () {
-                    return ajax.jsonRpc("/web/dataset/call_kw", 'call', {
-                        model: 'slide.category',
-                        method: 'search_read',
-                        args: [],
-                        kwargs: {
-                            fields: ['name'],
-                            domain: [['channel_id', '=', self.channel_id]],
-                            context: website.get_context()
-                        }
                     });
-                }));
-        },
-        get_category_id: function () {
-            var value = $('#category_id').select2('data');
-            if (value && value.create) {
-                return [0, {'name': value.text}];
+                    var maxPages = pdf.pdfInfo.numPages;
+                    var page, j;
+                    self.index_content = "";
+                    for (j = 1; j <= maxPages; j += 1) {
+                        page = pdf.getPage(j);
+                        page.then(function (page_obj) {
+                            var page_number = page_obj.pageIndex + 1;
+                            page_obj.getTextContent().then(function (data) {
+                                var page_content = '';
+                                _.each(data.items, function (obj) {
+                                    page_content = page_content + obj.str + " ";
+                                });
+                                self.index_content = self.index_content + page_number + ". " + page_content + '\n';
+                                if (maxPages === page_number) {
+                                    if (loaded) {
+                                        self.$('.save').button('reset');
+                                    }
+                                    loaded = true;
+                                }
+                            });
+                        });
+                    }
+                });
+            };
+        }
+
+        var input = file.name;
+        var input_val = input.substr(0, input.lastIndexOf('.')) || input;
+        this.check_unique_slide(input_val).then(function (exist) {
+            if (exist) {
+                var message = _t("Channel contains the given title, please change before Save or Publish.");
+                self.display_alert(message);
             }
-            return [value ? value.id : null];
-        },
-        // Tags management from select2
-        set_tag_ids: function () {
-            $('#tag_ids').select2(this.select2_wrapper(_t('Tags'), true, function () {
+            self.$('#name').val(input_val);
+        });
+    },
+    reset_file: function () {
+        var control = this.$('#upload');
+        control.replaceWith(control = control.clone(true));
+        this.file.name = false;
+    },
+    display_alert: function (message) {
+        this.$('.alert-warning').remove();
+        $('<div class="alert alert-warning" role="alert">' + message + '</div>').insertBefore(this.$('form'));
+    },
+
+    /**
+        Wrapper for select2 load data from server at once and store it.
+
+        @param {String} Placeholder for element.
+        @param {bool}  true for multiple selection box, false for single selection
+        @param {Function} Function to fetch data from remote location should return $.deferred object
+        resolved data should be array of object with id and name. eg. [{'id': id, 'name': 'text'}, ...]
+        @returns {Object} select2 wrapper object
+    */
+    select2_wrapper: function (tag, multi, fetch_fnc) {
+        return {
+            width: '100%',
+            placeholder: tag,
+            allowClear: true,
+            formatNoMatches: _.str.sprintf(_t("No matches found. Type to create new %s"), tag),
+            multiple: multi,
+            selection_data: false,
+            fetch_rpc_fnc : fetch_fnc,
+            formatSelection: function (data) {
+                if (data.tag) {
+                    data.text = data.tag;
+                }
+                return data.text;
+            },
+            createSearchChoice: function (term) {
+                return {
+                    id: _.uniqueId('tag_'),
+                    create: true,
+                    tag: term,
+                    text: _.str.sprintf(_t("Create New %s '%s'"), tag, term)
+                };
+            },
+            fill_data: function (query, data) {
+                var that = this,
+                    tags = {results: []};
+                _.each(data, function (obj) {
+                    if (that.matcher(query.term, obj.name)) {
+                        tags.results.push({id: obj.id, text: obj.name });
+                    }
+                });
+                query.callback(tags);
+            },
+            query: function (query) {
+                var that = this;
+                // fetch data only once and store it
+                if (!this.selection_data) {
+                    this.fetch_rpc_fnc().then(function (data) {
+                        that.fill_data(query, data);
+                        that.selection_data = data;
+                    });
+                } else {
+                    this.fill_data(query, this.selection_data);
+                }
+            }
+        };
+    },
+    // Category management from select2
+    set_category_id: function () {
+        var self =  this;
+        $('#category_id').select2(this.select2_wrapper(_t('Category'), false,
+            function () {
                 return ajax.jsonRpc("/web/dataset/call_kw", 'call', {
-                    model: 'slide.tag',
+                    model: 'slide.category',
                     method: 'search_read',
                     args: [],
                     kwargs: {
                         fields: ['name'],
-                        context: website.get_context()
+                        domain: [['channel_id', '=', self.channel_id]],
+                        context: base.get_context()
                     }
                 });
             }));
-        },
-        get_tag_ids: function () {
-            var res = [];
-            _.each($('#tag_ids').select2('data'),
-                function (val) {
-                    if (val.create) {
-                        res.push([0, 0, {'name': val.text}]);
-                    } else {
-                        res.push([4, val.id]);
-                    }
-                });
-            return res;
-        },
-        // Values and save
-        get_value: function () {
-            var canvas = this.$('#data_canvas')[0],
-                values = {
-                    'channel_id': this.channel_id || '',
-                    'name': this.$('#name').val(),
-                    'url': this.$('#url').val(),
-                    'description': this.$('#description').val(),
-                    'tag_ids': this.get_tag_ids(),
-                    'category_id': this.get_category_id()
-                };
-            if (this.file.type === 'application/pdf') {
-                _.extend(values, {
-                    'image': canvas.toDataURL().split(',')[1],
-                    'index_content': this.index_content,
-                    'slide_type': canvas.height > canvas.width ? 'document' : 'presentation',
-                    'mime_type': this.file.type,
-                    'datas': this.file.data
-                });
-            }
-            if (/^image\/.*/.test(this.file.type)) {
-                _.extend(values, {
-                    'slide_type': 'infographic',
-                    'mime_type': this.file.type,
-                    'datas': this.file.data
-                });
-            }
-            return values;
-        },
-        validate: function () {
-            this.$('.form-group').removeClass('has-error');
-            if (!this.$('#name').val()) {
-                this.$('#name').closest('.form-group').addClass('has-error');
-                return false;
-            }
-            var url = this.$('#url').val() ? this.is_valid_url : false;
-            if (!(this.file.name || url)) {
-                this.$('#url').closest('.form-group').addClass('has-error');
-                return false;
-            }
-            return true;
-        },
-        save: function (ev) {
-            var self = this;
-            if (this.validate()) {
-                var values = this.get_value();
-                if ($(ev.target).data('published')) {
-                    values.website_published = true;
-                }
-                this.$('.oe_slides_upload_loading').show();
-                this.$('.modal-footer, .modal-body').hide();
-                ajax.jsonRpc("/slides/add_slide", 'call', values).then(function (data) {
-                    if (data.error) {
-                        self.display_alert(data.error);
-                        self.$('.oe_slides_upload_loading').hide();
-                        self.$('.modal-footer, .modal-body').show();
-
-                    } else {
-                        window.location = data.url;
-                    }
-                });
-            }
-        },
-        cancel: function () {
-            this.trigger("cancel");
+    },
+    get_category_id: function () {
+        var value = $('#category_id').select2('data');
+        if (value && value.create) {
+            return [0, {'name': value.text}];
         }
-    });
+        return [value ? value.id : null];
+    },
+    // Tags management from select2
+    set_tag_ids: function () {
+        $('#tag_ids').select2(this.select2_wrapper(_t('Tags'), true, function () {
+            return ajax.jsonRpc("/web/dataset/call_kw", 'call', {
+                model: 'slide.tag',
+                method: 'search_read',
+                args: [],
+                kwargs: {
+                    fields: ['name'],
+                    context: base.get_context()
+                }
+            });
+        }));
+    },
+    get_tag_ids: function () {
+        var res = [];
+        _.each($('#tag_ids').select2('data'),
+            function (val) {
+                if (val.create) {
+                    res.push([0, 0, {'name': val.text}]);
+                } else {
+                    res.push([4, val.id]);
+                }
+            });
+        return res;
+    },
+    // Values and save
+    get_value: function () {
+        var canvas = this.$('#data_canvas')[0],
+            values = {
+                'channel_id': this.channel_id || '',
+                'name': this.$('#name').val(),
+                'url': this.$('#url').val(),
+                'description': this.$('#description').val(),
+                'tag_ids': this.get_tag_ids(),
+                'category_id': this.get_category_id()
+            };
+        if (this.file.type === 'application/pdf') {
+            _.extend(values, {
+                'image': canvas.toDataURL().split(',')[1],
+                'index_content': this.index_content,
+                'slide_type': canvas.height > canvas.width ? 'document' : 'presentation',
+                'mime_type': this.file.type,
+                'datas': this.file.data
+            });
+        }
+        if (/^image\/.*/.test(this.file.type)) {
+            _.extend(values, {
+                'slide_type': 'infographic',
+                'mime_type': this.file.type,
+                'datas': this.file.data
+            });
+        }
+        return values;
+    },
+    validate: function () {
+        this.$('.form-group').removeClass('has-error');
+        if (!this.$('#name').val()) {
+            this.$('#name').closest('.form-group').addClass('has-error');
+            return false;
+        }
+        var url = this.$('#url').val() ? this.is_valid_url : false;
+        if (!(this.file.name || url)) {
+            this.$('#url').closest('.form-group').addClass('has-error');
+            return false;
+        }
+        return true;
+    },
+    save: function (ev) {
+        var self = this;
+        if (this.validate()) {
+            var values = this.get_value();
+            if ($(ev.target).data('published')) {
+                values.website_published = true;
+            }
+            this.$('.oe_slides_upload_loading').show();
+            this.$('.modal-footer, .modal-body').hide();
+            ajax.jsonRpc("/slides/add_slide", 'call', values).then(function (data) {
+                if (data.error) {
+                    self.display_alert(data.error);
+                    self.$('.oe_slides_upload_loading').hide();
+                    self.$('.modal-footer, .modal-body').show();
+
+                } else {
+                    window.location = data.url;
+                }
+            });
+        }
+    },
+    cancel: function () {
+        this.trigger("cancel");
+    }
+});
+
+base.dom_ready.then(function () {
 
     // bind the event to the button
     $('.oe_slide_js_upload').on('click', function () {
@@ -363,3 +367,5 @@ website.if_dom_contains('.oe_slide_js_upload', function () {
 });
 
 });
+
+});
diff --git a/addons/website_slides/view/website_slides.xml b/addons/website_slides/view/website_slides.xml
index 7a15d5a15d0..a22b318f138 100644
--- a/addons/website_slides/view/website_slides.xml
+++ b/addons/website_slides/view/website_slides.xml
@@ -49,7 +49,7 @@
                     <div class="well well-sm">
                         <div>
                             <a t-attf-href="/slides/#{slug(channel)}">
-                                <img t-if="channel.promoted_slide_id" t-attf-src="/website/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-responsive oe_slides_channel_thumbnail"/>
+                                <img t-if="channel.promoted_slide_id" t-attf-src="/web_editor/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-responsive oe_slides_channel_thumbnail"/>
                                 <img t-if="not channel.promoted_slide_id" src="/website_slides/static/description/channel-default.jpg" class="img-responsive oe_slides_opacity"/>
                             </a>
                         </div>
@@ -215,7 +215,7 @@
                     <div class="row">
                         <div class="col-md-5 mt16 mb16">
                             <a t-attf-href="/slides/slide/#{slug(channel.promoted_slide_id)}">
-                                <img t-attf-src="/website/image/slide.slide/#{channel.promoted_slide_id.id}/image" class="img-responsive shadow oe_slides_promote_image"/>
+                                <img t-attf-src="/web_editor/image/slide.slide/#{channel.promoted_slide_id.id}/image" class="img-responsive shadow oe_slides_promote_image"/>
                                 <span t-if="channel.promote_strategy in ['latest', 'most_viewed', 'most_voted', 'custom']"
                                     class="label label-primary pull-right" style="position: absolute;right: 50px;top: 7px;"
                                     t-field="channel.promote_strategy"/>
@@ -333,7 +333,7 @@
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mt16 mb16" t-foreach="slides" t-as="slide">
         <div class="well well-sm oe_slides_thumbnail_container">
             <a t-attf-href="/slides/slide/#{slug(slide)}">
-                <img t-attf-src="/website/image/slide.slide/#{slide.id}/image_thumb" class="img-responsive img-thumbnail oe_slides_grid_thumbnail"/>
+                <img t-attf-src="/web_editor/image/slide.slide/#{slide.id}/image_thumb" class="img-responsive img-thumbnail oe_slides_grid_thumbnail"/>
             </a>
             <span t-if="not slide.website_published" class="label label-danger" style="position: absolute;right: 20px;top: 7px;">Not Published</span>
             <a t-if="not is_public_user and slide.website_published and slide.channel_id.promote_strategy == 'custom' and slide.channel_id.promoted_slide_id.id != slide.id"
@@ -374,7 +374,7 @@
             <meta property="og:title" t-att-content="slide.name" />
             <meta property="og:type" content="website" />
             <meta property="og:url" t-att-content="slide.website_url" />
-            <meta property="og:image" t-attf-content="#{request.httprequest.host_url}/website/image/slide.slide/#{slide.id}/image_thumb"/>
+            <meta property="og:image" t-attf-content="#{request.httprequest.host_url}/web_editor/image/slide.slide/#{slide.id}/image_thumb"/>
             <meta property="og:description" t-att-content="slide.description" />
         </t>
     </t>
@@ -394,7 +394,7 @@
 
                     <div t-if="not private">
                             <t t-if="slide.datas and slide.slide_type == 'infographic'">
-                                <img t-attf-src="/website/image/slide.slide/#{slide.id}/datas" class="img-responsive" style="width:100%"/>
+                                <img t-attf-src="/web_editor/image/slide.slide/#{slide.id}/datas" class="img-responsive" style="width:100%"/>
                             </t>
                         <div t-if="slide.slide_type in ('presentation', 'document')" class="embed-responsive embed-responsive-16by9 embed-responsive-item mb8">
                             <t t-raw="slide.embed_code"/>
@@ -544,7 +544,7 @@
                                         <div class="media">
                                             <span class="pull-left">
                                                 <img class="img img-circle media-object"
-                                                    t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(user_id.partner_id.id)"
+                                                    t-att-src="'/web_editor/image?model=res.partner&amp;field=image_small&amp;id='+str(user_id.partner_id.id)"
                                                     style="width: 30px"/>
                                             </span>
                                             <div class="media-body">
@@ -569,7 +569,7 @@
                                         <li t-foreach="comments" t-as="message" class="media">
                                             <span class="pull-left">
                                                 <img class="media-object img img-circle"
-                                                    t-att-src="'/website/image?model=mail.message&amp;field=author_avatar&amp;id='+str(message.id)" style="width: 30px"/>
+                                                    t-att-src="'/web_editor/image?model=mail.message&amp;field=author_avatar&amp;id='+str(message.id)" style="width: 30px"/>
                                             </span>
                                             <div class="media-body">
                                                 <t t-call="website.publish_short">
@@ -708,7 +708,7 @@
 <template id="related_slides" name="Related Slide">
     <li class="media">
         <a class="media-left pull-left" t-attf-href="/slides/slide/#{slug(slide)}">
-                <img class="media-object oe_slides_apart_small" t-attf-src="/website/image/slide.slide/#{slide.id}/image_thumb"/>
+                <img class="media-object oe_slides_apart_small" t-attf-src="/web_editor/image/slide.slide/#{slide.id}/image_thumb"/>
         </a>
         <div class="media-body">
             <a t-attf-href="/slides/slide/#{slug(slide)}"><h5 class="media-heading" t-esc="slide.name"/></a>
diff --git a/addons/website_slides/view/website_slides_embed.xml b/addons/website_slides/view/website_slides_embed.xml
index 065679e12d8..5c8d77ceddc 100644
--- a/addons/website_slides/view/website_slides_embed.xml
+++ b/addons/website_slides/view/website_slides_embed.xml
@@ -9,7 +9,7 @@
             <link type="text/less" href="/website_slides/static/src/less/website_slides.less" rel="stylesheet" t-ignore="true"/>
 
             <script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
-            <script type="text/javascript" src="/web/static/lib/bootstrap/js/bootstrap.js"></script>
+            <t t-call="web.bootstrap"/>
             <t t-call="website.pdf_js_lib"></t>
             <script type="text/javascript" src="/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js"></script>
             <script type="text/javascript" src="/website_slides/static/src/js/slides_embed.js"></script>
@@ -83,7 +83,7 @@
                                             <h4><t t-esc="suggest_slide.name"/></h4>
                                         </div>
                                         <span class="oe-image-thumbnail">
-                                            <img class="img-responsive" t-attf-src="/website/image/slide.slide/#{suggest_slide.id}/image_thumb" alt="suggest_slide.name"/>
+                                            <img class="img-responsive" t-attf-src="/web_editor/image/slide.slide/#{suggest_slide.id}/image_thumb" alt="suggest_slide.name"/>
                                         </span>
                                     </a>
 
@@ -92,7 +92,7 @@
                         </div>
                         <t t-if="slide.slide_type in ('presentation', 'document')">
                             <div id="PDFViewerLoader" class="oe_slides_loader">
-                                <img class="img-responsive" t-attf-src="/website/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%"/>
+                                <img class="img-responsive" t-attf-src="/web_editor/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%"/>
                                 <h4 class="text-center">
                                     <i class="fa fa-spinner fa-spin"></i> Loading ...
                                 </h4>
@@ -100,7 +100,7 @@
                             <canvas id="PDFViewerCanvas" class="img-responsive" style="margin:auto;height:100%;display:none;"></canvas>
                         </t>
                         <t t-if="slide.slide_type in ('infographic')">
-                            <img t-attf-src="/website/image/slide.slide/#{slide.id}/datas" class="img-responsive" style="width:100%"/>
+                            <img t-attf-src="/web_editor/image/slide.slide/#{slide.id}/datas" class="img-responsive" style="width:100%"/>
                         </t>
                     </div>
                     <!-- Fixed bottom navbar -->
diff --git a/addons/website_twitter/static/src/js/website.twitter.animation.js b/addons/website_twitter/static/src/js/website.twitter.animation.js
index d9139d91d9e..98def67252e 100644
--- a/addons/website_twitter/static/src/js/website.twitter.animation.js
+++ b/addons/website_twitter/static/src/js/website.twitter.animation.js
@@ -3,14 +3,15 @@ odoo.define('website_twitter.animation', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
-var animation = require('website.snippets.animation');
+var base = require('web_editor.base');
+var animation = require('web_editor.snippets.animation');
 var website = require('website.website');
 
 var qweb = core.qweb;
 
-website.add_template_file('/website_twitter/static/src/xml/website.twitter.xml');
+ajax.loadXML('/website_twitter/static/src/xml/website.twitter.xml', qweb);
 
-animation.registry.twitter = animation.Animation.extend({
+animation.registry.twitter = animation.Class.extend({
     selector: ".twitter",
     start: function () {
         var self = this;
diff --git a/addons/website_twitter/static/src/js/website.twitter.editor.js b/addons/website_twitter/static/src/js/website.twitter.editor.js
index 21b5fa3465a..f0e3a84f66c 100644
--- a/addons/website_twitter/static/src/js/website.twitter.editor.js
+++ b/addons/website_twitter/static/src/js/website.twitter.editor.js
@@ -3,12 +3,12 @@ odoo.define('website_twitter.editor', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
-var snippet_editor = require('website.snippets.editor');
+var options = require('web_editor.snippets.options');
 
 var qweb = core.qweb;
 
 
-snippet_editor.options["twitter"] = snippet_editor.options.marginAndResize.extend({
+options.registry.twitter = options.registry.marginAndResize.extend({
     start: function(){
         this._super();
         this.make_hover_config();
diff --git a/addons/website_version/models/ir_qweb.py b/addons/website_version/models/ir_qweb.py
index aebfecbf4d3..5b9d5167a93 100644
--- a/addons/website_version/models/ir_qweb.py
+++ b/addons/website_version/models/ir_qweb.py
@@ -12,7 +12,7 @@ from openerp import models
 class QWeb(models.AbstractModel):
     """ QWeb object for rendering stuff in the website context
     """
-    _inherit = 'website.qweb'
+    _inherit = 'ir.qweb'
 
     def render(self, cr, uid, id_or_xml_id, qwebcontext=None, loader=None, context=None):
         if context is None:
@@ -31,12 +31,13 @@ class QWeb(models.AbstractModel):
                     if version_id:
                         context['version_id'] = int(version_id)
 
-            if 'version_id' in context:
-                version_id = context.get('version_id')
-                if version_id:
-                    id_or_xml_id = self.pool["ir.ui.view"].search(cr, uid, [('key', '=', id_or_xml_id), '|', ('version_id', '=', False), ('version_id', '=', version_id), '|', ('website_id', '=', website_id), ('website_id', '=', False)], order='website_id, version_id', limit=1, context=context)[0]
-                else:
-                    id_or_xml_id = self.pool["ir.ui.view"].search(cr, uid, [('key', '=', id_or_xml_id), ('version_id', '=', False), '|', ('website_id', '=', website_id), ('website_id', '=', False)], order='website_id', limit=1, context=context)[0]
-            else:
-                id_or_xml_id = self.pool["ir.ui.view"].search(cr, uid, [('key', '=', id_or_xml_id), '|', ('website_id', '=', website_id), ('website_id', '=', False), ('version_id', '=', False)], order='website_id', limit=1, context=context)[0]
+            if isinstance(id_or_xml_id, (int, long)):
+                id_or_xml_id = self.pool["ir.ui.view"].browse(cr, uid, id_or_xml_id, context=context).key
+
+            domain = [('key', '=', id_or_xml_id), '|', ('website_id', '=', website_id), ('website_id', '=', False)]
+            version_id = context.get('version_id')
+            domain += version_id and ['|', ('version_id', '=', False), ('version_id', '=', version_id)] or [('version_id', '=', False)]
+
+            id_or_xml_id = self.pool["ir.ui.view"].search(cr, uid, domain, order='website_id, version_id', limit=1, context=context)[0]
+
         return super(QWeb, self).render(cr, uid, id_or_xml_id, qwebcontext, loader=loader, context=context)
diff --git a/addons/website_version/models/ir_ui_view.py b/addons/website_version/models/ir_ui_view.py
index 4a3ded70f43..048757c14d1 100644
--- a/addons/website_version/models/ir_ui_view.py
+++ b/addons/website_version/models/ir_ui_view.py
@@ -63,7 +63,7 @@ class view(models.Model):
         return xml_id
 
     @tools.ormcache_context('uid', 'view_id',
-        keys=('lang', 'inherit_branding', 'editable', 'translatable', 'website_id', 'version_id'))
+        keys=('lang', 'inherit_branding', 'editable', 'translatable', 'edit_translations', 'website_id', 'version_id'))
     def _read_template(self, cr, uid, view_id, context=None):
         arch = self.read_combined(cr, uid, view_id, fields=['arch'], context=context)['arch']
         arch_tree = etree.fromstring(arch)
@@ -158,27 +158,3 @@ class view(models.Model):
                 check.append(data['name'])
                 res.append(data)
         return res
-
-    @api.model
-    def get_view_translations(self, xml_id, lang,
-                              field=['id', 'res_id', 'value', 'state', 'gengo_translation']):
-        irt = self.pool['ir.translation']
-        view = self.browse(xml_id)
-        view_list = self.search([('key', '=', view.key),
-                                 '|', ('website_id', '=', view.website_id.id), ('website_id', '=', False)])
-        views_ids = []
-        for v in view_list:
-            views = self.customize_template_get(v.id, full=True)
-            views_ids += [v.get('id') for v in views if v.get('active')]
-        domain = [
-            ('type', '=', 'model'),
-            ('name', '=', 'ir.ui.view,arch_db'),
-            ('res_id', 'in', views_ids),
-            ('lang', '=', lang),
-        ]
-        element_list = irt.search_read(self.env.cr, self.env.uid,
-                                       domain, field, context=self.env.context)
-        for element in element_list:
-            if element['res_id'] in view_list.ids:
-                element['res_id'] = xml_id
-        return element_list
diff --git a/addons/website_version/static/src/js/edit_version.js b/addons/website_version/static/src/js/edit_version.js
index e60824e65fd..4a2cbe9576a 100644
--- a/addons/website_version/static/src/js/edit_version.js
+++ b/addons/website_version/static/src/js/edit_version.js
@@ -3,22 +3,23 @@ odoo.define('website_version.edit', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
-var editor = require('website.editor');
+var base = require('web_editor.base');
+var editor = require('web_editor.editor');
 
 var _t = core._t;
 var qweb = core.qweb;
 
-editor.EditorBar.include({
+editor.Class.include({
     start: function() {
         var self = this;
         this.$el.on('click', '#save_as_new_version', function() {
-
+            
             var wizardA = $(qweb.render("website_version.new_version",{'default_name': moment().format('L')}));
             wizardA.appendTo($('body')).modal({"keyboard" :true});
             wizardA.on('click','.o_create', function(){
                 wizardA.find('.o_message').remove();
                 var version_name = wizardA.find('.o_version_name').val();
-                if(version_name.length === 0){
+                if(version_name.length == 0){
                     wizardA.find(".o_version_name").after("<p class='o_message' style='color : red'> *"+_t("This field is required")+"</p>");
                 }
                 else{
@@ -40,15 +41,50 @@ editor.EditorBar.include({
                 }
             });
             wizardA.on('hidden.bs.modal', function () {$(this).remove();});
-
+        
         });
         var ver_name = $('#version-menu-button').data('version_name');
         if(ver_name){
             this.$el.find('button[data-action="save"]').text(_.str.sprintf(_t("Save on %s"), ver_name));
         }
+        this.$el.on('click', '#save_and_publish', function() {
+            var version_id = base.get_context().version_id;
+            if(version_id)
+            {
+                self.save();
+            }
+            else
+            {
+                var wizard = $(qweb.render("website_version.publish",{message:_t("Are you sure you want to publish your modifications.")}));
+                wizard.appendTo($('body')).modal({"keyboard" :true});
+                wizard.on('click','.o_confirm', function(){
+                    self.save();
+                });
+                wizard.on('hidden.bs.modal', function () {$(this).remove();});
+            }
+
+        });
+
+        $('.option_choice').click(function() {
+            self.$el.find(".o_second_choice").remove();
+            var name = $('#version-menu-button').data('version_name');
+            if(name){
+                self.$el.find(".o_first_choice").before(qweb.render("website_version.all_options", {version:'Save on '+name}));
+            }
+            else{
+                self.$el.find(".o_first_choice").before(qweb.render("website_version.all_options", {version:'Save and Publish'}));
+            }
+
+        });
+
+        this.$('button[data-action=save]').parent().find("button, a").prop('disabled', true);
 
         return this._super();
-    }
+    },
+    rte_changed: function () {
+        this.$('button[data-action=save]').parent().find("button, a").prop('disabled', false);
+        return this._super();
+    },
 });
 
 });
diff --git a/addons/website_version/static/src/js/menu_version.js b/addons/website_version/static/src/js/menu_version.js
index 6c12d3f221c..a1655279635 100644
--- a/addons/website_version/static/src/js/menu_version.js
+++ b/addons/website_version/static/src/js/menu_version.js
@@ -1,26 +1,24 @@
-odoo.define('website_version.menu_version', function (require) {
+odoo.define('website_version.menu', function (require) {
 'use strict';
 
 var ajax = require('web.ajax');
 var core = require('web.core');
 var Widget = require('web.Widget');
-var website = require('website.website');
+var base = require('web_editor.base');
 
 var _t = core._t;
-var QWeb = core.qweb;
+var qweb = core.qweb;
 
-website.add_template_file('/website_version/static/src/xml/version_templates.xml');
+var _get_context = base.get_context;
+base.get_context = function (dict) {
+    return _.extend({ 'version_id': $("#version-menu-button").data("version_id")|0 }, _get_context(dict));
+};
+
+ajax.loadXML('/website_version/static/src/xml/version_templates.xml', qweb);
 
 var EditorVersion = Widget.extend({
     start: function() {
         var self = this;
-
-        $('html').data('version_id', this.$el.find("#version-menu-button").data("version_id"));
-        var _get_context = website.get_context;
-        website.get_context = function (dict) {
-            return _.extend({ 'version_id': $('html').data('version_id') }, _get_context(dict));
-        };
-
         self.$el.on('click', 'a[data-action]', function(ev) {
             ev.preventDefault();
             self[$(this).data('action')](ev);
@@ -30,35 +28,35 @@ var EditorVersion = Widget.extend({
             var view_id = parseInt($('html').attr('data-view-xmlid'));
             ajax.jsonRpc( '/website_version/all_versions', 'call', {'view_id': view_id}).then(function (result) {
                 self.$el.find(".o_version_choice").remove();
-                self.$el.find(".first_divider").before(QWeb.render("all_versions", {versions:result}));
+                self.$el.find(".first_divider").before(qweb.render("website_version.all_versions", {versions:result}));
 
             });
             ajax.jsonRpc( '/website_version/has_experiments', 'call', {'view_id': view_id}).then(function (result) {
                 self.$el.find(".o_experiment").remove();
                 if(result){
-                    self.$el.find(".create_experiment").after(QWeb.render("experiment_menu"));
+                    self.$el.find(".create_experiment").after(qweb.render("website_version.experiment_menu"));
                 }
             });
-
+            
         });
         return this._super();
     },
-
-    duplicate_version: function() {
-        var version_id = $('html').data('version_id');
-        var wizardA = $(QWeb.render("website_version.new_version",{'default_name': moment().format('L')}));
+    
+    duplicate_version: function(event) {
+        var version_id = base.get_context().version_id;
+        var wizardA = $(qweb.render("website_version.new_version",{'default_name': moment().format('L')}));
         wizardA.appendTo($('body')).modal({"keyboard" :true});
         wizardA.on('click','.o_create', function(){
             wizardA.find('.o_message').remove();
             var version_name = wizardA.find('.o_version_name').val();
-            if(version_name.length === 0){
+            if(version_name.length == 0){
                 wizardA.find(".o_version_name").after("<p class='o_message' style='color : red'> *"+_t("This field is required")+"</p>");
             }
             else{
                 wizardA.modal("hide");
                 ajax.jsonRpc( '/website_version/create_version', 'call', { 'name': version_name, 'version_id': version_id}).then(function (result) {
 
-                    var wizard = $(QWeb.render("website_version.dialogue",{message:_.str.sprintf("You are now working on version: %s.", version_name),
+                    var wizard = $(qweb.render("website_version.dialogue",{message:_.str.sprintf("You are now working on version: %s.", version_name),
                                                                                    dialogue:_.str.sprintf("If you edit this page or others, all changes will be recorded in the version. It will not be visible by visitors until you publish the version.")}));
                     wizard.appendTo($('body')).modal({"keyboard" :true});
                     wizard.on('click','.o_confirm', function(){
@@ -66,7 +64,8 @@ var EditorVersion = Widget.extend({
                     });
                     wizard.on('hidden.bs.modal', function () {$(this).remove();});
                 }).fail(function(){
-                    var wizard = $(QWeb.render("website_version.message",{message:_t("This name already exists.")}));
+                    var wizard = $(qweb.render("website_version.message",{message:_t("This name already exists.")}));
+                    wizard.addClass("o_error");
                     wizard.appendTo($('body')).modal({"keyboard" :true});
                     wizard.on('hidden.bs.modal', function () {$(this).remove();});
                 });
@@ -74,33 +73,32 @@ var EditorVersion = Widget.extend({
         });
         wizardA.on('hidden.bs.modal', function () {$(this).remove();});
     },
-
+    
     change_version: function(event) {
-        var version_id = parseInt($(event.target).parent().data("version_id"));
+        var version_id = parseInt($(event.target).closest("li").data("version_id"));
         if(! version_id){
             version_id = 0;//By default master
         }
-        ajax.jsonRpc( '/website_version/change_version', 'call', { 'version_id':version_id }).then(function () {
+        ajax.jsonRpc( '/website_version/change_version', 'call', { 'version_id':version_id }).then(function (result) {
                 location.reload();
             });
     },
 
     delete_version: function(event) {
-        console.log(event);
-        var version_id = parseInt($(event.currentTarget).parent().data("version_id"));
+        var version_id = parseInt($(event.target).closest("li").data("version_id"));
         var name = $(event.currentTarget).parent().children(':last-child').text();
         ajax.jsonRpc( '/website_version/check_version', 'call', { 'version_id':version_id }).then(function (result) {
                 if (result){
-                    var wizard = $(QWeb.render("website_version.message",{message:_.str.sprintf("You cannot delete the %s version because it is in a running or paused experiment", name)}));
+                    var wizard = $(qweb.render("website_version.message",{message:_.str.sprintf("You cannot delete the %s version because it is in a running or paused experiment", name)}));
                     wizard.appendTo($('body')).modal({"keyboard" :true});
                     wizard.on('hidden.bs.modal', function () {$(this).remove();});
                 }
                 else{
-                    var wizardA = $(QWeb.render("website_version.delete_message",{message:_.str.sprintf("Are you sure you want to delete the %s version ?", name)}));
+                    var wizardA = $(qweb.render("website_version.delete_message",{message:_.str.sprintf("Are you sure you want to delete the %s version ?", name)}));
                     wizardA.appendTo($('body')).modal({"keyboard" :true});
                     wizardA.on('click','.o_confirm', function(){
                         ajax.jsonRpc( '/website_version/delete_version', 'call', { 'version_id':version_id }).then(function (result) {
-                            var wizardB = $(QWeb.render("website_version.message",{message:_.str.sprintf("The %s version has been deleted.", result)}));
+                            var wizardB = $(qweb.render("website_version.message",{message:_.str.sprintf("The %s version has been deleted.", result)}));
                             wizardB.appendTo($('body')).modal({"keyboard" :true});
                             wizardB.on('click','.o_confirm', function(){
                                 location.reload();
@@ -113,24 +111,23 @@ var EditorVersion = Widget.extend({
             });
     },
 
-    publish_version: function() {
-        var version_id = parseInt($('html').data('version_id'));
+    publish_version: function(event) {
+        var version_id = base.get_context().version_id;
         var name = $('#version-menu-button').attr('data-version_name');
         ajax.jsonRpc( '/website_version/diff_version', 'call', { 'version_id':version_id}).then(function (result) {
-            console.log(result);
-            var wizardA = $(QWeb.render("website_version.publish_message",{message:_.str.sprintf("Publish Version %s", name), list:result}));
+            var wizardA = $(qweb.render("website_version.publish_message",{message:_.str.sprintf("Publish Version %s", name), list:result}));
             wizardA.appendTo($('body')).modal({"keyboard" :true});
             wizardA.on('click','.o_confirm', function(){
                 wizardA.find('.o_message').remove();
                 var check = wizardA.find('.o_check').is(':checked');
                 var copy_master_name = wizardA.find('.o_name').val();
                 if(check){
-                    if(copy_master_name.length === 0){
+                    if(copy_master_name.length == 0){
                         wizardA.find(".o_name").after("<p class='o_message' style='color : red'> *"+_t("This field is required")+"</p>");
                     }
                     else{
                         ajax.jsonRpc( '/website_version/publish_version', 'call', { 'version_id':version_id, 'save_master':true, 'copy_master_name':copy_master_name}).then(function (result) {
-                            var wizardB = $(QWeb.render("website_version.dialogue",{message:_.str.sprintf("The %s version has been published", result), dialogue:_.str.sprintf("The master has been saved on a new version called %s.",copy_master_name)}));
+                            var wizardB = $(qweb.render("website_version.dialogue",{message:_.str.sprintf("The %s version has been published", result), dialogue:_.str.sprintf("The master has been saved on a new version called %s.",copy_master_name)}));
                             wizardB.appendTo($('body')).modal({"keyboard" :true});
                             wizardB.on('click','.o_confirm', function(){
                                 location.reload();
@@ -141,7 +138,7 @@ var EditorVersion = Widget.extend({
                 }
                 else{
                     ajax.jsonRpc( '/website_version/publish_version', 'call', { 'version_id':version_id, 'save_master':false, 'copy_master_name':""}).then(function (result) {
-                        var wizardC = $(QWeb.render("website_version.message",{message:_.str.sprintf("The %s version has been published.", result)}));
+                        var wizardC = $(qweb.render("website_version.message",{message:_.str.sprintf("The %s version has been published.", result)}));
                         wizardC.appendTo($('body')).modal({"keyboard" :true});
                         wizardC.on('click','.o_confirm', function(){
                             location.reload();
@@ -158,53 +155,54 @@ var EditorVersion = Widget.extend({
         });
     },
 
-    diff_version: function() {
-        var version_id = parseInt($('html').data('version_id'));
+    diff_version: function(event) {
+        var version_id = base.get_context().version_id;
         var name = $('#version-menu-button').data('version_name');
         ajax.jsonRpc( '/website_version/diff_version', 'call', { 'version_id':version_id}).then(function (result) {
-            var wizard = $(QWeb.render("website_version.diff",{list:result, version_name:name}));
+            var wizard = $(qweb.render("website_version.diff",{list:result, version_name:name}));
             wizard.appendTo($('body')).modal({"keyboard" :true});
             wizard.on('click','.o_confirm', function(){});
             wizard.on('hidden.bs.modal', function () {$(this).remove();});
         });
     },
 
-    google_analytics: function(){
+    google_analytics: function(event){
         window.location.href = 'https://www.google.com/analytics/web';
 
     },
 
     create_experiment: function() {
+        var self = this;
         var view_id = parseInt($('html').attr('data-view-xmlid'));
         ajax.jsonRpc( '/website_version/all_versions_all_goals', 'call', { 'view_id': view_id }).then(function (result) {
-            var wizardA = $(QWeb.render("website_version.create_experiment",{versions:result.tab_version, goals:result.tab_goal, config:result.check_conf}));
+            var wizardA = $(qweb.render("website_version.create_experiment",{versions:result.tab_version, goals:result.tab_goal, config:result.check_conf}));
             wizardA.appendTo($('body')).modal({"keyboard" :true});
-
+        
             wizardA.on('click','.o_launch', function(){
                 wizardA.find('.o_message').remove();
                 var name = wizardA.find('.o_name').val();
                 var tab = wizardA.find('.o_version');
                 var result = [];
                 var i;
-                for (i = 0; i < tab.length; i++){
+                for (var i = 0; i < tab.length; i++){
                     if ($(tab[i]).is(':checked')) {
                         result.push(parseInt($(tab[i]).attr('data-version_id')));
                     }
                 }
                 var goal_id = wizardA.find('.box').val();
                 var check = true;
-                if (name.length === 0){
+                if (name.length == 0){
                     wizardA.find(".o_name").after("<p class='o_message' style='color : red'> *"+_t("This field is required")+"</p>");
                     check = false;
                 }
-                if (result.length === 0 && check){
+                if (result.length == 0 && check){
                     wizardA.find(".o_versions").after("<p class='o_message' style='color : red'> *"+_t("You must select at least one version which is not Master.")+"</p>");
                     check = false;
                 }
                 if(check){
                     ajax.jsonRpc( '/website_version/launch_experiment', 'call', { 'name':name, 'version_ids':result, 'goal_id':goal_id }).then(function (existing_experiment) {
-                        if (!existing_experiment.existing){
-                            var wizardB = $(QWeb.render("website_version.dialogue",{message:_.str.sprintf("Your %s experiment is created.", name), dialogue:_t(" Now you can manage this experiment by clicking on Manage A/B tests.")}));
+                        if (!existing_experiment['existing']){
+                            var wizardB = $(qweb.render("website_version.dialogue",{message:_.str.sprintf("Your %s experiment is created.", name), dialogue:_t(" Now you can manage this experiment by clicking on Manage A/B tests.")}));
                             wizardB.appendTo($('body')).modal({"keyboard" :true});
                             wizardB.on('click','.o_confirm', function(){
                                 location.reload();
@@ -213,7 +211,7 @@ var EditorVersion = Widget.extend({
 
                         }
                         else{
-                            if(existing_experiment.existing == 1){
+                            if(existing_experiment['existing'] == 1){
                                 wizardA.find(".o_versions").after("<p class='o_message' style='color : red'> *"+_.str.sprintf("Your %s experiment cannot be launched because this experiment contains a view which is already used in the running %s experiment.", name, existing_experiment['name'])+"</p>");
                             }
                             else{
@@ -229,22 +227,23 @@ var EditorVersion = Widget.extend({
             });
             wizardA.on('click','.o_validate_0', function(){
                 wizardA.find('.o_message').remove();
+                var website_id = $('html').attr('data-website-id');
                 var ga_key = wizardA.find('.o_ga_key').val();
                 var view_id = wizardA.find('.o_view_id').val();
                 var client_id = wizardA.find('.o_client_id').val();
                 var client_secret = wizardA.find('.o_client_secret').val();
-                if(ga_key.length === 0 || view_id.length === 0 || client_id.length === 0 || client_secret.length === 0){
+                if(ga_key.length == 0 || view_id.length == 0 || client_id.length == 0 || client_secret.length == 0){
                     wizardA.find(".o_configure_ab").after("<p class='o_message' style='color : red'> *"+_t("You must fill all the fields.")+"</p>");
                 }
                 else{
                     ajax.jsonRpc( '/website_version/set_google_access', 'call', {'ga_key':ga_key, 'view_id':view_id, 'client_id':client_id, 'client_secret':client_secret}).then(function (result) {
-                        var context = website.get_context();
+                        var context = base.get_context();
                         ajax.jsonRpc( '/website_version/google_access', 'call', {
                             fromurl: window.location.href,
                             local_context: context
                         }).done(function(o) {
                             if (o.status === "need_auth") {
-                                var wizardC = $(QWeb.render("website_version.message",{message:_t("You will be redirected to Google to authorize access to your Analytics Account!")}));
+                                var wizardC = $(qweb.render("website_version.message",{message:_t("You will be redirected to Google to authorize access to your Analytics Account!")}));
                                 wizardC.appendTo($('body')).modal({"keyboard" :true});
                                 wizardC.on('click','.o_confirm', function(){
                                     window.location.href = o.url;
@@ -261,9 +260,10 @@ var EditorVersion = Widget.extend({
                 }
             });
             wizardA.on('click','.o_validate_2', function(){
+                var website_id = $('html').attr('data-website-id');
                 var ga_key = wizardA.find('.o_ga_key').val();
                 var view_id = wizardA.find('.o_view_id').val();
-                if(ga_key.length === 0 || view_id.length === 0){
+                if(ga_key.length == 0 || view_id.length == 0){
                     wizardA.find(".o_configure_ab").after("<p class='o_message' style='color : red'> *"+_t("You must fill all the fields.")+"</p>");
                 }
                 else{
@@ -281,7 +281,7 @@ var EditorVersion = Widget.extend({
     statistics: function() {
         window.open('https://www.google.com/analytics/web/?authuser=0#report/siteopt-experiments/','_blank');
     }
-
+    
 });
 
 $(document).ready(function() {
@@ -290,4 +290,6 @@ $(document).ready(function() {
     version.start();
 });
 
+return EditorVersion;
+
 });
diff --git a/addons/website_version/static/src/js/website_version.tour.versioning.js b/addons/website_version/static/src/js/website_version.tour.versioning.js
index a6c80196e96..7b96ea118e0 100644
--- a/addons/website_version/static/src/js/website_version.tour.versioning.js
+++ b/addons/website_version/static/src/js/website_version.tour.versioning.js
@@ -57,12 +57,6 @@ Tour.register({
             content:   _t("All the modifications you will do, will be saved in this version."),
             waitNot:   '.modal button.o_confirm',
         },
-        {
-            title:     _t("Click on Edit"),
-            content:   _t("Every page of your website can be modified through the <i>Edit</i> button."),
-            waitFor:   'button[data-action="edit"]',
-            element:   'button[data-action="edit"]',
-        },
         {
             snippet:   '#snippet_structure .oe_snippet:first',
             placement: 'bottom',
@@ -111,7 +105,7 @@ Tour.register({
             popover:   { fixed: true },
         },
         {
-            waitFor:   'button[data-action=save]:not(:visible)',
+            waitNot:   'button[data-action=save]:visible',
             title:     _t("Good Job!"),
             content:   _t("Well done, you created a version of your homepage."),
             popover:   { next: _t("Continue") },
diff --git a/addons/website_version/static/src/xml/version_templates.xml b/addons/website_version/static/src/xml/version_templates.xml
index 6490516f9ef..a910a91a506 100644
--- a/addons/website_version/static/src/xml/version_templates.xml
+++ b/addons/website_version/static/src/xml/version_templates.xml
@@ -1,22 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-name="all_versions">
+    <t t-name="website_version.all_versions">
         <t t-foreach="versions" t-as="item">
             <li class="o_version_choice" t-att-data-version_id="item.id">
                 <a href="#" data-action="delete_version" style="position: absolute; right: 0px;" class="pull-right"><i class="fa fa-trash-o fa-fw"></i></a>
-                <t t-if="item.bold == 0 ">
-                    <a href="#" data-action="change_version" t-att-data-version_id="item.id"><t t-esc="item.name"></t> </a>
-                </t>
-                <t t-if="item.bold == 1 ">
-                    <a href="#" data-action="change_version" t-att-data-version_id="item.id"> <b><t t-esc="item.name"></t></b> </a>
-                </t>
+                <a href="#" data-action="change_version">
+                    <t t-if="item.bold == 0 "><t t-esc="item.name"></t></t>
+                    <t t-if="item.bold == 1 "><b><t t-esc="item.name"></t></b></t>
+                </a>
             </li>
         </t>
     </t>
 
-    <t t-extend="website.editorbar">
-        <t t-jquery=".navbar-header form button" t-operation="replace">
+    <t t-extend="web_editor.editorbar">
+        <t t-jquery=".navbar form button" t-operation="replace">
             <div class="btn-group">
                 <button type="button" data-action="save" class="btn btn-primary btn-xs">Save</button>
                 <button type="button" class="btn btn-primary btn-xs dropdown-toggle option_choice" data-toggle="dropdown">
@@ -33,7 +31,14 @@
         </t>
     </t>
 
-    <t t-name="experiment_menu">
+    <t t-name="website_version.all_options">    
+        <li class="o_second_choice">
+            <a href="#" id="save_and_publish" data-action="save_and_publish" 
+                class="btn btn-link btn-xs o_version"><t t-esc="version"></t></a>
+        </li>
+    </t>
+
+    <t t-name="website_version.experiment_menu">
         <li class="o_experiment"><a href="#" data-action="manage_experiment">Manage A/B tests</a></li>
         <li class="o_experiment"><a href="#" data-action="statistics">Statistics</a></li>
     </t>
diff --git a/addons/website_version/views/website_version_templates.xml b/addons/website_version/views/website_version_templates.xml
index 973989091ff..ebf96c2ebe9 100644
--- a/addons/website_version/views/website_version_templates.xml
+++ b/addons/website_version/views/website_version_templates.xml
@@ -3,7 +3,7 @@
     <data>
         <!-- Front-end/Back-end integration -->
         <template id="user_navbar_version" inherit_id="website.layout" groups="base.group_user">
-            <xpath expr="//li[contains(@id, 'customize-menu')]" position="before">
+            <xpath expr="//li[@id='customize-menu']" position="before">
                     <li class="dropdown" id="version-menu" groups="base.group_website_designer">
                         <a id="version-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#" t-att-data-version_id="website.get_current_version()[0]" t-att-data-version_name="website.get_current_version()[1]">
                             Version 
@@ -35,7 +35,7 @@
         </template>
 
         <template id="assets_frontend_AB" name="website_AB assets" inherit_id="website.layout">
-            <xpath expr="//script[contains(@id, 'tracking_code')]" position="replace">
+            <xpath expr="//script[@id='tracking_code']" position="replace">
                 <script id='tracking_code' t-if="website and website.google_analytics_key and not editable">
                     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/openerp/addons/base/ir/ir_qweb.py b/openerp/addons/base/ir/ir_qweb.py
index 7fe0d8cc75d..f7489a5379d 100644
--- a/openerp/addons/base/ir/ir_qweb.py
+++ b/openerp/addons/base/ir/ir_qweb.py
@@ -592,7 +592,7 @@ class FieldConverter(osv.AbstractModel):
             ('data-oe-type', field_type),
             ('data-oe-expression', t_att['field']),
         ]
-        if record._fields[field_name].readonly:
+        if field.readonly:
             data.append(('data-oe-readonly', 1))
         return data
 
@@ -645,7 +645,8 @@ class FieldConverter(osv.AbstractModel):
                 _build_attribute(name, value)
                 for name, value in self.attributes(
                     cr, uid, field_name, record, options,
-                    source_element, g_att, t_att, qweb_context)
+                    source_element, g_att, t_att, qweb_context,
+                    context=context)
             )
 
         return self.render_element(cr, uid, source_element, t_att, g_att,
diff --git a/openerp/addons/base/ir/ir_translation.py b/openerp/addons/base/ir/ir_translation.py
index 37e69fafaf3..1392231bdf2 100644
--- a/openerp/addons/base/ir/ir_translation.py
+++ b/openerp/addons/base/ir/ir_translation.py
@@ -380,7 +380,7 @@ class ir_translation(osv.osv):
     @api.model
     def _get_terms_query(self, field, records):
         """ Utility function that makes the query for field terms. """
-        query = """ SELECT id, res_id, src, value FROM ir_translation
+        query = """ SELECT * FROM ir_translation
                     WHERE lang=%s AND type=%s AND name=%s AND res_id IN %s """
         name = "%s,%s" % (field.model_name, field.name)
         params = (records.env.lang, 'model', name, tuple(records.ids))
@@ -388,15 +388,10 @@ class ir_translation(osv.osv):
 
     @api.model
     def _get_terms_mapping(self, field, records):
-        """ Return a function mapping a (trans_id, source, value) to a value.
+        """ Return a function mapping a ir_translation row (dict) to a value.
         This method is called before querying the database for translations.
         """
-        if self._context.get('edit_translations'):
-            # TODO: this part should be moved to module web_editor
-            self.insert_missing(field, records)
-            return lambda tid, src, value: '<span data-oe-translation-id="%s">%s</span>' % (tid, value)
-        else:
-            return lambda tid, src, value: value
+        return lambda data: data['value']
 
     @api.model
     def _get_terms_translations(self, field, records):
@@ -409,8 +404,8 @@ class ir_translation(osv.osv):
             map_trans = self._get_terms_mapping(field, records)
             query, params = self._get_terms_query(field, records)
             self._cr.execute(query, params)
-            for trans_id, res_id, src, value in self._cr.fetchall():
-                result[res_id][src] = map_trans(trans_id, src, value)
+            for data in self._cr.dictfetchall():
+                result[data['res_id']][data['src']] = map_trans(data)
         return result
 
     @api.model
@@ -648,7 +643,7 @@ class ir_translation(osv.osv):
                     _logger.info('module %s: loading translation file (%s) for language %s', module_name, lang_code, lang)
                     tools.trans_load(cr, trans_file, lang, verbose=False, module_name=module_name, context=context)
                 elif lang_code != 'en_US':
-                    _logger.warning('module %s: no translation for language %s', module_name, lang_code)
+                    _logger.info('module %s: no translation for language %s', module_name, lang_code)
 
                 trans_extra_file = openerp.modules.get_module_resource(module_name, 'i18n_extra', lang_code + '.po')
                 if trans_extra_file:
diff --git a/openerp/addons/base/ir/ir_ui_view.py b/openerp/addons/base/ir/ir_ui_view.py
index 58f3b12a412..ce2603809ab 100644
--- a/openerp/addons/base/ir/ir_ui_view.py
+++ b/openerp/addons/base/ir/ir_ui_view.py
@@ -901,7 +901,7 @@ class view(osv.osv):
     # apply ormcache_context decorator unless in dev mode...
     @tools.conditional(not config['dev_mode'],
         tools.ormcache_context('uid', 'view_id',
-            keys=('lang', 'inherit_branding', 'editable', 'translatable')))
+            keys=('lang', 'inherit_branding', 'editable', 'translatable', 'edit_translations')))
     def _read_template(self, cr, uid, view_id, context=None):
         arch = self.read_combined(cr, uid, view_id, fields=['arch'], context=context)['arch']
         arch_tree = etree.fromstring(arch)
diff --git a/openerp/addons/base/ir/report_ir_model.xml b/openerp/addons/base/ir/report_ir_model.xml
index 4dd59242d42..d5dec751441 100644
--- a/openerp/addons/base/ir/report_ir_model.xml
+++ b/openerp/addons/base/ir/report_ir_model.xml
@@ -85,7 +85,8 @@
                         <td><span t-field="view.type"/></td>
                         <td colspan="4"><span t-field="view.name"/></td>
                         <td colspan="6"><span t-field="view.xml_id"/></td>
-                        <td colspan="8"><span t-esc="view.inherit_id.xml_id or view.inherit_id.name"/></td>
+                        <td colspan="8" t-if="view.inherit_id.xml_id"><span t-field="view.inherit_id.xml_id"/></td>
+                        <td colspan="8" t-if="not view.inherit_id.xml_id"><span t-field="view.inherit_id.name"/></td>
                     </tr>
                 </table>
             </div>
diff --git a/openerp/addons/base/static/src/js/apps.js b/openerp/addons/base/static/src/js/apps.js
index b73c06aa576..156fe9e10b7 100644
--- a/openerp/addons/base/static/src/js/apps.js
+++ b/openerp/addons/base/static/src/js/apps.js
@@ -3,7 +3,7 @@ odoo.define('base.apps', function (require) {
 
 var core = require('web.core');
 var framework = require('web.framework');
-var Model = require('web.Model');
+var Model = require('web.DataModel');
 var session = require('web.session');
 var web_client = require('web.web_client');
 var Widget = require('web.Widget');
diff --git a/openerp/addons/base/tests/test_mail_examples.py b/openerp/addons/base/tests/test_mail_examples.py
index 78f5cf55269..27ec3ee3e10 100644
--- a/openerp/addons/base/tests/test_mail_examples.py
+++ b/openerp/addons/base/tests/test_mail_examples.py
@@ -100,7 +100,7 @@ OERP_WEBSITE_HTML_1_OUT = [
 ]
 
 OERP_WEBSITE_HTML_2 = """
-<div class="mt16 cke_widget_editable cke_widget_element oe_editable oe_dirty" data-oe-model="blog.post" data-oe-id="6" data-oe-field="content" data-oe-type="html" data-oe-translate="0" data-oe-expression="blog_post.content" data-cke-widget-data="{}" data-cke-widget-keep-attr="0" data-widget="oeref" contenteditable="true" data-cke-widget-editable="text">
+<div class="mt16 cke_widget_editable cke_widget_element o_editable o_dirty" data-oe-model="blog.post" data-oe-id="6" data-oe-field="content" data-oe-type="html" data-oe-expression="blog_post.content" data-cke-widget-data="{}" data-cke-widget-keep-attr="0" data-widget="oeref" contenteditable="true" data-cke-widget-editable="text">
     <section class="mt16 mb16">
         <div class="container">
             <div class="row">
diff --git a/openerp/tests/common.py b/openerp/tests/common.py
index 4bd4d069f3f..0ae5adafaf6 100644
--- a/openerp/tests/common.py
+++ b/openerp/tests/common.py
@@ -297,8 +297,12 @@ class HttpCase(TransactionCase):
                 buf.append(s)
 
             # process lines
-            if '\n' in buf:
-                line, buf = buf.split('\n', 1)
+            if '\n' in buf and (not buf.startswith('<phantomLog>') or '</phantomLog>' in buf):
+                if buf.startswith('<phantomLog>'):
+                    line = buf[12:buf.index('</phantomLog>')]
+                    buf = bytearray()
+                else:
+                    line, buf = buf.split('\n', 1)
                 line = str(line)
 
                 # relay everything from console.log, even 'ok' or 'error...' lines
diff --git a/openerp/tests/phantomtest.js b/openerp/tests/phantomtest.js
index 4f264118485..d61d47c9847 100644
--- a/openerp/tests/phantomtest.js
+++ b/openerp/tests/phantomtest.js
@@ -57,7 +57,7 @@ function PhantomTest() {
         phantom.exit(1);
     };
     this.page.onConsoleMessage = function(message) {
-        console.log(message);
+        console.log('<phantomLog>'+message+'</phantomLog>');
     };
     this.page.onLoadFinished = function(status) {
         if (status === "success") {
@@ -92,7 +92,7 @@ function PhantomTest() {
             var message = ("Timeout\nhref: " + window.location.href +
                            "\nreferrer: " + document.referrer +
                            "\n\n" + (document.body && document.body.innerHTML)).replace(/[^a-z0-9\s~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "*");
-            console.log('error', message);
+            console.log('<phantomLog>error ' + message + '</phantomLog>');
             phantom.exit(1);
         });
     }, self.timeout);
diff --git a/openerp/tools/translate.py b/openerp/tools/translate.py
index 67885926e61..e38ae437319 100644
--- a/openerp/tools/translate.py
+++ b/openerp/tools/translate.py
@@ -270,7 +270,7 @@ def xml_translate(callback, value):
         trans.process(root)
         return trans.get_done()
     except etree.ParseError:
-        wrapped = "<div>%s</div>" % value
+        wrapped = "<div>%s</div>" % encode(value)
         root = etree.fromstring(wrapped, etree.HTMLParser())
         # html > body > div
         trans.process(root[0][0])