closes odoo/odoo#52842

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

Generally, Users are not necessarily aware that they can quick create a most
records by simply typing in their name+enter in the many2xxx field input.
The exact purpose of this commit is to make sure the user discovers the quick
create feature of our many2xxx fields.

For that, when the input is empty, display 'Start typing to create a record...'
at the bottom of the dropdown when can_create is set and no_create_edit option
not set. So the user can easily understand that by typing and pressing enter
will create the new record.
Also "Search and Create" options in the dropdown only been shown to the user
when it type anything in the input box as the same case in the "Create" option.

Task : 2266557

Co-authored-by: Mohammed Shekha <msh@openerp.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>

*partner_autocomplete,test_main_flows

In jQuery 3, the active element in autocomplete dropdowns is no
longer identified with class 'ui-state-focus' on the <li/>, but
with class 'ui-state-active' is on its child <a/>. Moreover, the
background color of the active element is now set on the <a/>
instead of the <li/>.

This rev. adapts scss rules accordingly, and selectors in the
main_flow_tour.

Issue reported on the jquery update pad.

closes odoo/odoo#31693

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>

Revision on https://github.com/odoo/odoo/commit/d91ec258e6a31153beb9eb16cfe8f916546b7688

The commit above reverts a commit when we were using bootstrap 3.
The equivalent of XS in bootstrap 3 is SM in bootstrap 4.
So the correct revert with bootstrap 4 is to use SM.

Also removing useless style on 'o_mobile_menu_opened'.

Closes #26434

מזל טוב

The direction parameter will now have a real impact on the web interface and
completly switch the direction of the interface.
Add the dependency rtlcss to switch the direction with a css postprocessor.

Two different assets will be generated for ltr or rtl
/web/content/<...>/web.assets_backend.0.css
and
/web/content/<...>/rtl/web.assets_backend.0.css
to be able to differentiate it easily

Adapt the css and views to be easier to switch direction

Render graph as it is, do not move y-axis right side, as per mathematical rule
value goes left from origin are considered negative, so keep graph as it is
for right to left language

add test cases for language direction specific assets bundle
if language direction is rtl then we also store css files in assets bundle
now we store two assets bundle, one for ltr and one for rtl language direction
test two assets bundles generated, also test two assets bundle generated for en_US and ar_SY

This reverts commit 4e5f826ce53b9e4cb73eea77935ea82e81ac66b9
for two reasons:

1) A lot of people are working with splitted desktop screen and
will see the view switcher/search as on mobile: it's not efficient.
Only the burger menu should have been visible for the tablets,
not the other mobile features.

2) When you switch between vertical mode and H mode, we don't want
to change the mobile mode because widgets aren't reinstantiated and
some features don't work.
For example, the burger menu is broken if you switch from H mode to
V mode.

Task-1869468

Odoo used to declare two main colors: primary and optional (which are
purple and turquoise in enterprise). Those were respectively assigned
to the 'primary' bootstrap variable and the 'btn-primary' bootstrap
variable.

BS4, however, does not allow to have a different primary color for
buttons. Instead, the 'primary' color is used for all 'primary' related
components and utility classes, same as for all other colors. So, if we
want to keep our enterprise buttons green, our 'optional' colors had to
become our 'primary' color. The old odoo primary is then renamed to the
'odoo' color.

The palette of grays is now larger by default and is numbered from 100 to
900 alongside the $black and $white variables. The equivalence for older
variables and the way we used them is:

$gray-darker          ->  gray 900 (unused before)
$gray-dark            ->  gray 900
$gray                 ->  gray 700
$gray-light           ->  gray 600
$gray-lighter-darker  ->  gray 400 (the old variable was created by us)
$gray-lighter-dark    ->  gray 300 (the old variable was created by us)
$gray-lighter         ->  gray 200

Fortunately, the 'lighter' variations we created fit well in the default
BS4 system ! Unfortunately, our $gray-lighter which carried the same
function as $gray-200 (see above) is very close to the new default
$gray-100 and quite distant from the new $gray-200. This will be handled
in the next commit.

- The dropdown structure was simplified, allowing to get rid of the
  3-levels structure induced by <ul/> elements and dropdowns can now
  contain anything. The class 'dropdown-item' is now mandatory for
  each dropdown clickable element. The class 'dropdown-item-text' can
  be used to add same padding and style but without making the element
  have a clickable look.

- Dividers now use the class 'dropdown-divider'

- The way dropdowns are opened and hidden also changed (before the
  'open' class was added on the `.dropdown-menu` parent, now the
  'show' class is added on both the `.dropdown-menu` parent and the
  `.dropdown-menu` itself).

- JS-wise, no click event handlers can be put on `.dropdown-toggle`
  elements anymore (instead, use handlers for dropdown events).

- Carets are automatically put on `.dropdown-toggle` elements, so this
  commit replaces the `.caret` elements with this. This feature was
  possible to disable but would prevent us from adding a caret with
  scss. Also, this simplifies the DOM. The 'o-no-caret' class was also
  introduced to allow using the 'dropdown-toggle' class on non-caret
  elements.

- Also adapt the scss to use $caret-width instead of $caret-width-base

media queries that target a specific screen size handled by bootstrap
have now a more convenient way to be defined:

```
@​media (min-width: $screen-sm-min) { ... }
->
@​include media-breakpoint-up(sm) { ... }
```

```
@​media (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-down(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-only(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... }
->
@​include media-breakpoint-between(sm, md) { ... }
```

Also, bootstrap has changed the values for its default screen sizes:

------------------
     | BS3 | BS4 |
------------------
0    | XS  | XS  | -> Portrait Mobile
576  | /   | SM  | -> Landscape Mobile
768  | SM  | MD  | -> Portrait Tablet
992  | MD  | LG  | -> Landscape Tablet / Small Desktop
1200 | LG  | XL  | -> Desktop
------------------

While it is possible to configure BS variables to behave as BS3, we took
the decision to keep the BS4 variables untouched. BS4 system seems
indeed better and having the purest bootstrap possible is better for
Odoo to be used as a framework.