Fix NTP nav dots measurement.

The old approach chose the nav dot width by measuring a phantom
dot containing the string "Most Visited," but only when the Most
Visited dot is shown. This approach fails when it isn't shown,
or when the string "Apps" is longer than the string "Most Visited"
in the user's local language.

Screenshots on the bug.

BUG=248495

Review URL: https://codereview.chromium.org/110523004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@243529 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/ntp4/new_tab.js

@@ -341,16 +341,25 @@ cr.define('ntp', function() {
   }
 
   /**
-   * Fills in an invisible div with the 'Most Visited' string so that
+   * Measure the width of a nav dot with a given title.
+   * @param {string} id The loadTimeData ID of the desired title.
+   * @return {number} The width of the nav dot.
+   */
+  function measureNavDot(id) {
+    var measuringDiv = $('fontMeasuringDiv');
+    measuringDiv.textContent = loadTimeData.getString(id);
+    // The 4 is for border and padding.
+    return Math.max(measuringDiv.clientWidth * 1.15 + 4, 80);
+  }
+
+  /**
+   * Fills in an invisible div with the longest dot title string so that
    * its length may be measured and the nav dots sized accordingly.
    */
   function measureNavDots() {
-    var measuringDiv = $('fontMeasuringDiv');
+    var pxWidth = measureNavDot('appDefaultPageName');
     if (loadTimeData.getBoolean('showMostvisited'))
-      measuringDiv.textContent = loadTimeData.getString('mostvisited');
-
-    // The 4 is for border and padding.
-    var pxWidth = Math.max(measuringDiv.clientWidth * 1.15 + 4, 80);
+      pxWidth = Math.max(measureNavDot('mostvisited'), pxWidth);
 
     var styleElement = document.createElement('style');
     styleElement.type = 'text/css';