Add many more content settings to be set in the Website Settings options

chrome/browser/resources/options/website_settings_edit_page.js

 // Copyright 2014 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.
 
 cr.define('options.WebsiteSettings', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
 
   /////////////////////////////////////////////////////////////////////////////
   // WebsiteSettingsEditor class:
 
   /**
    * Encapsulated handling of the website settings editor page.
    * @constructor
    */
   function WebsiteSettingsEditor() {
     Page.call(this, 'websiteEdit',
                      loadTimeData.getString('websitesOptionsPageTabTitle'),
                      'website-settings-edit-page');
     this.permissions = ['geolocation', 'notifications', 'media-stream',
-        'cookies'];
+                        'cookies', 'multiple-automatic-downloads', 'images',
+                        'plugins', 'popups', 'javascript'];
   }
 
   cr.addSingletonGetter(WebsiteSettingsEditor);
 
   WebsiteSettingsEditor.prototype = {
     __proto__: Page.prototype,
 
 
     /** @override */
     initializePage: function() {
       Page.prototype.initializePage.call(this);
 
       $('website-settings-storage-delete-button').onclick = function(event) {
         chrome.send('deleteLocalStorage');
       };
 
       $('website-settings-battery-stop-button').onclick = function(event) {
         chrome.send('stopOrigin');
       };
 
       $('websiteSettingsEditorCancelButton').onclick =
           PageManager.closeOverlay.bind(PageManager);
 
       $('websiteSettingsEditorDoneButton').onclick = function(event) {
         WebsiteSettingsEditor.getInstance().updatePermissions();
         PageManager.closeOverlay.bind(PageManager)();
       };
+
+      var permissionList =
+          this.pageDiv.querySelector('.origin-permission-list');
+      for (var key in this.permissions) {
+        permissionList.appendChild(
+            this.makePermissionOption_(this.permissions[key]));
+      }
     },
 
     /**
      * Populates the page with the proper information for a given URL.
      * @param {string} url The URL of the page.
      * @private
      */
     populatePage: function(url) {
         this.url = url;
 
@@ skipping 38 matching lines @@
 
     updatePermissions: function() {
       for (var key in this.permissions) {
         var selection = $(this.permissions[key] + '-select-option');
         if (selection.value != selection.originalValue) {
           chrome.send('setOriginPermission',
               [this.permissions[key], selection.value]);
         }
       }
     },
+
+    /**
+     * Populates the origin permission list with the different usable
+     * permissions.
+     * @param {string} permissionName A string with the permission name.
+     * @return {Element} The element with the usable permission setting.
+     */
+    makePermissionOption_: function(permissionName) {
+      var permissionNameWithoutDash = permissionName.replace(/-/g, '');
+      var permissionOption = cr.doc.createElement('div');
+      permissionOption.className = 'permission-option';
+
+      var permissionNameSpan = cr.doc.createElement('span');
+      permissionNameSpan.className = 'permission-name';
+      permissionNameSpan.textContent = loadTimeData.getString('websites' +

[Bernhard Bauer, 2014/09/05 08:56:18]

At this point it might be easier to either
a) write a proper conversion from dash-separated-style to CamelCase, or
b) just use a table that maps from one to the other.

[Daniel Nishi, 2014/09/05 18:02:39]

I've gone with b so we can have the flexibility to not have to name every string
based upon the string that maps to the Content Setting.

For example, geolocation goes often by "location" in these interfaces, but
"geolocation" in Content Settings string mapping.

+          permissionNameWithoutDash[0].toUpperCase() +
+          permissionNameWithoutDash.slice(1) + 'Description');
+      permissionOption.appendChild(permissionNameSpan);
+
+      var permissionSelector = cr.doc.createElement('select');
+      permissionSelector.setAttribute('id', permissionName + '-select-option');
+      permissionSelector.className = 'weaktrl permission-selection-option';
+      permissionOption.appendChild(permissionSelector);
+      return permissionOption;
+    },
   };
 
   WebsiteSettingsEditor.populateOrigin = function(localStorage, batteryUsage,
       permissions, showPage) {
     WebsiteSettingsEditor.getInstance().populateOrigin_(localStorage,
                                                         batteryUsage,
                                                         permissions,
                                                         showPage);
   };
 
   // Export
   return {
     WebsiteSettingsEditor: WebsiteSettingsEditor
   };
 
 });