[REF] web, *: restore views design

Since the new views merge, a lot of design elements were broken. This
was particularly impacting the fields in the editable list view; indeed
the editable list view is not using an inline form view anymore so the
fields in the list were not properly styled as the LESS was still
defined assuming the form view environment (for example the invalid
fields were red for o2m fields in form view but not in editable list
view even though they got the right CSS class).

This commit refactor the LESS following these rules:
- No more division of non-layout and layout rules. Dividing LESS rules
  in x_layout.less and x.less was a mistake. Many rules can be
  considered to be layout and not layout at the same time, developers
  always have to switch from one file part to the other, many CSS
  selectors (and rules!) are duplicated for nothing, ...
- Field style is extracted from x_view.less and put in the new
  fields.less file. As before, the fields_extra.less will contain the
  rules specific to community so that the enterprise repo can override
  those by replacing the whole file.
- Many classes have been renamed so that o_form_x_y becomes o_x_y as
  many classes can now be applied outside of form view. These classes
  should not be used in templates anyway.

The commit also changes the DOM of fields so that it is more minimalist
(no useless parent div, etc).

Input elements are not automatically styled anymore, they have to get
the o_input class explicitely. This allows to fix lots of small style
bugs of previous versions (required monetary field had not the proper
style, readonly m2m tags appeared as editable, ...). This also improves
the LESS code.

The editable list view should also completely stop flickering on chrome
and firefox.

The commit also removes the orange outline on list view dirty cells.

The commit also removes deprecated static xml, LESS and other code.

Notice there are still styles to restore/fix and LESS to improve.

1 files changed, 22 insertions, 202 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 6ffe8fca2db..d89d11f0cd5 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -2,7 +2,9 @@
 <templates id="template" xml:space="preserve">
 
 <div t-name="EmptyComponent"/>
+
 <div t-name="Loading" class="o_loading"/>
+
 <t t-name="Notification">
     <div t-attf-class="o_notification #{className}" t-translation="off">
         <a t-if="widget.sticky" class="fa fa-times o_close" href="#"/>
@@ -49,15 +51,15 @@
         <table class="o_group o_inner_group o_label_nowrap">
             <tr>
                 <td class="o_td_label"><label for="old_pwd" class="o_form_label">Old Password</label></td>
-                <td width="100%"><input type="password" class="o_form_field o_form_input" name="old_pwd" minlength="1" autofocus="autofocus" autocomplete="current-password"/></td>
+                <td width="100%"><input type="password" class="o_field_widget o_input" name="old_pwd" minlength="1" autofocus="autofocus" autocomplete="current-password"/></td>
             </tr>
             <tr>
                 <td class="o_td_label"><label for="new_password" class="o_form_label">New Password</label></td>
-                <td width="100%"><input type="password" class="o_form_field o_form_input" name="new_password" minlength="1" autocomplete="new-password"/></td>
+                <td width="100%"><input type="password" class="o_field_widget o_input" name="new_password" minlength="1" autocomplete="new-password"/></td>
             </tr>
             <tr>
                 <td class="o_td_label"><label for="confirm_pwd" class="o_form_label">Confirm New Password</label></td>
-                <td width="100%"><input type="password" class="o_form_field o_form_input" name="confirm_pwd" minlength="1" autocomplete="new-password"/></td>
+                <td width="100%"><input type="password" class="o_field_widget o_input" name="confirm_pwd" minlength="1" autocomplete="new-password"/></td>
             </tr>
         </table>
 
@@ -83,7 +85,6 @@
         </div>
     </div>
 </t>
-
 <t t-name="X2ManyControlPanel">
     <div class="o_x2m_control_panel">
         <div class="o_cp_buttons"/>
@@ -108,7 +109,6 @@
         <ul class="dropdown-menu o_debug_dropdown" role="menu"/>
     </li>
 </t>
-
 <t t-name="WebClient.DebugManager.Global">
     <li><a href="#" data-action="perform_js_tests">Run JS Tests</a></li>
     <li><a href="#" data-action="select_view">Open View</a></li>
