--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -12,25 +12,33 @@ support-files =
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/shared-redux-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
+[browser_flexbox_accordion_state.js]
+[browser_flexbox_container_and_item.js]
+[browser_flexbox_container_element_rep.js]
+[browser_flexbox_empty_state.js]
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]
+[browser_flexbox_item_list_01.js]
+[browser_flexbox_item_list_02.js]
 [browser_flexbox_item_outline_exists.js]
 [browser_flexbox_item_outline_has_correct_layout.js]
 [browser_flexbox_item_outline_hidden_when_useless.js]
 [browser_flexbox_item_outline_renders_basisfinal_points_correctly.js]
 [browser_flexbox_item_outline_rotates_for_column.js]
 [browser_flexbox_pseudo_elements_are_listed.js]
 [browser_flexbox_sizing_flexibility_not_displayed_when_useless.js]
 [browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js]
 [browser_flexbox_sizing_info_exists.js]
 [browser_flexbox_sizing_info_for_different_writing_modes.js]
 [browser_flexbox_sizing_info_for_pseudos.js]
 [browser_flexbox_sizing_info_for_text_nodes.js]
 [browser_flexbox_sizing_info_has_correct_sections.js]
 [browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js]
 [browser_flexbox_text_nodes_are_listed.js]
+[browser_flexbox_toggle_flexbox_highlighter_01.js]
+[browser_flexbox_toggle_flexbox_highlighter_02.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_accordion_state.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox's accordion state is persistent through hide/show in the layout
+// view.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, toolbox } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  await testAccordionStateAfterClickingHeader(doc);
+  await testAccordionStateAfterSwitchingSidebars(inspector, doc);
+  await testAccordionStateAfterReopeningLayoutView(toolbox);
+
+  Services.prefs.clearUserPref(FLEXBOX_OPENED_PREF);
+});
+
+function testAccordionStateAfterClickingHeader(doc) {
+  const header = doc.querySelector(".flexbox-pane ._header");
+  const content = doc.querySelector(".flexbox-pane ._content");
+
+  info("Checking initial state of the flexbox panel.");
+  is(content.style.display, "block", "The flexbox panel content is 'display: block'.");
+  ok(Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref on by default.`);
+
+  info("Clicking the flexbox header to hide the flexbox panel.");
+  header.click();
+
+  info("Checking the new state of the flexbox panel.");
+  is(content.style.display, "none", "The flexbox panel content is 'display: none'.");
+  ok(!Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref off.`);
+}
+
+function testAccordionStateAfterSwitchingSidebars(inspector, doc) {
+  info("Checking the flexbox accordion state is persistent after switching sidebars.");
+
+  const content = doc.querySelector(".flexbox-pane ._content");
+
+  info("Selecting the computed view.");
+  inspector.sidebar.select("computedview");
+
+  info("Selecting the layout view.");
+  inspector.sidebar.select("layoutview");
+
+  info("Checking the state of the flexbox panel.");
+  is(content.style.display, "none", "The flexbox panel content is 'display: none'.");
+  ok(!Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref off.`);
+}
+
+async function testAccordionStateAfterReopeningLayoutView(toolbox) {
+  info("Checking the flexbox accordion state is persistent after closing and re-opening "
+    + "the layout view.");
+
+  info("Closing the toolbox.");
+  await toolbox.destroy();
+
+  info("Re-opening the layout view.");
+  const { flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const content = doc.querySelector(".flexbox-pane ._content");
+
+  info("Checking the state of the flexbox panel.");
+  ok(!content, "The flexbox panel content is not rendered.");
+  ok(!Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref off.`);
+}

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container accordion and flex item accordion are both rendered when
+// the selected element is both a flex container and item.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .container {
+      display: flex;
+    }
+  </style>
+  <div id="container" class="container">
+    <div id="item" class="container">
+      <div></div>
+    </div>
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onAccordionsRendered = waitForDOM(doc, ".accordion > div", 4);
+  await selectNode("#item", inspector);
+  const [flexItemPane, flexContainerPane] = await onAccordionsRendered;
+
+  ok(flexItemPane, "The flex item accordion pane is rendered.");
+  ok(flexContainerPane, "The flex container accordion pane is rendered.");
+  is(flexItemPane.children[0].textContent, "Flex Item of div#container.container",
+    "Got the correct header for the flex item pane.");
+  is(flexContainerPane.children[0].textContent, "Flex Container",
+    "Got the correct header for the flex container pane.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_element_rep.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container's element rep will display the box model highlighter on
+// hover.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, toolbox } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexContainerRepRendered = waitForDOM(doc, ".flex-header-content .objectBox");
+  await selectNode("#container", inspector);
+  const [flexContainerRep] = await onFlexContainerRepRendered;
+
+  ok(flexContainerRep, "The flex container element rep is rendered.");
+
+  info("Listen to node-highlight event and mouse over the rep");
+  const onHighlight = toolbox.once("node-highlight");
+  EventUtils.synthesizeMouse(flexContainerRep, 10, 5, {type: "mouseover"},
+    doc.defaultView);
+  const nodeFront = await onHighlight;
+
+  ok(nodeFront, "nodeFront was returned from highlighting the node.");
+  is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
+  is(nodeFront.attributes[0].name, "id",
+    "The highlighted node has the correct attributes.");
+  is(nodeFront.attributes[0].value, "container",
+    "The highlighted node has the correct id.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_empty_state.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a message is displayed when no flex container is selected.
+
+const TEST_URI = `
+  <div></div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters } = inspector;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(doc.querySelector(".flexbox-pane .devtools-sidepanel-no-result",
+    "A message is displayede when no flex container is selected."));
+  ok(!highlighters.flexboxHighlighterShown,
+    "No flexbox highlighter exists in the highlighters overlay.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_01.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the flex item list is empty when there are no flex items for the selected flex
+// container.
+
+const TEST_URI = `
+  <div id="container" style="display:flex">
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters } = inspector;
+
+  const onFlexHeaderRendered = waitForDOM(doc, ".flex-header");
+  await selectNode("#container", inspector);
+  const [flexHeader] = await onFlexHeaderRendered;
+  const flexHighlighterToggle = flexHeader.querySelector("#flexbox-checkbox-toggle");
+  const flexItemList = doc.querySelector(".flex-item-list");
+
+  info("Checking the state of the Flexbox Inspector.");
+  ok(flexHeader, "The flex container header is rendered.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexItemList, "The flex item list is not rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item list can be used to navigated to the selected flex item.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexItemListRendered = waitForDOM(doc, ".flex-item-list");
+  await selectNode("#container", inspector);
+  const [flexItemList] = await onFlexItemListRendered;
+
+  info("Checking the initial state of the flex item list.");
+  ok(flexItemList, "The flex item list is rendered.");
+  is(flexItemList.children.length, 1,
+    "Got the correct number of flex items in the list.");
+
+  info("Clicking on the first flex item to navigate to the flex item.");
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  flexItemList.querySelector("button").click();
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+
+  info("Checking the selected flex item state.");
+  ok(flexOutlineContainer, "The flex outline is rendered.");
+  ok(!doc.querySelector(".flex-item-list"), "The flex item list is not shown.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_01.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling ON/OFF the flexbox highlighter from the flexbox inspector panel.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters, store } = inspector;
+
+  const onFlexHighlighterToggleRendered = waitForDOM(doc, "#flexbox-checkbox-toggle");
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created.");
+  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  await toggleHighlighterOFF(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is not shown.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_02.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling ON/OFF the flexbox highlighter on different flex containers from the
+// flexbox inspector panel.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters, store } = inspector;
+
+  const onFlexHighlighterToggleRendered = waitForDOM(doc, "#flexbox-checkbox-toggle");
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the #container state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+
+  info("Toggling ON the flexbox highlighter for #container from the layout panel.");
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created for #container.");
+  const highlightedNodeFront = store.getState().flexbox.flexContainer.nodeFront;
+  is(highlighters.flexboxHighlighterShown, highlightedNodeFront,
+    "Flexbox highlighter is shown for #container.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  info("Switching the selected flex container to .container.column");
+  const onToggleChange = waitUntilState(store, state => !state.flexbox.highlighted);
+  await selectNode(".container.column", inspector);
+  await onToggleChange;
+
+  info("Checking the .container.column state of the Flexbox Inspector.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  is(highlighters.flexboxHighlighterShown, highlightedNodeFront,
+    "Flexbox highlighter is still shown for #container.");
+
+  info("Toggling ON the flexbox highlighter for .container.column from the layout "
+    + "panel.");
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created for .container.column");
+  is(highlighters.flexboxHighlighterShown,
+    store.getState().flexbox.flexContainer.nodeFront,
+    "Flexbox highlighter is shown for .container.column.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  await toggleHighlighterOFF(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is not shown.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+});

--- a/devtools/client/inspector/flexbox/test/head.js
+++ b/devtools/client/inspector/flexbox/test/head.js
@@ -25,8 +25,48 @@ Services.prefs.setBoolPref("devtools.lay
 
 // Clear all set prefs.
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.flexboxinspector.enabled");
   Services.prefs.clearUserPref("devtools.layout.flexbox.opened");
   Services.prefs.clearUserPref("devtools.layout.boxmodel.opened");
   Services.prefs.clearUserPref("devtools.layout.grid.opened");
 });
+
+/**
+ * Toggles ON the flexbox highlighter given the flexbox highlighter button from the
+ * layout panel.
+ *
+ * @param  {DOMNode} button
+ *         The flexbox highlighter toggle button in the flex container panel.
+ * @param  {HighlightersOverlay} highlighters
+ *         The HighlightersOverlay instance.
+ * @param  {Store} store
+ *         The Redux store instance.
+ */
+async function toggleHighlighterON(button, highlighters, store) {
+  info("Toggling ON the flexbox highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onToggleChange = waitUntilState(store, state => state.flexbox.highlighted);
+  button.click();
+  await onHighlighterShown;
+  await onToggleChange;
+}
+
+/**
+ * Toggles OFF the flexbox highlighter given the flexbox highlighter button from the
+ * layout panel.
+ *
+ * @param  {DOMNode} button
+ *         The flexbox highlighter toggle button in the flex container panel.
+ * @param  {HighlightersOverlay} highlighters
+ *         The HighlightersOverlay instance.
+ * @param  {Store} store
+ *         The Redux store instance.
+ */
+async function toggleHighlighterOFF(button, highlighters, store) {
+  info("Toggling OFF the flexbox highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onToggleChange = waitUntilState(store, state => !state.flexbox.highlighted);
+  button.click();
+  await onHighlighterHidden;
+  await onToggleChange;
+}