Add content visibility change handler for video grid (#39)

* remove extra changes
* Add content visibility change handlers for video grid

Author: issackjohn

experimental/responsive-design/dist/app.js

@@ -11,7 +11,9 @@
                 margin: 0;
                 width: 100%;
                 height: 100%;
-                overflow: hidden;
+            }
+            body {
+                overflow: auto;
             }
         </style>
         <!-- Preload links autogenerated by Rollup -->

experimental/responsive-design/dist/index.html

@@ -11,7 +11,9 @@
                 margin: 0;
                 width: 100%;
                 height: 100%;
-                overflow: hidden;
+            }
+            body {
+                overflow: auto;
             }
         </style>
     </head>

experimental/responsive-design/index.html

@@ -8,6 +8,7 @@ class ArticleGrid extends LightDOMLitElement {
     static properties = {
         articles: { type: Array },
     };
+
     constructor() {
         super();
         this.articles = articles;

experimental/responsive-design/src/lib/components/article-grid.js

@@ -14,6 +14,11 @@ class VideoGrid extends LightDOMLitElement {
         this.videos = videos;
     }
 
+    async _onContentVisibilityChange(_) {
+        await this.updateComplete;
+        window.dispatchEvent(new CustomEvent("video-grid-content-visibility-complete"));
+    }
+
     _getVideoCardsTemplate() {
         return this.videos.map((video) => {
             return html`<video-card text="${video.text}" description="${video.description}"></video-card>`;
@@ -24,7 +29,7 @@ class VideoGrid extends LightDOMLitElement {
         return html`
             <div class="flex flex-col p-2">
                 <section-heading title="Videos" subtitle="Watch and learn from our collection of cooking videos."></section-heading>
-                <div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-2 xl:gap-7">${this._getVideoCardsTemplate()}</div>
+                <div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-2 xl:gap-7" @contentvisibilityautostatechange=${this._onContentVisibilityChange}>${this._getVideoCardsTemplate()}</div>
             </div>
         `;
     }

experimental/responsive-design/src/lib/components/video-grid.js

@@ -30,10 +30,8 @@ class Page {
         return this._frame.contentWindow.localStorage;
     }
 
-    layout(target = null) {
-        // If target is provided, it should be a body element to force layout on
-        // Otherwise force layout on the current page's body
-        const body = target || this._frame?.contentDocument?.body || document.body;
+    layout() {
+        const body = this._frame ? this._frame.contentDocument.body : document.body;
 
         const value = forceLayout(body, params.layoutMode);
         body._leakedLayoutValue = value; // Prevent dead code elimination.
@@ -73,7 +71,7 @@ class Page {
 
         if (element === null)
             return null;
-        return this.wrapElement(element);
+        return this._wrapElement(element);
     }
 
     /**
@@ -95,15 +93,15 @@ class Page {
         const lookupStartNode = this._frame.contentDocument;
         const elements = Array.from(getParent(lookupStartNode, path).querySelectorAll(selector));
         for (let i = 0; i < elements.length; i++)
-            elements[i] = this.wrapElement(elements[i]);
+            elements[i] = this._wrapElement(elements[i]);
         return elements;
     }
 
     getElementById(id) {
         const element = this._frame.contentDocument.getElementById(id);
         if (element === null)
             return null;
-        return this.wrapElement(element);
+        return this._wrapElement(element);
     }
 
     call(functionName) {
@@ -118,14 +116,14 @@ class Page {
     }
 
     callToGetElement(functionName) {
-        return this.wrapElement(this._frame.contentWindow[functionName]());
+        return this._wrapElement(this._frame.contentWindow[functionName]());
     }
 
     setWidth(widthPx) {
         this._frame.style.width = `${widthPx}px`;
     }
 
-    wrapElement(element) {
+    _wrapElement(element) {
         return new PageElement(element);
     }
 
@@ -146,14 +144,6 @@ class PageElement {
         this.#node = node;
     }
 
-    getContentDocument() {
-        if (this.#node.nodeName?.toLowerCase() !== "iframe")
-            throw new Error("getContentDocument() called on non-iframe element");
-        if (!this.#node.contentDocument)
-            throw new Error("Iframe contentDocument is not available.");
-        return this.#node.contentDocument;
-    }
-
     setValue(value) {
         this.#node.value = value;
     }

resources/benchmark-runner.mjs

@@ -1145,6 +1145,10 @@ Suites.push({
             await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
         }),
         new BenchmarkTestStep("ScrollToChatAndSendMessages", async (page) => {
+            const cvWorkComplete = new Promise((resolve) => {
+                page.addEventListener("video-grid-content-visibility-complete", resolve, { once: true });
+            });
+
             const nextItemBtn = page.querySelector("#next-item-carousel-btn", ["cooking-app", "main-content", "recipe-carousel"]);
             const recipeCarouselItems = page.querySelectorAll(".carousel-item", ["cooking-app", "main-content", "recipe-carousel"]);
             const numOfCarouselItems = recipeCarouselItems.length - 3;
@@ -1172,6 +1176,7 @@ Suites.push({
                 chatInput.enter("keydown");
                 page.layout();
             }
+            await cvWorkComplete;
         }),
         new BenchmarkTestStep("IncreaseWidthIn5Steps", async (page) => {
             const widths = [560, 640, 704, 768, 800];