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..fcd5185748f9629b62a7ecb4040e0d93aa0b5fe2 100644
--- a/chrome/browser/resources/translate_internals/translate_internals.js
+++ b/chrome/browser/resources/translate_internals/translate_internals.js
@@ -18,8 +18,9 @@
 
     /**
      * 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.
+     *
+     * @param {string} text The lable of the LI element.
+     * @param {Function} func Callback called when the button is clicked.
      */
     function createLIWithDismissingButton(text, func) {
       var span = document.createElement('span');
@@ -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,106 @@
     }
 
     /**
+     * Addes '0's to |number| as a string.  |width| is length of the

[Evan Stade, 2013/05/18 23:42:58]

please keep the number of spaces after a period consistent in this file.

[hajimehoshi, 2013/05/20 01:11:34]

Done.

+     * string including '0's.
+     *
+     * @param {string} number The number to be converted into a string.
+     * @param {number} width The width of the returned string.
+     * @return {string} The formatted string.
+     */
+    function fillWithZeros(number, width) {

[Evan Stade, 2013/05/18 23:42:58]

nit: call the function padWithZeros

[hajimehoshi, 2013/05/20 01:11:34]

Done.

+      var numberStr = number.toString();
+      var restWidth = width - numberStr.length;
+      if (restWidth <= 0)
+        return numberStr;
+
+      Array(restWidth + 1).join('0') + numberStr;

[Evan Stade, 2013/05/18 23:42:58]

you seem to be missing an assignment here? did you mean to return this value?

[hajimehoshi, 2013/05/20 01:11:34]

Right, I meant to return this...

On 2013/05/18 23:42:58, Evan Stade wrote:

+      return numberStr;
+    }
+
+    /**
+     * Formats |date| as a Date object into a string. The format is like
+     * '2006-01-02 15:04:05'.
+     *
+     * @param {Date} date Date to be formatted.
+     * @return {string} The formatted string.
+     */
+    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;
+    }
+
+    /**
+     * Returns a new TD element.
+     *
+     * @param {string} content The text content of the element.
+     * @param {string} className The class name of the element.
+     * @return {string} The new TD element.
+     */
+    function createTD(content, className) {
+      var td = document.createElement('td');
+      td.textContent = content;
+      td.className = className;
+      return td;
+    }
+
+    /**
+     * 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');
+
+      var date = new Date(detail['time']);
+      [
+        createTD(formatDate(date), 'detection-logs-time'),
+        createTD(detail['url'], 'detection-logs-url'),
+        createTD(formatLanguageCode(detail['content_language']),
+                 'detection-logs-content-language'),
+        createTD(formatLanguageCode(detail['cld_language']),
+                 'detection-logs-cld-language'),
+        createTD(detail['is_cld_reliable'],
+                 'detection-logs-is-cld-reliable'),
+        createTD(formatLanguageCode(detail['language']),
+                 'detection-logs-language'),
+      ].forEach(function(td) {
+        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
+     *
+     * @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 +232,8 @@
     return {
       initialize: initialize,
       messageHandler: messageHandler,
-      onPrefsUpdated: onPrefsUpdated
+      onLanguageDetectionInfoAdded: onLanguageDetectionInfoAdded,
+      onPrefsUpdated: onPrefsUpdated,
     };
   });