From e83a1966c133b8fc7f3a65402af3d5ed7ea7cdbd Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Tue, 14 Jan 2020 13:59:39 -0800
Subject: [PATCH] Ignore intentional layout shift and limit metrics

---
 testing/amp-performance-extension/OWNERS      | 10 +++++
 .../amp-performance-extension/manifest.json   |  2 +-
 testing/amp-performance-extension/measure.js  | 43 ++++++++++---------
 3 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 testing/amp-performance-extension/OWNERS

diff --git a/testing/amp-performance-extension/OWNERS b/testing/amp-performance-extension/OWNERS
new file mode 100644
index 000000000000..24f5ca3170f4
--- /dev/null
+++ b/testing/amp-performance-extension/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'wassgha', notify: true}],
+    },
+  ],
+}
diff --git a/testing/amp-performance-extension/manifest.json b/testing/amp-performance-extension/manifest.json
index d1f5ca366a5a..9f2a6409d9c2 100644
--- a/testing/amp-performance-extension/manifest.json
+++ b/testing/amp-performance-extension/manifest.json
@@ -23,7 +23,7 @@
   },
   "content_scripts": [
     {
-      "matches": ["*://*/*"],
+      "matches": ["<all_urls>"],
       "run_at": "document_start",
       "js": ["measure.js"]
     }
diff --git a/testing/amp-performance-extension/measure.js b/testing/amp-performance-extension/measure.js
index acc5664efafb..8469901fcd04 100644
--- a/testing/amp-performance-extension/measure.js
+++ b/testing/amp-performance-extension/measure.js
@@ -48,6 +48,7 @@ function measureCLS() {
   const layoutShiftObserver = new PerformanceObserver(list =>
     list
       .getEntries()
+      .filter(entry => !entry.hadRecentInput)
       .forEach(entry => (window.cumulativeLayoutShift += entry.value))
   );
   layoutShiftObserver.observe({type: 'layout-shift', buffered: true});
@@ -107,9 +108,9 @@ function getMetric(name) {
   return entry ? entry.startTime : 0;
 }
 
-function getTimeToInteractive() {
-  return Date.now() - window.measureStarted;
-}
+// function getTimeToInteractive() {
+//   return Date.now() - window.measureStarted;
+// }
 
 measureLongTasks();
 measureCLS();
@@ -154,21 +155,26 @@ document.addEventListener('DOMContentLoaded', function() {
   `
   );
 
+  // TODO(wassgha): Implement an expanded view where these metrics are shown
+
   // Visible
-  const visible = getMetric('visible');
-  const vis = renderMeasurement(result, 'visible', round(visible));
+  // const visible = getMetric('visible');
+  // const vis = renderMeasurement(result, 'visible', round(visible));
 
   // First paint
-  const firstPaint = getMetric('first-paint');
-  const fp = renderMeasurement(result, 'firstPaint', round(firstPaint));
+  // const firstPaint = getMetric('first-paint');
+  // const fp = renderMeasurement(result, 'firstPaint', round(firstPaint));
 
   // First contentful paint
   const firstContentfulPaint = getMetric('first-contentful-paint');
-  const fcp = renderMeasurement(
-    result,
-    'firstContentfulPaint',
-    round(firstContentfulPaint)
-  );
+  // const fcp = renderMeasurement(
+  //   result,
+  //   'firstContentfulPaint',
+  //   round(firstContentfulPaint)
+  // );
+
+  // Time to interactive
+  // renderMeasurement(result, 'timeToInteractive', round(getTimeToInteractive()));
 
   // Largest contentful paint
   const lcp = renderMeasurement(
@@ -184,9 +190,6 @@ document.addEventListener('DOMContentLoaded', function() {
     round(getMaxFirstInputDelay(firstContentfulPaint))
   );
 
-  // Time to interactive
-  renderMeasurement(result, 'timeToInteractive', round(getTimeToInteractive()));
-
   // Load CLS
   renderMeasurement(
     result,
@@ -207,11 +210,11 @@ document.addEventListener('DOMContentLoaded', function() {
   // Instaneous measurement updates
   setInterval(() => {
     instCLS.innerText = round(window.cumulativeLayoutShift * 100);
-    vis.innerText = round(getMetric('visible'));
-    fp.innerText = round(getMetric('first-paint'));
-    fcp.innerText = round(getMetric('first-contentful-paint'));
-    lcp.innerText = round(window.largestContentfulPaint);
-    mfid.innerText = round(
+    // vis.innerText = round(getMetric('visible'));
+    // fp.innerText = round(getMetric('first-paint'));
+    // fcp.innerText = round(getMetric('first-contentful-paint'));
+    lcp./*REVIEW*/ innerText = round(window.largestContentfulPaint);
+    mfid./*REVIEW*/ innerText = round(
       getMaxFirstInputDelay(getMetric('first-contentful-paint'))
     );
   }, 250);