Calculate correct values for viewport width and height client hints on

navigation requests. Currently on navigation requests, the sec-ch-viewport-width and sec-ch-viewport-height client hints are calculated using the display's dimensions. This CL updates the two clients to use the visible viewport size, which provides more accurate information. The CL handles cases where the viewport size is not directly available (such as for prefetch requests or on tab restores) by caching the viewport size whenever the viewport size changes. Reimplementation of the reverted CL: https://chromium-review.googlesource.com/c/chromium/src/+/3108448 Bug: 825892 Change-Id: Idfbeceaf0c8a2de82ded3605141b06cf86d7c946 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3829751 Commit-Queue: Max Curran <[email protected]> Reviewed-by: Ryan Sturm <[email protected]> Reviewed-by: Avi Drissman <[email protected]> Cr-Commit-Position: refs/heads/main@{#1039990}
natechapin · Aug 26, 2022 · 7652874 · 7652874
1 parent 20594c2
commit 7652874
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 0 deletions.
diff --git a/client-hints/resources/viewport-frame.py b/client-hints/resources/viewport-frame.py
@@ -0,0 +1,25 @@
+def main(request, response):
+    """
+    postMessage with Viewport-Width and Sec-Ch-Viewport-Height headers
+    """
+
+    if b"sec-ch-viewport-width" in request.headers:
+        width = request.headers["sec-ch-viewport-width"]
+    else:
+        width = b"FAIL"
+
+    if b"sec-ch-viewport-height" in request.headers:
+        height = request.headers["sec-ch-viewport-height"]
+    else:
+        height = b"FAIL"
+
+    headers = [(b"Content-Type", b"text/html"),
+               (b"Access-Control-Allow-Origin", b"*")]
+    content = b'''
+<script>
+  let parentOrOpener = window.opener || window.parent;
+  parentOrOpener.postMessage({ viewportWidth: '%s', viewportHeight: '%s' }, "*");
+</script>
+''' % (width, height)
+
+    return 200, headers, content
diff --git a/client-hints/resources/viewport-measurement.html b/client-hints/resources/viewport-measurement.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<script>
+(async () => {
+  const response = await fetch("viewport.py");
+  const body = await response.text();
+  parent.postMessage(body, "*");
+})();
+</script>
diff --git a/client-hints/resources/viewport.py b/client-hints/resources/viewport.py
@@ -0,0 +1,13 @@
+def main(request, response):
+    """
+    Reflect Sec-Ch-Viewport-Width and Sec-Ch-Viewport-Height headers
+    """
+
+    if b"sec-ch-viewport-width" in request.headers and b"sec-ch-viewport-height" in request.headers:
+        result = request.headers["sec-ch-viewport-width"] + b"," + request.headers["sec-ch-viewport-height"]
+    else:
+        result = u"FAIL"
+
+    headers = [(b"Content-Type", b"text/html"),
+               (b"Access-Control-Allow-Origin", b"*")]
+    return 200, headers, result
diff --git a/client-hints/viewport-size/viewport-size-iframe.https.html b/client-hints/viewport-size/viewport-size-iframe.https.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(t => {
+  return new Promise(resolve => {
+    window.addEventListener("message", t.step_func(e => {
+      assert_equals(e.data.viewportWidth, window.innerWidth.toString());
+      assert_equals(e.data.viewportHeight, window.innerHeight.toString());
+      resolve();
+    }));
+  });
+});
+</script>
+<iframe src="../resources/viewport-frame.py" width=503 height=614></iframe>
diff --git a/client-hints/viewport-size/viewport-size-iframe.https.html.headers b/client-hints/viewport-size/viewport-size-iframe.https.html.headers
@@ -0,0 +1 @@
+Accept-CH: Sec-Ch-Viewport-Width,Sec-Ch-Viewport-Height
diff --git a/client-hints/viewport-size/viewport-size-subresource.https.html b/client-hints/viewport-size/viewport-size-subresource.https.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(t => {
+  return new Promise(resolve => {
+    window.addEventListener("message", t.step_func(e => {
+      assert_equals(e.data, "503,614");
+      resolve();
+    }));
+  });
+});
+</script>
+<iframe src="../resources/viewport-measurement.html" width=503 height=614>
diff --git a/client-hints/viewport-size/viewport-size-subresource.https.html.headers b/client-hints/viewport-size/viewport-size-subresource.https.html.headers
@@ -0,0 +1 @@
+Accept-CH: Sec-Ch-Viewport-Width,Sec-Ch-Viewport-Height
diff --git a/client-hints/viewport-size/viewport-size-window-different-dimensions.https.html b/client-hints/viewport-size/viewport-size-window-different-dimensions.https.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(t => {
+  return new Promise(resolve => {
+    window.addEventListener("message", t.step_func(e => {
+      assert_equals(e.data.viewportWidth, "503");
+      assert_equals(e.data.viewportHeight, "614");
+      resolve();
+    }));
+  });
+});
+window.open("../resources/viewport-frame.py", "", "width=503,height=614");
+</script>
diff --git a/client-hints/viewport-size/viewport-size-window-different-dimensions.https.html.headers b/client-hints/viewport-size/viewport-size-window-different-dimensions.https.html.headers
@@ -0,0 +1 @@
+Accept-CH: Sec-Ch-Viewport-Width,Sec-Ch-Viewport-Height
diff --git a/client-hints/viewport-size/viewport-size-window.https.html b/client-hints/viewport-size/viewport-size-window.https.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(t => {
+  return new Promise(resolve => {
+    window.addEventListener("message", t.step_func(e => {
+      assert_equals(e.data.viewportWidth, window.innerWidth.toString());
+      assert_equals(e.data.viewportHeight, window.innerHeight.toString());
+      resolve();
+    }));
+  });
+});
+window.open("../resources/viewport-frame.py", "");
+</script>
diff --git a/client-hints/viewport-size/viewport-size-window.https.html.headers b/client-hints/viewport-size/viewport-size-window.https.html.headers
@@ -0,0 +1 @@
+Accept-CH: Sec-Ch-Viewport-Width,Sec-Ch-Viewport-Height
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Accept-CH: Sec-Ch-Viewport-Width,Sec-Ch-Viewport-Height