[IMP] web, *: add new Domain and Field selection widgets

* base_action_rule, gamification, mass_mailing

1) Create the independant DomainSelector widget

- Allow to build a prefix char domain

2) Replace old FieldCharDomain with a new FieldDomain which uses the
   new DomainSelector widget

3) Create the independant ModelFieldSelector widget

- Allow to build a valid field chain for a specific model
  (e.g 'partner_id.name' for a 'res.users')
- Used by DomainSelector widget

---

The DomainSelector widget uses a tree-like representation with
user-friendly buttons (ALL/ANY/+/-/...). Any domain can be built,
except those containing the "!" (not) operator or some operators
like "like", "child_of" (@see DomainSelector). However, if the
user enters these in the debug input, the widget can handle them.

Note: these widgets had to do unusual stuff the widget API does not
allow to handle efficiently right now but it will be adapted to the
new widget/field API in a further update.

Note2: the widgets also have possibility of other improvements like
supporting m2o input instantiation in DomainLeaf, etc.

---

This work is an adaptation of the original code made by @pga-odoo.

2 files changed, 181 insertions, 0 deletions

diff --git a/addons/web/static/src/less/domain_selector.less b/addons/web/static/src/less/domain_selector.less
new file mode 100644
index 00000000000..7dced900b21
--- /dev/null
+++ b/addons/web/static/src/less/domain_selector.less
@@ -0,0 +1,84 @@
+
+.o_domain_node {
+    @o-domain-selector-vspace: 8px;
+    @o-domain-selector-indent: 32px;
+    @o-domain-selector-panel-space: 128px;
+
+    .o_domain_node_control_panel {
+        .o-position-absolute(@right: 0);
+    }
+
+    &.o_domain_tree {
+        .o_domain_tree_operator_caret::after {
+            .o-caret-down();
+        }
+
+        > .o_domain_node_children_container {
+            padding-left: @o-domain-selector-indent;
+
+            > div {
+                margin-top: @o-domain-selector-vspace;
+            }
+        }
+
+        &.o_domain_selector {
+            &.o_edit_mode {
+                position: relative;
+                padding-right: @o-domain-selector-panel-space;
+            }
+
+            > .o_domain_node_children_container {
+                padding-left: 0;
+            }
+        }
+    }
+
+    &.o_domain_leaf {
+        &.o_read_mode {
+            display: inline-block;
+            margin-right: 4px;
+        }
+
+        > .o_domain_leaf_info {
+            background: @odoo-brand-lightsecondary;
+            border: 1px solid darken(@odoo-brand-lightsecondary, 10%);
+            padding: 2px 4px;
+
+            .o_domain_leaf_chain, .o_domain_leaf_value {
+                font-weight: 700;
+            }
+            .o_domain_leaf_operator {
+                font-style: italic;
+            }
+        }
+
+        > .o_domain_leaf_edition {
+            .o-flex-display();
+            .o-align-items(flex-end);
+
+            > * {
+                width: percentage(1/3);
+
+                + * {
+                    margin-left: 4px;
+                }
+            }
+
+            .o_domain_leaf_value_tags {
+                .o-flex-display();
+
+                > * {
+                    .o-flex(0, 0, auto);
+                }
+                > input {
+                    .o-flex(1, 1, auto);
+                    width: 0;
+                    min-width: 50px;
+                }
+                .o_domain_leaf_value_remove_tag_button {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/less/model_field_selector.less b/addons/web/static/src/less/model_field_selector.less
new file mode 100644
index 00000000000..1dc953bf970
--- /dev/null
+++ b/addons/web/static/src/less/model_field_selector.less
@@ -0,0 +1,97 @@
+
+.o_field_selector {
+    position: relative;
+
+    .o_field_selector_controls {
+        .o-position-absolute(0, 0, 1px);
+        .o-flex-display();
+        .o-align-items(center);
+
+        &::after {
+            .o-caret-down();
+            cursor: pointer;
+        }
+    }
+    .o_field_selector_popover {
+        @o-field-selector-arrow-height: 7px;
+        .o-position-absolute(@top: 100%, @left: 0);
+        z-index: 1051;
+        width: 265px;
+        margin-top: @o-field-selector-arrow-height;
+        background: white;
+        box-shadow: 0 3px 10px rgba(0,0,0,.4);
+
+        &:focus {
+            outline: none;
+        }
+
+        .o_field_selector_popover_header {
+            color: white;
+            background: @brand-primary;
+            font-weight: bold;
+            padding: 5px 0 5px 0.4em;
+
+            .o_field_selector_title {
+                width: 100%;
+                .o-text-overflow();
+                padding: 0px 35px;
+                text-align: center;
+            }
+            .o_field_selector_popover_option {
+                .o-position-absolute(@top: 0);
+                padding: 7px 8px 8px 6px;
+
+                &.o_prev_page {
+                    left: 0;
+                    border-right: 1px solid darken(@brand-primary, 10%);
+                }
+                &.o_field_selector_close {
+                    right: 0;
+                    border-left: 1px solid darken(@brand-primary, 10%);
+                }
+                &:hover {
+                    background: darken(@brand-primary, 10%);
+                }
+            }
+            &:before {
+                .o-position-absolute(@top: -@o-field-selector-arrow-height, @left: @o-field-selector-arrow-height);
+                content: "";
+                border-left: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
+                border-right: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
+                border-bottom: @o-field-selector-arrow-height solid @brand-primary;
+            }
+        }
+        .o_field_selector_popover_body {
+            .o_field_selector_page {
+                position: relative;
+                max-height: 320px;
+                overflow: auto;
+                margin: 0;
+                padding: 0;
+
+                > .o_field_selector_item {
+                    list-style: none;
+                    position: relative;
+                    padding: 5px 0 5px 0.4em;
+                    cursor: pointer;
+                    font-family: Arial;
+                    font-size: 13px;
+                    color: #444;
+                    border-bottom: 1px solid #eee;
+                    &.active {
+                        background: #f5f5f5;
+                    }
+                    .o_field_selector_item_title {
+                        font-size: 12px;
+                    }
+                    .o_field_selector_relation_icon {
+                        .o-position-absolute(@top: 0, @right: 0, @bottom: 0);
+                        .o-flex-display();
+                        .o-align-items(center);
+                        padding: 10px;
+                    }
+                }
+            }
+        }
+    }
+}