diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 465e04de31f7..5ec192d13eda 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2375,16 +2375,10 @@ html|span.ac-emphasize-text-url {
 /* ----- SIDEBAR ELEMENTS ----- */
 
 #sidebar-box {
-  background-color: hsl(212,19%,85%);
-  background-image: linear-gradient(hsl(213,26%,93%), hsl(212,19%,85%));
+  -moz-appearance: -moz-mac-source-list;
   box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2);
 }
 
-#sidebar-box:-moz-window-inactive {
-  background-color: hsl(0,0%,92%);
-  background-image: linear-gradient(hsl(0,0%,97%), hsl(0,0%,92%));
-}
-
 sidebarheader {
   padding: 2px 2px 0;
   text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
@@ -2434,15 +2428,9 @@ sidebarheader {
 
 @media (-moz-mac-yosemite-theme) {
   #sidebar-box {
-    -moz-appearance: -moz-mac-vibrancy-light;
-    background-image: none;
     box-shadow: none;
   }
 
-  #sidebar-box:-moz-window-inactive {
-    background-image: none;
-  }
-
   sidebarheader {
     text-shadow: none;
     font-weight: 500;
diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css
index f70286c99185..ae6e04f354ff 100644
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -249,30 +249,17 @@
 
 /* Place List, Place Content */
 #placesList {
-  background-color: hsl(212,19%,85%);
-  background-image: linear-gradient(hsl(213,26%,93%), hsl(212,19%,85%));
+  -moz-appearance: -moz-mac-source-list;
   box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2);
   width: 160px;
 }
 
-#placesList:-moz-window-inactive {
-  background-color: hsl(0,0%,92%);
-  background-image: linear-gradient(hsl(0,0%,97%), hsl(0,0%,92%));
-}
-
 @media (-moz-mac-yosemite-theme) {
   #placesList {
-    -moz-appearance: -moz-mac-vibrancy-light;
-    background-image: none;
     box-shadow: none;
   }
-
-  #placesList:-moz-window-inactive {
-    background-image: none;
-  }
 }
 
-
 /* Info box */
 #detailsDeck {
   border-top: 1px solid #919191;
diff --git a/gfx/src/nsThemeConstants.h b/gfx/src/nsThemeConstants.h
index 5b099cacbdf3..0c3f40a6d630 100644
--- a/gfx/src/nsThemeConstants.h
+++ b/gfx/src/nsThemeConstants.h
@@ -291,3 +291,4 @@
 #define NS_THEME_MAC_DISCLOSURE_BUTTON_CLOSED              246
 
 #define NS_THEME_GTK_INFO_BAR                              247
+#define NS_THEME_MAC_SOURCE_LIST                           248
diff --git a/layout/style/nsCSSKeywordList.h b/layout/style/nsCSSKeywordList.h
index b99c8d28412b..adbb86f18752 100644
--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -756,6 +756,7 @@ CSS_KEY(-moz-mac-vibrancy-light, _moz_mac_vibrancy_light)
 CSS_KEY(-moz-mac-vibrancy-dark, _moz_mac_vibrancy_dark)
 CSS_KEY(-moz-mac-disclosure-button-closed, _moz_mac_disclosure_button_closed)
 CSS_KEY(-moz-mac-disclosure-button-open, _moz_mac_disclosure_button_open)
+CSS_KEY(-moz-mac-source-list, _moz_mac_source_list)
 CSS_KEY(alphabetic, alphabetic)
 CSS_KEY(bevel, bevel)
 CSS_KEY(butt, butt)
diff --git a/layout/style/nsCSSProps.cpp b/layout/style/nsCSSProps.cpp
index 5123ace02865..acb796ef6390 100644
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -867,6 +867,7 @@ const KTableEntry nsCSSProps::kAppearanceKTable[] = {
   { eCSSKeyword__moz_mac_disclosure_button_open,   NS_THEME_MAC_DISCLOSURE_BUTTON_OPEN },
   { eCSSKeyword__moz_mac_disclosure_button_closed, NS_THEME_MAC_DISCLOSURE_BUTTON_CLOSED },
   { eCSSKeyword__moz_gtk_info_bar,              NS_THEME_GTK_INFO_BAR },
+  { eCSSKeyword__moz_mac_source_list,           NS_THEME_MAC_SOURCE_LIST },
   { eCSSKeyword_UNKNOWN,                        -1 }
 };
 
