[ntp][modules] Allow modules to set their height

+ Shrink Kaleidoscope module according to spec.

+ Add closure compiler annotation to module descriptor.

Change-Id: Id99185a8b1ee62d154cc663d2d525beaa91a29b3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2376460
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: Becca Hughes <beccahughes@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801816}

chrome/browser/resources/new_tab_page/module_wrapper.html

@@ -6,7 +6,10 @@
   }
 
   #header {
-    margin: 10px;
+    align-items: center;
+    display: flex;
+    height: 22px;
+    margin: 16px;
   }
 
   #title {
@@ -15,12 +18,12 @@
 
   #name {
     color: var(--cr-secondary-text-color);
+    white-space: pre;
   }
 
   #moduleElement {
     align-items: center;
     display: flex;
-    height: 330px;
     justify-content: center;
     overflow: hidden;
   }

chrome/browser/resources/new_tab_page/module_wrapper.js

@@ -30,6 +30,7 @@ class ModuleWrapperElement extends PolymerElement {
   onDescriptorChange_() {
     this.$.moduleElement.innerHTML = '';
     this.$.moduleElement.appendChild(this.descriptor.element);
+    this.$.moduleElement.style.height = `${this.descriptor.heightPx}px`;
   }
 }
 

chrome/browser/resources/new_tab_page/modules/dummy/module.js

@@ -41,15 +41,16 @@ customElements.define(DummyModuleElement.is, DummyModuleElement);
 
 /** @type {!ModuleDescriptor} */
 export const dummyDescriptor = new ModuleDescriptor(
-    'dummy', loadTimeData.getString('modulesDummyName'), () => Promise.resolve({
+    /*id=*/ 'dummy', /*name=*/ loadTimeData.getString('modulesDummyName'),
+    /*heightPx=*/ 260, () => Promise.resolve({
       element: new DummyModuleElement(),
       title: loadTimeData.getString('modulesDummyTitle'),
     }));
 
 /** @type {!ModuleDescriptor} */
 export const dummyDescriptor2 = new ModuleDescriptor(
-    'dummy2', loadTimeData.getString('modulesDummy2Name'),
-    () => Promise.resolve({
+    /*id=*/ 'dummy2', /*name=*/ loadTimeData.getString('modulesDummy2Name'),
+    /*heightPx=*/ 260, () => Promise.resolve({
       element: new DummyModuleElement(),
       title: loadTimeData.getString('modulesDummy2Title'),
     }));

chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.js

@@ -56,8 +56,9 @@ function loadResource(resource) {
 
 /** @type {!ModuleDescriptor} */
 export const kaleidoscopeDescriptor = new ModuleDescriptor(
-    'kaleidoscope',
-    loadTimeData.getString('modulesKaleidoscopeName'),
+    /*id=*/ 'kaleidoscope',
+    /*name=*/ loadTimeData.getString('modulesKaleidoscopeName'),
+    /*heightPx=*/ 270,
     () => {
       // Load all the Kaleidoscope resources into the NTP and return the module
       // once the loading is complete.

chrome/browser/resources/new_tab_page/modules/module_descriptor.js

@@ -19,28 +19,45 @@ export class ModuleDescriptor {
   /**
    * @param {string} id
    * @param {string} name
+   * @param {number} heightPx
    * @param {!InitializeModuleCallback} initializeCallback
    */
-  constructor(id, name, initializeCallback) {
+  constructor(id, name, heightPx, initializeCallback) {
+    /** @private {string} */
     this.id_ = id;
+    /** @private {string} */
     this.name_ = name;
+    /** @private {number} */
+    this.heightPx_ = heightPx;
+    /** @private {?string} */
     this.title_ = null;
+    /** @private {HTMLElement} */
     this.element_ = null;
+    /** @private {!InitializeModuleCallback} */
     this.initializeCallback_ = initializeCallback;
   }
 
+  /** @return {string} */
   get id() {
     return this.id_;
   }
 
+  /** @return {string} */
   get name() {
     return this.name_;
   }
 
+  /** @return {number} */
+  get heightPx() {
+    return this.heightPx_;
+  }
+
+  /** @return {?string} */
   get title() {
     return this.title_;
   }
 
+  /** @return {HTMLElement} */
   get element() {
     return this.element_;
   }

chrome/test/data/webui/new_tab_page/module_wrapper_test.js

@@ -22,6 +22,7 @@ suite('NewTabPageModuleWrapperTest', () => {
     moduleWrapper.descriptor = {
       id: 'foo',
       name: 'Foo',
+      heightPx: 100,
       title: 'Foo Title',
       element: moduleElement,
     };
@@ -29,6 +30,7 @@ suite('NewTabPageModuleWrapperTest', () => {
     // Assert.
     assertEquals('Foo Title', moduleWrapper.$.title.textContent);
     assertEquals(' • Foo', moduleWrapper.$.name.textContent);
+    assertEquals(100, $$(moduleWrapper, '#moduleElement').offsetHeight);
     assertDeepEquals(
         moduleElement, $$(moduleWrapper, '#moduleElement').children[0]);
   });

chrome/test/data/webui/new_tab_page/modules/module_registry_test.js

@@ -12,12 +12,12 @@ suite('NewTabPageModulesModuleRegistryTest', () => {
     const bazModule = document.createElement('div');
     const bazModuleResolver = new PromiseResolver();
     ModuleRegistry.getInstance().registerModules([
-      new ModuleDescriptor('foo', 'Foo', () => Promise.resolve({
+      new ModuleDescriptor('foo', 'Foo', 100, () => Promise.resolve({
         element: fooModule,
         title: 'Foo Title',
       })),
-      new ModuleDescriptor('bar', 'Bar', () => null),
-      new ModuleDescriptor('baz', 'Baz', () => bazModuleResolver.promise),
+      new ModuleDescriptor('bar', 'Bar', 200, () => null),
+      new ModuleDescriptor('baz', 'Baz', 300, () => bazModuleResolver.promise),
     ]);
 
     // Act.
@@ -33,10 +33,12 @@ suite('NewTabPageModulesModuleRegistryTest', () => {
     assertEquals(2, modules.length);
     assertEquals('foo', modules[0].id);
     assertEquals('Foo', modules[0].name);
+    assertEquals(100, modules[0].heightPx);
     assertEquals('Foo Title', modules[0].title);
     assertDeepEquals(fooModule, modules[0].element);
     assertEquals('baz', modules[1].id);
     assertEquals('Baz', modules[1].name);
+    assertEquals(300, modules[1].heightPx);
     assertEquals('Baz Title', modules[1].title);
     assertDeepEquals(bazModule, modules[1].element);
   });