WebUI NTP: add fade-in for OneGoogleBar overlays

Bug: 1112994
Change-Id: I6b1ebaa751a8a403cb921777ea22c44ab9fb8a35
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2337502
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795619}

chrome/browser/resources/new_tab_page/untrusted/one_google_bar.html

@@ -8,6 +8,19 @@
         overflow: hidden;
       }
 
+      .fade-in {
+        animation: fadeIn 200ms;
+      }
+
+      @keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
       $i18nRaw{inHeadStyle}
     </style>
     <script>$i18nRaw{inHeadScript}</script>

chrome/browser/resources/new_tab_page/untrusted/one_google_bar.js

@@ -72,6 +72,9 @@ const overlayUpdater = (() => {
 
   /** @param {!Element} potentialNewOverlays */
   const addOverlay = overlay => {
+    if (overlays.has(overlay)) {
+      return;
+    }
     // If an overlay starts a transition, the updated bounding rects need to
     // be sent to the top frame during the transition. The MutationObserver
     // will only handle new elements and changes to the element attributes.
@@ -89,6 +92,23 @@ const overlayUpdater = (() => {
         el.target = '_top';
       }
     });
+    if (!modalOverlays) {
+      const {transition} = getComputedStyle(overlay);
+      const opacityTransition = 'opacity 0.1s ease 0.02s';
+      // Check if the transition is the default computed transition style. If it
+      // is not, append to the existing transitions.
+      if (transition === 'all 0s ease 0s') {
+        overlay.style.transition = opacityTransition;
+      } else if (!transition.includes('opacity')) {
+        overlay.style.transition = transition + ', ' + opacityTransition;
+      }
+    }
+    // The element has an initial opacity of 1. If the element is being added to
+    // |overlays| and shown in the same |update()| call, the opacity transition
+    // will not work since the opacity is already 1. For this reason the
+    // 'fade-in' class is added to the element which runs an initial fade-in
+    // animation.
+    overlay.classList.add('fade-in');
     overlays.add(overlay);
   };
 
@@ -126,10 +146,15 @@ const overlayUpdater = (() => {
     overlays.forEach(overlay => {
       const {display, visibility} = window.getComputedStyle(overlay);
       const rect = overlay.getBoundingClientRect();
-      if (display !== 'none' && visibility !== 'hidden' &&
-          rect.bottom > barRect.bottom) {
+      const shown = display !== 'none' && visibility !== 'hidden' &&
+          rect.bottom > barRect.bottom;
+      if (shown) {
         overlayRects.push(rect);
       }
+      if (!modalOverlays) {
+        // Setting the style here avoids triggering the mutation observer.
+        overlay.style.opacity = shown ? '1' : '0';
+      }
     });
     if (!modalOverlays) {
       overlayRects.push(barRect);