Bug 1687358 - Implement telemetry probes to determine the best possible threshold for <lazyload> r=emilio

This patch implements five telemetry probes to help us learn how
lazyload thresholds perform in the wild.

Differential Revision: https://phabricator.services.mozilla.com/D102845

dom/base/DOMIntersectionObserver.cpp

@@ -152,7 +152,18 @@ static void LazyLoadCallback(
     MOZ_ASSERT(entry->Target()->IsHTMLElement(nsGkAtoms::img));
     if (entry->IsIntersecting()) {
       static_cast<HTMLImageElement*>(entry->Target())
-          ->StopLazyLoadingAndStartLoadIfNeeded();
+          ->StopLazyLoadingAndStartLoadIfNeeded(true);
+    }
+  }
+}
+
+static void LazyLoadCallbackReachViewport(
+    const Sequence<OwningNonNull<DOMIntersectionObserverEntry>>& aEntries) {
+  for (const auto& entry : aEntries) {
+    MOZ_ASSERT(entry->Target()->IsHTMLElement(nsGkAtoms::img));
+    if (entry->IsIntersecting()) {
+      static_cast<HTMLImageElement*>(entry->Target())
+          ->LazyLoadImageReachedViewport();
     }
   }
 }
@@ -189,6 +200,14 @@ DOMIntersectionObserver::CreateLazyLoadObserver(Document& aDocument) {
   return observer.forget();
 }
 
+already_AddRefed<DOMIntersectionObserver>
+DOMIntersectionObserver::CreateLazyLoadObserverViewport(Document& aDocument) {
+  RefPtr<DOMIntersectionObserver> observer =
+      new DOMIntersectionObserver(aDocument, LazyLoadCallbackReachViewport);
+  observer->mThresholds.AppendElement(std::numeric_limits<double>::min());
+  return observer.forget();
+}
+
 bool DOMIntersectionObserver::SetRootMargin(const nsACString& aString) {
   return Servo_IntersectionObserverRootMargin_Parse(&aString, &mRootMargin);
 }

dom/base/DOMIntersectionObserver.h

@@ -127,6 +127,8 @@ class DOMIntersectionObserver final : public nsISupports,
 
   static already_AddRefed<DOMIntersectionObserver> CreateLazyLoadObserver(
       Document&);
+  static already_AddRefed<DOMIntersectionObserver>
+  CreateLazyLoadObserverViewport(Document&);
 
  protected:
   void Connect();

dom/base/Document.cpp

@@ -1403,6 +1403,10 @@ Document::Document(const char* aContentType)
       mOnloadBlockCount(0),
       mAsyncOnloadBlockCount(0),
       mWriteLevel(0),
+      mLazyLoadImageCount(0),
+      mLazyLoadImageStarted(0),
+      mLazyLoadImageReachViewportLoading(0),
+      mLazyLoadImageReachViewportLoaded(0),
       mContentEditableCount(0),
       mEditingState(EditingState::eOff),
       mCompatMode(eCompatibility_FullStandards),
@@ -2374,6 +2378,7 @@ NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN_INTERNAL(Document)
 
   NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mOnloadBlocker)
   NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mLazyLoadImageObserver)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mLazyLoadImageObserverViewport)
   NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mDOMImplementation)
   NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mImageMaps)
   NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mOrientationPendingPromise)
@@ -2496,6 +2501,7 @@ NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(Document)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mSecurityInfo)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mDisplayDocument)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mLazyLoadImageObserver)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mLazyLoadImageObserverViewport)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mFontFaceSet)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mReadyForIdle)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mDocumentL10n)
@@ -15065,6 +15071,25 @@ void Document::ReportDocumentUseCounters() {
             (" > %s\n", Telemetry::GetHistogramName(id)));
     Telemetry::Accumulate(id, 1);
   }
