From 0612246b04c12c10929f809c3c5a56da0780f0c1 Mon Sep 17 00:00:00 2001
From: monikamaheshwari <monikamaheshwari1996@gmail.com>
Date: Sat, 27 Apr 2019 09:15:22 -0400
Subject: Bug 1422680 - simplify aboutReader.css font-size classes using CSS
 variables r=Gijs

---
 toolkit/components/reader/AboutReader.jsm |  9 +++-----
 toolkit/themes/shared/aboutReader.css     | 38 ++-----------------------------
 2 files changed, 5 insertions(+), 42 deletions(-)

(limited to 'toolkit')

diff --git a/toolkit/components/reader/AboutReader.jsm b/toolkit/components/reader/AboutReader.jsm
index 6ec959eba..4cc9d6750 100644
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -276,13 +276,10 @@ AboutReader.prototype = {
   },
 
   _setFontSize(newFontSize) {
-    let containerClasses = this._containerElement.classList;
-
-    if (this._fontSize > 0)
-      containerClasses.remove("font-size" + this._fontSize);
-
     this._fontSize = newFontSize;
-    containerClasses.add("font-size" + this._fontSize);
+    let size = (10 + 2 * this._fontSize) + "px";
+
+    this._containerElement.style.setProperty("--font-size", size);
     return AsyncPrefs.set("reader.font_size", this._fontSize);
   },
 
diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css
index e685cf69f..ff8f27565 100644
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -47,44 +47,10 @@ body.serif .remove-button  {
 }
 
 .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 {
-- 
cgit v1.2.3