ValidationBubbleInRenderer: Update appearance and motion.

Apply feedback from UX team.
- Adopt 'Harmony motion' for small dialogue
- Make font-size smaller

Bug: 739091
Change-Id: I785820860227a9fa4584d5d816d3984c2062efdf
Reviewed-on: https://chromium-review.googlesource.com/597088Reviewed-by: Keishi Hattori <keishi@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#491628}

third_party/WebKit/Source/core/html/forms/resources/validation_bubble.css

@@ -13,7 +13,6 @@
   box-sizing: border-box;
   display: inline-block;
   font-family: system-ui;
-  font-size: 16px;
   max-width: 50%;
   opacity: 0;
   position: absolute;
@@ -22,19 +21,33 @@
 
 #container.shown-initially {
   /* If scaleY is smaller than 0.2, an assertion failure occurs in Skia. */
-  transform: scaleY(0.2);
+  transform: scale(0.96, 0.96);
 }
 
 #container.shown-fully {
   opacity: 1.0;
-  transform: scaleY(1);
-  transition: opacity 0.3s, transform 0.3s;
+  transform: scale(1, 1);
+  transition: opacity 466.67ms cubic-bezier(0.4, 0, 0.2, 1), transform 1166.67ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 #container.hiding {
   opacity: 0;
   /* See ValidationMessageClientImpl::HideValidationMessage too */
-  transition: opacity 0.6s;
+  transition: opacity 133.33ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#container.shown-initially -webkit-any(#icon, #main-message, #sub-message) {
+  opacity: 0;
+}
+
+#container.shown-fully -webkit-any(#icon, #main-message, #sub-message) {
+  opacity: 1;
+  transition: opacity 700ms cubic-bezier(0.3, 0, 0.1, 1);
+}
+
+#container.hiding -webkit-any(#icon, #main-message, #sub-message) {
+  opacity: 0;
+  transition: opacity 116.67ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #bubble-body {
@@ -115,7 +128,7 @@
 }
 
 #main-message {
-  font-size: 16px;
+  font-size: 14px;
   grid-row: 1;
   grid-column: 2;
   margin-top: 3px;

third_party/WebKit/Source/core/page/ValidationMessageClientImpl.cpp

@@ -132,7 +132,7 @@ void ValidationMessageClientImpl::HideValidationMessage(const Element& anchor) {
       this, &ValidationMessageClientImpl::Reset);
   // This should be equal to or larger than transition duration of
   // #container.hiding in validation_bubble.css.
-  const double kHidingAnimationDuration = 0.6;
+  const double kHidingAnimationDuration = 0.13333;
   timer_->StartOneShot(kHidingAnimationDuration, BLINK_FROM_HERE);
 }
 

third_party/WebKit/Source/core/page/ValidationMessageOverlayDelegate.cpp

@@ -158,8 +158,15 @@ void ValidationMessageOverlayDelegate::EnsurePage(const PageOverlay& overlay,
                                       kForceSynchronousLoad)));
 
   Element& container = GetElementById("container");
-  if (LayoutTestSupport::IsRunningLayoutTest())
+  if (LayoutTestSupport::IsRunningLayoutTest()) {
     container.SetInlineStyleProperty(CSSPropertyTransition, "none");
+    GetElementById("icon").SetInlineStyleProperty(CSSPropertyTransition,
+                                                  "none");
+    GetElementById("main-message")
+        .SetInlineStyleProperty(CSSPropertyTransition, "none");
+    GetElementById("sub-message")
+        .SetInlineStyleProperty(CSSPropertyTransition, "none");
+  }
   // Get the size to decide position later.
   FrameView().UpdateAllLifecyclePhases();
   bubble_size_ = container.VisibleBoundsInVisualViewport().Size();