Bug 1422680 - simplify aboutReader.css font-size classes using CSS variables r=Gijs
authormonikamaheshwari <monikamaheshwari1996@gmail.com>
Tue, 12 Mar 2019 15:13:24 +0000
changeset 524542 a9c9368e4902276951295263be5f88f00e589346
parent 524541 285c56c2914625c8418613cdbe35436c355ea4dc
child 524543 eee6b5f77d67da4aeeb6ea34a518e6e1c3de18f0
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1422680
milestone67.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 1422680 - simplify aboutReader.css font-size classes using CSS variables r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D22994
toolkit/components/reader/AboutReader.jsm
toolkit/themes/shared/aboutReader.css
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -323,23 +323,20 @@ AboutReader.prototype = {
     this._windowUnloaded = true;
   },
 
   _onReaderClose() {
     ReaderMode.leaveReaderMode(this._mm.docShell, this._win);
   },
 
   _setFontSize(newFontSize) {
-    let containerClasses = this._containerElement.classList;
+    this._fontSize = newFontSize;
+    let size = (10 + 2 * this._fontSize) + "px";
 
-    if (this._fontSize > 0)
-      containerClasses.remove("font-size" + this._fontSize);
-
-    this._fontSize = newFontSize;
-    containerClasses.add("font-size" + this._fontSize);
+    this._containerElement.style.setProperty("--font-size", size);
     return AsyncPrefs.set("reader.font_size", this._fontSize);
   },
 
   _setupFontSizeButtons() {
     const FONT_SIZE_MIN = 1;
     const FONT_SIZE_MAX = 9;
 
     // Sample text shown in Android UI.
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -42,54 +42,20 @@ body.sans-serif .remove-button {
 }
 
 body.serif,
 body.serif .remove-button  {
   font-family: Georgia, "Times New Roman", serif;
 }
 
 .container {
+  --font-size: 12;
   max-width: 30em;
   margin: 0 auto;
-}
-
-.container.font-size1 {
-  font-size: 12px;
-}
-
-.container.font-size2 {
-  font-size: 14px;
-}
-
-.container.font-size3 {
-  font-size: 16px;
-}
-
-.container.font-size4  {
-  font-size: 18px;
-}
-
-.container.font-size5 {
-  font-size: 20px;
-}
-
-.container.font-size6 {
-  font-size: 22px;
-}
-
-.container.font-size7 {
-  font-size: 24px;
-}
-
-.container.font-size8 {
-  font-size: 26px;
-}
-
-.container.font-size9 {
-  font-size: 28px;
+  font-size: var(--font-size);
 }
 
 .container.content-width1 {
   max-width: 20em;
 }
 
 .container.content-width2 {
   max-width: 25em;