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

Review URL: https://codereview.chromium.org/566863005

Cr-Commit-Position: refs/heads/master@{#294923}

chrome/app/generated_resources.grd

@@ -7943,7 +7943,7 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Knows device location
       </message>
       <message name="IDS_WEBSITE_SETTINGS_MANAGE" desc="The label on the button that launches the Websites Settings dialog.">
-        Manage sites...
+        Manage...
       </message>
       <message name="IDS_WEBSITE_SETTINGS_MEDIASTREAM_DESCRIPTION" desc="Label for granting mediastream permission on the Website Settings single site view dialog.">
         Uses camera and microphone
@@ -7975,6 +7975,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_WEBSITE_SETTINGS_BATTERY_PERCENT" desc="The percent from 0 to 100 of battery consumption from a given origin or app on the Website Settings dialog.">
         <ph name="VALUE">$1<ex>100</ex></ph>%
       </message>
+      <message name="IDS_WEBSITE_SETTINGS_ALLOWED_LIST_TITLE" desc="Label above the list of allowed origins for a given permission on the Website Settings dialog.">
+        Allowed
+      </message>
       <message name="IDS_WEBSITE_SETTINGS_BLOCKED_LIST_TITLE" desc="Label above the list of blocked origins for a given permission on the Website Settings dialog.">
         Blocked
       </message>

chrome/browser/content_settings/host_content_settings_map.cc

@@ -175,10 +175,6 @@ ContentSetting HostContentSettingsMap::GetDefaultContentSetting(
     }
   }
 
-  // The method GetDefaultContentSetting always has to return an explicit
-  // value that is to be used as default. We here rely on the
-  // DefaultProvider to always provide a value.
-  NOTREACHED();
   return CONTENT_SETTING_DEFAULT;
 }
 

chrome/browser/resources/options/content_settings.html

@@ -4,8 +4,8 @@
   <div class="content-area">
     <!-- Cookie filter tab contents -->
     <section>
-      <h3 i18n-content="cookies_tab_label"></h3>
-      <div>
+      <h3 i18n-content="cookiesTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="cookies" value="allow">
@@ -58,11 +58,20 @@
               i18n-content="cookies_show_cookies"></button>
         </div>
      </div>
+      <div class="experimental-website-settings" hidden>
+        <span id="cookies-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="cookies" i18n-content="websitesManage"></button>
+          <button id="show-cookies-button"
+              i18n-content="cookies_show_cookies"></button>
+        </div>
+      </div>
     </section>
     <!-- Image filter -->
     <section>
-      <h3 i18n-content="images_tab_label"></h3>
-      <div>
+      <h3 i18n-content="imagesTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="images" value="allow">
@@ -85,11 +94,18 @@
               i18n-content="manageExceptions"></button>
         </div>
       </div>
+      <div class="experimental-website-settings" hidden>
+        <span id="images-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="images" i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- JavaScript filter -->
     <section>
-      <h3 i18n-content="javascript_tab_label"></h3>
-      <div>
+      <h3 i18n-content="javascriptTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="javascript" value="allow">
@@ -111,6 +127,13 @@
               i18n-content="manageExceptions"></button>
         </div>
       </div>
+      <div class="experimental-website-settings" hidden>
+        <span id="javascript-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="javascript" i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- Handlers settings -->
     <section id="handlers-section">
@@ -138,8 +161,8 @@
     </section>
     <!-- Plug-ins filter -->
     <section>
-      <h3 i18n-content="plugins_tab_label"></h3>
-      <div>
+      <h3 i18n-content="pluginsTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="plugins" value="allow">
@@ -173,11 +196,18 @@
               target="_blank"></a>
         </div>
       </div>
+    <div class="experimental-website-settings" hidden>
+        <span id="plugins-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="plugins" i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- Pop-ups filter -->
     <section>
-      <h3 i18n-content="popups_tab_label" class="content-settings-header"></h3>
-      <div>
+      <h3 i18n-content="popupsTabLabel" class="content-settings-header"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="popups" value="allow">
@@ -199,11 +229,18 @@
               i18n-content="manageExceptions"></button>
         </div>
       </div>
+    <div class="experimental-website-settings" hidden>
+        <span id="popups-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="popups" i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- Location filter -->
     <section>
-      <h3 i18n-content="location_tab_label"></h3>
-      <div>
+      <h3 i18n-content="locationTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="location" value="allow">
@@ -247,11 +284,18 @@
               i18n-content="manageExceptions"></button>
         </div>
       </div>
+    <div class="experimental-website-settings" hidden>
+        <span id="location-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="geolocation" i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- Notifications filter tab contents -->
     <section id="notifications-section">
