Bug 1149520 - Move the font-size change to the container, so as not to repaint the toolbar. r=jaws, r=margaret
authorBlake Winton <bwinton@latte.ca>
Tue, 07 Apr 2015 13:43:57 -0400
changeset 238177 624b3ac9abf6581fc7ffc140cb501bc1e9e238be
parent 238176 0a0b4a5cd85857c402f4ad1b6718a6491b8527ae
child 238178 77303df92debade87a0c412fbf3eeb8b372d5a32
push id58133
push userryanvm@gmail.com
push dateWed, 08 Apr 2015 16:59:36 +0000
treeherdermozilla-inbound@8911c111a6ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, margaret
bugs1149520
milestone40.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 1149520 - Move the font-size change to the container, so as not to repaint the toolbar. r=jaws, r=margaret
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/AboutReader.jsm
toolkit/components/reader/content/aboutReader.html
toolkit/themes/windows/global/aboutReader.css
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -69,17 +69,17 @@ body {
   font-size: 26px;
 }
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 .header {
   text-align: start;
   display: none;
 }
 
 .domain,
@@ -96,17 +96,17 @@ body {
 
 .domain-border {
   margin-top: 15px;
   border-bottom: 1.5px solid #777777;
   width: 50%;
 }
 
 .header > h1 {
-  font-size: 1.33rem;
+  font-size: 1.33em;
   font-weight: 700;
   line-height: 1.1em;
   width: 100%;
   margin: 0px;
   margin-top: 32px;
   margin-bottom: 16px;
   padding: 0px;
 }
@@ -141,26 +141,26 @@ body {
 
 .dark > .container > .header > .credits {
   color: #aaaaaa;
 }
 
 /* This covers caption, domain, and credits
    texts in the reader UI */
 
-.content .wp-caption-text,
-.content figcaption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption,
 .header > .domain,
 .header > .credits {
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
+  font-size: 1em;
 }
 
 .content a {
   text-decoration: underline !important;
   font-weight: normal;
 }
 
 .content a,
@@ -170,17 +170,17 @@ body {
   color: #00acff !important;
 }
 
 .content * {
   max-width: 100% !important;
   height: auto !important;
 }
 
-.content p {
+#moz-reader-content p {
   line-height: 1.4em !important;
   margin: 0px !important;
   margin-bottom: 20px !important;
 }
 
 /* Covers all images showing edge-to-edge using a 
    an optional caption text */
 .content .wp-caption,
@@ -253,18 +253,18 @@ body {
   border-left-color: #d0d0d0 !important;
 }
 
 .dark > .container > .content blockquote {
   color: #aaaaaa !important;
   border-left-color: #777777 !important;
 }
 
-.content ul,
-.content ol {
+#moz-reader-content ul,
+#moz-reader-content ol {
   margin: 0px !important;
   margin-bottom: 20px !important;
   padding: 0px !important;
   line-height: 1.5em;
 }
 
 .content ul {
   -moz-padding-start: 30px !important;
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -43,17 +43,17 @@ let AboutReader = function(mm, win, arti
   if (articlePromise) {
     this._articlePromise = articlePromise;
   }
 
   this._headerElementRef = Cu.getWeakReference(doc.getElementById("reader-header"));
   this._domainElementRef = Cu.getWeakReference(doc.getElementById("reader-domain"));
   this._titleElementRef = Cu.getWeakReference(doc.getElementById("reader-title"));
   this._creditsElementRef = Cu.getWeakReference(doc.getElementById("reader-credits"));
-  this._contentElementRef = Cu.getWeakReference(doc.getElementById("reader-content"));
+  this._contentElementRef = Cu.getWeakReference(doc.getElementById("moz-reader-content"));
   this._toolbarElementRef = Cu.getWeakReference(doc.getElementById("reader-toolbar"));
   this._messageElementRef = Cu.getWeakReference(doc.getElementById("reader-message"));
 
   this._scrollOffset = win.pageYOffset;
 
   doc.addEventListener("click", this, false);
 
   win.addEventListener("unload", this, false);
@@ -349,23 +349,23 @@ AboutReader.prototype = {
     } else {
       classes.remove("on");
       // When off, action tip is "open".
       this._setButtonTip("list-button", "aboutReader.toolbar.openReadingList");
     }
   },
 
   _setFontSize: function Reader_setFontSize(newFontSize) {
-    let htmlClasses = this._doc.documentElement.classList;
+    let containerClasses = this._doc.getElementById("container").classList;
 
     if (this._fontSize > 0)
-      htmlClasses.remove("font-size" + this._fontSize);
+      containerClasses.remove("font-size" + this._fontSize);
 
     this._fontSize = newFontSize;
-    htmlClasses.add("font-size" + this._fontSize);
+    containerClasses.add("font-size" + this._fontSize);
 
     this._mm.sendAsyncMessage("Reader:SetIntPref", {
       name: "reader.font_size",
       value: this._fontSize
     });
   },
 
   _setupFontSizeButtons: function() {
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -14,17 +14,17 @@
   <div id="container" class="container">
     <div id="reader-header" class="header">
       <a id="reader-domain" class="domain"></a>
       <div class="domain-border"></div>
       <h1 id="reader-title"></h1>
       <div id="reader-credits" class="credits"></div>
     </div>
 
-    <div id="reader-content" class="content">
+    <div id="moz-reader-content" class="content">
     </div>
 
     <div id="reader-message" class="message">
     </div>
 
     <div id="reader-footer" class="footer">
       <button id="remove-button" class="button remove-button"/>
     </div>
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -88,29 +88,29 @@ body.loaded {
 
 /* Loading/error message */
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 /* Header */
 
 .header {
   text-align: start;
   display: none;
 }
 
 .domain {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   padding-bottom: 4px;
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   text-decoration: none;
   border-bottom: 1px solid;
   color: #0095dd;
 }
 
 .light > .container > .header > .domain,
@@ -118,58 +118,58 @@ body.loaded {
   border-bottom-color: #333333;
 }
 
 .dark > .container > .header > .domain {
   border-bottom-color: #eeeeee;
 }
 
 .header > h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+  font-size: 1.33em;
+  line-height: 1.25em;
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
 .header > .credits {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   margin: 0 0 30px 0;
   padding: 0;
   font-style: italic;
 }
 
 /* Content */
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
-  line-height: 1.6rem;
+  font-size: 1em;
+  line-height: 1.6em;
 }
 
 .content h1,
 .content h2,
 .content h3 {
   font-weight: bold;
 }
 
-.content h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+#moz-reader-content h1 {
+  font-size: 1.33em;
+  line-height: 1.25em;
 }
 
-.content h2 {
-  font-size: 1.1rem;
-  line-height: 1.66rem;
+#moz-reader-content h2 {
+  font-size: 1.1em;
+  line-height: 1.51em;
 }
 
-.content h3 {
-  font-size: 1rem;
-  line-height: 1.66rem;
+#moz-reader-content h3 {
+  font-size: 1em;
+  line-height: 1.66em;
 }
 
 .content a {
   text-decoration: underline;
   font-weight: normal;
 }
 
 .content a,
@@ -203,21 +203,21 @@ body.loaded {
   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;
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption {
+  font-size: 0.9em;
+  line-height: 1.48em;
   font-style: italic;
 }
 
 .content code,
 .content pre {
   white-space: pre-wrap;
 }