[Blink] Display images in the center of the screen

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 20 matching lines @@
 #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"
 #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"
 #include "core/html/HTMLMetaElement.h"
 #include "core/layout/LayoutObject.h"
 #include "core/loader/DocumentLoader.h"
 #include "core/loader/FrameLoader.h"
 #include "core/loader/FrameLoaderClient.h"
 #include "platform/HostWindow.h"
 #include "wtf/text/StringBuilder.h"
@@ skipping 154 matching lines @@
   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);
-  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());
   if (loader() && m_imageElement->cachedImage())
     m_imageElement->cachedImage()->responseReceived(loader()->response(),
                                                     nullptr);
 
   if (shouldShrinkToFit()) {
     // Add event listeners
     EventListener* listener = ImageEventListener::create(this);
@@ skipping 125 matching lines @@
   m_didShrinkImage = false;
 }
 
 bool ImageDocument::imageFitsInWindow() const {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   return this->scale() >= 1;
 }
 
 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
   // fits and set it to a zoom out cursor if the image doesn't fit
   if (!m_shouldShrinkImage) {
     if (fitsInWindow)
       m_imageElement->removeInlineStyleProperty(CSSPropertyCursor);
     else
       m_imageElement->setInlineStyleProperty(CSSPropertyCursor,
                                              CSSValueZoomOut);
@@ skipping 49 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