[MERGE] *: new web_editor/website + assets improvements

Read sub-commits for more details.

3 files changed, 257 insertions, 162 deletions

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 44abb32caf1..765d3d15354 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,38 +1,147 @@
 <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">
+        <div id="web_editor-top-edit" class="o_css_editor">
+            <div id="web_editor-toolbars"/>
             <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>
+                <button type="button" class="btn btn-sm btn-default" data-action="cancel"><i class="fa fa-times"/> Discard</button>
+                <button type="button" class="btn btn-sm btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
             </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 o_website_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>
+                        <h3 class="modal-title">
+                            <t t-esc="title"/>
+                        </h3>
+                    </div>
+                    <div class="modal-body">
+                        <t t-raw="0"/>
                     </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>
+                        <button class="btn btn-sm btn-primary save" t-if="!button" type="button">Save</button>
+                        <button class="btn btn-sm btn-primary save" t-if="button" type="button"><t t-raw="button"/></button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
                     </div>
                 </div>
             </div>
         </div>
     </t>
+    <div t-name="web_editor.dialog.background_position" class="o_bg_img_opt_modal">
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="cover"/> Cover</label>
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="contain"/> Contain</label>
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="custom"/> Custom</label>
+
+        <div class="o_bg_img_opt" data-value="cover">
+            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><span class="fa fa-question-circle"/></a>
+            <div class="help collapse" id="cover_help">
+                <div class="simulator cover_bg">
+                    <div class="bg"/>
+                    <div class="el"/>
+                </div>
+                <p class="help-text">Scale the image to be as large as it needs to fill the whole content area. Part of the image may not be visible.</p>
+            </div>
+
+            <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+            <div class="o_bg_img_opt_cover_edition">
+                <h6>Click on the picture</h6>
+                <div class="o_bg_img_opt_object">
+                    <span class="grid grid-1"/>
+                    <span class="grid grid-2"/>
+                    <span class="grid grid-3"/>
+                    <span class="grid grid-4"/>
+                    <span class="o_focus_point"/>
+                    <div class="o_bg_img_opt_ui_info">X: <span class="o_x"/> Y: <span class="o_y"/></div>
+                </div>
+            </div>
+        </div>
+        <div class="o_bg_img_opt" data-value="contain">
+            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><span class="fa fa-question-circle"/></a>
+            <div class="help collapse" id="contain_help">
+                <div class="simulator contain_bg">
+                    <div class="bg"/>
+                    <div class="el"/>
+                </div>
+                <p class="help-text">Scale the image to the largest size such that both its width and height can fit inside the content area</p>
+            </div>
+
+            <form class="form-horizontal">
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
+                    <div class="col-sm-5">
+                        <div class="checkbox">
+                            <label>
+                                <input type="checkbox" id="o_bg_img_opt_contain_repeat"/>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <form class="o_bg_img_opt form-horizontal" data-value="custom">
+            <fieldset>
+                <legend>Background size</legend>
+                <p>Sets the width and height of the background image in percent of the parent element.</p>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Background position</legend>
+                <p>Set the starting position of the background image.</p>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Background repeat</legend>
+                <p>Define if/how the background image will be repeated</p>
+                <select class="form-control" id="o_bg_img_opt_custom_repeat">
+                    <option value="">No repeat</option>
+                    <option value="o_bg_img_opt_repeat">Repeat both</option>
+                    <option value="o_bg_img_opt_repeat_x">Repeat x</option>
+                    <option value="o_bg_img_opt_repeat_y">Repeat y</option>
+                </select>
+            </fieldset>
+        </form>
+    </div>
     <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 note-image-dialog o_website_modal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-lg o_select_media_dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@@ -44,38 +153,37 @@
                             <li><a href="#editor-media-document" data-toggle="tab">Document</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;">
+                            <li class="search">
                                 <ul class="pager mb0 mt0">
