diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index 0ba73b297198..ffefdffdbc14 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1343,7 +1343,7 @@ pref("devtools.scratchpad.enableAutocompletion", true);
 pref("devtools.styleeditor.enabled", true);
 pref("devtools.styleeditor.source-maps-enabled", false);
 pref("devtools.styleeditor.autocompletion-enabled", true);
-pref("devtools.styleeditor.showMediaSidebar", false);
+pref("devtools.styleeditor.showMediaSidebar", true);
 
 // Enable the Shader Editor.
 pref("devtools.shadereditor.enabled", false);
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar.js b/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar.js
index 4ca60a277175..fd587ca128fe 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar.js
@@ -4,7 +4,7 @@
 
 // https rather than chrome to improve coverage
 const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
-const PREF = "devtools.styleeditor.showMediaSidebar";
+const MEDIA_PREF = "devtools.styleeditor.showMediaSidebar";
 
 const RESIZE = 300;
 const LABELS = ["not all", "all", "(max-width: 400px)"];
@@ -13,8 +13,6 @@ const LINE_NOS = [2, 8, 20];
 waitForExplicitFinish();
 
 let test = asyncTest(function*() {
-  Services.prefs.setBoolPref(PREF, true);
-
   let {UI} = yield addTabAndOpenStyleEditors(2, null, TESTCASE_URI);
 
   is(UI.editors.length, 2, "correct number of editors");
@@ -29,20 +27,37 @@ let test = asyncTest(function*() {
   yield openEditor(mediaEditor);
   testMediaEditor(mediaEditor);
 
+  // Test that sidebar hides when flipping pref
+  testShowHide(mediaEditor);
+
   // Test resizing and seeing @media matching state change
   let originalWidth = window.outerWidth;
   let originalHeight = window.outerHeight;
 
-  let onMatchesChange = listenForMatchesChange(UI);
+  let onMatchesChange = listenForMediaChange(UI);
   window.resizeTo(RESIZE, RESIZE);
   yield onMatchesChange;
 
   testMediaMatchChanged(mediaEditor);
 
   window.resizeTo(originalWidth, originalHeight);
-  Services.prefs.clearUserPref(PREF);
 });
 
+function* testShowHide(editor) {
+  let sidebarChange = listenForMediaChange(UI);
+  Services.prefs.setBoolPref(MEDIA_PREF, false);
+  yield sidebarChange;
+
+  let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+  is(sidebar.hidden, true, "sidebar is hidden after flipping pref");
+
+  sidebarChange = listenForMediaChange(UI);
+  Services.prefs.clearUserPref(MEDIA_PREF);
+  yield sidebarChange;
+
+  is(sidebar.hidden, false, "sidebar is showing after flipping pref back");
+}
+
 function testPlainEditor(editor) {
   let sidebar = editor.details.querySelector(".stylesheet-sidebar");
   is(sidebar.hidden, true, "sidebar is hidden on editor without @media");
@@ -89,7 +104,7 @@ function openEditor(editor) {
   return editor.getSourceEditor();
 }
 
-function listenForMatchesChange(UI) {
+function listenForMediaChange(UI) {
   let deferred = promise.defer();
   UI.once("media-list-changed", () => {
     deferred.resolve();
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js b/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js
index dc3a07663da6..bbca5cad295e 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js
@@ -4,7 +4,6 @@
 
 // https rather than chrome to improve coverage
 const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules-sourcemaps.html";
-const MEDIA_PREF = "devtools.styleeditor.showMediaSidebar";
 const MAP_PREF = "devtools.styleeditor.source-maps-enabled";
 
 const LABELS = ["screen and (max-width: 320px)",
@@ -14,7 +13,6 @@ const LINE_NOS = [4, 4];
 waitForExplicitFinish();
 
 let test = asyncTest(function*() {
-  Services.prefs.setBoolPref(MEDIA_PREF, true);
   Services.prefs.setBoolPref(MAP_PREF, true);
 
   let {UI} = yield addTabAndOpenStyleEditors(2, null, TESTCASE_URI);
@@ -28,7 +26,6 @@ let test = asyncTest(function*() {
   yield openEditor(mediaEditor);
   testMediaEditor(mediaEditor);
 
-  Services.prefs.clearUserPref(MEDIA_PREF);
   Services.prefs.clearUserPref(MAP_PREF);
 });