Bug 1640438 - Overhaul the RTL logic in reader mode r=Gijs

Also mirror the line height buttons on the type controls popup if the article is RTL.

Differential Revision: https://phabricator.services.mozilla.com/D76613

toolkit/components/reader/AboutReader.jsm

@@ -40,6 +40,7 @@ const zoomOnCtrl =
   Services.prefs.getIntPref("mousewheel.with_control.action", 3) == 3;
 const zoomOnMeta =
   Services.prefs.getIntPref("mousewheel.with_meta.action", 1) == 3;
+const isAppLocaleRTL = Services.locale.isAppLocaleRTL;
 
 var AboutReader = function(actor, articlePromise) {
   let win = actor.contentWindow;
@@ -56,6 +57,9 @@ var AboutReader = function(actor, articlePromise) {
   }
 
   let doc = win.document;
+  if (isAppLocaleRTL) {
+    doc.dir = "rtl";
+  }
 
   this._actor = actor;
 
@@ -205,11 +209,6 @@ var AboutReader = function(actor, articlePromise) {
     ".sepia-button": "colorschemesepia",
   };
 
-  let tbc = this._toolbarContainerElement;
-  if (Services.locale.isAppLocaleRTL) {
-    tbc.dir = "rtl";
-  }
-
   for (let [selector, stringID] of Object.entries(elemL10nMap)) {
     dropdown
       .querySelector(selector)
@@ -820,17 +819,17 @@ AboutReader.prototype = {
   },
 
   _maybeSetTextDirection: function Read_maybeSetTextDirection(article) {
-    if (article.dir) {
-      // Set "dir" attribute on content
-      this._contentElement.setAttribute("dir", article.dir);
-      this._headerElement.setAttribute("dir", article.dir);
+    // Set the article's "dir" on the contents.
+    // If no direction is specified, the contents should automatically be LTR
+    // regardless of the UI direction to avoid inheriting the parent's direction
+    // if the UI is RTL.
+    this._containerElement.dir = article.dir || "ltr";
 
     // The native locale could be set differently than the article's text direction.
-      var localeDirection = Services.locale.isAppLocaleRTL ? "rtl" : "ltr";
-      this._readTimeElement.setAttribute("dir", localeDirection);
-      this._readTimeElement.style.textAlign =
-        article.dir == "rtl" ? "right" : "left";
-    }
+    this._readTimeElement.dir = isAppLocaleRTL ? "rtl" : "ltr";
+
+    // This is used to mirror the line height buttons in the toolbar, when relevant.
+    this._toolbarElement.setAttribute("articledir", article.dir || "ltr");
   },
 
   _formatReadTime(slowEstimate, fastEstimate) {
@@ -1197,7 +1196,7 @@ AboutReader.prototype = {
         this._containerElement
       );
       let overlaps = false;
-      if (Services.locale.isAppLocaleRTL) {
+      if (isAppLocaleRTL) {
         overlaps = textBounds.right > toolbarBounds.left;
       } else {
         overlaps = textBounds.left < toolbarBounds.right;

toolkit/themes/shared/aboutReader.css

@@ -223,6 +223,10 @@ body.dark blockquote {
   margin: 0 0 15px 0;
 }
 
+.reader-estimated-time {
+  text-align: match-parent;
+}
+
 /*======= Controls toolbar =======*/
 
 .toolbar-container {
@@ -235,18 +239,11 @@ body.dark blockquote {
    * the edge of the viewport using margins, and take the width of
    * the body padding into account for calculating our width.
    */
-  margin-left: calc(-1 * var(--body-padding));
+  margin-inline-start: calc(-1 * var(--body-padding));
   width: max(var(--body-padding), calc((100% - var(--content-width)) / 2 + var(--body-padding)));
   font-size: var(--font-size); /* Needed to ensure `em` units match, is reset for .reader-controls */
 }
 
-/* Have to do this manually (instead of using margin-inline-start),
- * because dir=rtl is not set on its parent. */
-.toolbar-container[dir=rtl] {
-  margin-left: auto;
-  margin-right: calc(-1 * var(--body-padding));
-}
-
 .toolbar {
   padding-block: 16px;
   border: 1px solid var(--toolbar-border);
@@ -664,6 +661,12 @@ button:disabled {
   background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
 }
 
+/* Mirror the line height buttons if the article is RTL. */
+.reader-controls[articledir="rtl"] .line-height-minus-button,
+.reader-controls[articledir="rtl"] .line-height-plus-button {
+  transform: scaleX(-1);
+}
+
 @media print {
   .toolbar {
     display: none !important;