-                                    <li class="previous disabled"><a href="#">← Previous</a></li>
-                                    <li class="next disabled"><a href="#">Next →</a></li>
+                                    <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;">
+                            <li class="search">
                                 <form action="#">
-                                    <div class="form-group font-icons fa fa-search mb0">
-                                        <input type="search" class="form-control" id="icon-search"/>
+                                    <div class="form-group">
+                                        <input class="form-control" id="icon-search" type="search"/>
+                                        <span class="fa fa-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-document">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-icon">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-video">
-                            </div>
+                            <div class="tab-pane fade in active" id="editor-media-image"/>
+                            <div class="tab-pane fade" id="editor-media-document"/>
+                            <div class="tab-pane fade" id="editor-media-icon"/>
+                            <div class="tab-pane fade" id="editor-media-video"/>
                         </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>
+                        <button class="btn btn-sm btn-primary save" type="button">Save</button>
+                        <button class="btn btn-sm hidden wait" disabled="disabled" type="button"/>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
                     </div>
                 </div>
             </div>
@@ -94,22 +202,24 @@
                         <input type="file" name="upload" t-att-accept="widget.accept" 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>
+                            <button class="btn btn-primary filepicker" type="button">Upload an image</button>
+                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
+                                <span class="caret"/>
                                 <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>
+                                <li>
+                                    <a class="js_disable_optimization" href="#">Upload image without optimization</a>
+                                </li>
                             </ul>
                         </div>
-                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
+                        <button class="btn hidden wait" disabled="disabled" type="button">Uploading...</button>
                     </div>
                     <div>
-                        <span class="text-muted"> — or — </span>
+                        <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"/>
+                            <input class="form-control url pull-left" id="iamgeurl" name="url" placeholder="http://openerp.com/logo.png" style="width: 320px;" type="text"/>
                             <button class="btn btn-default" type="submit">Add</button>
                         </div>
                     </div>
@@ -121,7 +231,7 @@
                 </div>
             </form>
         </div>
-        <iframe src="about:blank" name="fileframe" class="hidden"/>
+        <iframe class="hidden" name="fileframe" src="about:blank"/>
     </t>
     <t t-name="web_editor.dialog.image.existing">
         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
@@ -136,7 +246,7 @@
                         <div class="help-block"/>
                     </div>
                     <div class="modal-footer">
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                        <a data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
                     </div>
                 </div>
             </div>
@@ -144,10 +254,9 @@
     </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"/>
+            <div class="row mt16" t-as="row" t-foreach="rows">
+                <div class="col-sm-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row">
+                    <i class="fa fa-times o_existing_attachment_remove" t-att-data-id="attachment.id"/>
                     <div class="o_attachment_border"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image"/></div>
                 </div>
             </div>
@@ -157,7 +266,7 @@
         <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">
+            <ul t-as="view" t-foreach="views">
                 <li>
                     <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
                         <t t-esc="view.name"/>
@@ -166,9 +275,8 @@
             </ul>
         </div>
     </t>
-
     <t t-name="web_editor.discard">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal o_website_modal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -176,38 +284,36 @@
                         <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>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>
+                        <button class="btn btn-sm btn-danger" type="button">Discard</button>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" 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>
+            <t t-set="title">Change media description and tooltip</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>
+                    <label class="col-sm-2 control-label" for="alt">Description</label>
+                    <div class="col-sm-9">
+                        <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
+                    </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>
+                    <label class="col-sm-2 control-label" for="title">Tooltip</label>
+                    <div class="col-sm-9">
+                        <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
+                    </div>
                 </div>
             </form>
         </t>
     </t>
-
     <t t-name="web_editor.dialog.font-icons">
         <form action="#">
             <input type="hidden" id="fa-icon"/>
@@ -220,61 +326,40 @@
         </form>
     </t>
     <t t-name="web_editor.dialog.font-icons.icons">
