Use URL hashes to switch tabs of chrome://translate-internals/.

This CL enable to jump a tab directly by URL hash in chrome://translate-internals/.  For example, chrome://translate-internals/#detection-logs jumps to the detection-logs tab.  Likewise, when a user switch a tab, the URL's hash in the Omnibox will be changed to fit the current tab.

BUG=262870
TEST=manual

Review URL: https://chromiumcodereview.appspot.com/19724006

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@213375 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/translate_internals/translate_internals.css

@@ -41,16 +41,16 @@ tabpanel > div > div {
   white-space: pre-wrap;
 }
 
-#prefs ul {
+#tabpanel-prefs ul {
   list-style-type: none;
   padding-left: 0;
 }
 
-#prefs ul li {
+#tabpanel-prefs ul li {
   width: 100%;
 }
 
-#prefs ul li button {
+#tabpanel-prefs ul li button {
   background-color: transparent;
   border-style: solid;
   border-width: 1px;

chrome/browser/resources/translate_internals/translate_internals.html

@@ -32,25 +32,25 @@ found in the LICENSE file.
       </tabs>
       <tabpanels>
 
-        <tabpanel id="prefs">
+        <tabpanel id="tabpanel-prefs">
           <div>
             <include src="prefs.html"/>
           </div>
         </tabpanel>
 
-        <tabpanel id="detection-logs">
+        <tabpanel id="tabpanel-detection-logs">
           <div>
             <include src="detection_logs.html"/>
           </div>
         </tabpanel>
 
-        <tabpanel id="error-logs">
+        <tabpanel id="tabpanel-error-logs">
           <div>
             <include src="error_logs.html"/>
           </div>
         </tabpanel>
 
-        <tabpanel id="event-logs">
+        <tabpanel id="tabpanel-event-logs">
           <div>
             <include src="event_logs.html"/>
           </div>

chrome/browser/resources/translate_internals/translate_internals.js

@@ -31,6 +31,36 @@
         $('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;
+      };
     }
 
     /**
@@ -299,7 +329,8 @@
       contentTD.textContent = '';
       contentTD.appendChild(div);
 
-      var tbody = $('detection-logs').getElementsByTagName('tbody')[0];
+      var tabpanel = $('tabpanel-detection-logs');
+      var tbody = tabpanel.getElementsByTagName('tbody')[0];
       tbody.appendChild(tr);
     }
 
@@ -319,7 +350,8 @@
           details['error'] + ': ' + formatTranslateErrorsType(details['error']),
           'error-logs-error');
 
-      var tbody = $('error-logs').getElementsByTagName('tbody')[0];
+      var tabpanel = $('tabpanel-error-logs');
+      var tbody = tabpanel.getElementsByTagName('tbody')[0];
       tbody.appendChild(tr);
     }
 

chrome/browser/ui/webui/translate_internals/translate_internals_handler.cc

@@ -39,6 +39,9 @@ void TranslateInternalsHandler::RegisterMessages() {
 
 void TranslateInternalsHandler::OnLanguageDetection(
     const LanguageDetectionDetails& details) {
+  if (!TranslateManager::IsTranslatableURL(details.url))
+    return;
+
   base::DictionaryValue dict;
   dict.Set("time",
            new base::FundamentalValue(details.time.ToJsTime()));