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

chrome/browser/resources/options/content_settings.css

 /* Copyright (c) 2012 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. */
 
 #content-settings-page {
   min-width: 620px;
 }
 
 #content-settings-exceptions-area {
   min-width: 540px;
@@ skipping 61 matching lines @@
 .settings-list div[role='listitem'][controlled-by='extension'] {
   background: rgb(250, 230, 146);
   border-bottom: 1px solid rgb(201, 189, 141);
   border-top: 0;
 }
 
 .sublabel {
   -webkit-margin-start: 2em;
 }
 
-.media-device-control {
-  display: table-row;
+select.media-device-control {
+  margin: 5px 0;
+  width: 12em;
 }
 
-.media-device-control > span {
-  display: table-cell;
-  min-width: 145px;
-}
-
-.media-device-control > select {
-  display: table-cell;
-  margin: 5px 0;
-  width: 12em;
+select.media-device-control:empty {

[msramek, 2015/07/23 18:59:27]

UI request: Hide device selection comboboxes if they're empty.

+  display: none;
 }
 
 .exception-setting.media-audio-setting {
   width: 6em;
 }
 
 .exception-setting.media-video-setting {
   width: 6.5em;
 }
 
 #media-column-header {
   display: -webkit-box;
 }
 
 #media-audio-column {
   width: 6em;
 }
 
 #media-video-column {
   width: 8.5em;
 }