[Blink] Display images on a dark background

third_party/WebKit/Source/core/html/ImageDocument.cpp

Index: third_party/WebKit/Source/core/html/ImageDocument.cpp
diff --git a/third_party/WebKit/Source/core/html/ImageDocument.cpp b/third_party/WebKit/Source/core/html/ImageDocument.cpp
index a3d63fca4c7b905591e9d751fec82c526f22ccf4..d9ad3042610aab4a58758295ac99306b5005f54d 100644
--- a/third_party/WebKit/Source/core/html/ImageDocument.cpp
+++ b/third_party/WebKit/Source/core/html/ImageDocument.cpp
@@ -26,6 +26,7 @@
 
 #include "bindings/core/v8/ExceptionStatePlaceholder.h"
 #include "core/HTMLNames.h"
+#include "core/dom/ExecutionContextTask.h"
 #include "core/dom/RawDataDocumentParser.h"
 #include "core/events/EventListener.h"
 #include "core/events/MouseEvent.h"
@@ -172,6 +173,7 @@ void ImageDocumentParser::finish() {
     }
 
     document()->imageUpdated();
+    document()->imageLoaded();
   }
 
   if (!isDetached())
@@ -187,6 +189,7 @@ ImageDocument::ImageDocument(const DocumentInit& initializer)
       m_imageSizeIsKnown(false),
       m_didShrinkImage(false),
       m_shouldShrinkImage(shouldShrinkToFit()),
