Added the 'Translation Logs' tab to chrome://translate-internals/

chrome/browser/resources/translate_internals/translate_internals.js

Index: chrome/browser/resources/translate_internals/translate_internals.js
diff --git a/chrome/browser/resources/translate_internals/translate_internals.js b/chrome/browser/resources/translate_internals/translate_internals.js
index 4eeb3888e7041e3b5c683e56ed8beb02ae14f60b..c832ebcde423a902f48f1872eba08cd7d474505c 100644
--- a/chrome/browser/resources/translate_internals/translate_internals.js
+++ b/chrome/browser/resources/translate_internals/translate_internals.js
@@ -18,6 +18,7 @@
 
     /**
      * Creates a new LI element with a button to dismiss the item.
+     *
      * @param {string} text lable of the LI element.
      * @param {Function} func callback  when the button is clicked.
      */
@@ -40,8 +41,26 @@
     }
 
     /**
+     * Formats the language name to a human-readable text.  For example, if
+     * |langCode| is 'en', this may return 'en (English)'.
+     *
+     * @param {string} langCode ISO 639 language code.
+     * @return {string} the formatted string
+     */
+    function formatLanguageCode(langCode) {
+      var key = 'language-' + langCode;
+      if (key in templateData) {
+        var langName = templateData[key];
+        return langCode + ' (' + langName + ')';
+      }
+
+      return langCode;
+    }
+
+    /**
      * Handles the message of 'prefsUpdated' from the browser.
-     * @param {Object} detail The object which represents pref values.
+     *
+     * @param {Object} detail the object which represents pref values.
      */
     function onPrefsUpdated(detail) {
       var ul;
@@ -52,8 +71,7 @@
         var langs = detail['translate_language_blacklist'];
 
         langs.forEach(function(langCode) {
-          var langName = templateData['language-' + langCode];
-          var text = langCode + ' (' + langName + ')';
+          var text = formatLanguageCode(langCode);
 
           var li = createLIWithDismissingButton(text, function() {
             chrome.send('removePrefItem',
@@ -85,10 +103,8 @@
 
         Object.keys(pairs).forEach(function(fromLangCode) {
           var toLangCode = pairs[fromLangCode];
-          var fromLangName = templateData['language-' + fromLangCode];
-          var toLangName = templateData['language-' + toLangCode];
-          var text = fromLangCode + ' (' + fromLangName + ') \u2192 ' +
-              toLangCode + ' (' + toLangName + ')';
+          var text = formatLanguageCode(fromLangCode) + ' \u2192 ' +
+              formatLanguageCode(toLangCode);
 
           var li = createLIWithDismissingButton(text, function() {
             chrome.send('removePrefItem',
@@ -104,13 +120,115 @@
     }
 
     /**
+     * Addes '0's to |number| as a string.  |width| is a number of '0'.

[Evan Stade, 2013/05/09 04:39:00]

width is not the number of 0s. It's the total number of digits.

[hajimehoshi, 2013/05/09 05:59:41]

Done.

+     *
+     * @param {string} number the number to be converted into a string
+     * @param {number} width width of the returned string
+     * @return {string} the formatted string
+     */
+    function fillWithZeros(number, width) {
+      var numberStr = number.toString();
+      var restWidth = width - numberStr.length;
+      if (restWidth <= 0)
+        return numberStr;
+
+      for (var i = 0; i < restWidth; i++)

[Evan Stade, 2013/05/09 04:39:00]

Array(restWidth).join('0') + numberStr;

[hajimehoshi, 2013/05/09 05:59:41]

Array(restWidth).join('0') produces the string whose length is restWidth - 1,
right?

On 2013/05/09 04:39:00, Evan Stade wrote:

+        numberStr = '0' + numberStr;
+
+      return numberStr;
+    }
+
+    /**
+     * Formats |date| as a Date object into a string. The format is like
+     * '2006-01-02 15:04:05'.  The user's locale is used.

[Evan Stade, 2013/05/09 04:39:00]

the user's locale is used? What does that mean? locale-specific formatting for
the date/time is NOT used.

[hajimehoshi, 2013/05/09 05:59:41]

I meant that the user's timezone will be used.  Anyway, I'll remove the sentence
because it could be confusion.

On 2013/05/09 04:39:00, Evan Stade wrote:

+     *
+     * @param {Date} date date to be formatted
+     * @return {string} the formatted string

[Evan Stade, 2013/05/09 04:39:00]

comments should sentence-like (punctuation + capitalization).

[hajimehoshi, 2013/05/09 05:59:41]

Done.

+     */
+    function formatDate(date) {
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDay();
+      var hour = date.getHours();
+      var minute = date.getMinutes();
+      var second = date.getSeconds();
+
+      var yearStr = fillWithZeros(year, 4);
+      var monthStr = fillWithZeros(month, 2);
+      var dayStr = fillWithZeros(day, 2);
+      var hourStr = fillWithZeros(hour, 2);
+      var minuteStr = fillWithZeros(minute, 2);
+      var secondStr = fillWithZeros(second, 2);
+
+      var str = yearStr + '-' + monthStr + '-' + dayStr + ' ' +
+          hourStr + ':' + minuteStr + ':' + secondStr;
+
+      return str;
+    }
+
+    /**
+     * Handles the message of 'languageDetectionInfoAdded' from the
+     * browser.
+     *
+     * @param {Object} detail The object which represents the logs
+     */
+    function onLanguageDetectionInfoAdded(detail) {
+      var tr = document.createElement('tr');
+
+      // time
+      var td = document.createElement('td');
+      var time = new Date(detail['time']);
+      var timeStr = formatDate(time);
+      td.textContent = timeStr;
+      td.className = 'detection-logs-time';
+      tr.appendChild(td);
+
+      // url
+      td = document.createElement('td');

[Evan Stade, 2013/05/09 04:39:00]

you should create a local function for this instead of repeating the 4 lines
over and over

[hajimehoshi, 2013/05/09 05:59:41]

Done.

+      td.textContent = detail['url'];
+      td.className = 'detection-logs-url';
+      tr.appendChild(td);
+
+      // content_language
+      td = document.createElement('td');
+      td.textContent = formatLanguageCode(detail['content_language']);
+      td.className = 'detection-logs-content-language';
+      tr.appendChild(td);
+
+      // cld_language
+      td = document.createElement('td');
+      td.textContent = formatLanguageCode(detail['cld_language']);
+      td.className = 'detection-logs-cld-language';
+      tr.appendChild(td);
+
+      // is_cld_reliable
+      td = document.createElement('td');
+      td.textContent = detail['is_cld_reliable'];
+      td.className = 'detection-logs-is-cld-reliable';
+      tr.appendChild(td);
+
+      // language
+      td = document.createElement('td');
+      td.textContent = formatLanguageCode(detail['language']);
+      td.className = 'detection-logs-language';
+      tr.appendChild(td);
+
+      var tbody = $('detection-logs').getElementsByTagName('tbody')[0];
+      tbody.appendChild(tr);
+    }
+
+    /**
      * The callback entry point from the browser. This function will be
      * called by the browser.
+     *
      * @param {string} message The name of the sent message
      * @param {Object} detail The argument of the sent message
      */
     function messageHandler(message, detail) {
       switch (message) {
+        case 'languageDetectionInfoAdded':
+          cr.translateInternals.onLanguageDetectionInfoAdded(detail);
+          break;
         case 'prefsUpdated':
           cr.translateInternals.onPrefsUpdated(detail);
           break;
@@ -123,7 +241,8 @@
     return {
       initialize: initialize,
       messageHandler: messageHandler,
-      onPrefsUpdated: onPrefsUpdated
+      onLanguageDetectionInfoAdded: onLanguageDetectionInfoAdded,
+      onPrefsUpdated: onPrefsUpdated,
     };
   });