Expose the Website Settings page in the Content Setting page if it is enabled via flag.

chrome/browser/resources/options/content_settings.js

Index: chrome/browser/resources/options/content_settings.js
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index ebef955f4e8b59b5c1bc636dddcc4552076e671c..29b18c90c3e77156e99d299fbcdae6d7b6a4362c 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -6,6 +6,19 @@ cr.define('options', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
 
+  // Lookup table to generate the i18n strings.
+  /** @const */ var permissionsLookup = {
+    'location': 'location',
+    'notifications': 'notifications',
+    'media-stream': 'mediaStream',
+    'cookies': 'cookies',
+    'multiple-automatic-downloads': 'multipleAutomaticDownloads',
+    'images': 'images',
+    'plugins': 'plugins',
+    'popups': 'popups',
+    'javascript': 'javascript'
+  };
+
   //////////////////////////////////////////////////////////////////////////////
   // ContentSettings class:
 
@@ -39,6 +52,21 @@ cr.define('options', function() {
         };
       }
 
+      var experimentalExceptionsButtons =
+          this.pageDiv.querySelectorAll('.website-settings-permission-button');
+      for (var i = 0; i < experimentalExceptionsButtons.length; i++) {
+        experimentalExceptionsButtons[i].onclick = function(event) {
+          var page = WebsiteSettingsManager.getInstance();
+          var hash = event.currentTarget.getAttribute('contentType');
+          var url = page.name + '#' + hash;
+          uber.pushState({pageName: page.name}, url);
+
+          // Navigate after the local history has been replaced in order to have
+          // the correct hash loaded.
+          PageManager.showPageByName('websiteSettings', false);
+        };
+      }
+
       var manageHandlersButton = $('manage-handlers-button');
       if (manageHandlersButton) {
         manageHandlersButton.onclick = function(event) {
@@ -70,6 +98,20 @@ cr.define('options', function() {
           ContentSettings.setDefaultMicrophone_);
       $('media-select-camera').addEventListener('change',
           ContentSettings.setDefaultCamera_);
+
+      if (loadTimeData.getBoolean('websiteSettingsManagerEnabled')) {
+        var oldUI =
+            this.pageDiv.querySelectorAll('.replace-with-website-settings');
+        for (var i = 0; i < oldUI.length; i++) {
+          oldUI[i].hidden = true;
+        }
+
+        var newUI =
+            this.pageDiv.querySelectorAll('.experimental-website-settings');
+        for (var i = 0; i < newUI.length; i++) {
+          newUI[i].hidden = false;
+        }
+      }
     },
   };
 
@@ -80,12 +122,20 @@ cr.define('options', function() {
   };
 
   /**
-   * Sets the values for all the content settings radios.
+   * Sets the values for all the content settings radios and labels.
    * @param {Object} dict A mapping from radio groups to the checked value for
    *     that group.
    */
   ContentSettings.setContentFilterSettingsValue = function(dict) {
     for (var group in dict) {
+      var settingLabel = $(group + '-default-string');
+      if (settingLabel) {
+        var value = dict[group].value;
+        var valueId =
+            permissionsLookup[group] + value[0].toUpperCase() + value.slice(1);
+        settingLabel.textContent = loadTimeData.getString(valueId);
+      }
+
       var managedBy = dict[group].managedBy;
       var controlledBy = managedBy == 'policy' || managedBy == 'extension' ?
           managedBy : null;