-      <h3 i18n-content="notifications_tab_label"></h3>
-      <div>
+      <h3 i18n-content="notificationsTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="notifications" value="allow">
@@ -281,10 +325,18 @@
               i18n-content="manageExceptions"></button>
         </div>
       </div>
+    <div class="experimental-website-settings" hidden>
+        <span id="notifications-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="notifications"
+              i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- Fullscreen filter -->
     <section>
-      <h3 i18n-content="fullscreen_tab_label"></h3>
+      <h3 i18n-content="fullscreenTabLabel"></h3>
       <div class="settings-row">
         <button class="exceptions-list-button" contentType="fullscreen"
             i18n-content="manageExceptions"></button>
@@ -292,7 +344,7 @@
     </section>
     <!-- Mouse Lock filter -->
     <section>
-      <h3 i18n-content="mouselock_tab_label"></h3>
+      <h3 i18n-content="mouselockTabLabel"></h3>
       <div>
         <div class="radio">
           <label>
@@ -377,7 +429,7 @@
           <span class="controlled-setting-indicator"
               content-setting="media-stream" value="block"></span>
         </div>
-        <div class="settings-row">
+        <div class="settings-row replace-with-website-settings">
           <button class="exceptions-list-button" contentType="media-stream"
               i18n-content="manageExceptions"></button>
         </div>
@@ -387,6 +439,12 @@
               i18n-values="href:mediaPepperFlashGlobalPrivacyURL"></a>
         </div>
       </div>
+    <div class="experimental-website-settings" hidden>
+      <div class="settings-row">
+        <button class="website-settings-permission-button"
+            contentType="media-stream" i18n-content="websitesManage"></button>
+      </div>
+    </div>
     </section>
     <!-- PPAPI broker -->
     <section>
@@ -418,8 +476,8 @@
     </section>
     <!-- Automatic Downloads filter -->
     <section>
-      <h3 i18n-content="multiple-automatic-downloads_header"></h3>
-      <div>
+      <h3 i18n-content="multipleAutomaticDownloadsTabLabel"></h3>
+      <div class="replace-with-website-settings">
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="multiple-automatic-downloads"
@@ -454,6 +512,14 @@
               i18n-content="manageExceptions"></button>
         </div>
       </div>
+    <div class="experimental-website-settings" hidden>
+        <span id="multiple-automatic-downloads-default-string"></span>
+        <div class="settings-row">
+          <button class="website-settings-permission-button"
+              contentType="multiple-automatic-downloads"
+              i18n-content="websitesManage"></button>
+        </div>
+      </div>
     </section>
     <!-- MIDI system exclusive messages filter -->
     <section id="experimental-web-midi-settings" hidden="true">

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;

chrome/browser/resources/options/options.html

@@ -127,7 +127,6 @@
   <include src="spelling_confirm_overlay.html">
   <include src="startup_overlay.html">
   <include src="supervised_user_create_confirm.html">
-  <include src="website_settings.html">
   <include src="../sync_setup_overlay.html">
 <if expr="chromeos">
   <include src="chromeos/accounts_options.html">
@@ -155,7 +154,7 @@
   <include src="language_add_language_overlay.html">
   <include src="supervised_user_import.html">
   <include src="supervised_user_learn_more.html">
-  <include src="website_settings_edit_site.html">
+  <include src="website_settings.html">
 <if expr="not is_macosx">
   <include src="language_dictionary_overlay.html">
 </if>
@@ -172,6 +171,9 @@
   <include src="certificate_edit_ca_trust_overlay.html">
   <include src="certificate_import_error_overlay.html">
 </if>
+<div id="overlay-container-3" class="overlay transparent" hidden>
+  <include src="website_settings_edit_site.html">
+</div>
 </div>
 <div id="extension-controlled-settings-bubble-template" hidden>
   <div class="controlled-setting-bubble-content-row">

chrome/browser/resources/options/options.js

@@ -45,7 +45,7 @@ var SupervisedUserImportOverlay = options.SupervisedUserImportOverlay;
 var SupervisedUserLearnMoreOverlay = options.SupervisedUserLearnMoreOverlay;
 var SyncSetupOverlay = options.SyncSetupOverlay;
 var WebsiteSettingsEditor = options.WebsiteSettings.WebsiteSettingsEditor;
