LazyLoad: Add support for css background images

This CL defers the loading of CSS background images. StyleResolver
registers the element to LazyLoadImageObserver so that when the
element is scrolled near the viewport, full image will be
triggered.

The image load is deferred using ResourceFetcher::ResourceNeedsLoad()
and the full image load is triggered via ResourceFetcher::StartLoad().

Bug: 846170
Change-Id: If90bf69e4583e4d8ff8006485c10229c3dca22f2
Reviewed-on: https://chromium-review.googlesource.com/1161208
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org>
Reviewed-by: Nate Chapin <japhet@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585705}

third_party/blink/renderer/core/css/css_image_value.cc

@@ -78,8 +78,9 @@ StyleImage* CSSImageValue::CacheImage(
         document.GetFrame()->IsClientLoFiAllowed(params.GetResourceRequest())) {
       params.SetClientLoFiPlaceholder();
     }
-
-    cached_image_ = StyleFetchedImage::Create(document, params);
+    cached_image_ = StyleFetchedImage::Create(
+        document, params,
+        image_request_optimization == FetchParameters::kDeferImageLoad);
   }
 
   return cached_image_.Get();

third_party/blink/renderer/core/css/resolver/element_style_resources.cc

@@ -28,7 +28,10 @@
 #include "third_party/blink/renderer/core/css/css_uri_value.h"
 #include "third_party/blink/renderer/core/css_property_names.h"
 #include "third_party/blink/renderer/core/dom/document.h"
+#include "third_party/blink/renderer/core/dom/element.h"
 #include "third_party/blink/renderer/core/dom/tree_scope.h"
+#include "third_party/blink/renderer/core/frame/local_frame.h"
+#include "third_party/blink/renderer/core/html/lazy_load_image_observer.h"
 #include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style/content_data.h"
 #include "third_party/blink/renderer/core/style/cursor_data.h"
