diff --git a/devtools/client/webconsole/components/App.js b/devtools/client/webconsole/components/App.js
index 934dc60901c8..cbde1c924ccd 100644
--- a/devtools/client/webconsole/components/App.js
+++ b/devtools/client/webconsole/components/App.js
@@ -110,6 +110,7 @@ class App extends Component {
       editorWidth: PropTypes.number,
       hidePersistLogsCheckbox: PropTypes.bool,
       hideShowContentMessagesCheckbox: PropTypes.bool,
+      inputEnabled: PropTypes.bool,
       sidebarVisible: PropTypes.bool.isRequired,
       eagerEvaluationEnabled: PropTypes.bool.isRequired,
       filterBarDisplayMode: PropTypes.oneOf([
@@ -297,8 +298,13 @@ class App extends Component {
       serviceContainer,
       webConsoleUI,
       showEvaluationContextSelector,
+      inputEnabled,
     } = this.props;
 
+    if (!inputEnabled) {
+      return null;
+    }
+
     return editorMode
       ? EditorToolbar({
           key: "editor-toolbar",
@@ -329,6 +335,7 @@ class App extends Component {
       autocomplete,
       editorMode,
       editorWidth,
+      inputEnabled,
     } = this.props;
 
     return JSTerm({
@@ -339,12 +346,18 @@ class App extends Component {
       autocomplete,
       editorMode,
       editorWidth,
+      inputEnabled,
     });
   }
 
   renderEagerEvaluation() {
-    const { eagerEvaluationEnabled, serviceContainer } = this.props;
-    if (!eagerEvaluationEnabled) {
+    const {
+      eagerEvaluationEnabled,
+      serviceContainer,
+      inputEnabled,
+    } = this.props;
+
+    if (!eagerEvaluationEnabled || !inputEnabled) {
       return null;
     }
 
@@ -399,17 +412,22 @@ class App extends Component {
   }
 
   renderRootElement(children) {
-    const { editorMode, sidebarVisible } = this.props;
+    const {
+      editorMode,
+      sidebarVisible,
+      inputEnabled,
+      eagerEvaluationEnabled,
+    } = this.props;
 
     const classNames = ["webconsole-app"];
     if (sidebarVisible) {
       classNames.push("sidebar-visible");
     }
-    if (editorMode) {
+    if (editorMode && inputEnabled) {
       classNames.push("jsterm-editor");
     }
 
-    if (this.props.eagerEvaluationEnabled) {
+    if (eagerEvaluationEnabled && inputEnabled) {
       classNames.push("eager-evaluation");
     }
 
@@ -427,7 +445,7 @@ class App extends Component {
   }
 
   render() {
-    const { webConsoleUI, editorMode, dispatch } = this.props;
+    const { webConsoleUI, editorMode, dispatch, inputEnabled } = this.props;
 
     const filterBar = this.renderFilterBar();
     const editorToolbar = this.renderEditorToolbar();
@@ -449,7 +467,7 @@ class App extends Component {
         jsterm,
         eager
       ),
-      editorMode
+      editorMode && inputEnabled
         ? GridElementWidthResizer({
             key: "editor-resizer",
             enabled: editorMode,
diff --git a/devtools/client/webconsole/components/Input/JSTerm.js b/devtools/client/webconsole/components/Input/JSTerm.js
index e049846913a3..91686570541c 100644
--- a/devtools/client/webconsole/components/Input/JSTerm.js
+++ b/devtools/client/webconsole/components/Input/JSTerm.js
@@ -117,6 +117,7 @@ class JSTerm extends Component {
       autocomplete: PropTypes.bool,
       showEvaluationContextSelector: PropTypes.bool,
       autocompletePopupPosition: PropTypes.string,
+      inputEnabled: PropTypes.bool,
     };
   }
 
@@ -1380,10 +1381,7 @@ class JSTerm extends Component {
   }
 
   render() {
-    if (
-      this.props.webConsoleUI.isBrowserConsole &&
-      !Services.prefs.getBoolPref("devtools.chrome.enabled")
-    ) {
+    if (!this.props.inputEnabled) {
       return null;
     }
 
diff --git a/devtools/client/webconsole/test/browser/browser_console_eager_eval.js b/devtools/client/webconsole/test/browser/browser_console_eager_eval.js
index 1ac7b0b132f2..009e2a87b051 100644
--- a/devtools/client/webconsole/test/browser/browser_console_eager_eval.js
+++ b/devtools/client/webconsole/test/browser/browser_console_eager_eval.js
@@ -10,6 +10,8 @@ const TEST_URI = "data:text/html;charset=utf8,";
 add_task(async function() {
   await addTab(TEST_URI);
 
+  await pushPref("devtools.chrome.enabled", true);
+
   info("Open the Browser Console");
   const hud = await BrowserConsoleManager.toggleBrowserConsole();
 
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_hide_when_devtools_chrome_enabled_false.js b/devtools/client/webconsole/test/browser/browser_jsterm_hide_when_devtools_chrome_enabled_false.js
index ea5a9d4c43f7..372d33f2aecf 100644
--- a/devtools/client/webconsole/test/browser/browser_jsterm_hide_when_devtools_chrome_enabled_false.js
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_hide_when_devtools_chrome_enabled_false.js
@@ -26,6 +26,11 @@ requestLongerTimeout(2);
 add_task(async function() {
   let browserConsole, webConsole, objInspector;
 
+  // Setting editor mode for both webconsole and browser console as there are more
+  // elements to check.
+  await pushPref("devtools.webconsole.input.editor", true);
+  await pushPref("devtools.browserconsole.input.editor", true);
+
   // Needed for the execute() function below
   await pushPref("security.allow_parent_unrestricted_js_loads", true);
 
@@ -35,13 +40,13 @@ add_task(async function() {
 
   browserConsole = await BrowserConsoleManager.toggleBrowserConsole();
   objInspector = await logObject(browserConsole);
-  testJSTermIsVisible(browserConsole);
+  testInputRelatedElementsAreVisibile(browserConsole);
   await testObjectInspectorPropertiesAreSet(objInspector);
 
   const browserTab = await addTab("data:text/html;charset=utf8,hello world");
   webConsole = await openConsole(browserTab);
   objInspector = await logObject(webConsole);
-  testJSTermIsVisible(webConsole);
+  testInputRelatedElementsAreVisibile(webConsole);
   await testObjectInspectorPropertiesAreSet(objInspector);
   await closeConsole(browserTab);
 
@@ -50,11 +55,11 @@ add_task(async function() {
 
   browserConsole = await BrowserConsoleManager.toggleBrowserConsole();
   objInspector = await logObject(browserConsole);
-  testJSTermIsNotVisible(browserConsole);
+  testInputRelatedElementsAreNotVisibile(browserConsole);
 
   webConsole = await openConsole(browserTab);
   objInspector = await logObject(webConsole);
-  testJSTermIsVisible(webConsole);
+  testInputRelatedElementsAreVisibile(webConsole);
   await testObjectInspectorPropertiesAreSet(objInspector);
 
   info("Close webconsole and browser console");
@@ -73,11 +78,57 @@ async function logObject(hud) {
   return node.querySelector(".tree");
 }
 
-function testJSTermIsVisible(hud) {
-  const inputContainer = hud.ui.window.document.querySelector(
-    ".jsterm-input-container"
+function getInputRelatedElements(hud) {
+  const { document } = hud.ui.window;
+
+  return {
+    inputEl: document.querySelector(".jsterm-input-container"),
+    eagerEvaluationEl: document.querySelector(".eager-evaluation-result"),
+    editorResizerEl: document.querySelector(".editor-resizer"),
+    editorToolbarEl: document.querySelector(".webconsole-editor-toolbar"),
+    webConsoleAppEl: document.querySelector(".webconsole-app"),
+  };
+}
+
+function testInputRelatedElementsAreVisibile(hud) {
+  const {
+    inputEl,
+    eagerEvaluationEl,
+    editorResizerEl,
+    editorToolbarEl,
+    webConsoleAppEl,
+  } = getInputRelatedElements(hud);
+
+  isnot(inputEl.style.display, "none", "input is visible");
+  ok(eagerEvaluationEl, "eager evaluation result is in dom");
+  ok(editorResizerEl, "editor resizer is in dom");
+  ok(editorToolbarEl, "editor toolbar is in dom");
+  ok(
+    webConsoleAppEl.classList.contains("jsterm-editor") &&
+      webConsoleAppEl.classList.contains("eager-evaluation"),
+    "webconsole element has expected classes"
+  );
+}
+
+function testInputRelatedElementsAreNotVisibile(hud) {
+  const {
+    inputEl,
+    eagerEvaluationEl,
+    editorResizerEl,
+    editorToolbarEl,
+    webConsoleAppEl,
+  } = getInputRelatedElements(hud);
+
+  is(inputEl, null, "input is not in dom");
+  is(eagerEvaluationEl, null, "eager evaluation result is not in dom");
+  is(editorResizerEl, null, "editor resizer is not in dom");
+  is(editorToolbarEl, null, "editor toolbar is not in dom");
+  is(
+    webConsoleAppEl.classList.contains("jsterm-editor") &&
+      webConsoleAppEl.classList.contains("eager-evaluation"),
+    false,
+    "webconsole element does not have eager evaluation nor editor classes"
   );
-  isnot(inputContainer.style.display, "none", "input is visible");
 }
 
 async function testObjectInspectorPropertiesAreSet(objInspector) {
@@ -104,10 +155,3 @@ async function testObjectInspectorPropertiesAreSet(objInspector) {
   is(name, "browser_console_hide_jsterm_test", "name is set correctly");
   is(value, "true", "value is set correctly");
 }
-
-function testJSTermIsNotVisible(hud) {
-  const inputContainer = hud.ui.window.document.querySelector(
-    ".jsterm-input-container"
-  );
-  is(inputContainer, null, "input is not in dom");
-}
diff --git a/devtools/client/webconsole/webconsole-wrapper.js b/devtools/client/webconsole/webconsole-wrapper.js
index 06cf3ed590e0..531f3179c167 100644
--- a/devtools/client/webconsole/webconsole-wrapper.js
+++ b/devtools/client/webconsole/webconsole-wrapper.js
@@ -10,6 +10,7 @@ const {
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 const ToolboxProvider = require("devtools/client/framework/store-provider");
+const Services = require("Services");
 
 const actions = require("devtools/client/webconsole/actions/index");
 const { configureStore } = require("devtools/client/webconsole/store");
@@ -119,6 +120,9 @@ class WebConsoleWrapper {
         hideShowContentMessagesCheckbox:
           !webConsoleUI.isBrowserConsole &&
           !webConsoleUI.isBrowserToolboxConsole,
+        inputEnabled:
+          !webConsoleUI.isBrowserConsole ||
+          Services.prefs.getBoolPref("devtools.chrome.enabled"),
       });
 
       // Render the root Application component.