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..bad235077d479234843acb4f7706ae41a18d01ae 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,105 @@
     }
 
     /**
+     * Addes '0's to |number| as a string. |width| is length of the 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 padWithZeros(number, width) {
+      var numberStr = number.toString();
+      var restWidth = width - numberStr.length;
+      if (restWidth <= 0)
+        return numberStr;
+
+      return Array(restWidth + 1).join('0') + 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 = padWithZeros(year, 4);
+      var monthStr = padWithZeros(month, 2);
+      var dayStr = padWithZeros(day, 2);
+      var hourStr = padWithZeros(hour, 2);
+      var minuteStr = padWithZeros(minute, 2);
+      var secondStr = padWithZeros(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 +231,8 @@
     return {
       initialize: initialize,
       messageHandler: messageHandler,
-      onPrefsUpdated: onPrefsUpdated
+      onLanguageDetectionInfoAdded: onLanguageDetectionInfoAdded,
+      onPrefsUpdated: onPrefsUpdated,
     };
   });