diff --git a/widget/cocoa/VibrancyManager.h b/widget/cocoa/VibrancyManager.h
index 464a106cb118..df1e613a53f8 100644
--- a/widget/cocoa/VibrancyManager.h
+++ b/widget/cocoa/VibrancyManager.h
@@ -26,7 +26,8 @@ enum class VibrancyType {
   TOOLTIP,
   MENU,
   HIGHLIGHTED_MENUITEM,
-  SHEET
+  SHEET,
+  SOURCE_LIST
 };
 
 /**
diff --git a/widget/cocoa/VibrancyManager.mm b/widget/cocoa/VibrancyManager.mm
index e1eed593c46d..9ece4a76b7d8 100644
--- a/widget/cocoa/VibrancyManager.mm
+++ b/widget/cocoa/VibrancyManager.mm
@@ -186,6 +186,7 @@ AppearanceForVibrancyType(VibrancyType aType)
     case VibrancyType::MENU:
     case VibrancyType::HIGHLIGHTED_MENUITEM:
     case VibrancyType::SHEET:
+    case VibrancyType::SOURCE_LIST:
       return [NSAppearanceClass performSelector:@selector(appearanceNamed:)
                                      withObject:@"NSAppearanceNameVibrantLight"];
     case VibrancyType::DARK:
@@ -208,7 +209,8 @@ enum {
 
 #if !defined(MAC_OS_X_VERSION_10_11) || MAC_OS_X_VERSION_MAX_ALLOWED < MAC_OS_X_VERSION_10_11
 enum {
-  NSVisualEffectMaterialMenu = 5
+  NSVisualEffectMaterialMenu = 5,
+  NSVisualEffectMaterialSidebar = 7
 };
 #endif
 
@@ -263,15 +265,15 @@ VibrancyManager::CreateEffectView(VibrancyType aType, NSRect aRect)
                    withObject:AppearanceForVibrancyType(aType)];
   [effectView setState:VisualEffectStateForVibrancyType(aType)];
 
+  BOOL canUseElCapitanMaterials = nsCocoaFeatures::OnElCapitanOrLater();
   if (aType == VibrancyType::MENU) {
-    if (nsCocoaFeatures::OnElCapitanOrLater()) {
-      [effectView setMaterial:NSVisualEffectMaterialMenu];
-    } else {
-      // Before 10.11 there is no material that perfectly matches the menu
-      // look. Of all available material types, NSVisualEffectMaterialTitlebar
-      // is the one that comes closest.
-      [effectView setMaterial:NSVisualEffectMaterialTitlebar];
-    }
+    // Before 10.11 there is no material that perfectly matches the menu
+    // look. Of all available material types, NSVisualEffectMaterialTitlebar
+    // is the one that comes closest.
+    [effectView setMaterial:canUseElCapitanMaterials ? NSVisualEffectMaterialMenu
+                                                     : NSVisualEffectMaterialTitlebar];
+  } else if (aType == VibrancyType::SOURCE_LIST && canUseElCapitanMaterials) {
+    [effectView setMaterial:NSVisualEffectMaterialSidebar];
   } else if (aType == VibrancyType::HIGHLIGHTED_MENUITEM) {
     [effectView setMaterial:NSVisualEffectMaterialMenuItem];
     if ([effectView respondsToSelector:@selector(setEmphasized:)]) {
diff --git a/widget/cocoa/nsChildView.mm b/widget/cocoa/nsChildView.mm
index a2a8abdaee5c..030eaaff4f0e 100644
--- a/widget/cocoa/nsChildView.mm
+++ b/widget/cocoa/nsChildView.mm
@@ -2488,9 +2488,12 @@ nsChildView::UpdateVibrancy(const nsTArray<ThemeGeometry>& aThemeGeometries)
     GatherThemeGeometryRegion(aThemeGeometries, nsNativeThemeCocoa::eThemeGeometryTypeTooltip);
   LayoutDeviceIntRegion highlightedMenuItemRegion =
     GatherThemeGeometryRegion(aThemeGeometries, nsNativeThemeCocoa::eThemeGeometryTypeHighlightedMenuItem);
+  LayoutDeviceIntRegion sourceListRegion =
+    GatherThemeGeometryRegion(aThemeGeometries, nsNativeThemeCocoa::eThemeGeometryTypeSourceList);
 
   MakeRegionsNonOverlapping(sheetRegion, vibrantLightRegion, vibrantDarkRegion,
-                            menuRegion, tooltipRegion, highlightedMenuItemRegion);
+                            menuRegion, tooltipRegion, highlightedMenuItemRegion,
+                            sourceListRegion);
 
   auto& vm = EnsureVibrancyManager();
   vm.UpdateVibrantRegion(VibrancyType::LIGHT, vibrantLightRegion);
@@ -2498,6 +2501,7 @@ nsChildView::UpdateVibrancy(const nsTArray<ThemeGeometry>& aThemeGeometries)
   vm.UpdateVibrantRegion(VibrancyType::MENU, menuRegion);
   vm.UpdateVibrantRegion(VibrancyType::HIGHLIGHTED_MENUITEM, highlightedMenuItemRegion);
   vm.UpdateVibrantRegion(VibrancyType::SHEET, sheetRegion);
+  vm.UpdateVibrantRegion(VibrancyType::SOURCE_LIST, sourceListRegion);
   vm.UpdateVibrantRegion(VibrancyType::DARK, vibrantDarkRegion);
 }
 
@@ -2525,6 +2529,8 @@ ThemeGeometryTypeToVibrancyType(nsITheme::ThemeGeometryType aThemeGeometryType)
       return VibrancyType::HIGHLIGHTED_MENUITEM;
     case nsNativeThemeCocoa::eThemeGeometryTypeSheet:
       return VibrancyType::SHEET;
+    case nsNativeThemeCocoa::eThemeGeometryTypeSourceList:
+      return VibrancyType::SOURCE_LIST;
     default:
       MOZ_CRASH();
   }
diff --git a/widget/cocoa/nsNativeThemeCocoa.h b/widget/cocoa/nsNativeThemeCocoa.h
index 4eff457be489..7b0dc158e758 100644
--- a/widget/cocoa/nsNativeThemeCocoa.h
+++ b/widget/cocoa/nsNativeThemeCocoa.h
@@ -40,6 +40,7 @@ public:
     eThemeGeometryTypeVibrancyDark,
     eThemeGeometryTypeTooltip,
     eThemeGeometryTypeSheet,
+    eThemeGeometryTypeSourceList,
   };
 
   nsNativeThemeCocoa();
diff --git a/widget/cocoa/nsNativeThemeCocoa.mm b/widget/cocoa/nsNativeThemeCocoa.mm
index 85119bb1c04c..94d72c3af309 100644
--- a/widget/cocoa/nsNativeThemeCocoa.mm
+++ b/widget/cocoa/nsNativeThemeCocoa.mm
@@ -3006,6 +3006,31 @@ nsNativeThemeCocoa::DrawWidgetBackground(nsRenderingContext* aContext,
       CGContextFillRect(cgContext, CGRectMake(x + 1, y + h - 1, w - 2, 1));
     }
       break;
+
+    case NS_THEME_MAC_SOURCE_LIST: {
+      if (VibrancyManager::SystemSupportsVibrancy()) {
+        ThemeGeometryType type = ThemeGeometryTypeForWidget(aFrame, aWidgetType);
+        DrawVibrancyBackground(cgContext, macRect, aFrame, type);
+      } else {
+        CGGradientRef backgroundGradient;
+        CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
+        CGFloat activeGradientColors[8] = { 0.9137, 0.9294, 0.9490, 1.0,
+                                            0.8196, 0.8471, 0.8784, 1.0 };
+        CGFloat inactiveGradientColors[8] = { 0.9686, 0.9686, 0.9686, 1.0,
+                                              0.9216, 0.9216, 0.9216, 1.0 };
+        CGPoint start = macRect.origin;
+        CGPoint end = CGPointMake(macRect.origin.x,
+                                  macRect.origin.y + macRect.size.height);
+        BOOL isActive = FrameIsInActiveWindow(aFrame);
+        backgroundGradient =
+          CGGradientCreateWithColorComponents(rgb, isActive ? activeGradientColors
+                                                            : inactiveGradientColors, NULL, 2);
+        CGContextDrawLinearGradient(cgContext, backgroundGradient, start, end, 0);
+        CGGradientRelease(backgroundGradient);
+        CGColorSpaceRelease(rgb);
+      }
+    }
+      break;
     
     case NS_THEME_TAB:
       DrawSegment(cgContext, macRect, eventState, aFrame, tabRenderSettings);
@@ -3748,6 +3773,7 @@ nsNativeThemeCocoa::ThemeSupportsWidget(nsPresContext* aPresContext, nsIFrame* a
     case NS_THEME_TREEVIEW_HEADER_SORTARROW:
     case NS_THEME_TREEVIEW_TREEITEM:
     case NS_THEME_TREEVIEW_LINE:
+    case NS_THEME_MAC_SOURCE_LIST:
 
     case NS_THEME_RANGE:
 
@@ -3888,6 +3914,7 @@ nsNativeThemeCocoa::NeedToClearBackgroundBehindWidget(nsIFrame* aFrame,
                                                       uint8_t aWidgetType)
 {
   switch (aWidgetType) {
+    case NS_THEME_MAC_SOURCE_LIST:
     case NS_THEME_MAC_VIBRANCY_LIGHT:
     case NS_THEME_MAC_VIBRANCY_DARK:
     case NS_THEME_TOOLTIP:
@@ -3917,6 +3944,7 @@ nsNativeThemeCocoa::WidgetProvidesFontSmoothingBackgroundColor(nsIFrame* aFrame,
                                                                nscolor* aColor)
 {
   switch (aWidgetType) {
+    case NS_THEME_MAC_SOURCE_LIST:
     case NS_THEME_MAC_VIBRANCY_LIGHT:
     case NS_THEME_MAC_VIBRANCY_DARK:
     case NS_THEME_TOOLTIP:
@@ -3973,6 +4001,8 @@ nsNativeThemeCocoa::ThemeGeometryTypeForWidget(nsIFrame* aFrame, uint8_t aWidget
     }
     case NS_THEME_DIALOG:
       return IsWindowSheet(aFrame) ? eThemeGeometryTypeSheet : eThemeGeometryTypeUnknown;
+    case NS_THEME_MAC_SOURCE_LIST:
+      return eThemeGeometryTypeSourceList;
     default:
       return eThemeGeometryTypeUnknown;
   }