@@ -255,48 +255,6 @@
     </t>
 </t>
 
-<t t-name="TreeView">
-    <select t-if="toolbar" style="width: 30%"/>
-    <table class="o_treeview_table">
-        <thead>
-            <tr>
-                <th t-foreach="fields_view" t-as="field"
-                    t-if="!field.attrs.modifiers.tree_invisible"
-                    class="treeview-header">
-                    <t t-esc="field_value.attrs.string || fields[field.attrs.name].string" />
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
-</t>
-<tr t-name="TreeView.rows"
-        t-foreach="records" t-as="record"
-        t-att-id="'treerow_' + record.id"
-        t-att-data-id="record.id" t-att-data-level="level + 1"
-        t-att-data-row-parent-id="row_parent_id">
-    <t t-set="children" t-value="record[children_field]"/>
-    <t t-set="class" t-value="children and children.length ? 'treeview-tr' : 'treeview-td'"/>
-    <t t-set="rank" t-value="'o_treeview_first'"/>
-    <t t-set="style" t-value="'background-position: ' + 19*(level) + 'px; padding-left: ' + (4 + 19*(level)) + 'px;'"/>
-
-    <td t-foreach="fields_view" t-as="field"
-        t-if="!field.attrs.modifiers.tree_invisible"
-        t-att-data-id="record.id"
-        t-att-style="color_for(record) + style "
-        t-attf-class="#{class} #{rank} #{(fields[field.attrs.name].type === 'float') or (fields[field.attrs.name].type === 'integer') or (fields[field.attrs.name].type === 'monetary')? 'oe_number' : ''}">
-
-        <span t-if="!field.attrs.modifiers.invisible" >
-            <t t-esc="render(record[field.attrs.name], fields[field.attrs.name])" />
-        </span>
-
-        <t t-set="class" t-value="'treeview-td'"/>
-        <t t-set="rank" t-value="''"/>
-        <t t-set="style" t-value="''"/>
-    </td>
-</tr>
-
 <div t-name="ListView" class="table-responsive">
     <table class="o_list_view table table-condensed table-striped">
         <t t-set="columns_count" t-value="visible_columns.length + (options.selectable ? 1 : 0) + (options.deletable ? 1 : 0)"/>
@@ -332,7 +290,6 @@
         </tfoot>
     </table>
 </div>
-
 <t t-name="ListView.buttons">
     <div class="o_list_buttons">
         <t t-if="widget.is_action_enabled('create')">
@@ -349,60 +306,6 @@
     </div>
 </t>
 
