[IMP] web_tour: tip animation

* Improve the JS/LESS so that its content makes the tip grow
with a bubble effect (instead of using a popover).
* Avoid flickering when the mouse leave/enter the tip or move
between the tip and its anchor element.
* Use text-align:left instead of justify
* Set the content width in JS (to a larger width) to be customizable
* Round LESS variable to avoid values like 266.6666666666
* Set opening direction according to viewport:
  - Top and bottom tips open towards the right except if they overflow
    the window on this right
  - Left and right tips open towards the bottom except if they overflow
    the window on this bottom
* Improve the 'Skip these steps' mechanism (which is easier as we don't
  use bootstrap's popover anymore)

2 files changed, 216 insertions, 78 deletions

diff --git a/addons/web_tour/static/src/less/keyframes.less b/addons/web_tour/static/src/less/keyframes.less
index 3f053ebd82e..08402f4b2ea 100644
--- a/addons/web_tour/static/src/less/keyframes.less
+++ b/addons/web_tour/static/src/less/keyframes.less
@@ -1,33 +1,49 @@
 @-webkit-keyframes move-left-right {
     0% {
-        .translate(0, 0);
+        .translate(-3px, 0);
     }
     100% {
-        .translate(5px, 0);
+        .translate(3px, 0);
     }
 }
 @-moz-keyframes move-left-right {
     0% {
-        .translate(0px, 0px);
+        .translate(-3px, 0);
     }
     100% {
-        .translate(5px, 0px);
+        .translate(3px, 0);
+    }
+}
+@keyframes move-left-right {
+    0% {
+        .translate(-3px, 0);
+    }
+    100% {
+        .translate(3px, 0);
     }
 }
 
 @-webkit-keyframes move-bottom-top {
     0% {
-        .translate(0, 0);
+        .translate(0, -3px);
     }
     100% {
-        .translate(0, 5px);
+        .translate(0, 3px);
     }
 }
 @-moz-keyframes move-bottom-top {
     0% {
-        .translate(0px, 0px);
+        .translate(0px, -3px);
+    }
+    100% {
+        .translate(0, 3px);
+    }
+}
+@keyframes move-bottom-top {
+    0% {
+        .translate(0px, -3px);
     }
     100% {
-        .translate(0, 5px);
+        .translate(0, 3px);
     }
 }
diff --git a/addons/web_tour/static/src/less/tip.less b/addons/web_tour/static/src/less/tip.less
index 51370965f55..238ec409b1e 100644
--- a/addons/web_tour/static/src/less/tip.less
+++ b/addons/web_tour/static/src/less/tip.less
@@ -1,92 +1,214 @@
-@o-tip-background-color: #875a7b;
 
 .o_tooltip {
-    .o_breathing {
-        position: absolute;
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        z-index: @zindex-modal+1;
-        background-color: @o-tip-background-color;
-        .animation-duration(0.5s);
-        .animation-timing-function(ease-in);
-        .animation-iteration-count(infinite);
-        .animation-direction(alternate);
+    @o-tip-background-color: lighten(@odoo-brand-primary, 5%);
+    @o-tip-size: 26px;
+    @o-tip-border-width: 2px;
+
+    @o-tip-arrow-length: floor(@o-tip-size * 0.5);
+    @o-tip-arrow-width: floor(@o-tip-size * 0.8);
+    @o-tip-arrow-integration: floor(@o-tip-size * 0.1);
+
+    @o-tip-duration-in: 300ms;
+    @o-tip-size-duration-in: floor(@o-tip-duration-in * 3 / 4);
+    @o-tip-size-delay-in: floor(@o-tip-duration-in / 4);
+    @o-tip-border-radius-duration-in: floor(@o-tip-duration-in / 2);
+    @o-tip-border-radius-delay-in: floor(@o-tip-duration-in * 0);
+    @o-tip-bg-color-duration-in: floor(@o-tip-duration-in * 1);
+    @o-tip-bg-color-delay-in: floor(@o-tip-duration-in * 0);
+    @o-tip-arrow-duration-in: floor(@o-tip-duration-in / 2);
+    @o-tip-arrow-delay-in: floor(@o-tip-duration-in * 0);
+    @o-tip-white-arrow-duration-in: floor(@o-tip-duration-in * 1);
+    @o-tip-white-arrow-delay-in: floor(@o-tip-duration-in * 0);
+
+    @o-tip-duration-out: 200ms;
+    @o-tip-size-duration-out: floor(@o-tip-duration-out * 2 / 3);
+    @o-tip-size-delay-out: floor(@o-tip-duration-out * 0);
+    @o-tip-border-radius-duration-out: floor(@o-tip-duration-out * 2 / 3);
+    @o-tip-border-radius-delay-out: floor(@o-tip-duration-out / 3);
+    @o-tip-bg-color-duration-out: floor(@o-tip-duration-out * 1);
+    @o-tip-bg-color-delay-out: floor(@o-tip-duration-out * 0);
+    @o-tip-arrow-duration-out: floor(@o-tip-duration-out / 2);
+    @o-tip-arrow-delay-out: floor(@o-tip-duration-out / 2);
+
+    box-sizing: content-box;
+    position: absolute;
+    width: @o-tip-size;
+    height: @o-tip-size;
+    border: @o-tip-border-width solid @odoo-brand-primary;
+    border-radius: 50%;
+    z-index: @zindex-modal+1;
+    background-color: @o-tip-background-color;
+    box-shadow: 0 0 2px 0 @odoo-brand-lightsecondary;
+
+    transition:
+        width @o-tip-size-duration-out ease @o-tip-size-delay-out,
+        height @o-tip-size-duration-out ease @o-tip-size-delay-out,
+        margin @o-tip-size-duration-out ease @o-tip-size-delay-out,
+        border-radius @o-tip-border-radius-duration-out ease @o-tip-border-radius-delay-out,
+        background-color @o-tip-bg-color-duration-out ease @o-tip-bg-color-delay-out;
+
+    &.o_animated {
+        .o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate);
         &.right, &.left {
             .animation-name(move-left-right);
         }
-        &.top, &.bottom {
-            .animation-name(move-bottom-top);
-        }
+    }
 
-        &::after {
-            content: '';
-            width: 0;
-            height: 0;
-        }
-        &.right::after {
-           .o-position-absolute(@left: -4px, @top: 5px);
-            border-right: 10px solid @o-tip-background-color;
-            border-top: 10px solid transparent;
-            border-bottom: 10px solid transparent;
+    &::before {
+        content: "";
+        border: 0 solid rgba(0, 0, 0, 0);
+        transition: all @o-tip-arrow-duration-out ease @o-tip-arrow-delay-out;
+    }
+    &.right::before {
+        .o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
+        border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0;
+        border-right-color: @o-tip-background-color;
+    }
+    &.top::before {
+        .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
+        border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2;
+        border-top-color: @o-tip-background-color;
+    }
+    &.left::before {
+        .o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
+        border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length;
+        border-left-color: @o-tip-background-color;
+    }
+    &.bottom::before {
+        .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
+        border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2;
+        border-bottom-color: @o-tip-background-color;
+    }
+
+    &::after {
+        @square-size: @o-tip-size*sqrt(2)/2;
+        @square-pos: (@o-tip-size - @square-size)/2;
+        .o-position-absolute(@square-pos, @square-pos, @square-pos, @square-pos);
+        content: "?";
+        line-height: @square-size;
+        text-align: center;
+        font-size: @square-size;
+        font-weight: 800;
+        border-color: @o-tip-background-color;
+        color: @odoo-brand-lightsecondary;
+        transition: margin @o-tip-size-duration-out ease @o-tip-size-delay-out;
+    }
+
+    > .o_tooltip_overlay {
+        display: none;
+        .o-position-absolute(0, 0, 0, 0);
+        margin: -@o-tip-border-width;
+        z-index: -1;
+    }
+    > .o_tooltip_content {
+        padding: 8px 15px;
+        visibility: hidden;
+        transition: visibility 0s ease 0s;
+        color: black;
+
+        .o_skip_tour {
+            display: inline-block;
+            margin-top: 4px;
+            cursor: pointer;
+            color: gray;
+            &:hover {
+                color: darken(gray, 20%);
+            }
         }
-        &.top::after {
-            .o-position-absolute(@bottom: -4px, @left: 5px);
-            border-top: 10px solid @o-tip-background-color;
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
+        > p:last-child {
+            margin-bottom: 0;
         }
-        &.left::after {
-            .o-position-absolute(@right: -4px, @bottom: 5px);
-            border-left: 10px solid @o-tip-background-color;
-            border-top: 10px solid transparent;
-            border-bottom: 10px solid transparent;
+    }
+
+    &.active {
+        border-radius: 0;
+        background-color: white;
+
+        transition:
+            width @o-tip-size-duration-in ease @o-tip-size-delay-in,
+            height @o-tip-size-duration-in ease @o-tip-size-delay-in,
+            margin @o-tip-size-duration-in ease @o-tip-size-delay-in,
+            border-radius @o-tip-border-radius-duration-in ease @o-tip-border-radius-delay-in,
+            background-color @o-tip-bg-color-duration-in ease @o-tip-bg-color-delay-in;
+
+        &::before {
+            transition: all @o-tip-arrow-duration-in ease @o-tip-arrow-delay-in;
         }
-        &.bottom::after {
-           .o-position-absolute(@top: -4px, @right: 5px);
-            border-bottom: 10px solid @o-tip-background-color;
-            border-right: 10px solid transparent;
-            border-left: 10px solid transparent;
+        &::after {
+            content: "";
+            border: 0 solid rgba(0, 0, 0, 0);
         }
 
-        &::before {
-            .o-position-absolute(@top: 10px, @left: 10px);
-            content: '?';
-            width: 10px;
-            height: 10px;
-            font-size: 18px;
-            font-weight: 800;
-            line-height: 0.6;
-            color: lightgray;
-            border-radius: 50%;
+        > .o_tooltip_overlay {
+            display: block;
+        }
+        > .o_tooltip_content {
+            visibility: visible;
+            transition: visibility 0s ease @o-tip-duration-in;
         }
-    }
 
-    .popover {
-        border: 2px solid @odoo-brand-primary;
-        &.right > .arrow {
-            border-right-color: @odoo-brand-primary;
-            left: -13px;
+        &.right {
+            &::before {
+                left: -@o-tip-arrow-length;
+                border-right-color: @odoo-brand-primary;
+            }
             &::after {
-                border-left-width: 2px;
+                .o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
+                border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0;
+                border-right-color: white;
+                transition: border-right-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
             }
         }
-        &.bottom > .arrow {
-            border-bottom-color: @odoo-brand-primary;
-            top: -13px;
+        &.top {
+            &::before {
+                bottom: -@o-tip-arrow-length;
+                border-top-color: @odoo-brand-primary;
+            }
             &::after {
-                border-top-width: 2px;
+                .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
+                border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2;
+                border-top-color: white;
+                transition: border-top-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
             }
         }
-        .popover-content {
-            color: black;
-            text-align: justify;
-            .o_skip_tour {
-                display: inline-block;
-                margin-top: 5px;
-                cursor: pointer;
-                color: gray;
+        &.left {
+            &::before {
+                right: -@o-tip-arrow-length;
+                border-left-color: @odoo-brand-primary;
             }
-       }
+            &::after {
+                .o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
+                border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length;
+                border-left-color: white;
+                transition: border-left-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
+            }
+        }
+        &.bottom {
+            &::before {
+                top: -@o-tip-arrow-length;
+                border-bottom-color: @odoo-brand-primary;
+            }
+            &::after {
+                .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
+                border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2;
+                border-bottom-color: white;
+                transition: border-bottom-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
+            }
+        }
+    }
+
+    &.inverse {
+        &.left, &.right {
+            &::before, &.active::after {
+                top: auto;
+                bottom: (@o-tip-size - @o-tip-arrow-width) / 2;
+            }
+        }
+        &.top, &.bottom {
+            &::before, &.active::after {
+                left: auto;
+                right: (@o-tip-size - @o-tip-arrow-width) / 2;
+            }
+        }
     }
 }