From a5bd367b04c52275e739d32c2f5546dcbbccbb25 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Fri, 22 Nov 2024 18:13:20 -0800
Subject: [PATCH 1/2] Prevent submitting URL Metric if viewport size changed

---
 plugins/optimization-detective/detect.js | 25 ++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/plugins/optimization-detective/detect.js b/plugins/optimization-detective/detect.js
index 385f81b0d5..9799e05d5a 100644
--- a/plugins/optimization-detective/detect.js
+++ b/plugins/optimization-detective/detect.js
@@ -127,6 +127,12 @@ function recursiveFreeze( obj ) {
 	Object.freeze( obj );
 }
 
+// This needs to be captured early in case the user later resizes the window.
+const viewport = {
+	width: win.innerWidth,
+	height: win.innerHeight,
+};
+
 /**
  * URL Metric being assembled for submission.
  *
@@ -443,10 +449,7 @@ export default async function detect( {
 
 	urlMetric = {
 		url: currentUrl,
-		viewport: {
-			width: win.innerWidth,
-			height: win.innerHeight,
-		},
+		viewport,
 		elements: [],
 	};
 
@@ -507,6 +510,20 @@ export default async function detect( {
 		);
 	} );
 
+	// Only proceed with submitting the URL Metric if viewport stayed the same size. Changing the viewport size (e.g. due
+	// to resizing a window or changing the orientation of a device) will result in unexpected metrics being collected.
+	if (
+		window.innerWidth !== urlMetric.viewport.width ||
+		window.innerHeight !== urlMetric.viewport.height
+	) {
+		if ( isDebug ) {
+			log(
+				'Aborting URL Metric collection due to viewport size change.'
+			);
+		}
+		return;
+	}
+
 	if ( extensions.size > 0 ) {
 		for ( const [
 			extensionModuleUrl,

From e222c85597396e694053bafa80b5759ad722f421 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Mon, 2 Dec 2024 12:21:27 -0800
Subject: [PATCH 2/2] Use resize event to detect viewport change

---
 plugins/optimization-detective/detect.js | 26 ++++++++++++++----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/plugins/optimization-detective/detect.js b/plugins/optimization-detective/detect.js
index 9799e05d5a..40d91375c7 100644
--- a/plugins/optimization-detective/detect.js
+++ b/plugins/optimization-detective/detect.js
@@ -127,12 +127,6 @@ function recursiveFreeze( obj ) {
 	Object.freeze( obj );
 }
 
-// This needs to be captured early in case the user later resizes the window.
-const viewport = {
-	width: win.innerWidth,
-	height: win.innerHeight,
-};
-
 /**
  * URL Metric being assembled for submission.
  *
@@ -331,6 +325,16 @@ export default async function detect( {
 		return;
 	}
 
+	// Keep track of whether the window resized. If it resized, we abort sending the URLMetric.
+	let didWindowResize = false;
+	window.addEventListener(
+		'resize',
+		() => {
+			didWindowResize = true;
+		},
+		{ once: true }
+	);
+
 	// TODO: Does this make sense here?
 	// Prevent detection when page is not scrolled to the initial viewport.
 	if ( doc.documentElement.scrollTop > 0 ) {
@@ -449,7 +453,10 @@ export default async function detect( {
 
 	urlMetric = {
 		url: currentUrl,
-		viewport,
+		viewport: {
+			width: win.innerWidth,
+			height: win.innerHeight,
+		},
 		elements: [],
 	};
 
@@ -512,10 +519,7 @@ export default async function detect( {
 
 	// Only proceed with submitting the URL Metric if viewport stayed the same size. Changing the viewport size (e.g. due
 	// to resizing a window or changing the orientation of a device) will result in unexpected metrics being collected.
-	if (
-		window.innerWidth !== urlMetric.viewport.width ||
-		window.innerHeight !== urlMetric.viewport.height
-	) {
+	if ( didWindowResize ) {
 		if ( isDebug ) {
 			log(
 				'Aborting URL Metric collection due to viewport size change.'