-<t t-name="ListView.rows" t-foreach="records.length" t-as="index">
-    <t t-call="ListView.row">
-        <t t-set="record" t-value="records.at(index)"/>
-    </t>
-</t>
-
-<tr t-name="ListView.row"
-        t-att-data-id="record.get('id')"
-        t-attf-style="#{(view.fonts || view.colors) ? view.style_for(record) : ''}"
-        t-attf-class="#{view.compute_decoration_classnames(record)}">
-    <t t-set="asData" t-value="record.toForm().data"/>
-    <t t-foreach="columns" t-as="column">
-        <td t-if="column.meta"> </td>
-    </t>
-    <td t-if="options.selectable" class="o_list_record_selector">
-        <t t-set="checked" t-value="options.select_view_id == record.get('id') ? 'checked' : null"/>
-        <input t-if="options.radio" type="radio" name="radiogroup" t-att-checked="checked"/>
-        <div t-if="!options.radio" class="o_checkbox">
-            <input type="checkbox" name="radiogroup" t-att-checked="checked"/><span/>
-        </div>
-    </td>
-    <t t-foreach="columns" t-as="column">
-        <t t-set="number" t-value="column.type === 'integer' or column.type == 'float' or column.type == 'monetary'"/>
-        <t t-set="text" t-value="column.type === 'text'"/>
-        <t t-set="modifiers" t-value="column.modifiers_for(asData)"/>
-        <td t-if="!column.meta and column.invisible !== '1'" t-att-title="column.help"
-            t-attf-class="#{modifiers.readonly ? 'o_readonly' : ''} #{number ? 'o_list_number' : ''} #{text ? 'o_list_text' : ''} #{column.id === 'sequence' ? 'o_handle_cell' : ''} #{column.tag === 'button' ? 'o_list_button' : ''}"
-            t-att-data-field="column.id"
-            ><t t-raw="render_cell(record, column)"/></td>
-    </t>
-    <td t-if="options.deletable" class='o_list_record_delete'>
-        <span name="delete" class="fa fa-trash-o"/>
-    </td>
-</tr>
-
-<button t-name="ListView.row.text_button" type="button"
-        t-att-title="widget.string" t-att-disabled="disabled || undefined"
-        t-att-class="disabled ? 'oe_list_button_disabled btn_txt oe_link' : 'btn_txt oe_link'"
-        ><t t-esc="widget.string"/></button>
-<button t-name="ListView.row.button" type="button"
-        t-att-title="widget.string" t-att-disabled="disabled || undefined"
-        t-attf-class="o_icon_button #{disabled ? 'oe_list_button_disabled' : ''}"
-        ><i t-attf-class="fa #{widget.icon}" t-att-title="widget.string"/>
-</button>
-<t t-extend="ListView.row">
-    <!-- adds back padding to row being rendered after edition, if necessary
-         (if not deletable add back padding), otherwise the row being added is
-         missing columns
-     -->
-    <t t-jquery="&gt; :last" t-operation="after">
-        <td t-if="edited and !options.deletable" class="oe-listview-padding"/>
-    </t>
-</t>
-
 <t t-name="FormView.buttons">
     <div class="o_form_buttons_view">
         <button t-if="widget.is_action_enabled('edit')" type="button"
@@ -546,7 +449,6 @@
         <button class="btn btn-default fa fa-pie-chart o_graph_button" title="Pie Chart" data-mode="pie"/>
     </div>
 </t>
-
 <div t-name="GraphView.error" class="oe_view_nocontent" >
     <p><strong><t t-esc="title"/></strong></p>
     <p><t t-esc="description"/></p>
@@ -555,7 +457,6 @@
 <div t-name="PivotView" class="o_pivot">
     <div class="o_field_selection"/>
 </div>
-
 <t t-name="PivotView.buttons">
     <div class="btn-group btn-group-sm" role="group">
         <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
@@ -575,7 +476,6 @@
         <button class="btn btn-default fa fa-download o_pivot_download" title="Download xls"/>
     </div>
 </t>
-
 <t t-name="PivotView.FieldSelection">
     <ul class="dropdown-menu o_pivot_field_menu" role="menu">
         <t t-foreach="fields" t-as="field">
@@ -601,7 +501,6 @@
         </t>
     </ul>
 </t>
-
 <div t-name="PivotView.nodata" class="oe_view_nocontent" >
     <p><strong>No data to display.</strong></p>
     <p>
@@ -610,24 +509,10 @@
     </p>
 </div>
 
-
 <t t-name="Widget">
     Unhandled widget
     <t t-js="dict">console.warn('Unhandled widget', dict.widget);</t>
 </t>
-<t t-name="FieldChar">
-    <span t-if="widget.get('effective_readonly')"/>
-
-    <input t-if="!widget.get('effective_readonly')" class="o_form_input"
-        t-att-barcode_events="widget.options.barcode_events"
-        t-att-type="widget.password ? 'password' : 'text'"
-        t-att-id="widget.idForLabel"
-        t-att-tabindex="widget.node.attrs.tabindex"
-        t-att-autofocus="widget.node.attrs.autofocus"
-        t-att-placeholder="widget.node.attrs.placeholder"
-        t-att-autocomplete="widget.password ? 'new-password' : widget.node.attrs.autocomplete"
-        t-att-maxlength="widget.field.size"/>
-</t>
 <t t-name="FormSelection">
     <div class="btn-group o_selection">
         <a href="#" data-toggle="dropdown"><span class="o_status"/></a>
@@ -643,29 +528,8 @@
         </a>
     </li>
 </t>
