[Blink] Display images in the center of the screen

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 fbd45ecc7f12271702235af0f334d11ac0a1cc19..5faa8988c819a6d0b73e2a1798d5930d1f1234d5 100644
--- a/third_party/WebKit/Source/core/html/ImageDocument.cpp
+++ b/third_party/WebKit/Source/core/html/ImageDocument.cpp
@@ -38,6 +38,8 @@
 #include "core/frame/UseCounter.h"
 #include "core/frame/VisualViewport.h"
 #include "core/html/HTMLBodyElement.h"
+#include "core/html/HTMLContentElement.h"
+#include "core/html/HTMLDivElement.h"
 #include "core/html/HTMLHeadElement.h"
 #include "core/html/HTMLHtmlElement.h"
 #include "core/html/HTMLImageElement.h"
@@ -212,12 +214,44 @@ void ImageDocument::createDocumentStructure() {
   head->appendChild(meta);
 
   HTMLBodyElement* body = HTMLBodyElement::create(*this);
-  body->setAttribute(styleAttr, "margin: 0px;");
+
+  if (shouldShrinkToFit()) {
+    // Display the image prominently in the middle of the viewport.
+    body->setAttribute(styleAttr,
+                       "margin: 0px;"
+                       "background: black;");
+
+    // See w3c example on how to centering an element:
+    // https://www.w3.org/Style/Examples/007/center.en.html
+    HTMLDivElement* div = HTMLDivElement::create(Node::document());
+    div->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(Node::document());
+    div->appendChild(content);
+
+    ShadowRoot& shadowRoot = body->ensureUserAgentShadowRoot();
+    shadowRoot.appendChild(div);
+  } else {
+    body->setAttribute(styleAttr, "margin: 0px;");
+  }
 
   willInsertBody();
 
   m_imageElement = HTMLImageElement::create(*this);
-  m_imageElement->setAttribute(styleAttr, "-webkit-user-select: none");
+  if (shouldShrinkToFit() && m_shrinkToFitMode == Viewport) {
+    m_imageElement->setAttribute(styleAttr,
+                                 "-webkit-user-select: none;"
+                                 "max-width: 100%;");
+  } else {
+    m_imageElement->setAttribute(styleAttr, "-webkit-user-select: none;");
+  }
   m_imageElement->setLoadingImageDocument();
   m_imageElement->setSrc(url().getString());
   body->appendChild(m_imageElement.get());
@@ -363,22 +397,9 @@ bool ImageDocument::imageFitsInWindow() const {
 
 void ImageDocument::windowSizeChanged() {
   if (!m_imageElement || !m_imageSizeIsKnown ||
-      m_imageElement->document() != this)
+      m_imageElement->document() != this || m_shrinkToFitMode == Viewport)
     return;
 
-  if (m_shrinkToFitMode == Viewport) {
-    // For huge images, minimum-scale=0.1 is still too big on small screens.
-    // Set max-width so that the image will shrink to fit the width of the
-    // screen when the scale is minimum.  Don't shrink height to fit because we
-    // use width=device-width in viewport meta tag, and expect a full-width
-    // reading mode for normal-width-huge-height images.

[esprehn, 2016/10/08 03:09:19]

Why don't we need this now?

[gone, 2016/10/10 22:01:01]

Turns out we do...  I tested a 16k x 1k image this morning (goo.gl/qPYwHI) and
found that the patch doesn't allow zooming in as much as we used to.  The main
issue is that the original code allowed the image to be 10x the viewport's
width, which didn't matter because it was hugging the top-left of the screen and
no one would notice.  With my patch, however, the max-width of the image is
capped to the viewport's width, which means you can't zoom into the image as
closely.

I've been flailing about with various tweaks to the HTML, but usually the height
of the parent div is set incorrectly, resulting in the image being vertically
centered inside the div at the top of the page.  Any advice on how to tweak the
DOM for this case would be welcome.

-    int viewportWidth = frame()->host()->visualViewport().size().width();
-    m_imageElement->setInlineStyleProperty(CSSPropertyMaxWidth,
-                                           viewportWidth * 10,
-                                           CSSPrimitiveValue::UnitType::Pixels);
-    return;
-  }
-
   bool fitsInWindow = imageFitsInWindow();
 
   // If the image has been explicitly zoomed in, restore the cursor if the image