[ntp][modules] Add basic collapse and expand functionality

Collapsing/expanding hides/shows the local module UI.

Before: https://screenshot.googleplex.com/7YpsgDQZg6EQbjT
After: https://screenshot.googleplex.com/3wv7qaoupMtPQj5

Bug: 1124089
Change-Id: I80d88b1c2311da6a4d047e2ffb4837b6d4158add
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2388977
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805099}

chrome/browser/resources/new_tab_page/modules/BUILD.gn

@@ -20,6 +20,7 @@ js_library("module_wrapper") {
   deps = [
     ":module_descriptor",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
   ]
 }
 

chrome/browser/resources/new_tab_page/modules/module_wrapper.html

@@ -3,33 +3,58 @@
     background-color: var(--ntp-background-override-color);
     border: solid var(--ntp-border-color) 1px;
     border-radius: 5px;
+    display: block;
   }
 
   #header {
     align-items: center;
     display: flex;
     height: 22px;
-    margin: 16px;
+    padding: 16px;
   }
 
   #title {
     color: var(--cr-primary-text-color);
   }
 
-  #name {
+  #name,
+  #dot {
     color: var(--cr-secondary-text-color);
     white-space: pre;
   }
 
+  #headerSpacer {
+    flex-grow: 1;
+  }
+
+  #toggleButton {
+    --cr-icon-image: url(chrome://resources/images/icon_expand_less.svg);
+  }
+
+  :host([collapsed_]) #toggleButton {
+    --cr-icon-image: url(chrome://resources/images/icon_expand_more.svg);
+  }
+
   #moduleElement {
     align-items: center;
     display: flex;
     justify-content: center;
     overflow: hidden;
   }
+
+  :host([collapsed_]) #title,
+  :host([collapsed_]) #dot,
+  :host([collapsed_]) #moduleElement {
+    display: none;
+  }
 </style>
 <div id="header">
   <span id="title">[[descriptor.title]]</span>
-  <span id="name"> • [[descriptor.name]]</span>
+  <span id="dot"> • </span>
+  <span id="name">[[descriptor.name]]</span>
+  <div id="headerSpacer"></div>
+  <!-- TODO(crbug.com/1124089): Add title attribute. -->
+  <cr-icon-button id="toggleButton" on-click="onToggleButtonClick_">
+  </cr-icon-button>
 </div>
 <div id="moduleElement"></div>

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {ModuleDescriptor} from './module_descriptor.js';
 
@@ -23,6 +25,13 @@ class ModuleWrapperElement extends PolymerElement {
         observer: 'onDescriptorChange_',
         type: Object,
       },
+
+      /** @private {boolean} */
+      collapsed_: {
+        reflectToAttribute: true,
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -32,6 +41,12 @@ class ModuleWrapperElement extends PolymerElement {
     this.$.moduleElement.appendChild(this.descriptor.element);
     this.$.moduleElement.style.height = `${this.descriptor.heightPx}px`;
   }
+
+  /** @private */
+  onToggleButtonClick_() {
+    // TODO(crbug.com/1124089): Persist collapse state to user prefs.
+    this.collapsed_ = !this.collapsed_;
+  }
 }
 
 customElements.define(ModuleWrapperElement.is, ModuleWrapperElement);

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {$$} from 'chrome://new-tab-page/new_tab_page.js';
+import {assertNotStyle, assertStyle} from 'chrome://test/new_tab_page/test_support.js';
 
 suite('NewTabPageModulesModuleWrapperTest', () => {
   /** @type {!ModuleWrapperElement} */
@@ -29,9 +30,47 @@ suite('NewTabPageModulesModuleWrapperTest', () => {
 
     // Assert.
     assertEquals('Foo Title', moduleWrapper.$.title.textContent);
-    assertEquals(' • Foo', moduleWrapper.$.name.textContent);
+    assertEquals('Foo', moduleWrapper.$.name.textContent);
     assertEquals(100, $$(moduleWrapper, '#moduleElement').offsetHeight);
     assertDeepEquals(
         moduleElement, $$(moduleWrapper, '#moduleElement').children[0]);
   });
+
+  test('collapses and expands', () => {
+    // Arrange.
+    const moduleElement = document.createElement('div');
+    moduleWrapper.descriptor = {
+      id: 'foo',
+      name: 'Foo',
+      heightPx: 100,
+      title: 'Foo Title',
+      element: moduleElement,
+    };
+
+    // Act (collapse).
+    moduleWrapper.$.toggleButton.click();
+
+    // Assert (collapsed).
+    assertStyle(moduleWrapper.$.title, 'display', 'none');
+    assertStyle(moduleWrapper.$.dot, 'display', 'none');
+    assertStyle(moduleWrapper.$.moduleElement, 'display', 'none');
+    assertStyle(
+        moduleWrapper.$.toggleButton, '--cr-icon-image',
+        'url("chrome://resources/images/icon_expand_more.svg")');
+    assertEquals(
+        moduleWrapper.$.header.offsetHeight, moduleWrapper.offsetHeight);
+
+    // Act (expand).
+    moduleWrapper.$.toggleButton.click();
+
+    // Assert (expanded).
+    assertNotStyle(moduleWrapper.$.title, 'display', 'none');
+    assertNotStyle(moduleWrapper.$.dot, 'display', 'none');
+    assertNotStyle(moduleWrapper.$.moduleElement, 'display', 'none');
+    assertStyle(
+        moduleWrapper.$.toggleButton, '--cr-icon-image',
+        'url("chrome://resources/images/icon_expand_less.svg")');
+    assertEquals(
+        moduleWrapper.$.header.offsetHeight + 100, moduleWrapper.offsetHeight);
+  });
 });