-<t t-name="FieldEmail" t-extend="FieldChar">
-    <t t-jquery="span" t-operation="replace">
-        <t t-if="widget.get('effective_readonly')">
-            <a t-if="widget.clickable" class="o_form_uri o_text_overflow" href="#" target="_blank"/>
-            <span t-if="!widget.clickable" class="o_text_overflow"/>
-        </t>
-    </t>
-</t>
-<t t-name="FieldText">
-    <span t-if="widget.get('effective_readonly')" class="o_form_textarea"/>
-
-    <textarea t-if="!widget.get('effective_readonly')"
-        class="o_form_textarea"
-        rows="6"
-        t-att-name="widget.name"
-        t-att-tabindex="widget.node.attrs.tabindex"
-        t-att-autofocus="widget.node.attrs.autofocus"
-        t-att-placeholder="!widget.get('effective_readonly') ? widget.node.attrs.placeholder : ''"
-        t-att-maxlength="widget.field.size"/>
-</t>
-
 <t t-name="FieldDomain.content">
-    <div t-if="hasModel" class="o_form_field_domain_panel">
+    <div t-if="hasModel" class="o_field_domain_panel">
         <i class="fa fa-arrow-right"/>
 
         <button t-if="isValid" class="btn btn-xs btn-default o_domain_show_selection_button" type="button">
@@ -673,11 +537,10 @@
         </button>
         <span t-else="" class="text-warning"><i class="fa fa-exclamation-triangle"/> Invalid domain</span>
 
-        <button t-if="inDialogEdit" class="btn btn-xs btn-primary o_form_field_domain_dialog_button">Edit domain</button>
+        <button t-if="inDialogEdit" class="btn btn-xs btn-primary o_field_domain_dialog_button">Edit domain</button>
     </div>
     <div t-else="">Select a model to add a filter.</div>
 </t>
-
 <t t-name="DomainNode.ControlPanel">
     <div t-if="!widget.readonly &amp;&amp; !widget.noControlPanel" class="o_domain_node_control_panel">
         <button class="btn o_domain_delete_node_button"><i class="fa fa-times"/></button>
@@ -800,8 +663,7 @@
         </t>
     </div>
 </div>
-
-<div t-name="ModelFieldSelector" t-attf-class="o_field_selector#{!widget.options.readonly ? ' o_edit_mode' : ''}">
+<div t-name="ModelFieldSelector" t-attf-class="o_field_selector#{!widget.options.readonly ? ' o_edit_mode o_input' : ''}">
     <div class="o_field_selector_value" tabindex="0"/>
     <div class="o_field_selector_controls" tabindex="0">
         <i class="fa fa-exclamation-triangle o_field_selector_warning hidden" title="Invalid field chain"/>
@@ -816,7 +678,7 @@
             <ul class="o_field_selector_page"/>
         </div>
         <div t-if="widget.options.debugMode" class="o_field_selector_popover_footer">
-            <input type="text"/>
+            <input type="text" class="o_input"/>
         </div>
     </div>
 </div>
@@ -842,12 +704,11 @@
         </li>
     </t>
 </ul>
-
 <t t-name="web.datepicker">
     <t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
     <div class="o_datepicker">
         <input type="text"
-            class="o_datepicker_input"
+            class="o_datepicker_input o_input"
             t-att-name="widget.name"
             t-att-placeholder="placeholder"/>
         <span class="o_datepicker_button"/>
@@ -857,7 +718,7 @@
     <span t-if="widget.mode === 'readonly'"/>
 
     <select t-if="widget.mode !== 'readonly'"
-        class="o_form_input"
+        class="o_input"
         t-att-name="widget.name"
         t-att-tabindex="widget.attrs.tabindex"
         t-att-autofocus="widget.attrs.autofocus"
@@ -866,9 +727,9 @@
 <t t-name="FieldRadio">
     <span t-if="widget.mode === 'readonly'"/>
 
-    <div t-if="widget.mode !== 'readonly'" t-attf-class="o_form_field_radio #{widget.nodeOptions.horizontal ? 'o_horizontal' : 'o_vertical'}">
+    <div t-if="widget.mode !== 'readonly'" t-attf-class="o_field_radio #{widget.nodeOptions.horizontal ? 'o_horizontal' : 'o_vertical'}">
         <div t-foreach="widget.values" t-as="value" class="o_radio_item">