@@ -47,9 +50,9 @@
 
 namespace blink {
 
-ElementStyleResources::ElementStyleResources(Document& document,
+ElementStyleResources::ElementStyleResources(Element& element,
                                              float device_scale_factor)
-    : document_(&document), device_scale_factor_(device_scale_factor) {}
+    : element_(&element), device_scale_factor_(device_scale_factor) {}
 
 StyleImage* ElementStyleResources::GetStyleImage(CSSPropertyID property,
                                                  const CSSValue& value) {
@@ -93,7 +96,7 @@ StyleImage* ElementStyleResources::CachedOrPendingFromValue(
     pending_image_properties_.insert(property);
     return StylePendingImage::Create(value);
   }
-  value.RestoreCachedResourceIfNeeded(*document_);
+  value.RestoreCachedResourceIfNeeded(element_->GetDocument());
   return value.CachedImage();
 }
 
@@ -101,7 +104,7 @@ SVGResource* ElementStyleResources::GetSVGResourceFromValue(
     TreeScope& tree_scope,
     const CSSURIValue& value,
     AllowExternal allow_external) const {
-  if (value.IsLocal(*document_)) {
+  if (value.IsLocal(element_->GetDocument())) {
     SVGTreeScopeResources& tree_scope_resources =
         tree_scope.EnsureSVGTreeScopedResources();
     AtomicString decoded_fragment(
@@ -125,7 +128,7 @@ void ElementStyleResources::LoadPendingSVGResources(
     ReferenceFilterOperation& reference_operation =
         ToReferenceFilterOperation(*filter_operation);
     if (SVGResource* resource = reference_operation.Resource())
-      resource->Load(*document_);
+      resource->Load(element_->GetDocument());
   }
 }
 
@@ -145,8 +148,8 @@ StyleImage* ElementStyleResources::LoadPendingImage(
     FetchParameters::ImageRequestOptimization image_request_optimization,
     CrossOriginAttributeValue cross_origin) {
   if (CSSImageValue* image_value = pending_image->CssImageValue()) {
-    return image_value->CacheImage(*document_, image_request_optimization,
-                                   cross_origin);
+    return image_value->CacheImage(element_->GetDocument(),
+                                   image_request_optimization, cross_origin);
   }
 
   if (CSSPaintValue* paint_value = pending_image->CssPaintValue()) {
@@ -157,14 +160,14 @@ StyleImage* ElementStyleResources::LoadPendingImage(
 
   if (CSSImageGeneratorValue* image_generator_value =
           pending_image->CssImageGeneratorValue()) {
-    image_generator_value->LoadSubimages(*document_);
+    image_generator_value->LoadSubimages(element_->GetDocument());
     return StyleGeneratedImage::Create(*image_generator_value);
   }
 
   if (CSSImageSetValue* image_set_value = pending_image->CssImageSetValue()) {
-    return image_set_value->CacheImage(*document_, device_scale_factor_,
-                                       image_request_optimization,
-                                       cross_origin);
+    return image_set_value->CacheImage(
+        element_->GetDocument(), device_scale_factor_,
+        image_request_optimization, cross_origin);
   }
 
   NOTREACHED();
@@ -195,13 +198,28 @@ void ElementStyleResources::LoadPendingImages(ComputedStyle* style) {
       case CSSPropertyBackgroundImage: {
         for (FillLayer* background_layer = &style->AccessBackgroundLayers();
              background_layer; background_layer = background_layer->Next()) {
-          if (background_layer->GetImage() &&
-              background_layer->GetImage()->IsPendingImage()) {
-            background_layer->SetImage(LoadPendingImage(
-                style, ToStylePendingImage(background_layer->GetImage()),
-                BackgroundLayerMayBeSprite(*background_layer)
-                    ? FetchParameters::kNone
-                    : FetchParameters::kAllowPlaceholder));
+          StyleImage* background_image = background_layer->GetImage();
+          if (background_image && background_image->IsPendingImage()) {
+            FetchParameters::ImageRequestOptimization
+                image_request_optimization = FetchParameters::kNone;
+            if (!BackgroundLayerMayBeSprite(*background_layer)) {
+              if (element_->GetDocument()
+                      .GetFrame()
+                      ->IsLazyLoadingImageAllowed()) {
+                background_image->SetIsLazyloadPossiblyDeferred(true);
+                image_request_optimization = FetchParameters::kDeferImageLoad;
+              } else {
+                image_request_optimization = FetchParameters::kAllowPlaceholder;
+              }
+            }
+            StyleImage* new_image =
+                LoadPendingImage(style, ToStylePendingImage(background_image),
+                                 image_request_optimization);
+            if (new_image && new_image->IsImageResource() &&
+                ToStyleFetchedImage(new_image)->IsLazyloadPossiblyDeferred()) {
+              LazyLoadImageObserver::StartMonitoring(element_);
+            }
+            background_layer->SetImage(new_image);
           }
         }
         break;

third_party/blink/renderer/core/css/resolver/element_style_resources.h

@@ -42,7 +42,7 @@ class CSSImageValue;
 class CSSURIValue;
 class CSSValue;
 class ComputedStyle;
-class Document;
+class Element;
 class SVGResource;
 class StyleImage;
 class StylePendingImage;
@@ -54,7 +54,7 @@ class ElementStyleResources {
   STACK_ALLOCATED();
 
  public:
-  ElementStyleResources(Document&, float device_scale_factor);
+  ElementStyleResources(Element&, float device_scale_factor);
 
   StyleImage* GetStyleImage(CSSPropertyID, const CSSValue&);
   StyleImage* CachedOrPendingFromValue(CSSPropertyID, const CSSImageValue&);
@@ -81,7 +81,7 @@ class ElementStyleResources {
       FetchParameters::ImageRequestOptimization,
       CrossOriginAttributeValue = kCrossOriginAttributeNotSet);
 
-  Member<Document> document_;
+  Member<Element> element_;
   HashSet<CSSPropertyID> pending_image_properties_;
   float device_scale_factor_;
   DISALLOW_COPY_AND_ASSIGN(ElementStyleResources);

third_party/blink/renderer/core/css/resolver/style_resolver_state.cc

@@ -46,7 +46,7 @@ StyleResolverState::StyleResolverState(
       apply_property_to_visited_link_style_(false),
       has_dir_auto_attribute_(false),
       font_builder_(&document),
-      element_style_resources_(document, document.DevicePixelRatio()) {
+      element_style_resources_(*GetElement(), document.DevicePixelRatio()) {
   DCHECK(!!parent_style_ == !!layout_parent_style_);
 
   if (!parent_style_) {

third_party/blink/renderer/core/html/lazy_load_image_observer.cc

@@ -7,6 +7,7 @@
 #include "build/build_config.h"
 #include "third_party/blink/renderer/core/dom/document.h"
 #include "third_party/blink/renderer/core/dom/element.h"
+#include "third_party/blink/renderer/core/dom/node_computed_style.h"
 #include "third_party/blink/renderer/core/frame/local_frame.h"
 #include "third_party/blink/renderer/core/html/html_image_element.h"
 #include "third_party/blink/renderer/core/html_element_type_helpers.h"
@@ -59,6 +60,10 @@ void LazyLoadImageObserver::LoadIfNearViewport(
     if (auto* image_element = ToHTMLImageElementOrNull(element))
       image_element->LoadDeferredImage();
 
+    // Load the background image if the element has one deferred.
+    if (const ComputedStyle* style = element->GetComputedStyle())
+      style->LoadDeferredImages(element->GetDocument());
+
     lazy_load_intersection_observer_->unobserve(element);
   }
 }

third_party/blink/renderer/core/loader/resource/image_resource.cc

@@ -135,6 +135,14 @@ class ImageResource::ImageResourceInfoImpl final
                                             initiator_name);
   }
 
+  void LoadDeferredImage(ResourceFetcher* fetcher) override {
+    if (resource_->GetType() == Resource::kImage &&
+        resource_->StillNeedsLoad() &&
+        !fetcher->ShouldDeferImageLoad(resource_->Url())) {
+      fetcher->StartLoad(resource_);
+    }
+  }
+
   const Member<ImageResource> resource_;
 };
 

third_party/blink/renderer/core/loader/resource/image_resource_content.cc

@@ -65,6 +65,8 @@ class NullImageResourceInfo final
       const KURL&,
       const AtomicString& initiator_name) override {}
 
+  void LoadDeferredImage(ResourceFetcher* fetcher) override {}
+
   const KURL url_;
   const ResourceResponse response_;
 };
@@ -629,4 +631,8 @@ bool ImageResourceContent::IsCacheValidator() const {
   return info_->IsCacheValidator();
 }
 
+void ImageResourceContent::LoadDeferredImage(ResourceFetcher* fetcher) {
+  info_->LoadDeferredImage(fetcher);
+}
+
 }  // namespace blink

third_party/blink/renderer/core/loader/resource/image_resource_content.h

@@ -178,6 +178,8 @@ class CORE_EXPORT ImageResourceContent final
   bool IsAcceptableContentType();
   bool IsAcceptableCompressionRatio();
 
+  void LoadDeferredImage(ResourceFetcher* fetcher);
+
  private:
   using CanDeferInvalidation = ImageResourceObserver::CanDeferInvalidation;
 

third_party/blink/renderer/core/loader/resource/image_resource_info.h

@@ -58,6 +58,8 @@ class CORE_EXPORT ImageResourceInfo : public GarbageCollectedMixin {
       const KURL&,
       const AtomicString& initiator_name) = 0;
 
+  virtual void LoadDeferredImage(ResourceFetcher* fetcher) = 0;
+
   void Trace(blink::Visitor* visitor) override {}
 };
 

third_party/blink/renderer/core/style/computed_style.cc

@@ -52,6 +52,7 @@
 #include "third_party/blink/renderer/core/style/quotes_data.h"
 #include "third_party/blink/renderer/core/style/shadow_list.h"
 #include "third_party/blink/renderer/core/style/style_difference.h"
+#include "third_party/blink/renderer/core/style/style_fetched_image.h"
 #include "third_party/blink/renderer/core/style/style_image.h"
 #include "third_party/blink/renderer/core/style/style_inherited_variables.h"
 #include "third_party/blink/renderer/core/style/style_non_inherited_variables.h"
@@ -1019,6 +1020,18 @@ InterpolationQuality ComputedStyle::GetInterpolationQuality() const {
   return kInterpolationDefault;
 }
 
+void ComputedStyle::LoadDeferredImages(Document& document) const {
+  if (HasBackgroundImage()) {
+    for (const FillLayer* background_layer = &BackgroundLayers();
+         background_layer; background_layer = background_layer->Next()) {
+      if (StyleImage* image = background_layer->GetImage()) {
+        if (image->IsImageResource() && image->IsLazyloadPossiblyDeferred())
+          ToStyleFetchedImage(image)->LoadDeferredImage(document);
+      }
+    }
+  }
+}
+
 void ComputedStyle::ApplyTransform(
     TransformationMatrix& result,
     const LayoutSize& border_box_size,

third_party/blink/renderer/core/style/computed_style.h

@@ -2232,6 +2232,9 @@ class ComputedStyle : public ComputedStyleBase,
     return pseudo == kPseudoIdBefore || pseudo == kPseudoIdAfter;
   }
 
+  // Load the images of CSS properties that were deferred by LazyLoad.
+  void LoadDeferredImages(Document&) const;
+
  private:
   void SetVisitedLinkBackgroundColor(const StyleColor& v) {
     SetVisitedLinkBackgroundColorInternal(v);

third_party/blink/renderer/core/style/style_fetched_image.cc

@@ -34,9 +34,12 @@
 namespace blink {
 
 StyleFetchedImage::StyleFetchedImage(const Document& document,
-                                     FetchParameters& params)
+                                     FetchParameters& params,
+                                     bool is_lazyload_possibly_deferred)
     : document_(&document), url_(params.Url()) {
   is_image_resource_ = true;
+  is_lazyload_possibly_deferred_ = is_lazyload_possibly_deferred;
+
   image_ = ImageResourceContent::Fetch(params, document_->Fetcher());
   image_->AddObserver(this);
   // ResourceFetcher is not determined from StyleFetchedImage and it is
@@ -142,6 +145,13 @@ bool StyleFetchedImage::KnownToBeOpaque(const Document&,
   return image_->GetImage()->CurrentFrameKnownToBeOpaque();
 }
 
+void StyleFetchedImage::LoadDeferredImage(const Document& document) {
+  DCHECK(is_lazyload_possibly_deferred_);
+  is_lazyload_possibly_deferred_ = false;
+  document_ = &document;
+  image_->LoadDeferredImage(document_->Fetcher());
+}
+
 void StyleFetchedImage::Trace(blink::Visitor* visitor) {
   visitor->Trace(image_);
   visitor->Trace(document_);

third_party/blink/renderer/core/style/style_fetched_image.h

@@ -41,8 +41,9 @@ class StyleFetchedImage final : public StyleImage,
 
  public:
   static StyleFetchedImage* Create(const Document& document,
-                                   FetchParameters& params) {
-    return new StyleFetchedImage(document, params);
+                                   FetchParameters& params,
+                                   bool is_lazyload_deferred) {
+    return new StyleFetchedImage(document, params, is_lazyload_deferred);
   }
   ~StyleFetchedImage() override;
 
@@ -70,10 +71,14 @@ class StyleFetchedImage final : public StyleImage,
   bool KnownToBeOpaque(const Document&, const ComputedStyle&) const override;
   ImageResourceContent* CachedImage() const override;
 
+  void LoadDeferredImage(const Document& document);
+
   void Trace(blink::Visitor*) override;
 
  private:
-  StyleFetchedImage(const Document&, FetchParameters&);
+  StyleFetchedImage(const Document&,
+                    FetchParameters&,
+                    bool is_lazyload_deferred);
 
   void Dispose();
 

third_party/blink/renderer/core/style/style_image.h

@@ -139,6 +139,13 @@ class CORE_EXPORT StyleImage : public GarbageCollectedFinalized<StyleImage> {
   }
   ALWAYS_INLINE bool IsPaintImage() const { return is_paint_image_; }
 
+  bool IsLazyloadPossiblyDeferred() const {
+    return is_lazyload_possibly_deferred_;
+  }
+  void SetIsLazyloadPossiblyDeferred(bool is_lazyload_possibly_deferred) {
+    is_lazyload_possibly_deferred_ = is_lazyload_possibly_deferred;
+  }
+
   virtual void Trace(blink::Visitor* visitor) {}
 
  protected:
@@ -147,12 +154,14 @@ class CORE_EXPORT StyleImage : public GarbageCollectedFinalized<StyleImage> {
         is_pending_image_(false),
         is_generated_image_(false),
         is_image_resource_set_(false),
-        is_paint_image_(false) {}
+        is_paint_image_(false),
+        is_lazyload_possibly_deferred_(false) {}
   bool is_image_resource_ : 1;
   bool is_pending_image_ : 1;
   bool is_generated_image_ : 1;
   bool is_image_resource_set_ : 1;
   bool is_paint_image_ : 1;
+  bool is_lazyload_possibly_deferred_ : 1;
 
   FloatSize ApplyZoom(const FloatSize&, float multiplier) const;
   FloatSize ImageSizeForSVGImage(SVGImage*,

third_party/blink/renderer/platform/loader/fetch/fetch_parameters.h

@@ -60,6 +60,9 @@ class PLATFORM_EXPORT FetchParameters {
   enum ImageRequestOptimization {
     kNone = 0,          // No optimization.
     kAllowPlaceholder,  // The image is allowed to be a placeholder.
+    kDeferImageLoad,  // Defer loading the image from network. Full image might
+                      // still load if the request is already-loaded or in
+                      // memory cache.
   };
   struct ResourceWidth {
     DISALLOW_NEW();
@@ -178,7 +181,7 @@ class PLATFORM_EXPORT FetchParameters {
   // Configures the request to load an image placeholder if the request is
   // eligible (e.g. the url's protocol is HTTP, etc.). If this request is
   // non-eligible, this method doesn't modify the ResourceRequest. Calling this
-  // method sets placeholder_image_request_type_ to the appropriate value.
+  // method sets image_request_optimization_ to the appropriate value.
   void SetAllowImagePlaceholder();
 
   // Configures the request to load an image as a placeholder and sets the

third_party/blink/renderer/platform/loader/fetch/resource_fetcher.cc

@@ -410,9 +410,11 @@ bool ResourceFetcher::ResourceNeedsLoad(Resource* resource,
   // - images are disabled
   // - instructed to defer loading images from network
   if (resource->GetType() == Resource::kImage &&
-      ShouldDeferImageLoad(resource->Url()))
+      (ShouldDeferImageLoad(resource->Url()) ||
+       params.GetImageRequestOptimization() ==
+           FetchParameters::kDeferImageLoad)) {
     return false;
-
+  }
   return policy != kUse || resource->StillNeedsLoad();
 }