WebUI Modules: shopping tasks, hide elements that do not fit

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

chrome/browser/resources/new_tab_page/modules/shopping_tasks/module.html

@@ -133,7 +133,7 @@
 </style>
 <div id="products">
   <template is="dom-repeat" id="productsRepeat"
-      items="[[shoppingTask.products]]">
+      items="[[shoppingTask.products]]" on-dom-change="onDomChange_">
     <a class="product" href="[[item.targetUrl.url]]" on-click="onClick_"
         on-auxclick="onClick_">
       <div class="image">
@@ -146,8 +146,8 @@
   </template>
 </div>
 <div id="relatedSearches">
-  <template is="dom-repeat"  id="relatedSearchesRepeat"
-      items="[[shoppingTask.relatedSearches]]">
+  <template is="dom-repeat" id="relatedSearchesRepeat"
+      items="[[shoppingTask.relatedSearches]]" on-dom-change="onDomChange_">
     <a class="pill" href="[[item.targetUrl.url]]" on-click="onClick_"
         on-auxclick="onClick_">
       <div class="loupe"></div>

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

@@ -34,6 +34,13 @@ class ShoppingTasksModuleElement extends PolymerElement {
     };
   }
 
+  /** @override */
+  ready() {
+    super.ready();
+    /** @type {IntersectionObserver} */
+    this.intersectionObserver_ = null;
+  }
+
   /** @private */
   onClick_() {
     this.dispatchEvent(new Event('usage', {bubbles: true, composed: true}));
@@ -43,6 +50,22 @@ class ShoppingTasksModuleElement extends PolymerElement {
   onCloseClick_() {
     this.showInfoDialog = false;
   }
+
+  /** @private */
+  onDomChange_() {
+    if (!this.intersectionObserver_) {
+      this.intersectionObserver_ = new IntersectionObserver(entries => {
+        entries.forEach(({intersectionRatio, target}) => {
+          target.style.visibility =
+              intersectionRatio < 1 ? 'hidden' : 'visible';
+        });
+      }, {root: this, threshold: 1});
+    } else {
+      this.intersectionObserver_.disconnect();
+    }
+    this.shadowRoot.querySelectorAll('.product, .pill')
+        .forEach(el => this.intersectionObserver_.observe(el));
+  }
 }
 
 customElements.define(

chrome/test/data/webui/new_tab_page/modules/shopping_tasks/module_test.js

@@ -4,6 +4,7 @@
 
 import {shoppingTasksDescriptor, ShoppingTasksHandlerProxy} from 'chrome://new-tab-page/new_tab_page.js';
 import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
+import {flushTasks} from 'chrome://test/test_util.m.js';
 
 suite('NewTabPageModulesShoppingTasksModuleTest', () => {
   /**
@@ -102,4 +103,45 @@ suite('NewTabPageModulesShoppingTasksModuleTest', () => {
     assertEquals('https://blub.com/', pills[1].href);
     assertEquals('blub', pills[1].querySelector('.search-text').innerText);
   });
+
+  test('products and pills are hidden when cutoff', async () => {
+    const repeat = (n, fn) => Array(n).fill(0).map(fn);
+    testProxy.handler.setResultFor('getPrimaryShoppingTask', Promise.resolve({
+      shoppingTask: {
+        title: 'Hello world',
+        products: repeat(20, () => ({
+                               name: 'foo',
+                               imageUrl: {url: 'https://foo.com/img.png'},
+                               price: '1 gazillion dollars',
+                               info: 'foo info',
+                               targetUrl: {url: 'https://foo.com'},
+                             })),
+        relatedSearches: repeat(20, () => ({
+                                      text: 'baz',
+                                      targetUrl: {url: 'https://baz.com'},
+                                    })),
+      }
+    }));
+    await shoppingTasksDescriptor.initialize();
+    const moduleElement = shoppingTasksDescriptor.element;
+    document.body.append(moduleElement);
+    moduleElement.$.productsRepeat.render();
+    moduleElement.$.relatedSearchesRepeat.render();
+    const getElements = () => Array.from(
+        moduleElement.shadowRoot.querySelectorAll('.product, .pill'));
+    assertEquals(40, getElements().length);
+    const hiddenCount = () =>
+        getElements().filter(el => el.style.visibility === 'hidden').length;
+    const checkHidden = async (width, count) => {
+      moduleElement.style.width = width;
+      await flushTasks();
+      await flushTasks();
+      await flushTasks();
+      assertEquals(count, hiddenCount());
+    };
+    await checkHidden('500px', 31);
+    await checkHidden('300px', 35);
+    await checkHidden('700px', 26);
+    await checkHidden('500px', 31);
+  });
 });