Bug 1146373 - Don't resize reader view images in JS. r=Gijs
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Mon, 23 Mar 2015 16:55:26 -0700
changeset 264781 47d3cee563e594e1a4ba818f43c0362e30330d8f
parent 264780 f4cfd1e29e8a25daa24ea3966b38dce6b2bb39e4
child 264782 2918aa7b51ca7cb59ccf51fdc382c32228b19d94
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1146373
milestone39.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1146373 - Don't resize reader view images in JS. r=Gijs
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
@@ -613,49 +613,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;