replace phantom with puppeteer/chromium

Author: edsu

anon.js

@@ -3,10 +3,10 @@
 const fs                   = require('fs')
 const Twit                 = require('twit')
 const async                = require('async')
-const phantom              = require('phantom')
 const minimist             = require('minimist')
 const Mastodon             = require('mastodon')
 const Mustache             = require('mustache')
+const puppeteer            = require('puppeteer')
 const {WikiChanges}        = require('wikichanges')
 const {Address4, Address6} = require('ip-address')
 
@@ -114,44 +114,34 @@ function isRepeat(edit) {
   return r
 }
 
-function takeScreenshot(url) {
-  return new Promise(function(resolve, reject) {
-    phantom.create(['--ignore-ssl-errors=yes']).then(function(browser) {
-      var filename = new Date().toString() + '.png'
-      browser.createPage().then(function(page) {
-        page.property('viewportSize', {width: 1024, height: 768}).then(function() {
-          page.open(url).then(function(status) {
-            if (status === 'fail') {
-              cb('fail', null)
-            } else {
-              page.evaluate(function() {
-                try {
-                  var diffBoundingRect = document.querySelector('table.diff.diff-contentalign-left').getBoundingClientRect()
-                  // for some reason phantomjs doesn't seem to get the sizing right
-                  return {
-                    top: diffBoundingRect.top,
-                    left: diffBoundingRect.left,
-                    width: diffBoundingRect.width + 75,
-                    height: diffBoundingRect.height,
-                  }
-                } catch(e) {
-                  console.log('Error: no diff found on wikipedia page')
-                }
-              }).then(function(clipRect) {
-                page.property('clipRect', clipRect).then(function() {
-                  page.render(filename).then(function() {
-                    browser.exit().then(function() {
-                      resolve(filename)
-                    })
-                  })
-                })
-              })
-            }
-          })
-        })
-      })
-    })
+async function takeScreenshot(url) {
+  const browser = await puppeteer.launch({headless: true, defaultViewport: null})
+  const page = await browser.newPage()
+  await page.goto(url, {waitUntil: 'networkidle2'})
+  await page.setViewport({width: 1024, height: 768})
+
+  const filename = Date.now() + '.png'
+  const selector = 'table.diff.diff-contentalign-left'
+  const padding = 0
+  
+  const rect = await page.evaluate(selector => {
+    const element = document.querySelector(selector)
+    const {x, y, width, height} = element.getBoundingClientRect()
+    return {left: x, top: y, width, height, id: element.id}
+  }, selector)
+
+  await page.screenshot({
+    path: filename,
+    clip: {
+      x: rect.left - padding,
+      y: rect.top - padding,
+      width: rect.width + padding * 2,
+      height: rect.height + padding * 2
+    }
   })
+
+  await browser.close()
+  return filename
 }
 
 function sendStatus(account, status, edit) {
@@ -284,6 +274,9 @@ function main() {
   })
 }
 
+async function getClip(page, selector, path, padding=16) {
+}
+
 if (require.main === module) {
   main()
 }