Bug 1628994 - Don't render input related elements in browser console when devtools.chrome.enabled is not true. r=jlast.

When the pref is not set to true, we should not display the input,
but also the editor toolbar, the instant evaluation result and
the editor resizer.
The existing test is modified to ensure we cover all these elements.

Differential Revision: https://phabricator.services.mozilla.com/D70843

--HG--
extra : moz-landing-system : lando

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,

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;
     }
 

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();
 

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");
-}

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.