From 9cff3074e52b91c49298f80fd3e73d77f1f1c7dd Mon Sep 17 00:00:00 2001
From: Lars-Dominik Braun <lars@6xq.net>
Date: Wed, 22 Nov 2017 09:37:19 +0100
Subject: Emulate different screen sizes

Causes the browser to load CSS assets and <img> srcset, for example.
---
 README.rst      |  3 ---
 crocoite/cli.py | 25 +++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/README.rst b/README.rst
index f66da27..2b3642f 100644
--- a/README.rst
+++ b/README.rst
@@ -47,8 +47,5 @@ Most of these issues can be worked around by using the DOM snapshot, which is
 also saved. This causes its own set of issues though:
 
 - JavaScript-based navigation does not work.
-- Scripts modifying styles based on scrolling position are stuck at the end of
-  page state at the moment. Example: twitter.com
-- CSS-based asset loading (screen size, pixel ratio, …) still does not work.
 - Canvas contents are probably not preserved.
 
diff --git a/crocoite/cli.py b/crocoite/cli.py
index 9a22d24..f9e0fd2 100644
--- a/crocoite/cli.py
+++ b/crocoite/cli.py
@@ -321,6 +321,29 @@ def main ():
                         'X-Chrome-Viewport': viewport})
         writer.write_record (record)
 
+    def emulateScreenMetrics (tab):
+        """
+        Emulate different screen sizes, causing the site to fetch assets (img
+        srcset and css, for example) for different screen resolutions.
+        """
+        sizes = [
+                {'width': 1920, 'height': 1080, 'deviceScaleFactor': 1.5, 'mobile': False},
+                {'width': 1920, 'height': 1080, 'deviceScaleFactor': 2, 'mobile': False},
+                # very dense display
+                {'width': 1920, 'height': 1080, 'deviceScaleFactor': 4, 'mobile': False},
+                # just a few samples:
+                # 1st gen iPhone (portrait mode)
+                {'width': 320, 'height': 480, 'deviceScaleFactor': 1.8, 'mobile': True},
+                # 6th gen iPhone (portrait mode)
+                {'width': 750, 'height': 1334, 'deviceScaleFactor': 326/90, 'mobile': True},
+                ]
+        for s in sizes:
+            tab.Emulation.setDeviceMetricsOverride (**s)
+            tab.wait (1)
+        # wait until assets finished loading
+        while len (requests) != 0:
+            tab.wait (1)
+
     logging.basicConfig (level=logging.DEBUG)
 
     parser = argparse.ArgumentParser(description='Save website to WARC using Google Chrome.')
@@ -415,6 +438,8 @@ def main ():
     while len (requests) != 0:
         tab.wait (1)
 
+    emulateScreenMetrics (tab)
+
     tab.Page.stopLoading ()
     tab.Network.disable ()
     tab.Page.disable ()
-- 
cgit v1.2.3