nassh: rework label alignment logic

The current logic miscalculates the width of labels as it counts
codepoints instead of graphemes, and assumes all graphemes are of
equivalent width.  Lets count the display width instead using the
existing clientWidth attribute.  We let Chrome do handle rendering
and we just align based on the widest one.

Change-Id: Ifc63276c65574065c0c92ce67a03cd2a2a539a10
Reviewed-on: https://chromium-review.googlesource.com/852032
Reviewed-by: Brandon Gilmore <varz@google.com>
Tested-by: Mike Frysinger <vapier@chromium.org>
diff --git a/nassh/css/nassh_connect_dialog.css b/nassh/css/nassh_connect_dialog.css
index 1d4a699..34ffd25 100644
--- a/nassh/css/nassh_connect_dialog.css
+++ b/nassh/css/nassh_connect_dialog.css
@@ -114,6 +114,12 @@
   outline: none;
 }
 
+.aligned-dialog-labels {
+  text-align: right;
+  display: block;
+  white-space: nowrap;
+}
+
 /**
  * The billboard is the large area with the contrasting background.
  */
diff --git a/nassh/js/nassh_connect_dialog.js b/nassh/js/nassh_connect_dialog.js
index 9f4a04d..f351a90 100644
--- a/nassh/js/nassh_connect_dialog.js
+++ b/nassh/js/nassh_connect_dialog.js
@@ -142,22 +142,15 @@
 /**
  * Align the bottom fields.
  *
- * We want a grid-like layout for these fields.  This is not easily done
- * with box layout, but since we're using a fixed width font it's a simple
- * hack.  We just left-pad all of the labels with &nbsp; so they're all
- * the same length.
+ * We want a grid-like layout for these fields.  This is not easily done with
+ * box layout, but since we're using a fixed width font it's a simple hack.
  */
 nassh.ConnectDialog.prototype.alignLabels_ = function() {
   var labels = document.querySelectorAll('.aligned-dialog-labels');
 
-  var labelWidth = 0;
-  labels.forEach(function(el) {
-    labelWidth = Math.max(labelWidth, el.textContent.length);
-  });
-
-  labels.forEach(function(el) {
-      el.textContent = el.textContent.padStart(labelWidth, '\xa0');
-    });
+  let maxWidth = 0;
+  labels.forEach((el) => maxWidth = Math.max(maxWidth, el.clientWidth));
+  labels.forEach((el) => el.style.width = `${maxWidth}px`);
 };
 
 /**
@@ -1053,13 +1046,15 @@
 nassh.ConnectDialog.prototype.onMessageName_['terminal-info'] = function(info) {
   this.mm_ = new lib.MessageManager(info.acceptLanguages);
   this.mm_.processI18nAttributes(document.body);
-  this.alignLabels_();
   this.updateDetailPlaceholders_();
   this.updateDescriptionPlaceholder_();
 
   document.body.style.fontFamily = info.fontFamily;
   document.body.style.fontSize = info.fontSize + 'px';
 
+  // Now that we've set the font sizes, align the labels.
+  this.alignLabels_();
+
   var fg = lib.colors.normalizeCSS(info.foregroundColor);
   var bg = lib.colors.normalizeCSS(info.backgroundColor);
   var cursor = lib.colors.normalizeCSS(info.cursorColor);