Bug 1146373 - Don't resize reader view images in JS. r=Gijs, a=sledru
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Mon, 23 Mar 2015 16:55:26 -0700
changeset 258268 180f3c3634e3
parent 258267 a2a4bbc864ad
child 258269 3e828a466ece
push id4632
push userryanvm@gmail.com
push date2015-04-06 15:16 +0000
treeherdermozilla-beta@887be7f12f1e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, sledru
bugs1146373
milestone38.0
Bug 1146373 - Don't resize reader view images in JS. r=Gijs, a=sledru
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/AboutReader.jsm
toolkit/themes/windows/global/aboutReader.css
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -192,28 +192,27 @@ body {
 }
 
 /* Images marked to be shown edge-to-edge with an
    optional captio ntext */
 .content p > img:only-child,
 .content p > a:only-child > img:only-child,
 .content .wp-caption img,
 .content figure img {
-  max-width: none !important;
-  height: auto !important;
-  display: block !important;
-  margin-top: 0px !important;
-  margin-bottom: 32px !important;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-/* If image is place inside one of these blocks
-   there's no need to add margin at the bottom */
-.content .wp-caption img,
-.content figure img {
-  margin-bottom: 0px !important;
+/* Account for body padding to make image full width */
+.content img[moz-reader-full-width] {
+  width: calc(100% + 40px);
+  margin-left: -20px;
+  margin-right: -20px;
+  max-width: none !important;
 }
 
 /* Image caption text */
 .content .caption,
 .content .wp-caption-text,
 .content figcaption {
   font-family: sans-serif;
   margin: 0px !important;
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -620,49 +620,39 @@ AboutReader.prototype = {
     link.rel = 'shortcut icon';
     link.href = faviconUrl;
 
     doc.getElementsByTagName('head')[0].appendChild(link);
   },
 
   _updateImageMargins: function Reader_updateImageMargins() {
     let windowWidth = this._win.innerWidth;
-    let contentWidth = this._contentElement.offsetWidth;
-    let maxWidthStyle = windowWidth + "px !important";
+    let bodyWidth = this._doc.body.clientWidth;
 
     let setImageMargins = function(img) {
-      if (!img._originalWidth)
-        img._originalWidth = img.offsetWidth;
-
-      let imgWidth = img._originalWidth;
-
-      // If the image is taking more than half of the screen, just make
-      // it fill edge-to-edge.
-      if (imgWidth < contentWidth && imgWidth > windowWidth * 0.55)
-        imgWidth = windowWidth;
+      // If the image is at least as wide as the window, make it fill edge-to-edge on mobile.
+      if (img.naturalWidth >= windowWidth) {
+        img.setAttribute("moz-reader-full-width", true);
+      } else {
+        img.removeAttribute("moz-reader-full-width");
+      }
 
-      let sideMargin = Math.max((contentWidth - windowWidth) / 2,
-                                (contentWidth - imgWidth) / 2);
-
-      let imageStyle = sideMargin + "px !important";
-      let widthStyle = imgWidth + "px !important";
-
-      let cssText = "max-width: " + maxWidthStyle + ";" +
-                    "width: " + widthStyle + ";" +
-                    "margin-left: " + imageStyle + ";" +
-                    "margin-right: " + imageStyle + ";";
-
-      img.style.cssText = cssText;
+      // If the image is at least half as wide as the body, center it on desktop.
+      if (img.naturalWidth >= bodyWidth/2) {
+        img.setAttribute("moz-reader-center", true);
+      } else {
+        img.removeAttribute("moz-reader-center");
+      }
     }
 
     let imgs = this._doc.querySelectorAll(this._BLOCK_IMAGES_SELECTOR);
     for (let i = imgs.length; --i >= 0;) {
       let img = imgs[i];
 
-      if (img.width > 0) {
+      if (img.naturalWidth > 0) {
         setImageMargins(img);
       } else {
         img.onload = function() {
           setImageMargins(img);
         }
       }
     }
   },
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -166,29 +166,37 @@ body {
 }
 
 .content * {
   max-width: 100%;
   height: auto;
 }
 
 .content p,
-.content img,
 .content code,
 .content pre,
 .content blockquote,
 .content ul,
 .content ol,
-.content li {
+.content li,
+.content figure,
+.content .wp-caption {
   margin: 0 0 30px 0;
 }
 
-.content .wp-caption,
-.content figure {
-  margin: 0 30px 30px 30px;
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+  display: block;
+}
+
+.content img[moz-reader-center] {
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .content .caption,
 .content .wp-caption-text,
 .content figcaption {
   font-size: 0.9rem;
   line-height: 1.33rem;
   font-style: italic;