+      m_imageIsLoaded(false),
       m_shrinkToFitMode(frame()->settings()->viewportEnabled() ? Viewport
                                                                : Desktop) {
   setCompatibilityMode(QuirksMode);
@@ -218,9 +221,9 @@ void ImageDocument::createDocumentStructure() {
 
   if (shouldShrinkToFit()) {
     // Display the image prominently centered in the frame.
-    body->setAttribute(styleAttr, "margin: 0px;");
+    body->setAttribute(styleAttr, "margin: 0px; background: #0e0e0e;");
 
-    // See w3c example on how to centering an element:
+    // See w3c example on how to center an element:
     // https://www.w3.org/Style/Examples/007/center.en.html
     m_divElement = HTMLDivElement::create(*this);
     m_divElement->setAttribute(styleAttr,
@@ -243,12 +246,8 @@ void ImageDocument::createDocumentStructure() {
 
   willInsertBody();
 
-  StringBuilder imageStyle;
-  imageStyle.append("-webkit-user-select: none;");
-  if (shouldShrinkToFit() && m_shrinkToFitMode == Viewport)
-    imageStyle.append("max-width: 100%");
   m_imageElement = HTMLImageElement::create(*this);
-  m_imageElement->setAttribute(styleAttr, imageStyle.toAtomicString());
+  updateImageStyle();
   m_imageElement->setLoadingImageDocument();
   m_imageElement->setSrc(url().getString());
   body->appendChild(m_imageElement.get());
@@ -260,9 +259,16 @@ void ImageDocument::createDocumentStructure() {
     // Add event listeners
     EventListener* listener = ImageEventListener::create(this);
     if (LocalDOMWindow* domWindow = this->domWindow())
-      domWindow->addEventListener("resize", listener, false);
-    if (m_shrinkToFitMode == Desktop)
-      m_imageElement->addEventListener("click", listener, false);
+      domWindow->addEventListener(EventTypeNames::resize, listener, false);
+
+    if (m_shrinkToFitMode == Desktop) {
+      m_imageElement->addEventListener(EventTypeNames::click, listener, false);
+    } else if (m_shrinkToFitMode == Viewport) {
+      m_imageElement->addEventListener(EventTypeNames::touchend, listener,
+                                       false);
+      m_imageElement->addEventListener(EventTypeNames::touchcancel, listener,
+                                       false);
+    }
   }
 
   rootElement->appendChild(head);
@@ -346,6 +352,69 @@ void ImageDocument::imageClicked(int x, int y) {
   }
 }
 
+static void updateDocumentImageStyle(ExecutionContext* context) {
+  // Shouldn't be anything except an ImageDocument if |context| is a Document.
+  ImageDocument* document = static_cast<ImageDocument*>(toDocument(context));
+  document->updateImageStyle();
+}
+
+void ImageDocument::imageLoaded() {
+  m_imageIsLoaded = true;
+  postTask(BLINK_FROM_HERE, createSameThreadTask(&updateDocumentImageStyle),

[pdr., 2016/11/01 06:54:56]

This seems reasonable to me if we don't have another way (I agree with your
comment about document not being safe to touch).

We use width=device-width and explicitly set the image size... why can't we
compute the initial scale ourselves before it goes through to the visual
viewport? I played around with various image sizes and window sizes and I think
it's just std::min(viewportWidth, viewportHeight) / std::min(divWidth,
divHeight). This seemed to work in a few simple tests.

[gone, 2016/11/02 18:42:20]

Got rid of the task and tried looking at more flags when this function is
called.  Essentially I initialize the checker size when the image finishes
loading, but don't dynamically change it until the page has finished parsing.

Been testing this patch using the images on
https://inadequatelycaffeinated.appspot.com/clank/download_tests/download_tes...

They all seem to be fine if i just work with the divWidth; I'm hesitant to
use the divHeight because viewport height doesn't account for really tall
images.

+           "updateImageStyle");
+}
+
+void ImageDocument::updateImageStyle() {
+  StringBuilder imageStyle;

[pdr., 2016/11/01 06:54:56]

Because this is called on every touch end/cancel event, WDYT of a TODO (for
future folks, not necessarily you) to avoid updates when the resulting style
doesn't change?

Something like:
// TODO(dfalcantara): Avoid no-op style changes to avoid unnecessary style churn
and repaints.

[gone, 2016/11/02 18:42:20]

WDYT about this version, where I compare the two style strings?

+  imageStyle.append("-webkit-user-select: none;");
+  if (shouldShrinkToFit()) {
+    if (m_shrinkToFitMode == Viewport) {
+      imageStyle.append("max-width: 100%;");
+    }
+
+    // Once the image has fully loaded, it is displayed atop a checkerboard to
+    // show transparency more faithfully.  The pattern is generated via CSS.
+    if (m_imageIsLoaded) {
+      // The base square size is set to 10 because it rounds nicely for both the
+      // minimum scale (0.1) and maximum scale (5.0).
+      double checkerSize = 10.0;
+
+      if (m_shrinkToFitMode == Viewport) {
+        // To ensure the checker pattern is visible for large images in
+        // viewports, the checker size must be dynamically adjusted to account
+        // for how much the page is currently being scaled.
+        double scale = frame()->host()->visualViewport().scale();
+        checkerSize = std::max(1.0, checkerSize / scale);
+      }
+
+      int roundedSize = static_cast<int>(round(checkerSize));
+      int tileSize = roundedSize * 2;
+
+      imageStyle.append("background-position: 0px 0px, ");
+      imageStyle.append(AtomicString::number(roundedSize));
+      imageStyle.append("px ");
+      imageStyle.append(AtomicString::number(roundedSize));
+      imageStyle.append("px;");
+
+      imageStyle.append("background-size: ");
+      imageStyle.append(AtomicString::number(tileSize));
+      imageStyle.append("px ");
+      imageStyle.append(AtomicString::number(tileSize));
+      imageStyle.append("px;");
+
+      imageStyle.append(
+          "background-color: white;"
+          "background-image:"
+          "linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, "
+          "#eee 75%, #eee 100%),"
+          "linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, "
+          "#eee 75%, #eee 100%);");
+    }
+  }
+
+  m_imageElement->setAttribute(styleAttr, imageStyle.toAtomicString());
+}
+
 void ImageDocument::imageUpdated() {
   DCHECK(m_imageElement);
 
@@ -430,9 +499,10 @@ void ImageDocument::windowSizeChanged() {
     // can display the full image without shrinking it, allowing a full-width
     // reading mode for normal-width-huge-height images.
     int divHeight = std::max(imageSize.height().toInt(),
-                             (int)(divWidth / viewportAspectRatio));
+                             static_cast<int>(divWidth / viewportAspectRatio));
     m_divElement->setInlineStyleProperty(CSSPropertyHeight, divHeight,
                                          CSSPrimitiveValue::UnitType::Pixels);
+    updateImageStyle();
     return;
   }
 
@@ -495,6 +565,8 @@ void ImageEventListener::handleEvent(ExecutionContext*, Event* event) {
   } else if (event->type() == EventTypeNames::click && event->isMouseEvent()) {
     MouseEvent* mouseEvent = toMouseEvent(event);
     m_doc->imageClicked(mouseEvent->x(), mouseEvent->y());
+  } else if (event->isTouchEvent()) {
+    m_doc->updateImageStyle();
   }
 }