From c67c13335a0606b39dda94e9a591bfdbae41130b Mon Sep 17 00:00:00 2001
From: Simon Lydell <simon.lydell@gmail.com>
Date: Mon, 22 Jun 2015 21:36:04 +0200
Subject: [PATCH] Improve the font size in the help dialog

When testing on a different computer I noticed the help dialog text being way
too large. I tried adjusting the CSS, but there was no sweet spot where the font
size was pleasant on both my regular computer and the other one I tried on.

This commits changes the default font size is the same as for menus, which is
usually quite small. It is then increased programmatically until just before a
scrollbar is caused.
---
 extension/lib/help.coffee | 21 ++++++++++++++++++---
 extension/skin/style.css  |  1 -
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/extension/lib/help.coffee b/extension/lib/help.coffee
index 11c2c06..0a8e029 100644
--- a/extension/lib/help.coffee
+++ b/extension/lib/help.coffee
@@ -20,7 +20,8 @@
 translate = require('./l10n')
 utils     = require('./utils')
 
-CONTAINER_ID = 'VimFxHelpDialogContainer'
+CONTAINER_ID  = 'VimFxHelpDialogContainer'
+MAX_FONT_SIZE = 20
 
 injectHelp = (rootWindow, vimfx) ->
   removeHelp(rootWindow)
@@ -30,14 +31,28 @@ injectHelp = (rootWindow, vimfx) ->
   container = document.createElement('box')
   container.id = CONTAINER_ID
 
+  wrapper = document.createElement('box')
+  container.appendChild(wrapper)
+
   header = createHeader(document, vimfx)
-  container.appendChild(header)
+  wrapper.appendChild(header)
 
   content = createContent(document, vimfx)
-  container.appendChild(content)
+  wrapper.appendChild(content)
 
   rootWindow.gBrowser.mCurrentBrowser.parentNode.appendChild(container)
 
+  # The font size of menu items is used by default, which is usually quite
+  # small. Try to increase it without causing a scrollbar.
+  computedStyle = rootWindow.getComputedStyle(container)
+  fontSize = originalFontSize =
+    parseFloat(computedStyle.getPropertyValue('font-size'))
+  while wrapper.clientHeight < container.clientHeight and
+        fontSize <= MAX_FONT_SIZE
+    fontSize++
+    container.style.fontSize = "#{ fontSize }px"
+  container.style.fontSize = "#{ Math.max(fontSize - 1, originalFontSize) }px"
+
   # Uncomment this line if you want to use `gulp help.html`!
   # utils.writeToClipboard(container.outerHTML)
 
diff --git a/extension/skin/style.css b/extension/skin/style.css
index 07e6624..f76d470 100644
--- a/extension/skin/style.css
+++ b/extension/skin/style.css
@@ -98,7 +98,6 @@ toolbarpaletteitem[place="palette"] > #VimFxButton {
   background-color: Window;
   color: WindowText;
   font: menu;
-  font-size: 1.6em;
 
   --page-padding: 3em;
   --gutter: 1em;
-- 
2.39.3