diff --git a/devtools/client/webconsole/components/App.js b/devtools/client/webconsole/components/App.js index cbde1c924ccd..934dc60901c8 100644 --- a/devtools/client/webconsole/components/App.js +++ b/devtools/client/webconsole/components/App.js @@ -110,7 +110,6 @@ 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([ @@ -298,13 +297,8 @@ class App extends Component { serviceContainer, webConsoleUI, showEvaluationContextSelector, - inputEnabled, } = this.props; - if (!inputEnabled) { - return null; - } - return editorMode ? EditorToolbar({ key: "editor-toolbar", @@ -335,7 +329,6 @@ class App extends Component { autocomplete, editorMode, editorWidth, - inputEnabled, } = this.props; return JSTerm({ @@ -346,18 +339,12 @@ class App extends Component { autocomplete, editorMode, editorWidth, - inputEnabled, }); } renderEagerEvaluation() { - const { - eagerEvaluationEnabled, - serviceContainer, - inputEnabled, - } = this.props; - - if (!eagerEvaluationEnabled || !inputEnabled) { + const { eagerEvaluationEnabled, serviceContainer } = this.props; + if (!eagerEvaluationEnabled) { return null; } @@ -412,22 +399,17 @@ class App extends Component { } renderRootElement(children) { - const { - editorMode, - sidebarVisible, - inputEnabled, - eagerEvaluationEnabled, - } = this.props; + const { editorMode, sidebarVisible } = this.props; const classNames = ["webconsole-app"]; if (sidebarVisible) { classNames.push("sidebar-visible"); } - if (editorMode && inputEnabled) { + if (editorMode) { classNames.push("jsterm-editor"); } - if (eagerEvaluationEnabled && inputEnabled) { + if (this.props.eagerEvaluationEnabled) { classNames.push("eager-evaluation"); } @@ -445,7 +427,7 @@ class App extends Component { } render() { - const { webConsoleUI, editorMode, dispatch, inputEnabled } = this.props; + const { webConsoleUI, editorMode, dispatch } = this.props; const filterBar = this.renderFilterBar(); const editorToolbar = this.renderEditorToolbar(); @@ -467,7 +449,7 @@ class App extends Component { jsterm, eager ), - editorMode && inputEnabled + editorMode ? 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 91686570541c..e049846913a3 100644 --- a/devtools/client/webconsole/components/Input/JSTerm.js +++ b/devtools/client/webconsole/components/Input/JSTerm.js @@ -117,7 +117,6 @@ class JSTerm extends Component { autocomplete: PropTypes.bool, showEvaluationContextSelector: PropTypes.bool, autocompletePopupPosition: PropTypes.string, - inputEnabled: PropTypes.bool, }; } @@ -1381,7 +1380,10 @@ class JSTerm extends Component { } render() { - if (!this.props.inputEnabled) { + if ( + this.props.webConsoleUI.isBrowserConsole && + !Services.prefs.getBoolPref("devtools.chrome.enabled") + ) { return null; } 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 372d33f2aecf..ea5a9d4c43f7 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,11 +26,6 @@ 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); @@ -40,13 +35,13 @@ add_task(async function() { browserConsole = await BrowserConsoleManager.toggleBrowserConsole(); objInspector = await logObject(browserConsole); - testInputRelatedElementsAreVisibile(browserConsole); + testJSTermIsVisible(browserConsole); await testObjectInspectorPropertiesAreSet(objInspector); const browserTab = await addTab("data:text/html;charset=utf8,hello world"); webConsole = await openConsole(browserTab); objInspector = await logObject(webConsole); - testInputRelatedElementsAreVisibile(webConsole); + testJSTermIsVisible(webConsole); await testObjectInspectorPropertiesAreSet(objInspector); await closeConsole(browserTab); @@ -55,11 +50,11 @@ add_task(async function() { browserConsole = await BrowserConsoleManager.toggleBrowserConsole(); objInspector = await logObject(browserConsole); - testInputRelatedElementsAreNotVisibile(browserConsole); + testJSTermIsNotVisible(browserConsole); webConsole = await openConsole(browserTab); objInspector = await logObject(webConsole); - testInputRelatedElementsAreVisibile(webConsole); + testJSTermIsVisible(webConsole); await testObjectInspectorPropertiesAreSet(objInspector); info("Close webconsole and browser console"); @@ -78,57 +73,11 @@ async function logObject(hud) { return node.querySelector(".tree"); } -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" +function testJSTermIsVisible(hud) { + const inputContainer = hud.ui.window.document.querySelector( + ".jsterm-input-container" ); + isnot(inputContainer.style.display, "none", "input is visible"); } async function testObjectInspectorPropertiesAreSet(objInspector) { @@ -155,3 +104,10 @@ 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 531f3179c167..06cf3ed590e0 100644 --- a/devtools/client/webconsole/webconsole-wrapper.js +++ b/devtools/client/webconsole/webconsole-wrapper.js @@ -10,7 +10,6 @@ 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"); @@ -120,9 +119,6 @@ class WebConsoleWrapper { hideShowContentMessagesCheckbox: !webConsoleUI.isBrowserConsole && !webConsoleUI.isBrowserToolboxConsole, - inputEnabled: - !webConsoleUI.isBrowserConsole || - Services.prefs.getBoolPref("devtools.chrome.enabled"), }); // Render the root Application component.