From 604ffebf5f3693d051da7f1c65d553b7149f785c Mon Sep 17 00:00:00 2001
From: Zixuan James Li <p359101898@gmail.com>
Date: Fri, 14 Jul 2023 20:21:50 -0400
Subject: [PATCH] tools: Make screenshot tool work with the modern web client.

This fixes some deprecation use of the APIs, including using "new"
instead of "true" for the "headless" flag when launching puppeteer and
using $$ instead of $x when using XPath selectors.

We also use {waitUntil: "networkidle2"} to fix the issue of webhook bot
avatar not being loaded consistently when generating the screenshots
(this happened to webhooks like Slack and Harbor).

Positioning of the clip area is adjusted to take the new grid layout
into account.
---
 tools/message-screenshot.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/tools/message-screenshot.js b/tools/message-screenshot.js
index 639daf62f2..4880694afa 100644
--- a/tools/message-screenshot.js
+++ b/tools/message-screenshot.js
@@ -37,13 +37,13 @@ async function run() {
             "--font-render-hinting=none",
         ],
         defaultViewport: null,
-        headless: true,
+        headless: "new",
     });
     try {
         const page = await browser.newPage();
         // deviceScaleFactor:2 gives better quality screenshots (higher pixel density)
         await page.setViewport({width: 1280, height: 1024, deviceScaleFactor: 2});
-        await page.goto(options.realmUri);
+        await page.goto(`${options.realmUri}/devlogin`);
         // wait for Iago devlogin button and click on it.
         await page.waitForSelector('[value="iago@zulip.com"]');
 
@@ -54,7 +54,9 @@ async function run() {
         ]);
 
         // Navigate to message and capture screenshot
-        await page.goto(`${options.realmUri}/#narrow/id/${options.messageId}`);
+        await page.goto(`${options.realmUri}/#narrow/id/${options.messageId}`, {
+            waitUntil: "networkidle2",
+        });
         const messageSelector = `#zfilt${CSS.escape(options.messageId)}`;
         await page.waitForSelector(messageSelector);
         // remove unread marker and don't select message
@@ -62,13 +64,12 @@ async function run() {
         await page.evaluate((sel) => $(sel).remove(), marker);
         const messageBox = await page.$(messageSelector);
         await page.evaluate((msg) => $(msg).removeClass("selected_message"), messageSelector);
-        const messageGroup = (await messageBox.$x(".."))[0];
+        const messageGroup = await messageBox.$("xpath/..");
         // Compute screenshot area, with some padding around the message group
         const clip = {...(await messageGroup.boundingBox())};
-        clip.y -= 5;
         clip.x -= 5;
         clip.width += 10;
-        clip.height += 10;
+        clip.y += 5;
         const imagePath = options.imagePath;
         const imageDir = path.dirname(imagePath);
         mkdirp.sync(imageDir);