Bug 1522104 - Re-organise devtools/client/webconsole/components/ folder. r=nchevobbe
authorArmando Ferreira <armando.ferreira@edu.uag.mx>
Wed, 26 Jun 2019 09:19:54 +0000
changeset 542984 fa93fa33b893c63d82ee3cecaad02a21a0589d6a
parent 542983 b31c7c9f19201fe4725075e1fd2c10178dedd7a8
child 542985 25ed16786ef943e467c94bff2189a5dc25b0b38e
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1522104
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1522104 - Re-organise devtools/client/webconsole/components/ folder. r=nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D35932
devtools/client/webconsole/components/App.js
devtools/client/webconsole/components/CollapseButton.js
devtools/client/webconsole/components/ConfirmDialog.js
devtools/client/webconsole/components/ConsoleOutput.js
devtools/client/webconsole/components/ConsoleTable.js
devtools/client/webconsole/components/FilterBar.js
devtools/client/webconsole/components/FilterBar/FilterBar.js
devtools/client/webconsole/components/FilterBar/FilterButton.js
devtools/client/webconsole/components/FilterBar/FilterCheckbox.js
devtools/client/webconsole/components/FilterBar/moz.build
devtools/client/webconsole/components/FilterButton.js
devtools/client/webconsole/components/FilterCheckbox.js
devtools/client/webconsole/components/GripMessageBody.js
devtools/client/webconsole/components/Input/ConfirmDialog.js
devtools/client/webconsole/components/Input/JSTerm.js
devtools/client/webconsole/components/Input/ReverseSearchInput.css
devtools/client/webconsole/components/Input/ReverseSearchInput.js
devtools/client/webconsole/components/Input/moz.build
devtools/client/webconsole/components/JSTerm.js
devtools/client/webconsole/components/Message.js
devtools/client/webconsole/components/MessageContainer.js
devtools/client/webconsole/components/MessageIcon.js
devtools/client/webconsole/components/MessageIndent.js
devtools/client/webconsole/components/MessageRepeat.js
devtools/client/webconsole/components/Output/CollapseButton.js
devtools/client/webconsole/components/Output/ConsoleOutput.js
devtools/client/webconsole/components/Output/ConsoleTable.js
devtools/client/webconsole/components/Output/GripMessageBody.js
devtools/client/webconsole/components/Output/Message.js
devtools/client/webconsole/components/Output/MessageContainer.js
devtools/client/webconsole/components/Output/MessageIcon.js
devtools/client/webconsole/components/Output/MessageIndent.js
devtools/client/webconsole/components/Output/MessageRepeat.js
devtools/client/webconsole/components/Output/message-types/CSSWarning.js
devtools/client/webconsole/components/Output/message-types/ConsoleApiCall.js
devtools/client/webconsole/components/Output/message-types/ConsoleCommand.js
devtools/client/webconsole/components/Output/message-types/DefaultRenderer.js
devtools/client/webconsole/components/Output/message-types/EvaluationResult.js
devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js
devtools/client/webconsole/components/Output/message-types/PageError.js
devtools/client/webconsole/components/Output/message-types/WarningGroup.js
devtools/client/webconsole/components/Output/message-types/moz.build
devtools/client/webconsole/components/Output/moz.build
devtools/client/webconsole/components/ReverseSearchInput.css
devtools/client/webconsole/components/ReverseSearchInput.js
devtools/client/webconsole/components/message-types/CSSWarning.js
devtools/client/webconsole/components/message-types/ConsoleApiCall.js
devtools/client/webconsole/components/message-types/ConsoleCommand.js
devtools/client/webconsole/components/message-types/DefaultRenderer.js
devtools/client/webconsole/components/message-types/EvaluationResult.js
devtools/client/webconsole/components/message-types/NetworkEventMessage.js
devtools/client/webconsole/components/message-types/PageError.js
devtools/client/webconsole/components/message-types/WarningGroup.js
devtools/client/webconsole/components/message-types/moz.build
devtools/client/webconsole/components/moz.build
devtools/client/webconsole/index.html
devtools/client/webconsole/test/components/console-api-call.log-messages.test.js
devtools/client/webconsole/test/components/console-api-call.test.js
devtools/client/webconsole/test/components/console-output.test.js
devtools/client/webconsole/test/components/css-warning.test.js
devtools/client/webconsole/test/components/evaluation-result.test.js
devtools/client/webconsole/test/components/filter-bar.test.js
devtools/client/webconsole/test/components/filter-button.test.js
devtools/client/webconsole/test/components/filter-checkbox.test.js
devtools/client/webconsole/test/components/message-container.test.js
devtools/client/webconsole/test/components/message-icon.test.js
devtools/client/webconsole/test/components/message-location.test.js
devtools/client/webconsole/test/components/message-repeat.test.js
devtools/client/webconsole/test/components/message-types-aria.test.js
devtools/client/webconsole/test/components/network-event-message.test.js
devtools/client/webconsole/test/components/page-error.test.js
devtools/client/webconsole/test/components/warning-group.test.js
devtools/client/webconsole/test/mochitest/browser_webconsole_console_group.js
--- a/devtools/client/webconsole/components/App.js
+++ b/devtools/client/webconsole/components/App.js
@@ -8,22 +8,22 @@ const { Component, createFactory } = req
 loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { connect } = require("devtools/client/shared/redux/visibility-handler-connect");
 
 const actions = require("devtools/client/webconsole/actions/index");
 const {
   FILTERBAR_DISPLAY_MODES,
 } = require("devtools/client/webconsole/constants");
