Split the Media settings UI into separate microphone and camera sections.

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 f77b3f48b9af2a007d971b03e668c9e9c4c86633..3a0379e73d4d6bdc4eead6d26288148ec64afa92 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -23,7 +23,8 @@ cr.define('options', function() {
   /** @const */ var permissionsLookup = {
     'location': 'location',

[Bernhard Bauer, 2015/07/17 08:37:11]

Could you sort this list alphabetically?

[msramek, 2015/07/17 11:59:50]

Done.

     'notifications': 'notifications',
-    'media-stream': 'mediaStream',
+    'media-stream-mic': 'mediaStreamMic',
+    'media-stream-camera': 'mediaStreamCamera',
     'cookies': 'cookies',
     'multiple-automatic-downloads': 'multipleAutomaticDownloads',
     'images': 'images',
@@ -150,49 +151,6 @@ cr.define('options', function() {
   };
 
   /**
-   * Updates the labels and indicators for the Media settings. Those require
-   * special handling because they are backed by multiple prefs and can change
-   * their scope based on the managed state of the backing prefs.
-   * @param {{askText: string, blockText: string, cameraDisabled: boolean,
-   *          micDisabled: boolean, showBubble: boolean, bubbleText: string}}
-   *     mediaSettings A dictionary containing the following fields:
-   *     askText The label for the ask radio button.
-   *     blockText The label for the block radio button.
-   *     cameraDisabled Whether to disable the camera dropdown.
-   *     micDisabled Whether to disable the microphone dropdown.
-   *     showBubble Wether to show the managed icon and bubble for the media
-   *                label.
-   *     bubbleText The text to use inside the bubble if it is shown.
-   */
-  ContentSettings.updateMediaUI = function(mediaSettings) {
-    $('media-stream-ask-label').innerHTML =
-        loadTimeData.getString(mediaSettings.askText);
-    $('media-stream-block-label').innerHTML =
-        loadTimeData.getString(mediaSettings.blockText);
-
-    if (mediaSettings.micDisabled)
-      $('media-select-mic').disabled = true;
-    if (mediaSettings.cameraDisabled)
-      $('media-select-camera').disabled = true;
-
-    PageManager.hideBubble();
-    // Create a synthetic pref change event decorated as
-    // CoreOptionsHandler::CreateValueForPref() does.
-    // TODO(arv): It was not clear what event type this should use?
-    var event = new Event('undefined');
-    event.value = {};
-
-    if (mediaSettings.showBubble) {
-      event.value = { controlledBy: 'policy' };
-      $('media-indicator').setAttribute(
-          'textpolicy', loadTimeData.getString(mediaSettings.bubbleText));
-      $('media-indicator').location = cr.ui.ArrowLocation.TOP_START;
-    }
-
-    $('media-indicator').handlePrefChange(event);
-  };
-
-  /**
    * Initializes an exceptions list.
    * @param {string} type The content type that we are setting exceptions for.
    * @param {Array<options.Exception>} exceptions An array of pairs, where the