-            <input type="radio" class="o_form_radio" t-att-id="widget.unique_id + '_' + value[0]" t-att-name="widget.unique_id" t-att-data-value="value[0]"/>
+            <input type="radio" class="o_radio_input" t-att-id="widget.unique_id + '_' + value[0]" t-att-name="widget.unique_id" t-att-data-value="value[0]"/>
             <label t-if="!widget.nodeOptions.no_radiolabel" class="o_form_label" t-att-for="widget.unique_id + '_' + value[0]"><t t-esc="value[1]"/></label>
         </div>
     </div>
@@ -878,9 +739,9 @@
         <a t-if="!widget.nodeOptions.no_open" class="o_form_uri" href="#"/>
         <span t-if="widget.nodeOptions.no_open"/>
     </t>
-    <div t-if="widget.mode === 'edit'" class="o_form_field o_form_field_many2one">
-        <div class="o_form_input_dropdown">
-            <input type="text" class="o_form_input"
+    <div t-if="widget.mode === 'edit'" class="o_field_widget o_field_many2one">
+        <div class="o_input_dropdown">
+            <input type="text" class="o_input"
                 t-att-barcode_events="widget.nodeOptions.barcode_events"
                 t-att-tabindex="widget.attrs.tabindex"
                 t-att-autofocus="widget.attrs.autofocus"
@@ -891,9 +752,6 @@
         <button type="button" t-if="!widget.nodeOptions.no_open" class="fa fa-external-link btn btn-default o_external_button" tabindex="-1" draggable="false"/>
     </div>
 </t>
-<t t-name="Many2OneButton.cell">
-    <i t-attf-class="fa #{widget.icon}" t-att-title="widget.string"/>
-</t>
 <t t-name="FieldMany2ManyTag">
     <t t-foreach="elements" t-as="el">
         <span t-attf-class="badge dropdown o_tag_color_#{el.color || 10}" t-att-data-color="el.color || 10" t-att-data-index="el_index" t-att-data-id="el.id">
@@ -915,19 +773,6 @@
         </li>
     </ul>
 </t>
-<t t-name="FieldBoolean">
-    <div class="o_checkbox o_form_field_boolean">
-        <input type="checkbox"
-            t-att-id="widget.idForLabel"
-            t-att-name="widget.name"
-            t-att-tabindex="widget.node.attrs.tabindex"
-            t-att-autofocus="widget.node.attrs.autofocus"/>
-        <span/>
-    </div>
-</t>
-<div t-name="FieldUpgradeBoolean" class="o_form_field o_form_field_boolean">
-    <t t-call="FieldBoolean"/>
-</div>
 <t t-name="ProgressBar">
     <div class="o_progressbar">
         <div t-if="widget.title" class="o_progressbar_title"><t t-esc="widget.title"/></div><div class="o_progress">
@@ -936,7 +781,7 @@
     </div>
 </t>
 <t t-name="FieldPercentPie">
-    <div class="o_form_field_percent_pie">
+    <div class="o_field_percent_pie">
         <div class="o_pie">
             <div class="o_mask"/>
             <div class="o_mask"/>
@@ -966,7 +811,7 @@
     </button>
 </t>
 <t t-name="FieldBinaryImage">
-    <div class="o_form_field_image">
+    <div class="o_field_image">
         <t t-if="widget.mode !== 'readonly'">
             <div class="o_form_image_controls">
                 <span class="fa fa-pencil fa-lg pull-left o_select_file_button" title="Edit"/>
@@ -997,8 +842,8 @@
 <t t-name="FieldBinaryFile">
     <a t-if="widget.mode === 'readonly'" href="javascript:void(0)" class="o_form_uri"/>
 
