[Blink] Display images on a dark background

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

 /*
  * Copyright (C) 2006, 2007, 2008, 2010 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 #include "core/html/ImageDocument.h"
 
 #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"
 #include "core/fetch/ImageResource.h"
 #include "core/frame/FrameHost.h"
 #include "core/frame/FrameView.h"
 #include "core/frame/LocalDOMWindow.h"
 #include "core/frame/LocalFrame.h"
 #include "core/frame/Settings.h"
 #include "core/frame/UseCounter.h"
@@ skipping 126 matching lines @@
       String fileName =
           decodeURLEscapeSequences(document()->url().lastPathComponent());
       if (fileName.isEmpty())
         fileName = document()->url().host();
       document()->setTitle(imageTitle(fileName, size));
       if (isDetached())
         return;
     }
 
     document()->imageUpdated();
+    document()->imageLoaded();
   }
 
   if (!isDetached())
     document()->finishedParsing();
 }
 
 // --------
 
 ImageDocument::ImageDocument(const DocumentInit& initializer)
     : HTMLDocument(initializer, ImageDocumentClass),
       m_divElement(nullptr),
       m_imageElement(nullptr),
       m_imageSizeIsKnown(false),
       m_didShrinkImage(false),
       m_shouldShrinkImage(shouldShrinkToFit()),
+      m_imageIsLoaded(false),
       m_shrinkToFitMode(frame()->settings()->viewportEnabled() ? Viewport
                                                                : Desktop) {
   setCompatibilityMode(QuirksMode);
   lockCompatibilityMode();
   UseCounter::count(*this, UseCounter::ImageDocument);
   if (!isInMainFrame())
     UseCounter::count(*this, UseCounter::ImageDocumentInFrame);
 }
 
 DocumentParser* ImageDocument::createParser() {
@@ skipping 11 matching lines @@
   HTMLHeadElement* head = HTMLHeadElement::create(*this);
   HTMLMetaElement* meta = HTMLMetaElement::create(*this);
   meta->setAttribute(nameAttr, "viewport");
   meta->setAttribute(contentAttr, "width=device-width, minimum-scale=0.1");
   head->appendChild(meta);
 
   HTMLBodyElement* body = HTMLBodyElement::create(*this);
 
   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,
                                "display: flex;"
                                "flex-direction: column;"
                                "justify-content: center;"
                                "align-items: center;"
                                "min-height: min-content;"
                                "min-width: min-content;"
                                "height: 100%;"
                                "width: 100%;");
     HTMLContentElement* content = HTMLContentElement::create(*this);
     m_divElement->appendChild(content);
 
     ShadowRoot& shadowRoot = body->ensureUserAgentShadowRoot();
     shadowRoot.appendChild(m_divElement);
   } else {
     body->setAttribute(styleAttr, "margin: 0px;");
   }
 
   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());
   if (loader() && m_imageElement->cachedImage())
     m_imageElement->cachedImage()->responseReceived(loader()->response(),
                                                     nullptr);
 
   if (shouldShrinkToFit()) {
     // 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);
   rootElement->appendChild(body);
 }
 
 float ImageDocument::scale() const {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   if (!m_imageElement || m_imageElement->document() != this)
     return 1.0f;
@@ skipping 63 matching lines @@
     float scrollX =
         imageX / scale - static_cast<float>(frame()->view()->width()) / 2;
     float scrollY =
         imageY / scale - static_cast<float>(frame()->view()->height()) / 2;
 
     frame()->view()->layoutViewportScrollableArea()->setScrollOffset(
         ScrollOffset(scrollX, scrollY), ProgrammaticScroll);
   }
 }
 
+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);
 
   if (m_imageSizeIsKnown)
     return;
 
   updateStyleAndLayoutTree();
   if (!m_imageElement->cachedImage() ||
       m_imageElement->cachedImage()
           ->imageSize(LayoutObject::shouldRespectImageOrientation(
@@ skipping 64 matching lines @@
     // screen when the scale is minimum.
     int maxWidth = std::min(imageSize.width().toInt(), viewportWidth * 10);
     int divWidth = std::max(viewportWidth, maxWidth);
     m_divElement->setInlineStyleProperty(CSSPropertyWidth, divWidth,
                                          CSSPrimitiveValue::UnitType::Pixels);
 
     // Explicitly set the height of the <div> containing the <img> so that it
     // 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;
   }
 
   bool fitsInWindow = imageFitsInWindow();
 
   // If the image has been explicitly zoomed in, restore the cursor if the image
   // fits and set it to a zoom out cursor if the image doesn't fit
   if (!m_shouldShrinkImage) {
     if (fitsInWindow)
       m_imageElement->removeInlineStyleProperty(CSSPropertyCursor);
@@ skipping 42 matching lines @@
 }
 
 // --------
 
 void ImageEventListener::handleEvent(ExecutionContext*, Event* event) {
   if (event->type() == EventTypeNames::resize) {
     m_doc->windowSizeChanged();
   } 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();
   }
 }
 
 bool ImageEventListener::operator==(const EventListener& listener) const {
   if (const ImageEventListener* imageEventListener =
           ImageEventListener::cast(&listener))
     return m_doc == imageEventListener->m_doc;
   return false;
 }
 
 }  // namespace blink