1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
#!/usr/bin/env python3
"""
Measure a piece of the SPA at a phone width, in a real browser.
The responsive tests up to now pinned numbers out of the stylesheet, with a
docstring admitting that a layout cannot be measured because there is no
browser in the suite. There is one: Chrome is what the video work has been
verified against. Reading `width: 330px` out of a rule says nothing about
whether the thing lands on the screen — that depends on where its anchor sits,
which depends on everything to its right.
Renders the real style.css with a fragment of markup, at a given viewport, and
reports the bounding box of each selector asked for.
layout_probe.py <widths,comma,separated> <html-fragment-file> <selector> [...]
One browser for all the widths asked for: an iframe apiece, measured in a
single pass. Launching Chrome per width put three minutes on the test suite.
"""
import http.server
import json
import socketserver
import subprocess
import sys
import tempfile
import threading
import time
from pathlib import Path
STATIC = Path(__file__).resolve().parents[2] / "src" / "meshbay_hub" / "static"
PORT = 8734
PAGE = """<!doctype html><html><head><meta charset=utf-8></head>
<body style="margin:0">
<!-- One iframe per width. A headless window will not go below about 500 px,
and an iframe establishes its own viewport, so media queries inside it see
the phone width we mean. -->
<div id="frames"></div>
<script>
const WIDTHS = %(widths)s, SELECTORS = %(selectors)s;
const FRAG = %(fragment)s;
const host = document.getElementById('frames');
for (const w of WIDTHS) {
const f = document.createElement('iframe');
f.id = 'f' + w;
f.style.cssText = `width:${w}px;height:740px;border:0;display:block`;
host.appendChild(f);
const d = f.contentDocument;
d.open();
d.write(`<!doctype html><html><head><meta charset=utf-8>
<link rel="stylesheet" href="/style.css"></head><body>${FRAG}</body></html>`);
d.close();
}
setTimeout(() => {
const out = {};
for (const w of WIDTHS) {
const win = document.getElementById('f' + w).contentWindow;
const r = {viewport: {w: win.innerWidth, h: win.innerHeight},
docScrollW: win.document.documentElement.scrollWidth, boxes: {}};
for (const sel of SELECTORS) {
const el = win.document.querySelector(sel);
if (!el) { r.boxes[sel] = null; continue; }
const b = el.getBoundingClientRect();
r.boxes[sel] = {
left: Math.round(b.left), right: Math.round(b.right),
top: Math.round(b.top), width: Math.round(b.width),
height: Math.round(b.height),
offLeft: Math.round(Math.max(0, -b.left)),
offRight: Math.round(Math.max(0, b.right - win.innerWidth)),
};
}
out[w] = r;
}
fetch('/log', {method: 'POST', body: JSON.stringify(out)});
}, 500);
</script></body></html>"""
RECORDS = []
def main() -> int:
widths = [int(w) for w in sys.argv[1].split(",")]
fragment = Path(sys.argv[2]).read_text()
selectors = sys.argv[3:]
class H(http.server.BaseHTTPRequestHandler):
def log_message(self, *a):
pass
def do_POST(self):
RECORDS.append(json.loads(
self.rfile.read(int(self.headers["Content-Length"])).decode()))
self.send_response(204)
self.end_headers()
def do_GET(self):
if self.path == "/":
body = (PAGE % {"fragment": json.dumps(fragment),
"widths": json.dumps(widths),
"selectors": json.dumps(selectors)}).encode()
ctype = "text/html; charset=utf-8"
elif self.path == "/style.css":
body = (STATIC / "style.css").read_bytes()
ctype = "text/css"
else:
self.send_response(404)
self.end_headers()
return
self.send_response(200)
self.send_header("Content-Type", ctype)
self.send_header("Content-Length", str(len(body)))
self.end_headers()
self.wfile.write(body)
class S(socketserver.ThreadingTCPServer):
allow_reuse_address = True
daemon_threads = True
srv = S(("127.0.0.1", PORT), H)
threading.Thread(target=srv.serve_forever, daemon=True).start()
chrome = subprocess.Popen([
"google-chrome", "--headless=new", "--no-sandbox",
"--window-size=1000,900",
"--user-data-dir=" + tempfile.mkdtemp(prefix="chrome-layout-"),
f"http://127.0.0.1:{PORT}/",
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
deadline = time.time() + 45
while time.time() < deadline and not RECORDS:
time.sleep(0.2)
chrome.terminate()
srv.shutdown()
if not RECORDS:
print(json.dumps({"error": "no measurement"}))
return 1
print(json.dumps(RECORDS[0]))
return 0
if __name__ == "__main__":
sys.exit(main())
|