-const ConsoleOutput = createFactory(require("devtools/client/webconsole/components/ConsoleOutput"));
-const FilterBar = createFactory(require("devtools/client/webconsole/components/FilterBar"));
+const ConsoleOutput = createFactory(require("devtools/client/webconsole/components/Output/ConsoleOutput"));
+const FilterBar = createFactory(require("devtools/client/webconsole/components/FilterBar/FilterBar"));
 const SideBar = createFactory(require("devtools/client/webconsole/components/SideBar"));
-const ReverseSearchInput = createFactory(require("devtools/client/webconsole/components/ReverseSearchInput"));
-const JSTerm = createFactory(require("devtools/client/webconsole/components/JSTerm"));
-const ConfirmDialog = createFactory(require("devtools/client/webconsole/components/ConfirmDialog"));
+const ReverseSearchInput = createFactory(require("devtools/client/webconsole/components/Input/ReverseSearchInput"));
+const JSTerm = createFactory(require("devtools/client/webconsole/components/Input/JSTerm"));
+const ConfirmDialog = createFactory(require("devtools/client/webconsole/components/Input/ConfirmDialog"));
 const NotificationBox = createFactory(require("devtools/client/shared/components/NotificationBox").NotificationBox);
 
 const l10n = require("devtools/client/webconsole/webconsole-l10n");
 const { Utils: WebConsoleUtils } = require("devtools/client/webconsole/utils");
 
 const SELF_XSS_OK = l10n.getStr("selfxss.okstring");
 const SELF_XSS_MSG = l10n.getFormatStr("selfxss.msg", [SELF_XSS_OK]);
 
rename from devtools/client/webconsole/components/FilterBar.js
rename to devtools/client/webconsole/components/FilterBar/FilterBar.js
--- a/devtools/client/webconsole/components/FilterBar.js
+++ b/devtools/client/webconsole/components/FilterBar/FilterBar.js
@@ -10,20 +10,20 @@ const { getAllFilters } = require("devto
 const { getFilteredMessagesCount } = require("devtools/client/webconsole/selectors/messages");
 const { getAllUi } = require("devtools/client/webconsole/selectors/ui");
 const actions = require("devtools/client/webconsole/actions/index");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const { PluralForm } = require("devtools/shared/plural-form");
 const {
   FILTERS,
   FILTERBAR_DISPLAY_MODES,
-} = require("../constants");
+} = require("devtools/client/webconsole/constants");
 
-const FilterButton = require("devtools/client/webconsole/components/FilterButton");
-const FilterCheckbox = require("devtools/client/webconsole/components/FilterCheckbox");
+const FilterButton = require("devtools/client/webconsole/components/FilterBar/FilterButton");
+const FilterCheckbox = require("devtools/client/webconsole/components/FilterBar/FilterCheckbox");
 const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
 loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");
 
 class FilterBar extends Component {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
rename from devtools/client/webconsole/components/FilterButton.js
rename to devtools/client/webconsole/components/FilterBar/FilterButton.js
rename from devtools/client/webconsole/components/FilterCheckbox.js
rename to devtools/client/webconsole/components/FilterBar/FilterCheckbox.js
new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/components/FilterBar/moz.build
@@ -0,0 +1,10 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'FilterBar.js',
+    'FilterButton.js',
+    'FilterCheckbox.js',
+)
\ No newline at end of file
rename from devtools/client/webconsole/components/ConfirmDialog.js
rename to devtools/client/webconsole/components/Input/ConfirmDialog.js
rename from devtools/client/webconsole/components/JSTerm.js
rename to devtools/client/webconsole/components/Input/JSTerm.js
rename from devtools/client/webconsole/components/ReverseSearchInput.css
rename to devtools/client/webconsole/components/Input/ReverseSearchInput.css
rename from devtools/client/webconsole/components/ReverseSearchInput.js
rename to devtools/client/webconsole/components/Input/ReverseSearchInput.js
new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/components/Input/moz.build
@@ -0,0 +1,11 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'ConfirmDialog.js',
+    'JSTerm.js',
+    'ReverseSearchInput.css',
+    'ReverseSearchInput.js',
+)
rename from devtools/client/webconsole/components/CollapseButton.js
rename to devtools/client/webconsole/components/Output/CollapseButton.js
rename from devtools/client/webconsole/components/ConsoleOutput.js
rename to devtools/client/webconsole/components/Output/ConsoleOutput.js
--- a/devtools/client/webconsole/components/ConsoleOutput.js
+++ b/devtools/client/webconsole/components/Output/ConsoleOutput.js
@@ -16,17 +16,17 @@ const {
   getVisibleMessages,
   getPausedExecutionPoint,
   getAllRepeatById,
   getAllWarningGroupsById,
   isMessageInWarningGroup,
 } = require("devtools/client/webconsole/selectors/messages");
 
 loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");