-    <div t-if="widget.mode !== 'readonly'" class="o_form_field_binary_file">
-        <input type="text" class="o_form_input"
+    <div t-if="widget.mode !== 'readonly'" class="o_field_binary_file">
+        <input type="text" class="o_input"
             readonly="readonly"
             t-att-name="widget.name"
             t-att-tabindex="widget.attrs.tabindex"
@@ -1022,8 +867,8 @@
             <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
             <input type="hidden" name="session_id" value="" t-if="widget.getSession().override_session"/>
             <input type="hidden" name="callback" t-att-value="fileupload_id"/>
-            <input t-if="widget.image_only" type="file" class="o_form_input_file" name="ufile" accept="image/*"/>
-            <input t-if="!widget.image_only" type="file" class="o_form_input_file" name="ufile" t-att="{'multiple': multi_upload ? 'multiple' : null}"/>
+            <input t-if="widget.image_only" type="file" class="o_input_file" name="ufile" accept="image/*"/>
+            <input t-if="!widget.image_only" type="file" class="o_input_file" name="ufile" t-att="{'multiple': multi_upload ? 'multiple' : null}"/>
             <t t-raw="0"/>
         </form>
         <iframe t-att-id="fileupload_id" t-att-name="fileupload_id" style="display: none"/>
@@ -1089,7 +934,6 @@
 <t t-name="SearchView.autocomplete">
     <ul class="dropdown-menu o_searchview_autocomplete" role="menu"></ul>
 </t>
-
 <div t-name="SearchView.FilterMenu" class="btn-group o_dropdown">
     <button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
         <span class="fa fa-filter"/> Filters <span class="caret"/>
@@ -1198,7 +1042,6 @@
         </option>
     </select>
 </t>
-
 <div t-name="SearchView.GroupByMenu" class="btn-group hidden-xs o_dropdown">
     <button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
         <span class="fa fa-bars"/> Group By <span class="caret"/>
@@ -1220,7 +1063,6 @@
         <button type="button" class="btn btn-primary btn-sm o_add_group o_select_group">Apply</button>
     </li>
 </t>
-
 <div t-name="SearchView.FavoriteMenu" class="btn-group o_dropdown">
     <button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown">
         <span class="fa fa-star"/> Favorites <span class="caret"/>
@@ -1334,13 +1176,6 @@
         Name: <input class="oe_form_m2o_input_name" type="text"/>
     </div>
 </t>
-<t t-name="FieldMonetary" t-extend="FieldChar">
-    <t t-jquery="input">
-        var $div = $(document.createElement('div')).attr('t-if', this.attr('t-if')).addClass('o_form_field_monetary');
-        this.clone(true).appendTo($div);
-        this.replaceWith($div);
-    </t>
-</t>
 <t t-name="FieldMany2ManyCheckBoxes">
     <div>
         <div t-foreach="widget.m2mValues" t-as="m2m_value">
@@ -1352,31 +1187,16 @@
         </div>
     </div>
 </t>
-<t t-name="X2ManyCounter">
-    <a href="javascript:void(0)"><t t-esc="text"/></a>
-</t>
 <t t-name="StatInfo">
     <span class="o_stat_value"><t t-esc="value"/></span>
     <span class="o_stat_text"><t t-esc="text"/></span>
 </t>
-
 <t t-name="toggle_button">
     <button type="button" class="o_icon_button" t-att-title="widget.string">
         <i t-attf-class="fa #{widget.icon}" t-att-title="widget.string"/>
     </button>
 </t>
 
-<t t-name="BooleanButton">
-    <t t-if="widget.get_value()">
-        <span class="o_stat_text o_not_hover text-success"><t t-esc="widget.string_true"/></span>
-        <span class="o_stat_text o_hover text-danger"><t t-esc="widget.hover_true"/></span>
-    </t>
-    <t t-if="!widget.get_value()">
-        <span class="o_stat_text o_not_hover text-danger"><t t-esc="widget.string_false"/></span>
-        <span class="o_stat_text o_hover text-success"><t t-esc="widget.hover_false"/></span>
-    </t>
-</t>
-
 <div t-name="Pager">
     <span class="o_pager_counter">
         <span class="o_pager_value"></span> / <span class="o_pager_limit"></span>