[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
@@ skipping 182 matching lines @@
   lockCompatibilityMode();
   UseCounter::count(*this, UseCounter::ImageDocument);
   if (!isInMainFrame())
     UseCounter::count(*this, UseCounter::ImageDocumentInFrame);
 }
 
 DocumentParser* ImageDocument::createParser() {
   return ImageDocumentParser::create(this);
 }
 
+void ImageDocument::finishedParsing() {

[pdr., 2016/10/26 03:59:06]

This isn't your fault but I think the call to finishedParsing in
ImageDocumentParser is a bug.

Document::finishedParsing kicks off the DOMContentLoaded event which is
generally when the document has finished loading but resources may still be
coming in. It makes sense for HTMLViewSourceParser to call Document::finish
because there are no subresources to load, but I don't think it's right for
ImageDocumentParser. I wonder if this is related to why we weren't getting the
onload event?

What do you think of the following tweak to this patch which avoids adding a
virtual to Document?
1) Add "void ImageDocument::imageLoaded()" which changes the background.
2) In the cachedImage() conditional in ImageDocumentParser::finish(), add a call
to document()->imageLoaded().

+  Document::finishedParsing();
+
+  // Images appear on of a checkerboard background rendered via CSS.
+  // This needs to be set when the image is finished loading.
+  if (shouldShrinkToFit()) {
+    StringBuilder imageStyle;
+    imageStyle.append(m_imageElement->getAttribute(styleAttr));
+    imageStyle.append(
+        "background-position: 0px 0px, 8px 8px;"
+        "background-size: 16px 16px;"
+        "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::createDocumentStructure() {
   HTMLHtmlElement* rootElement = HTMLHtmlElement::create(*this);
   appendChild(rootElement);
   rootElement->insertedByParser();
 
   if (isStopped())
     return;  // runScriptsAtDocumentElementAvailable can detach the frame.
 
   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:
     // 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%");
+    imageStyle.append("max-width: 100%;");
   m_imageElement = HTMLImageElement::create(*this);
   m_imageElement->setAttribute(styleAttr, imageStyle.toAtomicString());
   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);
+      domWindow->addEventListener(EventTypeNames::resize, listener, false);
     if (m_shrinkToFitMode == Desktop)
-      m_imageElement->addEventListener("click", listener, false);
+      m_imageElement->addEventListener(EventTypeNames::click, 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 223 matching lines @@
 }
 
 bool ImageEventListener::operator==(const EventListener& listener) const {
   if (const ImageEventListener* imageEventListener =
           ImageEventListener::cast(&listener))
     return m_doc == imageEventListener->m_doc;
   return false;
 }
 
 }  // namespace blink