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

chrome/browser/resources/translate_internals/translate_internals.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 (function() {
   'use strict';
 
   cr.define('cr.translateInternals', function() {
 
     /**
      * Initializes UI and sends a message to the browser for
      * initialization.
      */
     function initialize() {
       cr.ui.decorate('tabbox', cr.ui.TabBox);
       chrome.send('requestInfo');
     }
 
     /**
      * 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.
      */
     function createLIWithDismissingButton(text, func) {
       var span = document.createElement('span');
       span.textContent = text;
 
       var li = document.createElement('li');
       li.appendChild(span);
 
       var button = document.createElement('button');
       button.textContent = 'X';
       button.addEventListener('click', function(e) {
         e.preventDefault();
         func();
       }, false);
 
       li.appendChild(button);
       return li;
     }
 
     /**
+     * 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;
       ul = document.querySelector('#prefs-language-blacklist ul');
       ul.innerHTML = '';
 
       if ('translate_language_blacklist' in detail) {
         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',
                         ['language_blacklist', langCode]);
           });
           ul.appendChild(li);
         });
       }
 
       ul = document.querySelector('#prefs-site-blacklist ul');
@@ skipping 11 matching lines @@
       }
 
       ul = document.querySelector('#prefs-whitelists ul');
       ul.innerHTML = '';
 
       if ('translate_whitelists' in detail) {
         var pairs = detail['translate_whitelists'];
 
         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',
                         ['whitelists', fromLangCode, toLangCode]);
           });
           ul.appendChild(li);
         });
       }
 
       var p = document.querySelector('#prefs-dump p');
       var content = JSON.stringify(detail, null, 2);
       p.textContent = content;
     }
 
     /**
+     * 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;
         default:
           console.error('Unknown message:', message);
           break;
       }
     }
 
     return {
       initialize: initialize,
       messageHandler: messageHandler,
-      onPrefsUpdated: onPrefsUpdated
+      onLanguageDetectionInfoAdded: onLanguageDetectionInfoAdded,
+      onPrefsUpdated: onPrefsUpdated,
     };
   });
 
   /**
    * The entry point of the UI.
    */
   function main() {
     cr.doc.addEventListener('DOMContentLoaded',
                             cr.translateInternals.initialize);
   }
 
   main();
 })();