Use URL hashes to switch tabs of 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() {
 
     var detectionLogs_ = null;
@@ skipping 13 matching lines @@
       chrome.send('requestInfo');
 
       var button = $('detection-logs-dump');
       button.addEventListener('click', onDetectionLogsDump);
 
       var enableTranslateSettings = templateData['enable-translate-settings'];
       if (!enableTranslateSettings) {
         $('prefs-blocked-languages').hidden = true;
         $('prefs-language-blacklist').querySelector('h2 span').hidden = true;
       }
+
+      var tabpanelNodeList = document.getElementsByTagName('tabpanel');
+      var tabpanels = Array.prototype.slice.call(tabpanelNodeList, 0);
+      var tabpanelIds = tabpanels.map(function(tab) {
+        return tab.id;
+      });
+
+      var tabNodeList = document.getElementsByTagName('tab');
+      var tabs = Array.prototype.slice.call(tabNodeList, 0);
+      tabs.forEach(function(tab) {
+        tab.onclick = function(e) {
+          var tabbox = document.querySelector('tabbox');
+          var tabpanel = tabpanels[tabbox.selectedIndex];
+          var hash = tabpanel.id.match(/(?:^tabpanel-)(.+)/)[1];
+          window.location.hash = hash;
+        };
+      });
+
+      window.onhashchange = function(e) {
+        var hash = window.location.hash;
+
+        // Remove the first character '#'.
+        hash = hash.substring(1);
+
+        var id = 'tabpanel-' + hash;
+        if (tabpanelIds.indexOf(id) == -1)
+          return;
+
+        $(id).selected = true;
+      };
     }
 
     /**
      * Creates a new LI element with a button to dismiss the item.
      *
      * @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');
@@ skipping 248 matching lines @@
                'detection-logs-content');
 
       // TD (and TR) can't use the CSS property 'max-height', so DIV
       // in the content is needed.
       var contentTD = tr.querySelector('.detection-logs-content');
       var div = document.createElement('div');
       div.textContent = contentTD.textContent;
       contentTD.textContent = '';
       contentTD.appendChild(div);
 
-      var tbody = $('detection-logs').getElementsByTagName('tbody')[0];
+      var tabpanel = $('tabpanel-detection-logs');

[Evan Stade, 2013/07/22 19:06:04]

no need to stick this in its own var

+      var tbody = tabpanel.getElementsByTagName('tbody')[0];
       tbody.appendChild(tr);
     }
 
     /**
      * Handles the message of 'translateErrorDetailsAdded' from the
      * browser.
      *
      * @param {Object} details The object which represents the logs.
      */
     function onTranslateErrorDetailsAdded(details) {
       var tr = document.createElement('tr');
 
       appendTD(tr, formatDate(new Date(details['time'])), 'error-logs-time');
       appendTD(tr, details['url'], 'error-logs-url');
       appendTD(
           tr,
           details['error'] + ': ' + formatTranslateErrorsType(details['error']),
           'error-logs-error');
 
-      var tbody = $('error-logs').getElementsByTagName('tbody')[0];
+      var tabpanel = $('tabpanel-error-logs');

[Evan Stade, 2013/07/22 19:06:04]

no need to stick this in its own var

+      var tbody = tabpanel.getElementsByTagName('tbody')[0];
       tbody.appendChild(tr);
     }
 
     /**
      * Handles the message of 'translateEventDetailsAdded' from the browser.
      *
      * @param {Object} details The object which contains event information.
      */
     function onTranslateEventDetailsAdded(details) {
       var tr = document.createElement('tr');
@@ skipping 65 matching lines @@
   /**
    * The entry point of the UI.
    */
   function main() {
     cr.doc.addEventListener('DOMContentLoaded',
                             cr.translateInternals.initialize);
   }
 
   main();
 })();