[REF] website,web_editor: complete restyling

2 files changed, 450 insertions, 141 deletions

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 44abb32caf1..3891e7caf89 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,41 +1,375 @@
 <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 class="o_css_editor navbar navbar-fixed-top hidden-xs" id="web_editor-top-edit">
+            <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>
+                <div id="web_editor-top-actions">
+                    <a class="btn btn-link btn-xs" data-action="cancel" href="#">
+                        <i class="material-icons">clear</i>DISCARD</a>
+                    <button class="btn full compl btn-xs" data-action="save" type="button">
+                        <i class="fa fa-floppy-o"></i>  SAVE</button>
+                </div>
             </form>
         </div>
     </t>
-
     <t t-name="web_editor.dialog">
-        <div class="modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal web_editor-dialog" role="dialog" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</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 class="btn btn-primary save" t-if="!button" type="button">Save</button>
+                        <button class="btn btn-primary save" t-if="button" type="button">
+                            <t t-raw="button"/>
+                        </button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>
+                        <span>or </span>
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.background_position">
+        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
             <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>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">Background Image Options</h3>
                     </div>
-                    <div class="modal-body"><t t-raw="0"/></div>
+                    <div class="modal-body">
+                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_cover">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
+                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
+                                    <div class="panel-body">
+
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="cover_help">
+
+                                            <div class="simulator cover_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
+                                            </div>
+                                        </div>
+                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+                                        <div class="cover_editing_container">
+                                            <h6>Click on the picture</h6>
+                                            <div class="object">
+                                                <span class="grid grid-1"/>
+                                                <span class="grid grid-2"/>
+                                                <span class="grid grid-3"/>
+                                                <span class="grid grid-4"/>
+                                                <span class="focus_point"/>
+                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_contain">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
+                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
+                                    <div class="panel-body">
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="contain_help">
+
+                                            <div class="simulator contain_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
+                                            </div>
+                                        </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 id="contain_repeat"  type="checkbox"/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                          </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_custom">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
+                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
+                                    <div class="panel-body">
+                                        <form class="form-horizontal">
+                                            <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="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="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="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="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="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="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="custom_pos_x">Vertical</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="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="custom_repeat">
+                                                    <option value="o_bg_img_no_repeat">No repeat</option>
+                                                    <option value="o_bg_img_repeat">Repeat both</option>
+                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
+                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
+                                                </select>
+                                            </fieldset>
+                                        </form>
+
+                                    </div>
+                                </div>
+                            </div> <!-- / .panel -->
+                        </div> <!-- / .panel-group -->
+                        <input id="pos_x" type="hidden"/>
+                        <input id="pos_y" type="hidden"/>
+                        <input id="bg_size" type="hidden"/>
+                    </div> <!-- /.modal-body -->
+
                     <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-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
                     </div>
+
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.background_position">
+        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">Background Image Options</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_cover">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
+                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
+                                    <div class="panel-body">
+
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="cover_help">
+
+                                            <div class="simulator cover_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
+                                            </div>
+                                        </div>
+                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+                                        <div class="cover_editing_container">
+                                            <h6>Click on the picture</h6>
+                                            <div class="object">
+                                                <span class="grid grid-1"/>
+                                                <span class="grid grid-2"/>
+                                                <span class="grid grid-3"/>
+                                                <span class="grid grid-4"/>
+                                                <span class="focus_point"/>
+                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_contain">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
+                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
+                                    <div class="panel-body">
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="contain_help">
+
+                                            <div class="simulator contain_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
+                                            </div>
+                                        </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 id="contain_repeat"  type="checkbox"/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                          </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_custom">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
+                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
+                                    <div class="panel-body">
+                                        <form class="form-horizontal">
+                                            <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="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="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="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="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="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="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="custom_pos_x">Vertical</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="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="custom_repeat">
+                                                    <option value="o_bg_img_no_repeat">No repeat</option>
+                                                    <option value="o_bg_img_repeat">Repeat both</option>
+                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
+                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
+                                                </select>
+                                            </fieldset>
+                                        </form>
+
+                                    </div>
+                                </div>
+                            </div> <!-- / .panel -->
+                        </div> <!-- / .panel-group -->
+                        <input id="pos_x" type="hidden"/>
+                        <input id="pos_y" type="hidden"/>
+                        <input id="bg_size" type="hidden"/>
+                    </div> <!-- /.modal-body -->
+
+                    <div class="modal-footer">
+                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">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 aria-hidden="true" class="modal note-image-dialog" role="dialog" tabindex="-1">
             <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>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Select a Media</h3>
                     </div>
                     <div class="modal-body">
@@ -46,37 +380,34 @@
                             <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>
+                                    <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"/>
+                                        <input class="form-control" id="icon-search" type="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-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>
-                    </div>
+                        <button class="btn btn-primary save" type="button">Save</button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>or
+
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a></div>
                 </div>
             </div>
         </div>
@@ -94,41 +425,43 @@
                         <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 from your computer</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>
                 </div>
-                <input type="hidden" name="func"/>
+                <input name="func" type="hidden"/>
                 <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"/>
+        <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">
+        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
             <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>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Select a Picture</h3>
                     </div>
                     <div class="modal-body has-error">
@@ -136,7 +469,7 @@
                         <div class="help-block"/>
                     </div>
                     <div class="modal-footer">
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
                     </div>
                 </div>
             </div>
@@ -144,9 +477,8 @@
     </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">
+            <div class="row mt16" t-as="row" t-foreach="rows">
+                <div class="col-sm-2 existing-attachment-cell" t-as="attachment" t-foreach="row">
                     <i class="fa fa-times 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>
@@ -157,7 +489,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,52 +498,51 @@
             </ul>
         </div>
     </t>
-
     <t t-name="web_editor.discard">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</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>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>
+                        <button class="btn btn-danger" type="button">Discard</button>or
+
+                        <a aria-hidden="true" data-dismiss="modal" href="#">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>
+                    <label class="col-sm-2 control-label" for="alt">Alt:</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">Title:</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"/>
-            <input type="hidden" id="fa-size" value="fa-1x"/>
+            <input id="fa-icon" type="hidden"/>
+            <input id="fa-size" type="hidden" 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"/>
@@ -220,61 +551,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 +592,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 +679,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>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 0b194de6af9..3ec1bf42308 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -14,15 +14,8 @@
     </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 id='web_editor_snippets' class="hidden-xs o_open">
+            <div id="o_left_bar"></div>
         </div>
     </t>
 
@@ -32,7 +25,7 @@
                 <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>
                     <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>
+                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize  </a>
                         <ul class="dropdown-menu" role="menu"></ul>
                     </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>