Bug 1561153 - Fix problems with box-drawing chars in about:memory. r=jfkthame

In Japanese (and Chinese?) locales the box-drawing chars may be twice the width of ASCII chars, which messes up about:memory's layout. By explicitly specifying the language and font-family, we increase the chance that single-width box-drawing chars are used. Differential Revision: https://phabricator.services.mozilla.com/D36287 --HG-- extra : moz-landing-system : lando
2019-07-01 01:07:52 +00:00 · 2019-07-01 01:07:52 +00:00 · 2ba5d9c1c7
--- a/toolkit/components/aboutmemory/content/aboutMemory.css
+++ b/toolkit/components/aboutmemory/content/aboutMemory.css
@ -21,6 +21,11 @@ body {
  margin: auto;
 }

+/* The comment at the top of aboutMemory.xhtml explains this font choice. */
+pre {
+  font-family: Fira Mono, DejaVu Sans Mono, Liberation Mono, monospace;
+}
+
 div.ancillary {
  margin: 0.5em 0;
  -moz-user-select: none;
--- a/toolkit/components/aboutmemory/content/aboutMemory.xhtml
+++ b/toolkit/components/aboutmemory/content/aboutMemory.xhtml
@ -4,7 +4,17 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

-<html xmlns="http://www.w3.org/1999/xhtml">
+<!-- We explicitly set the language to English, which more-or-less guarantees
+     that the box-drawing characters used are the correct width. Without that,
+     in a Japanese or Chinese locale we might end up with box-drawing
+     characters that are twice the width of English characters, which messes up
+     the tree layout. See bug 1561153 for details. Note that about:memory is
+     not localized, so setting it explicitly to English should be fine.
+
+     We also set the fonts in aboutMemory.css in such a way that maximizes the
+     chances that the font chosen supports the box-drawing chars.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src chrome:" />
    <meta name="viewport" content="width=device-width"/>
--- a/toolkit/themes/mobile/global/aboutMemory.css
+++ b/toolkit/themes/mobile/global/aboutMemory.css
@ -21,6 +21,11 @@ body {
  margin: auto;
 }

+/* The comment at the top of aboutMemory.xhtml explains this font choice. */
+pre {
+  font-family: Fira Mono, DejaVu Sans Mono, Liberation Mono, monospace;
+}
+
 div.ancillary {
  margin: 0.5em 0;
  -moz-user-select: none;