Font Family Preferences for Distilled Pages

components/dom_distiller/content/resources/dom_distiller_viewer.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 function addToPage(html) {
   var div = document.createElement('div');
   div.innerHTML = html;
   document.getElementById('content').appendChild(div);
 }
 
 function showLoadingIndicator(isLastPage) {
   document.getElementById('loadingIndicator').className =
       isLastPage ? 'hidden' : 'visible';
 }
 
+// Maps JS Font Family to CSS class and then changes body class name.
+// CSS classes must agree with distilledpage.css.
+function useFontFamily(fontFamily) {
+  var cssClass;
+  if (fontFamily == "serif") {
+    cssClass = "serif";
+  } else if (fontFamily == "monospace") {
+    cssClass = "monospace";
+  } else {
+    cssClass = "sans-serif";
+  }
+  // Relies on the classname order of the body being Theme class, then Font

[Yaron, 2014/08/13 01:58:47]

Hrmm. This seems a little fragile (this is a shared resource for everything
operating in the page) but I guess it's currently a very controlled environment
so is ok for now.

[nyquist, 2014/08/13 05:44:31]

I was discussing this offline with sunangel@ before this CL, and this was a
suggestion she had for doing this quickly which sounded reasonable.

Other possible ways:
- pass in old and new classname and do search/replace (regexp split on
whitespace + replace?)
- having an object (or just standalone methods and global state) in JavaScript
which has methods for each class type. After setting the theme / font face, etc
on it, it would generate a space-separated list of classes of its current state
set it on the body.

I think the latter sounds most promising, and might not be too hard to do, but I
think I would be fine with not doing it now. The one thing about this though is
that it would have to get it's initial state for both of the current class types
somehow, either from parsing the body-tag, or from calling the methods before
anything else. Some ways could just be to call the methods immediately (or
queueing them up to ensure the page is ready) by sending a message from the
browser process, or we could inline the calls in the HTML, or it could be parsed
from the HTML body class at startup. Anyway, I'm sure we can find a good way to
do this eventually.

[Yaron, 2014/08/13 16:49:29]

Agreed that the latter approach is better but what we have here is fine for now.

+  // Family class.
+  var themeClass = document.body.className.split(" ")[0];
+  cssClass = themeClass + " " + cssClass;

[Yaron, 2014/08/13 01:58:47]

No need for intermediate assignment. Just do it below.

[sunangel, 2014/08/13 18:09:04]

Done.

+  document.body.className = cssClass;
+}
+
 // Maps JS theme to CSS class and then changes body class name.
 // CSS classes must agree with distilledpage.css.
 function useTheme(theme) {
   var cssClass;
   if (theme == "sepia") {
     cssClass = "sepia";
   } else if (theme == "dark") {
     cssClass = "dark";
   } else {
     cssClass = "light";
   }
+  // Relies on the classname order of the body being Theme class, then Font
+  // Family class.
+  var fontFamilyClass = document.body.className.split(" ")[1];
+  cssClass = cssClass + " " + fontFamilyClass;
   document.body.className = cssClass;
 }