-        <t t-foreach="iconsParser" t-as="data">
-          <span t-foreach="data.cssData" t-as="cssData"
-                t-attf-class="#{data.base} font-icons-icon #{cssData[2]}"
-                t-attf-data-alias=",#{cssData[3]},"
-                t-att-title="cssData[3].join(', ')"
-                t-att-data-id="cssData[2]"/>
+        <t t-as="data" t-foreach="iconsParser">
+            <span t-as="cssData" t-att-data-id="cssData[2]" t-att-title="cssData[3].join(', ')" t-attf-class="#{data.base} font-icons-icon #{cssData[2]}" t-attf-data-alias=",#{cssData[3]}," t-foreach="data.cssData"/>
         </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"/>
+                    <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">Set a video URL</label>
+                    <input class="form-control url pull-left" id="urlvideo" name="url" placeholder="//www.youtube.com/embed/yws1tbgNV7k" style="width: 400px;" t-translation="off" type="text"/>
                     <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"/>
+                    <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">
+                        <span class="text-muted">— or —</span>Embed Video (HTML)</label>
+                    <input class="form-control url pull-left" id="embedvideo" name="embed" placeholder="&lt;iframe src=&quot;//www.youtube.com/embed/yws1tbgNV7k&quot;&gt;&lt;/iframe&gt;" style="width: 400px;" t-translation="off" type="text"/>
                     <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 class="media_iframe_video_size"/>
+                    <iframe allowfullscreen="allowfullscreen" frameborder="0" src=""/>
                 </div>
             </div>
-
             <div class="text-center mt32">
                 <div class="checkbox">
-                    <label><input type="checkbox" id="autoplay"/> Autoplay</label>
+                    <label>
+                        <input id="autoplay" type="checkbox"/>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>
@@ -282,78 +367,85 @@
                 <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 class="control-label" for="link-new">Link Label
                             </label>
                         </h3>
-                        <input type="text" class="form-control" id="link-text" required="required"/>
+                        <input class="form-control" id="link-text" required="required" type="text"/>
                     </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>
+                                <input class="window-new" type="checkbox"/>Open in new window</label>
                         </div>
                         <h4 class="list-group-item-heading">
-                            <label for="link-external" class="control-label">
-                                URL or Email Address
+                            <label class="control-label" for="link-external">URL or Email Address
                             </label>
                         </h4>
-                        <input type="text" class="form-control url email-address url-source"
-                               id="link-external" placeholder="http://openerp.com"/>
+                        <input class="form-control url email-address url-source" id="link-external" placeholder="http://openerp.com" type="text"/>
                     </li>
                 </ul>
                 <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Style
+                        <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">
+                                <a class="btn btn-default" data-toggle="dropdown" href="#">Color Style
+                                    <span class="caret"/></a>
+                                <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
                                     <li>
-                                        <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
+                                        <label class="btn btn-link">Link
+                                            <input checked="checked" class="link-style" name="link-style-type" type="radio" value=""/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-default">Basic
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-default"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-success">Success<input value="btn-success" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-success">Success
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-success"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-primary">Primary
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-primary"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-info">Info
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-info"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-warning">Warning
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-warning"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-danger">Danger
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-danger"/></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">
+                                <a class="btn btn-default" data-toggle="dropdown" href="#">Size
+                                    <span class="caret"/></a>
+                                <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
                                     <li>
-                                        <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <label class="btn btn-default btn-xs">Extra Small
+                                            <input class="link-style" name="link-style-size" type="radio" value="btn-xs"/></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>
+                                        <label class="btn btn-default btn-sm">Small
+                                            <input class="link-style" name="link-style-size" type="radio" value="btn-sm"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
+                                        <label class="btn btn-default">Default
+                                            <input checked="checked" class="link-style" name="link-style-size" type="radio" value=""/></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>
+                                        <label class="btn btn-default btn-lg">Large
+                                            <input class="link-style" name="link-style-size" type="radio" value="btn-lg"/></label>
                                     </li>
                                 </ul>
                             </div>