-loader.lazyRequireGetter(this, "MessageContainer", "devtools/client/webconsole/components/MessageContainer", true);
+loader.lazyRequireGetter(this, "MessageContainer", "devtools/client/webconsole/components/Output/MessageContainer", true);
 ChromeUtils.defineModuleGetter(this, "pointPrecedes", "resource://devtools/shared/execution-point-utils.js");
 
 const {
   MESSAGE_TYPE,
 } = require("devtools/client/webconsole/constants");
 const {
   getInitialMessageCountForViewport,
 } = require("devtools/client/webconsole/utils/messages.js");
rename from devtools/client/webconsole/components/ConsoleTable.js
rename to devtools/client/webconsole/components/Output/ConsoleTable.js
--- a/devtools/client/webconsole/components/ConsoleTable.js
+++ b/devtools/client/webconsole/components/Output/ConsoleTable.js
@@ -4,17 +4,17 @@
 "use strict";
 
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const ObjectClient = require("devtools/shared/client/object-client");
 const actions = require("devtools/client/webconsole/actions/messages");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const { MODE } = require("devtools/client/shared/components/reps/reps");
-const GripMessageBody = createFactory(require("devtools/client/webconsole/components/GripMessageBody"));
+const GripMessageBody = createFactory(require("devtools/client/webconsole/components/Output/GripMessageBody"));
 
 loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");
 
 const TABLE_ROW_MAX_ITEMS = 1000;
 const TABLE_COLUMN_MAX_ITEMS = 10;
 
 class ConsoleTable extends Component {
   static get propTypes() {
rename from devtools/client/webconsole/components/GripMessageBody.js
rename to devtools/client/webconsole/components/Output/GripMessageBody.js
--- a/devtools/client/webconsole/components/GripMessageBody.js
+++ b/devtools/client/webconsole/components/Output/GripMessageBody.js
@@ -6,17 +6,17 @@
 
 "use strict";
 
 // React
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   MESSAGE_TYPE,
   JSTERM_COMMANDS,
-} = require("../constants");
+} = require("devtools/client/webconsole/constants");
 const { getObjectInspector } = require("devtools/client/webconsole/utils/object-inspector");
 const actions = require("devtools/client/webconsole/actions/index");
 
 const reps = require("devtools/client/shared/components/reps/reps");
 const { MODE, objectInspector: {utils} } = reps;
 
 GripMessageBody.displayName = "GripMessageBody";
 