-var WebsiteSettingsManager = options.WebsiteSettingsManager;
+var WebsiteSettingsManager = options.ContentSettings.WebsiteSettingsManager;
 var ThirdPartyImeConfirmOverlay = options.ThirdPartyImeConfirmOverlay;
 
 /**
@@ -116,8 +116,7 @@ function load() {
                               BrowserOptions.getInstance(),
                               [$('privacyContentSettingsButton')]);
   PageManager.registerOverlay(WebsiteSettingsManager.getInstance(),
-                              BrowserOptions.getInstance(),
-                              [$('website-management-button')]);
+                              ContentSettings.getInstance());
   PageManager.registerOverlay(WebsiteSettingsEditor.getInstance(),
                               WebsiteSettingsManager.getInstance());
   PageManager.registerOverlay(ContentSettingsExceptionsArea.getInstance(),

chrome/browser/resources/options/website_settings.css

@@ -17,16 +17,17 @@
 }
 
 .website-header-controls {
+  align-items: center;
   display: flex;
+  justify-content: space-between;
 }
 
 .website-header-controls > div {
   font-weight: bold;
 }
 
-.resource-type-select {
-  -webkit-margin-end: auto;
-  min-width: 170px;
+#allowed-origin-list-title {
+  font-size: 1.3em;
 }
 
 #website-settings-search-box {
@@ -113,7 +114,7 @@
 }
 
 #website-settings-global-controls {
-  -webkit-margin-after: 8px;
+  -webkit-margin-after: 24px;
   align-items: center;
   display: flex;
 }

chrome/browser/resources/options/website_settings.html

 <div id="website-settings-page" class="page website-settings-page not-resizable"
     hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="websiteSettingsPage"></h1>
+  <h1 id="website-settings-title" i18n-content="websiteSettingsPage"></h1>
   <div id="website-list-content-area" class="content-area">
     <div class="website-column-headers">
       <div id="website-settings-global-controls">
         <select id="global-setting"></select>
       </div>
       <div class="website-header-controls">
-        <select id="resourceType" class="resource-type-select">
-          <option value="geolocation" i18n-content="websitesLabelLocation">
-          </option>
-          <option value="media-stream" i18n-content="websitesLabelMediaStream">
-          </option>
-          <option value="notifications"
-              i18n-content="websitesLabelNotifications"></option>
-          <option value="storage"
-              i18n-content="websitesLabelStorage"></option>
-          <option value="battery"
-              i18n-content="websitesLabelBattery"></option>
-        </select>
+        <span id="allowed-origin-list-title"
+            i18n-content="websitesAllowedListTitle">
+        </span>
         <input type="search" id="website-settings-search-box"
             i18n-values="placeholder:websitesSearch" incremental>
       </div>

chrome/browser/resources/options/website_settings.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('options', function() {
+cr.define('options.ContentSettings', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
@@ -60,12 +60,6 @@ cr.define('options', function() {
       $('website-settings-overlay-confirm').onclick =
           PageManager.closeOverlay.bind(PageManager);
 
-      $('resourceType').onchange = function(event) {
-        var target = event.target;
-        assert(target.tagName == 'SELECT');
-        WebsiteSettingsManager.getInstance().updatePage_(target.value);
-      };
-
       $('global-setting').onchange = function(event) {
         chrome.send('setDefaultContentSetting', [this.value]);
       };
@@ -94,8 +88,6 @@ cr.define('options', function() {
       else
         hash = 'geolocation';
       this.updatePage_(hash);
-
-      $('resourceType').value = hash;
     },
 
     /**
@@ -239,6 +231,9 @@ cr.define('options', function() {
         $('website-settings-global-controls').hidden = false;
         chrome.send('updateDefaultSetting');
       }
+
+      $('website-settings-title').textContent =
+          loadTimeData.getString(permissionString + 'TabLabel');
     }
   };
 

chrome/browser/ui/webui/options/content_settings_handler.cc

@@ -294,7 +294,7 @@ void ContentSettingsHandler::GetLocalizedValues(
     { "exceptionZoomHeader", IDS_EXCEPTIONS_ZOOM_HEADER },
     { "embeddedOnHost", IDS_EXCEPTIONS_GEOLOCATION_EMBEDDED_ON_HOST },
     // Cookies filter.
-    { "cookies_tab_label", IDS_COOKIES_TAB_LABEL },
+    { "cookiesTabLabel", IDS_COOKIES_TAB_LABEL },
     { "cookies_header", IDS_COOKIES_HEADER },
     { "cookiesAllow", IDS_COOKIES_ALLOW_RADIO },
     { "cookiesBlock", IDS_COOKIES_BLOCK_RADIO },
@@ -310,45 +310,45 @@ void ContentSettingsHandler::GetLocalizedValues(
        IDS_GEOLOCATION_GOOGLE_ACCESS_ENABLE_CHKBOX },
 #endif
     // Image filter.
-    { "images_tab_label", IDS_IMAGES_TAB_LABEL },
+    { "imagesTabLabel", IDS_IMAGES_TAB_LABEL },
     { "images_header", IDS_IMAGES_HEADER },
     { "imagesAllow", IDS_IMAGES_LOAD_RADIO },
     { "imagesBlock", IDS_IMAGES_NOLOAD_RADIO },
     // JavaScript filter.
-    { "javascript_tab_label", IDS_JAVASCRIPT_TAB_LABEL },
+    { "javascriptTabLabel", IDS_JAVASCRIPT_TAB_LABEL },
     { "javascript_header", IDS_JAVASCRIPT_HEADER },
     { "javascriptAllow", IDS_JS_ALLOW_RADIO },
     { "javascriptBlock", IDS_JS_DONOTALLOW_RADIO },
     // Plug-ins filter.
-    { "plugins_tab_label", IDS_PLUGIN_TAB_LABEL },
+    { "pluginsTabLabel", IDS_PLUGIN_TAB_LABEL },
     { "plugins_header", IDS_PLUGIN_HEADER },
     { "pluginsAsk", IDS_PLUGIN_ASK_RADIO },
     { "pluginsAllow", IDS_PLUGIN_LOAD_RADIO },
     { "pluginsBlock", IDS_PLUGIN_NOLOAD_RADIO },
     { "disableIndividualPlugins", IDS_PLUGIN_SELECTIVE_DISABLE },
     // Pop-ups filter.
-    { "popups_tab_label", IDS_POPUP_TAB_LABEL },
+    { "popupsTabLabel", IDS_POPUP_TAB_LABEL },
     { "popups_header", IDS_POPUP_HEADER },
     { "popupsAllow", IDS_POPUP_ALLOW_RADIO },
     { "popupsBlock", IDS_POPUP_BLOCK_RADIO },
     // Location filter.
-    { "location_tab_label", IDS_GEOLOCATION_TAB_LABEL },
+    { "locationTabLabel", IDS_GEOLOCATION_TAB_LABEL },
     { "location_header", IDS_GEOLOCATION_HEADER },
     { "locationAllow", IDS_GEOLOCATION_ALLOW_RADIO },
     { "locationAsk", IDS_GEOLOCATION_ASK_RADIO },
     { "locationBlock", IDS_GEOLOCATION_BLOCK_RADIO },
     { "set_by", IDS_GEOLOCATION_SET_BY_HOVER },
     // Notifications filter.
-    { "notifications_tab_label", IDS_NOTIFICATIONS_TAB_LABEL },
+    { "notificationsTabLabel", IDS_NOTIFICATIONS_TAB_LABEL },
     { "notifications_header", IDS_NOTIFICATIONS_HEADER },
     { "notificationsAllow", IDS_NOTIFICATIONS_ALLOW_RADIO },
     { "notificationsAsk", IDS_NOTIFICATIONS_ASK_RADIO },
     { "notificationsBlock", IDS_NOTIFICATIONS_BLOCK_RADIO },
     // Fullscreen filter.
-    { "fullscreen_tab_label", IDS_FULLSCREEN_TAB_LABEL },
+    { "fullscreenTabLabel", IDS_FULLSCREEN_TAB_LABEL },
     { "fullscreen_header", IDS_FULLSCREEN_HEADER },
     // Mouse Lock filter.
-    { "mouselock_tab_label", IDS_MOUSE_LOCK_TAB_LABEL },
+    { "mouselockTabLabel", IDS_MOUSE_LOCK_TAB_LABEL },
     { "mouselock_header", IDS_MOUSE_LOCK_HEADER },
     { "mouselockAllow", IDS_MOUSE_LOCK_ALLOW_RADIO },
     { "mouselockAsk", IDS_MOUSE_LOCK_ASK_RADIO },
@@ -387,7 +387,7 @@ void ContentSettingsHandler::GetLocalizedValues(
     { "ppapiBrokerAsk", IDS_PPAPI_BROKER_ASK_RADIO },
     { "ppapiBrokerBlock", IDS_PPAPI_BROKER_BLOCK_RADIO },
     // Multiple automatic downloads
-    { "multiple-automatic-downloads_header",
+    { "multipleAutomaticDownloadsTabLabel",
       IDS_AUTOMATIC_DOWNLOADS_TAB_LABEL },
     { "multipleAutomaticDownloadsAllow",
       IDS_AUTOMATIC_DOWNLOADS_ALLOW_RADIO },

chrome/browser/ui/webui/options/website_settings_handler.cc

@@ -97,6 +97,7 @@ void WebsiteSettingsHandler::GetLocalizedValues(
       {"websitesImagesDescription", IDS_WEBSITE_SETTINGS_IMAGES_DESCRIPTION},
       {"websitesButtonClear", IDS_WEBSITE_SETTINGS_STORAGE_CLEAR_BUTTON},
       {"websitesButtonStop", IDS_WEBSITE_SETTINGS_BATTERY_STOP_BUTTON},
+      {"websitesAllowedListTitle", IDS_WEBSITE_SETTINGS_ALLOWED_LIST_TITLE},
       {"websitesBlockedListTitle", IDS_WEBSITE_SETTINGS_BLOCKED_LIST_TITLE},
   };