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

chrome/browser/resources/options/content_settings.html

 <div id="content-settings-page" class="page" hidden>
   <div class="close-button"></div>
   <h1 i18n-content="contentSettingsPage"></h1>
   <div class="content-area">
     <!-- Cookie filter tab contents -->
     <section>
       <h3 i18n-content="cookiesTabLabel"></h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
@@ skipping 375 matching lines @@
   <if expr="chromeos">
         <div class="settings-row">
           <button id="protected-content-exceptions"
               class="exceptions-list-button" contentType="protectedContent"
               i18n-content="manageExceptions"></button>
         </div>
   </if>
       </div>
     </section>
 </if>
-    <!-- Media Stream capture device filter -->
-    <section id="media-stream-settings">
-      <div class="section-header">
-        <h3 i18n-content="mediaStreamTabLabel"></h3>
-        <span id="media-indicator"
-            class="controlled-setting-indicator group-indicator"></span>
-      </div>
+    <!-- Microphone filter -->
+    <section>
+      <h3 i18n-content="mediaStreamMicTabLabel">Microphone</h3>

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

Remove the contents here.

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

Done.

       <div>
         <div class="media-device-control">
           <span id="media-select-mic-label" i18n-content="mediaSelectMicLabel">
           </span>
           <select id="media-select-mic" class="weakrtl"
                   aria-labelledby="media-select-mic-label"></select>
         </div>
+        <div class="radio controlled-setting-with-label">
+          <label>
+            <input type="radio" name="media-stream-mic" value="ask">
+            <span>
+              <span i18n-content="mediaStreamMicAsk"></span>
+              <span class="controlled-setting-indicator"
+                  content-setting="media-stream-mic" value="ask"></span>
+            </span>
+          </label>
+        </div>
+        <div class="radio controlled-setting-with-label">
+          <label>
+            <input type="radio" name="media-stream-mic" value="block">
+            <span>
+              <span i18n-content="mediaStreamMicBlock"></span>
+              <span class="controlled-setting-indicator"
+                  content-setting="media-stream-mic" value="block"></span>
+            </span>
+          </label>
+        </div>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="media-stream-mic"
+              i18n-content="manageExceptions"></button>
+        </div>
+        <div id="media-pepper-flash-default" class="pepper-flash-settings">
+          <span i18n-content="mediaPepperFlashDefaultDivergedLabel"></span>
+          <a target="_blank" i18n-content="mediaPepperFlashChangeLink"
+              i18n-values="href:mediaPepperFlashGlobalPrivacyURL"></a>
+        </div>
+      </div>
+    </section>
+    <!-- Camera filter -->
+    <section>
+      <h3 i18n-content="mediaStreamCameraTabLabel">Camera</h3>

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

Remove the contents here.

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

Done.

+      <div>
         <div class="media-device-control">
           <span id="media-select-camera-label"
                 i18n-content="mediaSelectCameraLabel"></span>
           <select id="media-select-camera" class="weakrtl"
                   aria-labelledby="media-select-camera-label"></select>
         </div>
         <div class="radio controlled-setting-with-label">
           <label>
-            <input type="radio" name="media-stream" value="ask">
+            <input type="radio" name="media-stream-camera" value="ask">
             <span>
-              <span id="media-stream-ask-label" i18n-content="mediaStreamAsk">
-              </span>
+              <span i18n-content="mediaStreamCameraAsk"></span>
               <span class="controlled-setting-indicator"
-                  content-setting="media-stream" value="ask"></span>
+                  content-setting="media-stream-camera" value="ask"></span>
             </span>
           </label>
         </div>
         <div class="radio controlled-setting-with-label">
           <label>
-            <input id="media-stream-block" type="radio" name="media-stream"
-                value="block">
+            <input type="radio" name="media-stream-camera" value="block">
             <span>
-              <span id="media-stream-block-label"
-                 i18n-content="mediaStreamBlock"></span>
+              <span i18n-content="mediaStreamCameraBlock"></span>
               <span class="controlled-setting-indicator"
-                  content-setting="media-stream" value="block"></span>
+                  content-setting="media-stream-camera" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="media-stream"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button"
+              contentType="media-stream-camera" i18n-content="manageExceptions">
+          </button>
         </div>
         <div id="media-pepper-flash-default" class="pepper-flash-settings">
           <span i18n-content="mediaPepperFlashDefaultDivergedLabel"></span>
           <a target="_blank" i18n-content="mediaPepperFlashChangeLink"
               i18n-values="href:mediaPepperFlashGlobalPrivacyURL"></a>
         </div>
       </div>
     </section>
     <!-- PPAPI broker -->
     <section>
@@ skipping 149 matching lines @@
     </section>
   </div>
   <div class="action-area">
     <div class="button-strip">
       <button id="content-settings-overlay-confirm" class="default-button"
           i18n-content="done">
       </button>
     </div>
   </div>
 </div>