[IMP] web: domain & field selector usability (+ design)

+ Document and refactor the files using the new guidelines

* Now only non-technical names are used when building field chains and
  domains (technical names can be used in debug mode).
* Better warnings are displayed when using the field and/or domain
  selector widgets (also checks domain validity in both domain field
  AND domain selector widget).

Also improve design (thanks to original work of @stefanorigano):
- Hovering 'remove' highlights the element that will be removed
- Hovering 'add node' btns shows where the new node will be created
- Restyle debug domain input field (make it similar to a text editor)
- Improve design and layout
- Resize inner fields

1 files changed, 43 insertions, 23 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 3976a41d783..c92db7a1872 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -680,10 +680,10 @@
 </t>
 
 <t t-name="DomainNode.ControlPanel">
-    <div t-if="!widget.readonly &amp;&amp; !widget.noControlPanel" class="btn-group btn-group-sm pull-right o_domain_node_control_panel">
-        <button class="btn btn-default o_domain_delete_node_button"><i class="fa fa-minus"/></button>
-        <button class="btn btn-default o_domain_add_node_button"><i class="fa fa-plus"/></button>
-        <button class="btn btn-default o_domain_add_node_button" data-branch="1"><i class="fa fa-ellipsis-h"/></button>
+    <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>
+        <button class="btn o_domain_add_node_button"><i class="fa fa-plus-circle"/></button>
+        <button class="btn o_domain_add_node_button" data-branch="1"><i class="fa fa-ellipsis-h"/></button>
     </div>
 </t>
 <t t-name="DomainTree.OperatorSelector">
@@ -710,7 +710,7 @@
         <button t-if="!widget.readonly" class="btn btn-xs btn-primary o_domain_add_first_node_button"><i class="fa fa-plus"/> Add filter</button>
     </t>
     <t t-else="">
-        <div>
+        <div class="o_domain_tree_header">
             <t t-if="widget.children.length === 1">Match records with the following rule:</t>
             <t t-else="">
                 <span>Match records with</span>
@@ -721,28 +721,34 @@
 
         <div class="o_domain_node_children_container"/>
     </t>
-
-    <input t-if="widget.debug &amp;&amp; !widget.readonly" type="text" class="o_domain_debug_input mt16"/>
+    <label t-if="widget.debug &amp;&amp; !widget.readonly" class="o_domain_debug_container">
+        <span class="small"># Code editor</span>
+        <input type="text" class="o_domain_debug_input"/>
+    </label>
 </div>
 <div t-name="DomainTree" class="o_domain_node o_domain_tree">
-    <t t-call="DomainNode.ControlPanel"/>
-    <t t-call="DomainTree.OperatorSelector"/>
-    <span>of:</span>
+    <div class="o_domain_tree_header o_domain_selector_row">
+        <t t-call="DomainNode.ControlPanel"/>
+        <t t-call="DomainTree.OperatorSelector"/>
+        <span class="ml4">of:</span>
+    </div>
 
     <div class="o_domain_node_children_container"/>
 </div>
-<div t-name="DomainLeaf" t-attf-class="o_domain_node o_domain_leaf #{widget.readonly ? 'o_read_mode' : 'o_edit_mode'}">
+<div t-name="DomainLeaf" t-attf-class="o_domain_node o_domain_leaf o_domain_selector_row #{widget.readonly ? 'o_read_mode' : 'o_edit_mode'}">
     <t t-call="DomainNode.ControlPanel"/>
 
     <div t-if="!widget.readonly" class="o_domain_leaf_edition">
         <!-- field selector will be instantiated here -->
-        <select class="o_domain_leaf_operator_select">
-            <option t-foreach="widget.operators" t-as="key"
-                    t-att-value="key"
-                    t-att-selected="widget.displayOperator === key ? 'selected' : None">
-                <t t-esc="key_value"/>
-            </option>
-        </select>
+        <div> <!-- used for flex stretching -->
+            <select class="o_domain_leaf_operator_select">
+                <option t-foreach="widget.operators" t-as="key"
+                        t-att-value="key"
+                        t-att-selected="widget.displayOperator === key ? 'selected' : None">
+                    <t t-esc="key_value"/>
+                </option>
+            </select>
+        </div>
         <div t-attf-class="o_ds_value_cell#{_.contains(['set', 'not set'], widget.displayOperator) ? ' hidden' : ''}">
             <t t-if="widget.selectionChoices !== null">
                 <select class="o_domain_leaf_value_input">
@@ -772,7 +778,7 @@
         </div>
     </div>
     <div t-else="" class="o_domain_leaf_info">
-        <span class="o_domain_leaf_chain"><t t-esc="widget.chain"/></span>
+        <!-- field selector will be instantiated here -->
         <t t-if="_.isString(widget.value)">
             <span class="o_domain_leaf_operator"><t t-esc="widget.operator_mapping[widget.operator]"/></span>
             <span class="o_domain_leaf_value text-primary">"<t t-esc="widget.value"/>"</span>
@@ -796,12 +802,12 @@
     </div>
 </div>
 
-<div t-name="FieldSelector" class="o_field_selector">
-    <input type="text" t-att-value="widget.chain" t-att-readonly="!(widget.options.debugMode) and 1 or None"/>
+<div t-name="ModelFieldSelector" t-attf-class="o_field_selector#{!widget.options.readonly ? ' o_edit_mode' : ''}">
+    <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"/>
     </div>
-    <div class="o_field_selector_popover hidden" tabindex="0">
+    <div t-if="!widget.options.readonly" class="o_field_selector_popover hidden" tabindex="0">
         <div class="o_field_selector_popover_header text-center">
             <i class="fa fa-arrow-left o_field_selector_popover_option o_field_selector_prev_page"/>
             <div class="o_field_selector_title"/>
@@ -810,9 +816,23 @@
         <div class="o_field_selector_popover_body">
             <ul class="o_field_selector_page"/>
         </div>
+        <div t-if="widget.options.debugMode" class="o_field_selector_popover_footer">
+            <input type="text"/>
+        </div>
     </div>
 </div>
-<ul t-name="FieldSelector.page" t-attf-class="o_field_selector_page #{animation}">
+<t t-name="ModelFieldSelector.value">
+    <t t-foreach="chain" t-as="fieldName">
+        <t t-if="fieldName_index > 0">
+            <i class="fa fa-chevron-right"/>
+        </t>
+        <span class="o_field_selector_chain_part">
+            <t t-set="fieldInfo" t-value="_.findWhere(pages[fieldName_index], {'name': fieldName})"/>
+            <t t-esc="fieldInfo &amp;&amp; fieldInfo.string || '?'"/>
+        </span>
+    </t>
+</t>
+<ul t-name="ModelFieldSelector.page" class="o_field_selector_page">
     <t t-foreach="lines" t-as="line">
         <t t-set="relationToFollow" t-value="followRelations &amp;&amp; line.relation"/>
         <li t-attf-class="o_field_selector_item #{relationToFollow and 'o_field_selector_next_page' or 'o_field_selector_select_button'}#{line_index == 0 and ' active' or ''}"