Bug 1399616 - add emoji styling to reader mode, r?johannh draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 20 Jun 2018 15:09:26 +0100
changeset 812646 34133b59e46e1e688b3835cb9fda38378dd9a9ab
parent 812281 8f49b2a0e003fe63da04aab9714ddc62bcb7a65c
push id114614
push userbmo:gijskruitbosch+bugs@gmail.com
push dateFri, 29 Jun 2018 18:08:14 +0000
reviewersjohannh
bugs1399616
milestone63.0a1
Bug 1399616 - add emoji styling to reader mode, r?johannh MozReview-Commit-ID: DHYjxva76Lb
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/ReaderMode.jsm
toolkit/themes/shared/aboutReader.css
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -522,8 +522,21 @@ body.dark > .container > .content blockq
 /* Hide elements with common "hidden" class names */
 .moz-reader-content .visually-hidden,
 .moz-reader-content .visuallyhidden,
 .moz-reader-content .hidden,
 .moz-reader-content .invisible,
 .moz-reader-content .sr-only {
   display: none;
 }
+
+/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width,
+ * see bug 1399616 for context. */
+.moz-reader-content img.wp-smiley,
+.moz-reader-content img.emoji {
+  display: inline-block;
+  border-width: 0;
+  /* height: auto is implied from `.moz-reader-content *` rule. */
+  width: 1em;
+  margin: 0 .07em;
+  padding: 0;
+}
+
--- a/toolkit/components/reader/ReaderMode.jsm
+++ b/toolkit/components/reader/ReaderMode.jsm
@@ -15,23 +15,25 @@ const PARSE_SUCCESS = 0;
 const PARSE_ERROR_TOO_MANY_ELEMENTS = 1;
 const PARSE_ERROR_WORKER = 2;
 const PARSE_ERROR_NO_ARTICLE = 3;
 
 // Class names to preserve in the readerized output. We preserve these class
 // names so that rules in aboutReader.css can match them.
 const CLASSES_TO_PRESERVE = [
   "caption",
+  "emoji",
   "hidden",
   "invisble",
   "sr-only",
   "visually-hidden",
   "visuallyhidden",
   "wp-caption",
   "wp-caption-text",
+  "wp-smiley",
 ];
 
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyGlobalGetters(this, ["XMLHttpRequest", "XMLSerializer"]);
 
 ChromeUtils.defineModuleGetter(this, "CommonUtils", "resource://services-common/utils.js");
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -744,8 +744,20 @@ body:not(.loaded) .toolbar:-moz-locale-d
   border-width: 0;
 }
 
 /* Hide elements with common "hidden" class names */
 .moz-reader-content .hidden,
 .moz-reader-content .invisible {
   display: none;
 }
+
+/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width,
+ * see bug 1399616 for context. */
+.moz-reader-content img.wp-smiley,
+.moz-reader-content img.emoji {
+  display: inline-block;
+  border-width: 0;
+  /* height: auto is implied from `.moz-reader-content *` rule. */
+  width: 1em;
+  margin: 0 .07em;
+  padding: 0;
+}