codeplay-common 4.8.3 → 4.8.4

package/files/take-screen-image.js

@@ -927,21 +927,21 @@ async function getWebViewTarget(localPort) {
     && target.url !== 'about:blank'
   ));
 
-  const visibleTarget = pageTargets.find((target) => {
+  for (const target of pageTargets) {
+    const client = new CdpClient(target.webSocketDebuggerUrl);
     try {
-      return JSON.parse(target.description || '{}').visible !== false;
+      await client.connect();
+      const details = await getPageDetails(client);
+      if (details.width > 0 && details.height > 0 && details.hasAppPage) {
+        return target;
+      }
     } catch {
-      return true;
+      // A target may close while discovering the active app WebView.
+    } finally {
+      client.close();
     }
-  });
-
-  const target = visibleTarget || pageTargets[0];
-
-  if (!target) {
-    throw new Error('No rendered page was found in the app WebView.');
   }
-
-  return target;
+  throw new Error('No visible Framework7 app page was found. Open the app page and retry; ad WebViews cannot be captured.');
 }
 
 async function getPageDetails(client) {
@@ -952,6 +952,14 @@ async function getPageDetails(client) {
       width: innerWidth,
       height: innerHeight,
       devicePixelRatio: devicePixelRatio,
+      hasAppPage: [...document.querySelectorAll('.view .page')].some((page) => {
+        const bounds = page.getBoundingClientRect();
+        const style = getComputedStyle(page);
+        return style.display !== 'none' && style.visibility !== 'hidden'
+          && bounds.width > 0 && bounds.height > 0
+          && bounds.bottom > 0 && bounds.right > 0
+          && bounds.top < innerHeight && bounds.left < innerWidth;
+      }),
       readyState: document.readyState
     })`,
     returnByValue: true,
@@ -1041,7 +1049,7 @@ async function capturePageSnapshot(client) {
           ? element.closest('label, .item-content, .input')
           : element;
         const preferredLabel = labelRoot?.querySelector(
-          '.item-title, .button-label, strong, .dialog-button-text',
+          '.item-title, .button-label, strong, .dialog-button-text, .homeboxtitle',
         );
         const textRoot = preferredLabel || labelRoot || element;
         const clone = textRoot.cloneNode(true);
@@ -1065,7 +1073,7 @@ async function capturePageSnapshot(client) {
         if (!root) return [];
         const records = [];
         const seen = new Set();
-        const selector = 'button, a.button, [role="button"], .list-button, .dialog-button';
+        const selector = 'button, .button, [role="button"], .list-button, .dialog-button';
         for (const element of root.querySelectorAll(selector)) {
           if (!isVisible(element)) continue;
           const label = getElementLabel(element);
@@ -1137,6 +1145,9 @@ async function capturePageSnapshot(client) {
       const activePage = visiblePages.find((page) => page.classList.contains('page-current'))
         || visiblePages[visiblePages.length - 1]
         || null;
+      if (!activePage) {
+        throw new Error('No visible app page was found; screenshot information was not captured.');
+      }
       const overlaySelector = [
         '.dialog.modal-in',
         '.popup.modal-in',
@@ -1161,12 +1172,12 @@ async function capturePageSnapshot(client) {
       ].join(',');
       const pageHeadings = collectUiText(
         activePage,
-        'h1, h2, h3, .navbar .title, .t-section-heading, .headTitle',
+        'h1, h2, h3, .navbar .title, .t-section-heading, .headTitle, .home-hero-title, .home-section-title',
         10,
       );
       const pageControls = collectUiText(
         activePage,
-        'button, [role="button"], label, .item-title, .item-subtitle, .list-button, option:checked',
+        'button, [role="button"], label, .item-title, .item-subtitle, .list-button, option:checked, .homeboxtitle',
         30,
       );
       const overlayText = collectUiText(activeOverlay, textSelector, 35);
@@ -1184,6 +1195,8 @@ async function capturePageSnapshot(client) {
         params: Object.keys(f7Route.params || {}),
         query: Object.keys(f7Route.query || {}),
       } : null;
+      const themeAttribute = document.documentElement.getAttribute('data-theme')
+        || document.body.getAttribute('data-theme');
       const screenInfo = {
         documentTitle: normalizeUiText(document.title),
         route: {
@@ -1195,16 +1208,16 @@ async function capturePageSnapshot(client) {
           dataName: activePage.getAttribute('data-name') || '',
           id: activePage.id || '',
           classes: getStableClasses(activePage),
-          navbarTitle: collectUiText(activePage, '.navbar .title', 1)[0] || '',
+          navbarTitle: collectUiText(activePage, '.navbar .title, .navbar .home-brand-text', 1)[0] || '',
           headings: pageHeadings,
           sections: collectUiText(
             activePage,
-            'h1, h2, h3, legend, .t-section-heading, .t-output-choice-heading, .headTitle',
+            'h1, h2, h3, legend, .t-section-heading, .t-output-choice-heading, .headTitle, .home-hero-title, .home-section-title',
             20,
           ),
           descriptions: collectUiText(
             activePage,
-            'p, small, .item-subtitle, .item-after, .t-settings-footnote',
+            'p, small, .item-subtitle, .item-after, .t-settings-footnote, .home-hero-kicker, .home-hero-subtitle, .home-stat, .homebox-meta',
             30,
           ),
           controls: pageControls,
@@ -1232,10 +1245,12 @@ async function capturePageSnapshot(client) {
           )),
           inputs: overlayInputs,
         } : null,
-        theme: document.documentElement.classList.contains('theme-dark')
-          || document.body.classList.contains('theme-dark')
-          ? 'dark'
-          : 'light',
+        theme: themeAttribute === 'dark' || themeAttribute === 'light'
+          ? themeAttribute
+          : document.documentElement.classList.contains('theme-dark')
+            || document.body.classList.contains('theme-dark')
+            ? 'dark'
+            : 'light',
         viewport: {
           width: innerWidth,
           height: innerHeight,
@@ -3365,7 +3380,25 @@ async function captureFramedScreenshot(
   await client.send('Runtime.evaluate', {
     expression: `new Promise((resolve) => {
       const image = document.querySelector('img');
-      const ready = () => requestAnimationFrame(() => requestAnimationFrame(resolve));
+      const ready = () => requestAnimationFrame(() => {
+        const copy = document.querySelector('.promo-copy');
+        const device = document.querySelector('.device');
+        if (copy && device && window.innerHeight > window.innerWidth) {
+          const gap = Math.max(16, Math.min(40, window.innerHeight * 0.02));
+          const deviceTop = copy.getBoundingClientRect().bottom + gap;
+          const deviceBounds = device.getBoundingClientRect();
+          const availableHeight = window.innerHeight * 0.97 - deviceTop;
+          const availableWidth = window.innerWidth * 0.9;
+          const scale = Math.min(1, availableHeight / deviceBounds.height, availableWidth / deviceBounds.width);
+          if (scale > 0) {
+            device.style.top = deviceTop + 'px';
+            device.style.bottom = 'auto';
+            device.style.transformOrigin = 'top center';
+            device.style.transform = 'translateX(-50%) scale(' + scale + ')';
+          }
+        }
+        requestAnimationFrame(resolve);
+      });
       if (image.complete) ready();
       else {
         image.addEventListener('load', ready, { once: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeplay-common",
-  "version": "4.8.3",
+  "version": "4.8.4",
   "description": "Common build scripts and files",
   "scripts": {
 	"postinstall": "node scripts/sync-files.js",