@@ -362,12 +454,11 @@
                 </div>
                 <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Preview
+                        <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>
+                                <a href="#" id="link-preview"/>
                             </div>
                         </div>
                     </div>
@@ -375,4 +466,11 @@
             </form>
         </t>
     </t>
+    <t t-name="web_editor.components.switch">
+        <label class="o_switch" t-att-for="id">
+            <input type="checkbox" t-att-id="id"/>
+            <span/>
+            <t t-if="label"><t t-esc="label"/></t>
+        </label>
+    </t>
 </templates>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 0b194de6af9..cbf1e6bef70 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -13,43 +13,30 @@
         </li>
     </t>
 
-    <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>
-                <div>Insert Blocks</div>
-                <span class="fa fa-angle-double-right fa-1x" style="bottom: 10px;"></span>
-            </div>
-            <div id="o_left_bar">
-                <span class='snippets_loading'>Snippets are loading...</span>
-            </div>
-        </div>
-    </t>
-
     <t t-name="web_editor.snippet_overlay">
         <div class="oe_overlay">
+            <div class="oe_handles">
+                <div class="oe_handle n readonly"/>
+                <div class="oe_handle e readonly"/>
+                <div class="oe_handle w readonly"/>
+                <div class="oe_handle s readonly"/>
+                <div class="oe_handle size readonly">
+                    <div class="oe_handle_button auto_size">Auto Resize</div>
+                    <div class="oe_handle_button size">Resize</div>
+                </div>
+            </div>
             <div class="oe_overlay_options" contentEditable="false">
                 <div class="btn-group">
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"/></a>
                     <div class="dropdown oe_options hidden btn-group">
-                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
-                        <ul class="dropdown-menu" role="menu"></ul>
+                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize</a>
+                        <ul class="dropdown-menu" role="menu"/>
                     </div>
                     <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a>
                     <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a>
                     <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a>
                 </div>
             </div>
-            <div class='oe_handles'>
-                <div class='oe_handle n readonly'><div></div></div>
-                <div class='oe_handle e readonly'><div></div></div>
-                <div class='oe_handle w readonly'><div></div></div>
-                <div class='oe_handle size readonly'>
-                    <div class="oe_handle_button auto_size">Auto Resize</div>
-                    <div class="oe_handle_button size">Resize</div>
-                </div>
-                <div class='oe_handle s readonly'><div></div></div>
-            </div>
         </div>
     </t>
 
@@ -57,8 +44,21 @@
         <div class='oe_snippet_manipulator'></div>
     </t>
 
-    <!-- t-field options -->
+    <!-- options -->
+    <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">
+        <div class="note-palette-title">Background Color</div>
+        <div class="btn-group palette-reset">
+            <div class="note-color-reset" data-event="foreColor" data-value="inherit" title="None">
+                <i class="fa fa-ban"/>
+            </div>
+        </div>
+        <div class="o_colorpicker_sections">
+            <ul class="nav nav-pills o_colorpicker_section_menu"/>
+            <div class="tab-content o_colorpicker_section_tabs"/>
+        </div>
+    </div>
 
+    <!-- t-field options -->
     <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>
diff --git a/addons/web_editor/static/src/xml/translator.xml b/addons/web_editor/static/src/xml/translator.xml
index 244fc67ec4a..c3aad20471c 100644
--- a/addons/web_editor/static/src/xml/translator.xml
+++ b/addons/web_editor/static/src/xml/translator.xml
@@ -1,14 +1,11 @@
 <?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-name="web_editor.translator" t-extend="web_editor.editorbar">
+    <t t-jquery="#web_editor-top-edit">
+        $(this).addClass('o_translate');
+    </t>
+    <t t-jquery="#web_editor-toolbars" t-operation="replace"/>
 </t>
 
 <t t-name="web_editor.translator.attributes">