WebUI NTP Modules: coordinate showing promo and modules

Hide promo and modules until both are loaded.

Fix issue with promo that is not shown until resize. The promo is hidden
using "display: none" when the "hidden" attribute is set. This needs to
be updated before emitting the loaded event. The handler needs the
bounding rect of the element to be set to determine if it overlaps with
the most-visited tiles. This is only a concern for when modules are
disabled.

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

chrome/browser/resources/new_tab_page/app.html

@@ -108,6 +108,11 @@
     margin-top: 16px;
   }
 
+  :host(:not([promo-and-modules-loaded_])) ntp-middle-slot-promo,
+  :host(:not([promo-and-modules-loaded_])) ntp-module-wrapper {
+    visibility: hidden;
+  }
+
   #customizeButtonSpacer {
     flex-grow: 1;
   }

chrome/browser/resources/new_tab_page/app.js

@@ -199,6 +199,25 @@ class AppElement extends PolymerElement {
         reflectToAttribute: true,
       },
 
+      /** @private */
+      middleSlotPromoLoaded_: Boolean,
+
+      /** @private */
+      modulesLoaded_: Boolean,
+
+      /**
+       * In order to avoid flicker, the promo and modules are hidden until both
+       * are loaded. If modules are disabled, the promo is shown as soon as it
+       * is loaded.
+       * @private
+       */
+      promoAndModulesLoaded_: {
+        type: Boolean,
+        computed: `computePromoAndModulesLoaded_(middleSlotPromoLoaded_,
+            modulesLoaded_)`,
+        reflectToAttribute: true,
+      },
+
       /**
        * If true, renders additional elements that were not deemed crucial to
        * to show up immediately on load.
@@ -472,6 +491,15 @@ class AppElement extends PolymerElement {
         !!this.theme_;
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computePromoAndModulesLoaded_() {
+    return this.middleSlotPromoLoaded_ &&
+        (!loadTimeData.getBoolean('modulesEnabled') || this.modulesLoaded_);
+  }
+
   /** @private */
   async onLazyRendered_() {
     if (!loadTimeData.getBoolean('modulesEnabled')) {
@@ -479,6 +507,7 @@ class AppElement extends PolymerElement {
     }
     this.moduleDescriptors_ =
         await ModuleRegistry.getInstance().initializeModules();
+    this.modulesLoaded_ = true;
   }
 
   /** @private */
@@ -762,6 +791,7 @@ class AppElement extends PolymerElement {
 
   /** @private */
   onMiddleSlotPromoLoaded_() {
+    this.middleSlotPromoLoaded_ = true;
     // The promo is always shown when modules are enabled since it will not
     // overlap with other elements.
     if (this.modulesEnabled_) {

chrome/browser/resources/new_tab_page/middle_slot_promo.js

@@ -84,9 +84,9 @@ class MiddleSlotPromoElement extends PolymerElement {
       });
       this.pageHandler_.onPromoRendered(
           BrowserProxy.getInstance().now(), promo.logUrl || null);
+      this.hidden = false;
       this.dispatchEvent(new Event(
           'ntp-middle-slot-promo-loaded', {bubbles: true, composed: true}));
-      this.hidden = false;
     });
   }