Make chrome://safe-browsing use the URL hash to indicate the tab

Changing tabs on chrome://safe-browsing updates the hash, and navigating
to chrome://safe-browsing with a hash will select that hash directly.

Bug: 930207
Change-Id: If19a53b1432ecf90df2b54e70d747d3f018082dc
Reviewed-on: https://chromium-review.googlesource.com/c/1490218
Commit-Queue: Daniel Rubery <drubery@chromium.org>
Reviewed-by: Varun Khaneja <vakh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#635811}

components/safe_browsing/web_ui/resources/safe_browsing.html

@@ -17,16 +17,16 @@
     <div id="header">
       <h1 id="sb-title">Safe Browsing</h1>
     </div>
-    <tabbox>
+    <tabbox id='tabbox'>
       <tabs>
-        <tab>Preferences</tab>
-        <tab>Database Manager</tab>
-        <tab>Hash Cache</tab>
-        <tab>ClientSafeBrowsingReportRequests</tab>
-        <tab>Download Protection</tab>
-        <tab>Password Protection</tab>
-        <tab>Referrer Chain</tab>
-        <tab>Log Messages</tab>
+        <tab id="preferences">Preferences</tab>
+        <tab id="db-manager">Database Manager</tab>
+        <tab id="hash-cache">Hash Cache</tab>
+        <tab id="csbrr">ClientSafeBrowsingReportRequests</tab>
+        <tab id="download-protection">Download Protection</tab>
+        <tab id="password-protection">Password Protection</tab>
+        <tab id="referrer-chain">Referrer Chain</tab>
+        <tab id="log">Log Messages</tab>
       </tabs>
       <tabpanels>
         <tabpanel>

components/safe_browsing/web_ui/resources/safe_browsing.js

@@ -88,6 +88,20 @@ cr.define('safe_browsing', function() {
     });
 
     $('get-referrer-chain-form').addEventListener('submit', addReferrerChain);
+
+    // Allow tabs to be navigated to by anchor.
+    showTab(window.location.hash.substr(1));
+    window.onhashchange = function () {
+      showTab(window.location.hash.substr(1));
+    };
+
+    // When the tab updates, update the anchor
+    $('tabbox').addEventListener('selectedChange', function() {
+      var tabbox = $('tabbox');
+      var tabs = tabbox.querySelector('tabs').children;
+      var selectedTab = tabs[tabbox.selectedIndex];
+      window.location.hash = selectedTab.id;
+    }, true);
   }
 
   function addExperiments(result) {
@@ -223,6 +237,12 @@ cr.define('safe_browsing', function() {
         });
   }
 
+  function showTab(tabId) {
+    if ($(tabId)) {
+      $(tabId).selected = "selected";
+    }
+  }
+
   return {
     addSentCSBRRsInfo: addSentCSBRRsInfo,
     addSentClientDownloadRequestsInfo: addSentClientDownloadRequestsInfo,