--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1205,8 +1205,12 @@ html[dir="rtl"] .webconsole-output-wrapp
 
 .sidebar-contents .object-inspector {
   min-width: 100%;
 }
 
 .theme-twisty {
   cursor: default;
 }
+
+#split-console-close-button::before {
+  background-image: var(--close-button-image);
+}

--- a/devtools/client/webconsole/components/FilterBar.js
+++ b/devtools/client/webconsole/components/FilterBar.js
@@ -28,16 +28,17 @@ class FilterBar extends Component {
       filter: PropTypes.object.isRequired,
       serviceContainer: PropTypes.shape({
         attachRefToHud: PropTypes.func.isRequired,
       }).isRequired,
       filterBarVisible: PropTypes.bool.isRequired,
       persistLogs: PropTypes.bool.isRequired,
       hidePersistLogsCheckbox: PropTypes.bool.isRequired,
       filteredMessagesCount: PropTypes.object.isRequired,
+      toolbox: PropTypes.object,
     };
   }
 
   static get defaultProps() {
     return {
       hidePersistLogsCheckbox: false,
     };
   }
@@ -47,16 +48,26 @@ class FilterBar extends Component {
     this.onClickMessagesClear = this.onClickMessagesClear.bind(this);
     this.onClickFilterBarToggle = this.onClickFilterBarToggle.bind(this);
     this.onClickRemoveAllFilters = this.onClickRemoveAllFilters.bind(this);
     this.onClickRemoveTextFilter = this.onClickRemoveTextFilter.bind(this);
     this.onSearchInput = this.onSearchInput.bind(this);
     this.onChangePersistToggle = this.onChangePersistToggle.bind(this);
     this.renderFiltersConfigBar = this.renderFiltersConfigBar.bind(this);
     this.renderFilteredMessagesBar = this.renderFilteredMessagesBar.bind(this);
+    this.needCloseButton = this.needCloseButton.bind(this);
+
+    this.state = {
+      needDisplayCloseButton: false,
+    };
+
+    // We need to two event in order to detect opening the webconsole panel and
+    // split webconsole panel.
+    this.props.toolbox.on("split-console", this.needCloseButton);
+    this.props.toolbox.on("select", this.needCloseButton);
   }
 
   componentDidMount() {
     this.props.serviceContainer.attachRefToHud(
       "filterBox",
       this.wrapperNode.querySelector(".text-filter")
     );
   }
@@ -76,19 +87,37 @@ class FilterBar extends Component {
 
     if (
       JSON.stringify(nextProps.filteredMessagesCount)
       !== JSON.stringify(this.props.filteredMessagesCount)
     ) {
       return true;
     }
 
+    if (nextState.needDisplayCloseButton !==
+        this.state.needDisplayCloseButton) {
+      return true;
+    }
+
     return false;
   }
 
+  componentWillUnmount() {
+    this.props.toolbox.off("split-console", this.needCloseButton);
+    this.props.toolbox.off("select", this.needCloseButton);
+  }
+
+  needCloseButton() {
+    let isSplit = this.props.toolbox &&
+        this.props.toolbox.currentToolId !== "webconsole";
+    this.setState({
+      needDisplayCloseButton: isSplit,
+    });
+  }
+
   onClickMessagesClear() {
     this.props.dispatch(actions.messagesClear());
   }
 
   onClickFilterBarToggle() {
     this.props.dispatch(actions.filterBarToggle());
   }
 
@@ -223,16 +252,17 @@ class FilterBar extends Component {
 
   render() {
     const {
       filter,
       filterBarVisible,
       persistLogs,
       filteredMessagesCount,
       hidePersistLogsCheckbox,
+      toolbox,
     } = this.props;
 
     let children = [
       dom.div({
         className: "devtools-toolbar webconsole-filterbar-primary",
         key: "primary-bar",
       },
         dom.button({
@@ -257,16 +287,25 @@ class FilterBar extends Component {
           onInput: this.onSearchInput
         }),
         !hidePersistLogsCheckbox && FilterCheckbox({
           label: l10n.getStr("webconsole.enablePersistentLogs.label"),
           title: l10n.getStr("webconsole.enablePersistentLogs.tooltip"),
           onChange: this.onChangePersistToggle,
           checked: persistLogs,
         }),
+        this.state.needDisplayCloseButton
+          ? dom.button({
+              id: "split-console-close-button",
+              className: "devtools-button",
+              onClick: () => {
+                toolbox.closeSplitConsole();
+              },
+          })
+          : null,
       )
     ];
 
     if (filteredMessagesCount.global > 0) {
       children.push(this.renderFilteredMessagesBar());
     }
 
     if (filterBarVisible) {

--- a/devtools/client/webconsole/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output-wrapper.js
@@ -203,17 +203,18 @@ NewConsoleOutputWrapper.prototype = {
         serviceContainer,
         onFirstMeaningfulPaint: resolve
       });
 
       let filterBar = FilterBar({
         hidePersistLogsCheckbox: this.jsterm.hud.isBrowserConsole,
         serviceContainer: {
           attachRefToHud
-        }
+        },
+        toolbox: this.toolbox,
       });
 
       let sideBar = SideBar({
         serviceContainer,
       });
 
       let provider = createElement(
         Provider,

--- a/devtools/client/webconsole/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/test/mochitest/browser.ini
@@ -337,16 +337,17 @@ subsuite = clipboard
 [browser_webconsole_show_subresource_security_errors.js]
 [browser_webconsole_shows_reqs_from_netmonitor.js]
 [browser_webconsole_shows_reqs_in_netmonitor.js]
 [browser_webconsole_sourcemap_css.js]
 [browser_webconsole_sourcemap_error.js]
 [browser_webconsole_sourcemap_invalid.js]
 [browser_webconsole_sourcemap_nosource.js]
 [browser_webconsole_split.js]
+[browser_webconsole_split_close_button.js]
 [browser_webconsole_split_escape_key.js]
 [browser_webconsole_split_focus.js]
 [browser_webconsole_split_persist.js]
 [browser_webconsole_stacktrace_location_debugger_link.js]
 [browser_webconsole_stacktrace_location_scratchpad_link.js]
 [browser_webconsole_strict_mode_errors.js]
 [browser_webconsole_string.js]
 [browser_webconsole_time_methods.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_split_close_button.js
@@ -0,0 +1,44 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = "data:text/html;charset=utf-8,<p>Web Console test for close button of " +
+                 "split console";
+
+add_task(async function() {
+  let toolbox = await openNewTabAndToolbox(TEST_URI, "inspector");
+
+  info("Check the split console toolbar has a close button");
+
+  let onSplitConsoleReady = toolbox.once("webconsole-ready");
+  toolbox.toggleSplitConsole();
+  await onSplitConsoleReady;
+
+  let closeButton = getCloseButton(toolbox);
+
+  ok(closeButton, "The split console has close button.");
+
+  info("Close the split console by using close button");
+  let onSplitConsoleChange = toolbox.once("split-console");
+  closeButton.click();
+  await onSplitConsoleChange;
+
+  ok(!toolbox.splitConsole, "Split console is hidden.");
+});
+
+add_task(async function() {
+  let toolbox = await openNewTabAndToolbox(TEST_URI, "webconsole");
+
+  info("Check the web console panel toolbar doesn't have a close button");
+  let closeButton = getCloseButton(toolbox);
+
+  ok(!closeButton, "The web console panel doesn't have a close button.");
+});
+
+function getCloseButton(toolbox) {
+  let hud = toolbox.getPanel("webconsole").hud;
+  return hud.ui.outputNode.querySelector("#split-console-close-button");
+}