rename from devtools/client/webconsole/components/Message.js
rename to devtools/client/webconsole/components/Output/Message.js
--- a/devtools/client/webconsole/components/Message.js
+++ b/devtools/client/webconsole/components/Output/Message.js
@@ -7,22 +7,22 @@
 "use strict";
 
 // React & Redux
 const { Component, createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const actions = require("devtools/client/webconsole/actions/index");
 const { MESSAGE_SOURCE, MESSAGE_TYPE } = require("devtools/client/webconsole/constants");
-const { MessageIndent } = require("devtools/client/webconsole/components/MessageIndent");
-const MessageIcon = require("devtools/client/webconsole/components/MessageIcon");
+const { MessageIndent } = require("devtools/client/webconsole/components/Output/MessageIndent");
+const MessageIcon = require("devtools/client/webconsole/components/Output/MessageIcon");
 const FrameView = createFactory(require("devtools/client/shared/components/Frame"));
 
-loader.lazyRequireGetter(this, "CollapseButton", "devtools/client/webconsole/components/CollapseButton");
-loader.lazyRequireGetter(this, "MessageRepeat", "devtools/client/webconsole/components/MessageRepeat");
+loader.lazyRequireGetter(this, "CollapseButton", "devtools/client/webconsole/components/Output/CollapseButton");
+loader.lazyRequireGetter(this, "MessageRepeat", "devtools/client/webconsole/components/Output/MessageRepeat");
 loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");
 loader.lazyRequireGetter(this, "SmartTrace", "devtools/client/shared/components/SmartTrace");
 ChromeUtils.defineModuleGetter(this, "pointPrecedes", "resource://devtools/shared/execution-point-utils.js");
 
 class Message extends Component {
   static get propTypes() {
     return {
       open: PropTypes.bool,
rename from devtools/client/webconsole/components/MessageContainer.js
rename to devtools/client/webconsole/components/Output/MessageContainer.js
--- a/devtools/client/webconsole/components/MessageContainer.js
+++ b/devtools/client/webconsole/components/Output/MessageContainer.js
@@ -12,24 +12,24 @@ loader.lazyRequireGetter(this, "PropType
 loader.lazyRequireGetter(this, "isWarningGroup", "devtools/client/webconsole/utils/messages", true);
 
 const {
   MESSAGE_SOURCE,
   MESSAGE_TYPE,
 } = require("devtools/client/webconsole/constants");
 
 const componentMap = new Map([
-  ["ConsoleApiCall", require("./message-types/ConsoleApiCall")],
-  ["ConsoleCommand", require("./message-types/ConsoleCommand")],
-  ["CSSWarning", require("./message-types/CSSWarning")],
-  ["DefaultRenderer", require("./message-types/DefaultRenderer")],
-  ["EvaluationResult", require("./message-types/EvaluationResult")],
-  ["NetworkEventMessage", require("./message-types/NetworkEventMessage")],
-  ["PageError", require("./message-types/PageError")],
-  ["WarningGroup", require("./message-types/WarningGroup")],
+  ["ConsoleApiCall", require("devtools/client/webconsole/components/Output/message-types/ConsoleApiCall")],
+  ["ConsoleCommand", require("devtools/client/webconsole/components/Output/message-types/ConsoleCommand")],
+  ["CSSWarning", require("devtools/client/webconsole/components/Output/message-types/CSSWarning")],
+  ["DefaultRenderer", require("devtools/client/webconsole/components/Output/message-types/DefaultRenderer")],
+  ["EvaluationResult", require("devtools/client/webconsole/components/Output/message-types/EvaluationResult")],
+  ["NetworkEventMessage", require("devtools/client/webconsole/components/Output/message-types/NetworkEventMessage")],
+  ["PageError", require("devtools/client/webconsole/components/Output/message-types/PageError")],
+  ["WarningGroup", require("devtools/client/webconsole/components/Output/message-types/WarningGroup")],
 ]);
 
 class MessageContainer extends Component {
   static get propTypes() {
     return {
       messageId: PropTypes.string.isRequired,
       open: PropTypes.bool.isRequired,
       serviceContainer: PropTypes.object.isRequired,
rename from devtools/client/webconsole/components/MessageIcon.js
rename to devtools/client/webconsole/components/Output/MessageIcon.js
rename from devtools/client/webconsole/components/MessageIndent.js
rename to devtools/client/webconsole/components/Output/MessageIndent.js
rename from devtools/client/webconsole/components/MessageRepeat.js
rename to devtools/client/webconsole/components/Output/MessageRepeat.js
rename from devtools/client/webconsole/components/message-types/CSSWarning.js
rename to devtools/client/webconsole/components/Output/message-types/CSSWarning.js
--- a/devtools/client/webconsole/components/message-types/CSSWarning.js
+++ b/devtools/client/webconsole/components/Output/message-types/CSSWarning.js
@@ -7,19 +7,19 @@
 "use strict";
 
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const actions = require("devtools/client/webconsole/actions/index");
 
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
 
-loader.lazyRequireGetter(this, "GripMessageBody", "devtools/client/webconsole/components/GripMessageBody");
+loader.lazyRequireGetter(this, "GripMessageBody", "devtools/client/webconsole/components/Output/GripMessageBody");
 
 /**
  * This component is responsible for rendering CSS warnings in the Console panel.
  *
  * CSS warnings are expandable when they have associated CSS selectors so the
  * user can inspect any matching DOM elements. Not all CSS warnings have
  * associated selectors (those that don't are not expandable) and not all
  * selectors match elements in the current page (warnings can appear for styles
rename from devtools/client/webconsole/components/message-types/ConsoleApiCall.js
rename to devtools/client/webconsole/components/Output/message-types/ConsoleApiCall.js
--- a/devtools/client/webconsole/components/message-types/ConsoleApiCall.js
+++ b/devtools/client/webconsole/components/Output/message-types/ConsoleApiCall.js
@@ -5,21 +5,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // React & Redux
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const GripMessageBody = require("devtools/client/webconsole/components/GripMessageBody");
-const ConsoleTable = createFactory(require("devtools/client/webconsole/components/ConsoleTable"));
+const GripMessageBody = require("devtools/client/webconsole/components/Output/GripMessageBody");
+const ConsoleTable = createFactory(require("devtools/client/webconsole/components/Output/ConsoleTable"));
 const {isGroupType, l10n} = require("devtools/client/webconsole/utils/messages");
 
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
 
 ConsoleApiCall.displayName = "ConsoleApiCall";
 
 ConsoleApiCall.propTypes = {
   dispatch: PropTypes.func.isRequired,
   message: PropTypes.object.isRequired,
   open: PropTypes.bool,
   serviceContainer: PropTypes.object.isRequired,
rename from devtools/client/webconsole/components/message-types/ConsoleCommand.js
rename to devtools/client/webconsole/components/Output/message-types/ConsoleCommand.js
--- a/devtools/client/webconsole/components/message-types/ConsoleCommand.js
+++ b/devtools/client/webconsole/components/Output/message-types/ConsoleCommand.js
@@ -4,17 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // React & Redux
 const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
 
 ConsoleCommand.displayName = "ConsoleCommand";
 
 ConsoleCommand.propTypes = {
   message: PropTypes.object.isRequired,
   timestampsVisible: PropTypes.bool.isRequired,
   serviceContainer: PropTypes.object,
   maybeScrollToBottom: PropTypes.func,
rename from devtools/client/webconsole/components/message-types/DefaultRenderer.js
rename to devtools/client/webconsole/components/Output/message-types/DefaultRenderer.js
rename from devtools/client/webconsole/components/message-types/EvaluationResult.js
rename to devtools/client/webconsole/components/Output/message-types/EvaluationResult.js
--- a/devtools/client/webconsole/components/message-types/EvaluationResult.js
+++ b/devtools/client/webconsole/components/Output/message-types/EvaluationResult.js
@@ -4,18 +4,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // React & Redux
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
-const GripMessageBody = require("devtools/client/webconsole/components/GripMessageBody");
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
+const GripMessageBody = require("devtools/client/webconsole/components/Output/GripMessageBody");
 
 EvaluationResult.displayName = "EvaluationResult";
 
 EvaluationResult.propTypes = {
   dispatch: PropTypes.func.isRequired,
   message: PropTypes.object.isRequired,
   timestampsVisible: PropTypes.bool.isRequired,
   serviceContainer: PropTypes.object,
rename from devtools/client/webconsole/components/message-types/NetworkEventMessage.js
rename to devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js
--- a/devtools/client/webconsole/components/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js
@@ -5,17 +5,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // React & Redux
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
 const actions = require("devtools/client/webconsole/actions/index");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 
 loader.lazyRequireGetter(this, "TabboxPanel", "devtools/client/netmonitor/src/components/TabboxPanel");
 const { getHTTPStatusCodeURL } = require("devtools/client/netmonitor/src/utils/mdn-utils");
 const LEARN_MORE = l10n.getStr("webConsoleMoreInfoLabel");
 
 const Services = require("Services");
rename from devtools/client/webconsole/components/message-types/PageError.js
rename to devtools/client/webconsole/components/Output/message-types/PageError.js
--- a/devtools/client/webconsole/components/message-types/PageError.js
+++ b/devtools/client/webconsole/components/Output/message-types/PageError.js
@@ -4,17 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // React & Redux
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
 const { MODE, REPS } = require("devtools/client/shared/components/reps/reps");
 
 PageError.displayName = "PageError";
 
 PageError.propTypes = {
   message: PropTypes.object.isRequired,
   open: PropTypes.bool,
   timestampsVisible: PropTypes.bool.isRequired,
rename from devtools/client/webconsole/components/message-types/WarningGroup.js
rename to devtools/client/webconsole/components/Output/message-types/WarningGroup.js
--- a/devtools/client/webconsole/components/message-types/WarningGroup.js
+++ b/devtools/client/webconsole/components/Output/message-types/WarningGroup.js
@@ -6,17 +6,17 @@
 
 "use strict";
 
 // React & Redux
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const Message = createFactory(require("devtools/client/webconsole/components/Output/Message"));
 
 WarningGroup.displayName = "WarningGroup";
 
 WarningGroup.propTypes = {
   dispatch: PropTypes.func.isRequired,
   message: PropTypes.object.isRequired,
   timestampsVisible: PropTypes.bool.isRequired,
   serviceContainer: PropTypes.object,
rename from devtools/client/webconsole/components/message-types/moz.build
rename to devtools/client/webconsole/components/Output/message-types/moz.build
new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/components/Output/moz.build
@@ -0,0 +1,20 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    'message-types',
+]
+
+DevToolsModules(
+    'CollapseButton.js',
+    'ConsoleOutput.js',
+    'ConsoleTable.js',
+    'GripMessageBody.js',
+    'Message.js',
+    'MessageContainer.js',
+    'MessageIcon.js',
+    'MessageIndent.js',
+    'MessageRepeat.js',
+)
\ No newline at end of file
--- a/devtools/client/webconsole/components/moz.build
+++ b/devtools/client/webconsole/components/moz.build
@@ -1,29 +1,15 @@
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
-    'message-types'
+    'FilterBar',
+    'Input',
+    'Output',
 ]
 
 DevToolsModules(
     'App.js',
-    'CollapseButton.js',
-    'ConfirmDialog.js',
-    'ConsoleOutput.js',
-    'ConsoleTable.js',
-    'FilterBar.js',
-    'FilterButton.js',
-    'FilterCheckbox.js',
-    'GripMessageBody.js',
-    'JSTerm.js',
-    'Message.js',
-    'MessageContainer.js',
-    'MessageIcon.js',
-    'MessageIndent.js',
-    'MessageRepeat.js',
-    'ReverseSearchInput.css',
-    'ReverseSearchInput.js',
-    'SideBar.js'
+    'SideBar.js',
 )
--- a/devtools/client/webconsole/index.html
+++ b/devtools/client/webconsole/index.html
@@ -14,17 +14,17 @@
     <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/webconsole.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/SmartTrace.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/NotificationBox.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/httpi.css"/>
-    <link rel="stylesheet" href="resource://devtools/client/webconsole/components/ReverseSearchInput.css"/>
+    <link rel="stylesheet" href="resource://devtools/client/webconsole/components/Input/ReverseSearchInput.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css"/>
 
     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script src="resource://devtools/client/webconsole/main.js"></script>
   </head>
   <body class="theme-sidebar" role="application">
     <main id="app-wrapper" class="theme-body" role="document" aria-live="polite">
--- a/devtools/client/webconsole/test/components/console-api-call.log-messages.test.js
+++ b/devtools/client/webconsole/test/components/console-api-call.log-messages.test.js
@@ -7,17 +7,17 @@ const expect = require("expect");
 const { render } = require("enzyme");
 
 // React
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const { setupStore } = require("devtools/client/webconsole/test/helpers");
 const Provider = createFactory(require("react-redux").Provider);
 
 // Components under test.
-const ConsoleApiCall = createFactory(require("devtools/client/webconsole/components/message-types/ConsoleApiCall"));
+const ConsoleApiCall = createFactory(require("devtools/client/webconsole/components/Output/message-types/ConsoleApiCall"));
 
 const { prepareMessage } = require("devtools/client/webconsole/utils/messages");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 describe("ConsoleAPICall component:", () => {
   describe("Services.console.logStringMessage", () => {
     it("renders cached logMessage grips", () => {
       const message = prepareMessage(cachedLogMessageStubPacket, {getNextId: () => "1"});
--- a/devtools/client/webconsole/test/components/console-api-call.test.js
+++ b/devtools/client/webconsole/test/components/console-api-call.test.js
@@ -8,22 +8,22 @@ const { render, mount } = require("enzym
 const sinon = require("sinon");
 
 // React
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const Provider = createFactory(require("react-redux").Provider);
 const { setupStore } = require("devtools/client/webconsole/test/helpers");
 
 // Components under test.
-const ConsoleApiCall = createFactory(require("devtools/client/webconsole/components/message-types/ConsoleApiCall"));
+const ConsoleApiCall = createFactory(require("devtools/client/webconsole/components/Output/message-types/ConsoleApiCall"));
 const {
   MESSAGE_OPEN,
   MESSAGE_CLOSE,
 } = require("devtools/client/webconsole/constants");
-const { INDENT_WIDTH } = require("devtools/client/webconsole/components/MessageIndent");
+const { INDENT_WIDTH } = require("devtools/client/webconsole/components/Output/MessageIndent");
 const {prepareMessage} = require("devtools/client/webconsole/utils/messages");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 describe("ConsoleAPICall component:", () => {
   describe("console.log", () => {
--- a/devtools/client/webconsole/test/components/console-output.test.js
+++ b/devtools/client/webconsole/test/components/console-output.test.js
@@ -5,17 +5,17 @@
 const {
   createFactory,
 } = require("devtools/client/shared/vendor/react");
 // Test utils.
 const expect = require("expect");
 const { render } = require("enzyme");
 const Provider = createFactory(require("react-redux").Provider);
 
-const ConsoleOutput = createFactory(require("devtools/client/webconsole/components/ConsoleOutput"));
+const ConsoleOutput = createFactory(require("devtools/client/webconsole/components/Output/ConsoleOutput"));
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 const { setupStore } = require("devtools/client/webconsole/test/helpers");
 const {initialize} = require("devtools/client/webconsole/actions/ui");
 const {
   getInitialMessageCountForViewport,
 } = require("devtools/client/webconsole/utils/messages.js");
 
 const MESSAGES_NUMBER = 100;
--- a/devtools/client/webconsole/test/components/css-warning.test.js
+++ b/devtools/client/webconsole/test/components/css-warning.test.js
@@ -8,17 +8,17 @@ const { render, mount } = require("enzym
 const sinon = require("sinon");
 
 // React
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const Provider = createFactory(require("react-redux").Provider);
 const { setupStore } = require("devtools/client/webconsole/test/helpers");
 
 // Components under test.
-const CSSWarning = require("devtools/client/webconsole/components/message-types/CSSWarning");
+const CSSWarning = require("devtools/client/webconsole/components/Output/message-types/CSSWarning");
 const {
   MESSAGE_OPEN,
   MESSAGE_CLOSE,
 } = require("devtools/client/webconsole/constants");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
--- a/devtools/client/webconsole/test/components/evaluation-result.test.js
+++ b/devtools/client/webconsole/test/components/evaluation-result.test.js
@@ -9,19 +9,19 @@ const sinon = require("sinon");
 
 // React
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const Provider = createFactory(require("react-redux").Provider);
 const { setupStore } = require("devtools/client/webconsole/test/helpers");
 
 // Components under test.
 const EvaluationResult = createFactory(
-  require("devtools/client/webconsole/components/message-types/EvaluationResult")
+  require("devtools/client/webconsole/components/Output/message-types/EvaluationResult")
 );
-const { INDENT_WIDTH } = require("devtools/client/webconsole/components/MessageIndent");
+const { INDENT_WIDTH } = require("devtools/client/webconsole/components/Output/MessageIndent");
 
 // Test fakes.
 const {
   stubPreparedMessages,
 } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 describe("EvaluationResult component:", () => {
--- a/devtools/client/webconsole/test/components/filter-bar.test.js
+++ b/devtools/client/webconsole/test/components/filter-bar.test.js
@@ -6,18 +6,18 @@ const expect = require("expect");
 const sinon = require("sinon");
 const { render, mount, shallow } = require("enzyme");
 
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const Provider = createFactory(require("react-redux").Provider);
 
 const actions = require("devtools/client/webconsole/actions/index");
-const FilterButton = require("devtools/client/webconsole/components/FilterButton");
-const FilterBar = createFactory(require("devtools/client/webconsole/components/FilterBar"));
+const FilterButton = require("devtools/client/webconsole/components/FilterBar/FilterButton");
+const FilterBar = createFactory(require("devtools/client/webconsole/components/FilterBar/FilterBar"));
 const { getAllUi } = require("devtools/client/webconsole/selectors/ui");
 const { FILTERBAR_DISPLAY_MODES } = require("devtools/client/webconsole/constants");
 const {
   MESSAGES_CLEAR,
   FILTERS,
   PREFS,
 } = require("devtools/client/webconsole/constants");
 
--- a/devtools/client/webconsole/test/components/filter-button.test.js
+++ b/devtools/client/webconsole/test/components/filter-button.test.js
@@ -2,17 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 const expect = require("expect");
 const { render } = require("enzyme");
 
 const { createFactory } = require("devtools/client/shared/vendor/react");
 
-const FilterButton = createFactory(require("devtools/client/webconsole/components/FilterButton"));
+const FilterButton = createFactory(require("devtools/client/webconsole/components/FilterBar/FilterButton"));
 const { MESSAGE_LEVEL } = require("devtools/client/webconsole/constants");
 
 describe("FilterButton component:", () => {
   const props = {
     active: true,
     label: "Error",
     filterKey: MESSAGE_LEVEL.ERROR,
   };
--- a/devtools/client/webconsole/test/components/filter-checkbox.test.js
+++ b/devtools/client/webconsole/test/components/filter-checkbox.test.js
@@ -2,17 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 const expect = require("expect");
 const { render } = require("enzyme");
 
 const { createFactory } = require("devtools/client/shared/vendor/react");
 
-const FilterCheckbox = createFactory(require("devtools/client/webconsole/components/FilterCheckbox"));
+const FilterCheckbox = createFactory(require("devtools/client/webconsole/components/FilterBar/FilterCheckbox"));
 
 describe("FilterCheckbox component:", () => {
   const props = {
     label: "test label",
     title: "test title",
     checked: true,
     onChange: () => {},
   };
--- a/devtools/client/webconsole/test/components/message-container.test.js
+++ b/devtools/client/webconsole/test/components/message-container.test.js
@@ -3,22 +3,22 @@
 "use strict";
 
 // Test utils.
 const expect = require("expect");
 const { render } = require("enzyme");
 const { createFactory } = require("devtools/client/shared/vendor/react");
 
 // Components under test.
-let { MessageContainer, getMessageComponent } = require("devtools/client/webconsole/components/MessageContainer");
+let { MessageContainer, getMessageComponent } = require("devtools/client/webconsole/components/Output/MessageContainer");
 MessageContainer = createFactory(MessageContainer);
-const ConsoleApiCall = require("devtools/client/webconsole/components/message-types/ConsoleApiCall");
-const CSSWarning = require("devtools/client/webconsole/components/message-types/CSSWarning");
-const EvaluationResult = require("devtools/client/webconsole/components/message-types/EvaluationResult");
-const PageError = require("devtools/client/webconsole/components/message-types/PageError");
+const ConsoleApiCall = require("devtools/client/webconsole/components/Output/message-types/ConsoleApiCall");
+const CSSWarning = require("devtools/client/webconsole/components/Output/message-types/CSSWarning");
+const EvaluationResult = require("devtools/client/webconsole/components/Output/message-types/EvaluationResult");
+const PageError = require("devtools/client/webconsole/components/Output/message-types/PageError");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 describe("MessageContainer component:", () => {
   it("pipes data to children as expected", () => {
     const message = stubPreparedMessages.get("console.log('foobar', 'test')");
--- a/devtools/client/webconsole/test/components/message-icon.test.js
+++ b/devtools/client/webconsole/test/components/message-icon.test.js
@@ -4,17 +4,17 @@
 
 const {
   MESSAGE_LEVEL,
 } = require("devtools/client/webconsole/constants");
 
 const expect = require("expect");
 const { render } = require("enzyme");
 const { createFactory } = require("devtools/client/shared/vendor/react");
-const MessageIcon = createFactory(require("devtools/client/webconsole/components/MessageIcon"));
+const MessageIcon = createFactory(require("devtools/client/webconsole/components/Output/MessageIcon"));
 
 describe("MessageIcon component:", () => {
   it("renders icon based on level", () => {
     const rendered = render(MessageIcon({ level: MESSAGE_LEVEL.ERROR }));
     expect(rendered.hasClass("icon")).toBe(true);
     expect(rendered.attr("title")).toBe("Error");
     expect(rendered.attr("aria-live")).toBe("off");
   });
--- a/devtools/client/webconsole/test/components/message-location.test.js
+++ b/devtools/client/webconsole/test/components/message-location.test.js
@@ -4,17 +4,17 @@
 
 // Test utils.
 const expect = require("expect");
 const { mount } = require("enzyme");
 const sinon = require("sinon");
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
-let { MessageContainer } = require("devtools/client/webconsole/components/MessageContainer");
+let { MessageContainer } = require("devtools/client/webconsole/components/Output/MessageContainer");
 MessageContainer = createFactory(MessageContainer);
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 
 describe("Message - location element", () => {
   it("Calls onViewSourceInDebugger when clicked", () => {
     const onViewSourceInDebugger = sinon.spy();
--- a/devtools/client/webconsole/test/components/message-repeat.test.js
+++ b/devtools/client/webconsole/test/components/message-repeat.test.js
@@ -1,16 +1,16 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 const expect = require("expect");
 const { render } = require("enzyme");
 const { createFactory } = require("devtools/client/shared/vendor/react");
-const MessageRepeat = createFactory(require("devtools/client/webconsole/components/MessageRepeat"));
+const MessageRepeat = createFactory(require("devtools/client/webconsole/components/Output/MessageRepeat"));
 
 describe("MessageRepeat component:", () => {
   it("renders repeated value correctly", () => {
     const rendered = render(MessageRepeat({ repeat: 99 }));
     expect(rendered.hasClass("message-repeats")).toBe(true);
     expect(rendered.text()).toBe("99");
   });
 });
--- a/devtools/client/webconsole/test/components/message-types-aria.test.js
+++ b/devtools/client/webconsole/test/components/message-types-aria.test.js
@@ -3,19 +3,19 @@
 "use strict";
 
 // Test utils.
 const expect = require("expect");
 const { render } = require("enzyme");
 const { createFactory } = require("devtools/client/shared/vendor/react");
 
 // Components under test.
-const ConsoleApiCall = createFactory(require("devtools/client/webconsole/components/message-types/ConsoleApiCall"));
-const ConsoleCmd = createFactory(require("devtools/client/webconsole/components/message-types/ConsoleCommand"));
-const EvaluationResult = createFactory(require("devtools/client/webconsole/components/message-types/EvaluationResult"));
+const ConsoleApiCall = createFactory(require("devtools/client/webconsole/components/Output/message-types/ConsoleApiCall"));
+const ConsoleCmd = createFactory(require("devtools/client/webconsole/components/Output/message-types/ConsoleCommand"));
+const EvaluationResult = createFactory(require("devtools/client/webconsole/components/Output/message-types/EvaluationResult"));
 
 const { ConsoleCommand } = require("devtools/client/webconsole/types");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 describe("message types component ARIA:", () => {
--- a/devtools/client/webconsole/test/components/network-event-message.test.js
+++ b/devtools/client/webconsole/test/components/network-event-message.test.js
@@ -5,18 +5,18 @@
 // Test utils.
 const expect = require("expect");
 const { render } = require("enzyme");
 
 // React
 const { createFactory } = require("devtools/client/shared/vendor/react");
 
 // Components under test.
-const NetworkEventMessage = createFactory(require("devtools/client/webconsole/components/message-types/NetworkEventMessage"));
-const { INDENT_WIDTH } = require("devtools/client/webconsole/components/MessageIndent");
+const NetworkEventMessage = createFactory(require("devtools/client/webconsole/components/Output/message-types/NetworkEventMessage"));
+const { INDENT_WIDTH } = require("devtools/client/webconsole/components/Output/MessageIndent");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 const EXPECTED_URL = "http://example.com/browser/devtools/client/webconsole/test/fixtures/stub-generators/inexistent.html";
 const EXPECTED_STATUS = /\[HTTP\/\d\.\d \d+ [A-Za-z ]+ \d+ms\]/;
 
--- a/devtools/client/webconsole/test/components/page-error.test.js
+++ b/devtools/client/webconsole/test/components/page-error.test.js
@@ -9,22 +9,22 @@ const sinon = require("sinon");
 
 // React
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const Provider = createFactory(require("react-redux").Provider);
 const { setupStore } = require("devtools/client/webconsole/test/helpers");
 const { prepareMessage } = require("devtools/client/webconsole/utils/messages");
 
 // Components under test.
-const PageError = require("devtools/client/webconsole/components/message-types/PageError");
+const PageError = require("devtools/client/webconsole/components/Output/message-types/PageError");
 const {
   MESSAGE_OPEN,
   MESSAGE_CLOSE,
 } = require("devtools/client/webconsole/constants");
-const { INDENT_WIDTH } = require("devtools/client/webconsole/components/MessageIndent");
+const { INDENT_WIDTH } = require("devtools/client/webconsole/components/Output/MessageIndent");
 
 // Test fakes.
 const { stubPackets, stubPreparedMessages } =
   require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 
 describe("PageError component:", () => {
   it("renders", () => {
--- a/devtools/client/webconsole/test/components/warning-group.test.js
+++ b/devtools/client/webconsole/test/components/warning-group.test.js
@@ -2,17 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test utils.
 const expect = require("expect");
 const { render } = require("enzyme");
 
 // Components under test.
-const WarningGroup = require("devtools/client/webconsole/components/message-types/WarningGroup");
+const WarningGroup = require("devtools/client/webconsole/components/Output/message-types/WarningGroup");
 const { MESSAGE_SOURCE, MESSAGE_TYPE } = require("devtools/client/webconsole/constants");
 const { ConsoleMessage } = require("devtools/client/webconsole/types");
 const { createWarningGroupMessage } = require("devtools/client/webconsole/utils/messages");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/test/fixtures/serviceContainer");
 const mockMessage = ConsoleMessage({
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_console_group.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_console_group.js
@@ -6,17 +6,17 @@
 "use strict";
 
 // Check console.group, console.groupCollapsed and console.groupEnd calls
 // behave as expected.
 
 const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
                  "test/mochitest/test-console-group.html";
 const { INDENT_WIDTH } =
-  require("devtools/client/webconsole/components/MessageIndent");
+  require("devtools/client/webconsole/components/Output/MessageIndent");
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
   const store = hud.ui.wrapper.getStore();
   logAllStoreChanges(hud);
 
   const onMessagesLogged = waitForMessage(hud, "log-6");
   ContentTask.spawn(gBrowser.selectedBrowser, null, function() {