+
+  ReportDocumentLazyLoadCounters();
+}
+
+void Document::ReportDocumentLazyLoadCounters() {
+  if (!mLazyLoadImageCount) {
+    return;
+  }
+  Telemetry::Accumulate(Telemetry::LAZYLOAD_IMAGE_TOTAL, mLazyLoadImageCount);
+  Telemetry::Accumulate(Telemetry::LAZYLOAD_IMAGE_STARTED,
+                        mLazyLoadImageStarted);
+  Telemetry::Accumulate(Telemetry::LAZYLOAD_IMAGE_NOT_VIEWPORT,
+                        mLazyLoadImageStarted -
+                            mLazyLoadImageReachViewportLoading -
+                            mLazyLoadImageReachViewportLoaded);
+  Telemetry::Accumulate(Telemetry::LAZYLOAD_IMAGE_VIEWPORT_LOADING,
+                        mLazyLoadImageReachViewportLoading);
+  Telemetry::Accumulate(Telemetry::LAZYLOAD_IMAGE_VIEWPORT_LOADED,
+                        mLazyLoadImageReachViewportLoaded);
 }
 
 void Document::SendPageUseCounters() {
@@ -15193,6 +15218,22 @@ DOMIntersectionObserver& Document::EnsureLazyLoadImageObserver() {
   return *mLazyLoadImageObserver;
 }
 
+DOMIntersectionObserver& Document::EnsureLazyLoadImageObserverViewport() {
+  if (!mLazyLoadImageObserverViewport) {
+    mLazyLoadImageObserverViewport =
+        DOMIntersectionObserver::CreateLazyLoadObserverViewport(*this);
+  }
+  return *mLazyLoadImageObserverViewport;
+}
+
+void Document::IncLazyLoadImageReachViewport(bool aLoading) {
+  if (aLoading) {
+    ++mLazyLoadImageReachViewportLoading;
+  } else {
+    ++mLazyLoadImageReachViewportLoaded;
+  }
+}
+
 void Document::NotifyLayerManagerRecreated() {
   EnumerateActivityObservers(NotifyActivityChanged);
   EnumerateSubDocuments([](Document& aSubDoc) {

dom/base/Document.h

@@ -3611,6 +3611,9 @@ class Document : public nsINode,
   // effect once per document, and so is called during document destruction.
   void ReportDocumentUseCounters();
 
+  // Report how lazyload performs for this document.
+  void ReportDocumentLazyLoadCounters();
+
   // Sends page use counters to the parent process to accumulate against the
   // top-level document.  Must be called while we still have access to our
   // WindowContext.  This method has an effect each time it is called, and we
@@ -3724,7 +3727,18 @@ class Document : public nsINode,
   DOMIntersectionObserver* GetLazyLoadImageObserver() {
     return mLazyLoadImageObserver;
   }
+  DOMIntersectionObserver* GetLazyLoadImageObserverViewport() {
+    return mLazyLoadImageObserverViewport;
+  }
   DOMIntersectionObserver& EnsureLazyLoadImageObserver();
+  DOMIntersectionObserver& EnsureLazyLoadImageObserverViewport();
+  void IncLazyLoadImageCount() { ++mLazyLoadImageCount; }
+  void DecLazyLoadImageCount() {
+    MOZ_DIAGNOSTIC_ASSERT(mLazyLoadImageCount > 0);
+    --mLazyLoadImageCount;
+  }
+  void IncLazyLoadImageStarted() { ++mLazyLoadImageStarted; }
+  void IncLazyLoadImageReachViewport(bool aLoading);
 
   // Dispatch a runnable related to the document.
   nsresult Dispatch(TaskCategory aCategory,
@@ -4710,6 +4724,19 @@ class Document : public nsINode,
   // finishes processing that script.
   uint32_t mWriteLevel;
 
+  // The amount of images that have `loading="lazy"` on the page or have loaded
+  // lazily already.
+  uint32_t mLazyLoadImageCount;
+  // Number of lazy-loaded images that we've started loading as a result of
+  // triggering the lazy-load observer threshold.
+  uint32_t mLazyLoadImageStarted;
+  // Number of lazy-loaded images that reached the viewport which were not done
+  // loading when they did so.
+  uint32_t mLazyLoadImageReachViewportLoading;
+  // Number of lazy-loaded images that reached the viewport and were done
+  // loading when they did so.
+  uint32_t mLazyLoadImageReachViewportLoaded;
+
   uint32_t mContentEditableCount;
   EditingState mEditingState;
 
@@ -5005,6 +5032,8 @@ class Document : public nsINode,
   nsTHashtable<nsPtrHashKey<DOMIntersectionObserver>> mIntersectionObservers;
 
   RefPtr<DOMIntersectionObserver> mLazyLoadImageObserver;
+  // Used to measure how effective the lazyload thresholds are.
+  RefPtr<DOMIntersectionObserver> mLazyLoadImageObserverViewport;
 
   // Stack of top layer elements.
   nsTArray<nsWeakPtr> mTopLayer;

dom/html/HTMLImageElement.cpp

@@ -352,7 +352,7 @@ nsresult HTMLImageElement::AfterSetAttr(int32_t aNameSpaceID, nsAtom* aName,
                static_cast<HTMLImageElement::Loading>(
                    aOldValue->GetEnumValue()) == Loading::Lazy &&
                !ImageState().HasState(NS_EVENT_STATE_LOADING)) {
-      StopLazyLoadingAndStartLoadIfNeeded();
+      StopLazyLoadingAndStartLoadIfNeeded(false);
     }
   } else if (aName == nsGkAtoms::src && !aValue) {
     // NOTE: regular src value changes are handled in AfterMaybeChangeAttr, so
@@ -653,8 +653,18 @@ EventStates HTMLImageElement::IntrinsicState() const {
 void HTMLImageElement::NodeInfoChanged(Document* aOldDoc) {
   nsGenericHTMLElement::NodeInfoChanged(aOldDoc);
 
+  // Unlike the LazyLoadImageObserver, the intersection observer
+  // for the viewport could contain the element even if
+  // it's not lazy-loading. For instance, the element has
+  // started to load, but haven't reached to the viewport.
+  // So here we always try to unobserve it.
+  if (auto* observer = aOldDoc->GetLazyLoadImageObserverViewport()) {
+    observer->Unobserve(*this);
+  }
+
   if (mLazyLoading) {
     aOldDoc->GetLazyLoadImageObserver()->Unobserve(*this);
+    aOldDoc->DecLazyLoadImageCount();
     mLazyLoading = false;
     SetLazyLoading();
   }
@@ -1256,10 +1266,9 @@ void HTMLImageElement::SetLazyLoading() {
     return;
   }
 
-  // There (maybe) is a race condition that we have no LazyLoadImageObserver
-  // when the root document has been removed from the docshell.
-  // In the case we don't need to worry about lazy-loading.
-  OwnerDoc()->EnsureLazyLoadImageObserver().Observe(*this);
+  doc->EnsureLazyLoadImageObserver().Observe(*this);
+  doc->EnsureLazyLoadImageObserverViewport().Observe(*this);
+  doc->IncLazyLoadImageCount();
   mLazyLoading = true;
   UpdateImageState(true);
 }
@@ -1279,13 +1288,28 @@ void HTMLImageElement::StartLoadingIfNeeded() {
   }
 }
 
-void HTMLImageElement::StopLazyLoadingAndStartLoadIfNeeded() {
+void HTMLImageElement::StopLazyLoadingAndStartLoadIfNeeded(
+    bool aFromIntersectionObserver) {
   if (!mLazyLoading) {
     return;
   }
   mLazyLoading = false;
-  OwnerDoc()->GetLazyLoadImageObserver()->Unobserve(*this);
+  Document* doc = OwnerDoc();
+  doc->GetLazyLoadImageObserver()->Unobserve(*this);
   StartLoadingIfNeeded();
+
+  if (aFromIntersectionObserver) {
+    doc->IncLazyLoadImageStarted();
+  } else {
+    doc->DecLazyLoadImageCount();
+    doc->GetLazyLoadImageObserverViewport()->Unobserve(*this);
+  }
+}
+
+void HTMLImageElement::LazyLoadImageReachedViewport() {
+  Document* doc = OwnerDoc();
+  doc->GetLazyLoadImageObserverViewport()->Unobserve(*this);
+  doc->IncLazyLoadImageReachViewport(!Complete());
 }
 
 }  // namespace mozilla::dom

dom/html/HTMLImageElement.h

@@ -261,7 +261,8 @@ class HTMLImageElement final : public nsGenericHTMLElement,
       const nsAString& aTypeAttr, const nsAString& aMediaAttr,
       nsAString& aResult);
 
-  void StopLazyLoadingAndStartLoadIfNeeded();
+  void StopLazyLoadingAndStartLoadIfNeeded(bool aFromIntersectionObserver);
+  void LazyLoadImageReachedViewport();
 
  protected:
   virtual ~HTMLImageElement();

layout/base/tests/browser.ini

@@ -22,3 +22,7 @@ skip-if = (verify && (os == 'mac')) # bug 1627874
 support-files =
   !/gfx/layers/apz/test/mochitest/apz_test_native_event_utils.js
   !/browser/base/content/test/forms/head.js
+[browser_lazyload_telemetry.js]
+support-files =
+  file_lazyload_telemetry.html
+  image_rgrg-256x256.png

layout/base/tests/browser_lazyload_telemetry.js

@@ -0,0 +1,76 @@
+const baseURL = getRootDirectory(gTestPath).replace(
+  "chrome://mochitests/content",
+  "http://example.com"
+);
+
+const testFileURL = `${baseURL}file_lazyload_telemetry.html`;
+
+const { TelemetryTestUtils } = ChromeUtils.import(
+  "resource://testing-common/TelemetryTestUtils.jsm"
+);
+
+function dataIsReported() {
+  const snapshot = Services.telemetry.getSnapshotForHistograms("main", false)
+    .content;
+  return (
+    snapshot.LAZYLOAD_IMAGE_STARTED && snapshot.LAZYLOAD_IMAGE_STARTED.values[4]
+  );
+}
+
+add_task(async function testTelemetryCollection() {
+  Services.telemetry.getHistogramById("LAZYLOAD_IMAGE_TOTAL").clear();
+  Services.telemetry.getHistogramById("LAZYLOAD_IMAGE_STARTED").clear();
+  Services.telemetry.getHistogramById("LAZYLOAD_IMAGE_NOT_VIEWPORT").clear();
+  Services.telemetry
+    .getHistogramById("LAZYLOAD_IMAGE_VIEWPORT_LOADING")
+    .clear();
+  Services.telemetry.getHistogramById("LAZYLOAD_IMAGE_VIEWPORT_LOADED").clear();
+
+  const testTab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    testFileURL,
+    true
+  );
+
+  await SpecialPowers.spawn(
+    testTab.linkedBrowser.browsingContext,
+    [],
+    async () => {
+      const image2 = content.document.getElementById("image2");
+      image2.scrollIntoView();
+
+      await new Promise(resolve => {
+        content.requestAnimationFrame(() => {
+          content.requestAnimationFrame(resolve);
+        });
+      });
+    }
+  );
+
+  gBrowser.removeTab(testTab);
+
+  await BrowserTestUtils.waitForCondition(dataIsReported);
+
+  const snapshot = Services.telemetry.getSnapshotForHistograms("main", false)
+    .content;
+
+  // Ensures we have 4 lazyload images.
+  is(snapshot.LAZYLOAD_IMAGE_TOTAL.values[4], 1, "total images");
+  // All 4 images should be lazy-loaded.
+  is(snapshot.LAZYLOAD_IMAGE_STARTED.values[4], 1, "started to load");
+  // The last image didn't reach to the viewport.
+  is(
+    snapshot.LAZYLOAD_IMAGE_NOT_VIEWPORT.values[1],
+    1,
+    "images didn't reach viewport"
+  );
+  // The sum of the images that reached to the viewport
+  // should be three. This includes all images except
+  // the last one.
+  is(
+    snapshot.LAZYLOAD_IMAGE_VIEWPORT_LOADING.sum +
+      snapshot.LAZYLOAD_IMAGE_VIEWPORT_LOADED.sum,
+    3,
+    "images reached viewport"
+  );
+});

layout/base/tests/file_lazyload_telemetry.html

@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+  <body>
+    <img id="image1" src="image_rgrg-256x256.png" loading="lazy" style="display:block; width:100px; height:50vh; margin-bottom: 1px;">
+    <img id="image2" src="image_rgrg-256x256.png" loading="lazy" style="display:block; width:100px; height:50vh; margin-bottom: 1px;">
+    <img id="image3" src="image_rgrg-256x256.png" loading="lazy" style="display:block; width:100px; height:50vh; margin-bottom: 1px;">
+    <img id="image4" src="image_rgrg-256x256.png" loading="lazy" style="display:block; width:100px; height:50vh; margin-bottom: 1px;">
+  </body>
+</html>

toolkit/components/telemetry/Histograms.json

@@ -4768,6 +4768,66 @@
     "releaseChannelCollection": "opt-out",
     "description": "Number of tabs opened across all windows, collected at most every 5 minutes whenever the user interacts with the browser in the following ways: open tab/window, page load."
   },
+  "LAZYLOAD_IMAGE_TOTAL": {
+    "record_in_processes": ["main", "content"],
+    "products": ["firefox"],
+    "alert_emails": ["sefeng@mozilla.com"],
+    "bug_numbers": [1687358],
+    "expires_in_version": "never",
+    "kind": "exponential",
+    "high": 2000,
+    "n_buckets": 100,
+    "releaseChannelCollection": "opt-out",
+    "description": "The amount of images that have `loading='lazy'` on the page or have loaded lazily already."
+  },
+  "LAZYLOAD_IMAGE_STARTED": {
+    "record_in_processes": ["main", "content"],
+    "products": ["firefox"],
+    "alert_emails": ["sefeng@mozilla.com"],
+    "bug_numbers": [1687358],
+    "expires_in_version": "never",
+    "kind": "exponential",
+    "high": 2000,
+    "n_buckets": 100,
+    "releaseChannelCollection": "opt-out",
+    "description": "Number of lazy-loaded images that we've started loading as a result of triggering the lazy-load observer threshold."
+  },
+  "LAZYLOAD_IMAGE_NOT_VIEWPORT": {
+    "record_in_processes": ["main", "content"],
+    "products": ["firefox"],
+    "alert_emails": ["sefeng@mozilla.com"],
+    "bug_numbers": [1687358],
+    "expires_in_version": "never",
+    "kind": "exponential",
+    "high": 2000,
+    "n_buckets": 100,
+    "releaseChannelCollection": "opt-out",
+    "description": "Number of lazy-loaded images that were started to load but didn't reach to the viewport eventually"
+  },
+  "LAZYLOAD_IMAGE_VIEWPORT_LOADING": {
+    "record_in_processes": ["main", "content"],
+    "products": ["firefox"],
+    "alert_emails": ["sefeng@mozilla.com"],
+    "bug_numbers": [1687358],
+    "expires_in_version": "never",
+    "kind": "exponential",
+    "high": 2000,
+    "n_buckets": 100,
+    "releaseChannelCollection": "opt-out",
+    "description": "Number of lazy-loaded images that reached the viewport which were not done loading when they did so."
+  },
+  "LAZYLOAD_IMAGE_VIEWPORT_LOADED": {
+    "record_in_processes": ["main", "content"],
+    "products": ["firefox"],
+    "alert_emails": ["sefeng@mozilla.com"],
+    "bug_numbers": [1687358],
+    "expires_in_version": "never",
+    "kind": "exponential",
+    "high": 2000,
+    "n_buckets": 100,
+    "releaseChannelCollection": "opt-out",
+    "description": "Number of lazy-loaded images that reached the viewport and were done loading when they did so."
+  },
   "LOADED_TAB_COUNT": {
     "record_in_processes": ["main"],
     "products": ["firefox"],