Bug 1433718 - Make unit tests pass with the 3 pane inspector on in nightly. r=pbro draft
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 03 May 2018 15:31:43 -0400
changeset 791220 1f76d1c39c0ab501cc120e99a2efb88930b02731
parent 791218 2550daee45e72e42652f9a767c65f05b0f53cd35
push id108740
push userbmo:gl@mozilla.com
push dateThu, 03 May 2018 19:32:33 +0000
reviewerspbro
bugs1433718
milestone61.0a1
Bug 1433718 - Make unit tests pass with the 3 pane inspector on in nightly. r=pbro MozReview-Commit-ID: 5uBxArufaL6
devtools/client/inspector/animation-old/test/browser_animation_refresh_when_active.js
devtools/client/inspector/animation-old/test/browser_animation_refresh_when_active_after_mutations.js
devtools/client/inspector/animation-old/test/browser_animation_timeline_header.js
devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
devtools/client/inspector/computed/test/head.js
devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
devtools/client/inspector/test/browser_inspector_sidebarstate.js
devtools/client/inspector/test/shared-head.js
devtools/client/preferences/devtools-client.js
devtools/client/shared/test/browser_telemetry_sidebar.js
devtools/client/shared/test/shared-head.js
--- a/devtools/client/inspector/animation-old/test/browser_animation_refresh_when_active.js
+++ b/devtools/client/inspector/animation-old/test/browser_animation_refresh_when_active.js
@@ -4,16 +4,18 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel only refreshes when it is visible in the sidebar.
 
 add_task(async function() {
+  info("Switch to 2 pane inspector to see if the panel only refreshes when visible");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
   await addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {inspector, panel} = await openAnimationInspector();
   await testRefresh(inspector, panel);
 });
 
 async function testRefresh(inspector, panel) {
   info("Select a non animated node");
--- a/devtools/client/inspector/animation-old/test/browser_animation_refresh_when_active_after_mutations.js
+++ b/devtools/client/inspector/animation-old/test/browser_animation_refresh_when_active_after_mutations.js
@@ -10,16 +10,19 @@ requestLongerTimeout(2);
 
 const EXPECTED_GRAPH_PATH_SEGMENTS = [{ x: 0, y: 0 },
                                       { x: 49999, y: 0.0 },
                                       { x: 50000, y: 0.5 },
                                       { x: 99999, y: 0.5 },
                                       { x: 100000, y: 0 }];
 
 add_task(async function() {
+  info("Switch to 2 pane inspector to see if the panel only refreshes when visible");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
   info("Open animation inspector once so that activate animation mutations listener");
   await addTab("data:text/html;charset=utf8,<div id='target'>test</div>");
   const { controller, inspector, panel } = await openAnimationInspector();
 
   info("Select other tool to hide animation inspector");
   await inspector.sidebar.select("ruleview");
 
   // Count players-updated event in controller.
--- a/devtools/client/inspector/animation-old/test/browser_animation_timeline_header.js
+++ b/devtools/client/inspector/animation-old/test/browser_animation_timeline_header.js
@@ -10,16 +10,17 @@ requestLongerTimeout(2);
 
 const {findOptimalTimeInterval, TimeScale} = require("devtools/client/inspector/animation-old/utils");
 
 // Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
 // animation-timeline.js
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(async function() {
+  await pushPref("devtools.inspector.three-pane-enabled", false);
   await addTab(URL_ROOT + "doc_simple_animation.html");
 
   // System scrollbar is enabled by default on our testing envionment and it
   // would shrink width of inspector and affect number of time-ticks causing
   // unexpected results. So, we set it wider to avoid this kind of edge case.
   await pushPref("devtools.toolsidebar-width.inspector", 350);
 
   let {panel} = await openAnimationInspector();
--- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -12,16 +12,17 @@ const TimeScale = require("devtools/clie
 const { findOptimalTimeInterval } =
   require("devtools/client/inspector/animation/utils/utils");
 
 // Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
 // AnimationTimeTickList component.
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(async function() {
+  await pushPref("devtools.inspector.three-pane-enabled", false);
   await addTab(URL_ROOT + "doc_simple_animation.html");
   await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
   const timeScale = new TimeScale(animationInspector.state.animations);
 
   info("Checking animation list header element existence");
   const listContainerEl = panel.querySelector(".animation-list-container");
   const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
--- a/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
@@ -5,16 +5,18 @@
 
 // Animation inspector should not update when hidden.
 // Test for followings:
 // * whether the UIs update after selecting another inspector
 // * whether the UIs update after selecting another tool
 // * whether the UIs update after selecting animation inspector again
 
 add_task(async function() {
+  info("Switch to 2 pane inspector to see if the animation only refreshes when visible");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
   await addTab(URL_ROOT + "doc_custom_playback_rate.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking the UIs update after selecting another inspector");
   await selectNodeAndWaitForAnimations("head", inspector);
   inspector.sidebar.select("ruleview");
   await selectNode("div", inspector);
   is(animationInspector.state.animations.length, 0,
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
@@ -16,29 +16,21 @@ add_task(async function() {
 
   await selectNode("p", inspector);
 
   info("Modify padding-bottom in box model view");
   let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
 
+  let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
   EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
   await waitForUpdate(inspector);
+  await onRuleViewRefreshed;
   is(editor.value, "7", "Should have the right value in the editor.");
   EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
 
-  let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
-  let onRuleViewSelected = once(inspector.sidebar, "ruleview-selected");
-  info("Select the rule view and check that the property was synced there");
+  info("Check that the property was synced with the rule view");
   let ruleView = selectRuleView(inspector);
-
-  info("Wait for the rule view to be selected");
-  await onRuleViewSelected;
-
-  info("Wait for the rule view to be refreshed");
-  await onRuleViewRefreshed;
-  ok(true, "The rule view was refreshed");
-
   let ruleEditor = getRuleViewRuleEditor(ruleView, 0);
   let textProp = ruleEditor.rule.textProps[0];
   is(textProp.value, "7px", "The property has the right value");
 });
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
@@ -33,17 +33,18 @@ const TEST_URI = `
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = await openComputedView();
   await selectNode("span", inspector);
 
   info("Selecting the first computed style in the list");
-  let firstStyle = view.styleDocument.querySelector(".computed-property-view");
+  let firstStyle = view.styleDocument.querySelector(
+    "#computed-container .computed-property-view");
   ok(firstStyle, "First computed style found in panel");
   firstStyle.focus();
 
   info("Tab to select the 2nd style and press return");
   let onExpanded = inspector.once("computed-view-property-expanded");
   EventUtils.synthesizeKey("KEY_Tab");
   EventUtils.synthesizeKey("KEY_Enter");
   await onExpanded;
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
@@ -63,17 +63,18 @@ async function testCollapseOnTwistyClick
   ok(div.childNodes.length === 0,
     "Matched selectors are collapsed on twisty click");
 }
 
 async function testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property expands on container dbl-click");
 
   info("Getting computed property container");
-  let container = styleDocument.querySelector(".computed-property-view");
+  let container = styleDocument.querySelector(
+    "#computed-container .computed-property-view");
   ok(container, "Container found");
 
   container.scrollIntoView();
 
   let onExpand = inspector.once("computed-view-property-expanded");
   info("Dbl-clicking on the container");
   EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
 
@@ -83,17 +84,18 @@ async function testExpandOnDblClick({sty
   let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length > 0, "Matched selectors are expanded on dblclick");
 }
 
 async function testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property collapses on container dbl-click");
 
   info("Getting computed property container");
-  let container = styleDocument.querySelector(".computed-property-view");
+  let container = styleDocument.querySelector(
+    "#computed-container .computed-property-view");
   ok(container, "Container found");
 
   let onCollapse = inspector.once("computed-view-property-collapsed");
   info("Dbl-clicking on the container");
   EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
 
   await onCollapse;
 
--- a/devtools/client/inspector/computed/test/head.js
+++ b/devtools/client/inspector/computed/test/head.js
@@ -30,17 +30,18 @@ function fireCopyEvent(element) {
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} name
  *        The name of the property to retrieve
  * @return an object {nameSpan, valueSpan}
  */
 function getComputedViewProperty(view, name) {
   let prop;
-  for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
+  for (let property of view.styleDocument.querySelectorAll(
+      "#computed-container .computed-property-view")) {
     let nameSpan = property.querySelector(".computed-property-name");
     let valueSpan = property.querySelector(".computed-property-value");
 
     if (nameSpan.firstChild.textContent === name) {
       prop = {nameSpan: nameSpan, valueSpan: valueSpan};
       break;
     }
   }
@@ -80,17 +81,18 @@ function getComputedViewPropertyView(vie
  * @param {String} name
  *        The name of the property to retrieve
  * @return {Promise} A promise that resolves to the property matched rules
  * container
  */
 var getComputedViewMatchedRules = async function(view, name) {
   let expander;
   let propertyContent;
-  for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
+  for (let property of view.styleDocument.querySelectorAll(
+      "#computed-container .computed-property-view")) {
     let nameSpan = property.querySelector(".computed-property-name");
     if (nameSpan.firstChild.textContent === name) {
       expander = property.querySelector(".computed-expandable");
       propertyContent = property.nextSibling;
       break;
     }
   }
 
@@ -173,17 +175,17 @@ function selectAllText(view) {
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} expectedPattern
  *        A regular expression used to check the content of the clipboard
  */
 async function copyAllAndCheckClipboard(view, expectedPattern) {
   selectAllText(view);
   let contentDoc = view.styleDocument;
-  let prop = contentDoc.querySelector(".computed-property-view");
+  let prop = contentDoc.querySelector("#computed-container .computed-property-view");
 
   try {
     info("Trigger a copy event and wait for the clipboard content");
     await waitForClipboardPromise(() => fireCopyEvent(prop),
                                   () => checkClipboard(expectedPattern));
   } catch (e) {
     failClipboardCheck(expectedPattern);
   }
@@ -200,17 +202,18 @@ async function copyAllAndCheckClipboard(
  *        { start: {prop: 1, offset: 0}, end: {prop: 3, offset: 5} }
  * @param {String} expectedPattern
  *        A regular expression used to check the content of the clipboard
  */
 async function copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
   info("Testing selection copy");
 
   let contentDocument = view.styleDocument;
-  let props = contentDocument.querySelectorAll(".computed-property-view");
+  let props = contentDocument.querySelectorAll(
+    "#computed-container .computed-property-view");
 
   info("Create the text selection range");
   let range = contentDocument.createRange();
   range.setStart(props[positions.start.prop], positions.start.offset);
   range.setEnd(props[positions.end.prop], positions.end.offset);
   contentDocument.defaultView.getSelection().addRange(range);
 
   try {
--- a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
@@ -1,15 +1,15 @@
 /* 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";
 
-// Test that the style-inspector views only refresh when they are active.
+// Test that the rule and computed view refreshes when they are active.
 
 const TEST_URI = `
   <div id="one" style="color:red;">one</div>
   <div id="two" style="color:blue;">two</div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
@@ -29,12 +29,11 @@ add_task(async function() {
   ok(getComputedViewPropertyValue(cView, "color"), "#F00",
     "The computed-view shows the properties for test node one");
 
   info("Selecting test node two");
   await selectNode("#two", inspector);
 
   ok(getComputedViewPropertyValue(cView, "color"), "#00F",
     "The computed-view shows the properties for test node two");
-
-  is(getRuleViewPropertyValue(view, "element", "color"), "red",
-    "The rule-view doesn't the properties for test node two");
+  is(getRuleViewPropertyValue(view, "element", "color"), "blue",
+    "The rule-view shows the properties for test node two");
 });
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
@@ -3,17 +3,18 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the inspector panel has a 3 pane toggle button, and that
 // this button is visible both in BOTTOM and SIDE hosts.
 
 add_task(async function() {
-  await pushPref("devtools.inspector.three-pane-toggle", true);
+  info("Switch to 2 pane inspector to test that 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
 
   info("Open the inspector in a bottom toolbox host");
   const { inspector, toolbox } = await openInspectorForURL("about:blank", "bottom");
 
   const button = inspector.panelDoc.querySelector(".sidebar-toggle");
   ok(button, "The toggle button exists in the DOM");
   ok(button.getAttribute("title"), "The title tooltip has initial state");
   ok(button.classList.contains("pane-collapsed"), "The button is in collapsed state");
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
@@ -3,17 +3,18 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the 3 pane toggle button can toggle on and off the inspector's 3 pane mode,
 // and the 3 panes rendered are all of equal widths in the BOTTOM host.
 
 add_task(async function() {
-  await pushPref("devtools.inspector.three-pane-toggle", true);
+  info("Switch to 2 pane inspector to test that 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
 
   const { inspector } = await openInspectorForURL("about:blank");
   const { panelDoc: doc } = inspector;
   const button = doc.querySelector(".sidebar-toggle");
   const ruleViewSidebar = inspector.sidebarSplitBox.startPanelContainer;
   const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
 
   ok(button.classList.contains("pane-collapsed"), "The button is in collapsed state");
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
@@ -6,17 +6,18 @@
 
 // Tests that the 3 pane inspector toggle can render the middle and right panels of equal
 // sizes when the original sidebar can be doubled in width and be smaller than half the
 // toolbox's width in the BOTTOM host.
 
 const SIDEBAR_WIDTH = 200;
 
 add_task(async function() {
-  await pushPref("devtools.inspector.three-pane-toggle", true);
+  info("Switch to 2 pane inspector to test that 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
 
   const { inspector } = await openInspectorForURL("about:blank");
   const { panelDoc: doc } = inspector;
   const button = doc.querySelector(".sidebar-toggle");
   const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
 
   if (toolboxWidth < 600) {
     ok(true, "Can't run the full test because the toolbox width is too small.");
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
@@ -3,17 +3,18 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the 3 pane inspector toggle button can render the bottom-left and
 // bottom-right panels of equal sizes in the SIDE host.
 
 add_task(async function() {
-  await pushPref("devtools.inspector.three-pane-toggle", true);
+  info("Switch to 2 pane inspector to test that 3 pane toggle button behavior");
+  await pushPref("devtools.inspector.three-pane-enabled", false);
 
   const { inspector, toolbox } = await openInspectorForURL("about:blank");
   const { panelDoc: doc } = inspector;
 
   info("Switch the host to side type");
   await toolbox.switchHost("side");
 
   const button = doc.querySelector(".sidebar-toggle");
--- a/devtools/client/inspector/test/browser_inspector_sidebarstate.js
+++ b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
@@ -4,35 +4,34 @@
 "use strict";
 
 const TEST_URI = "data:text/html;charset=UTF-8," +
   "<h1>browser_inspector_sidebarstate.js</h1>";
 
 add_task(async function() {
   let { inspector, toolbox } = await openInspectorForURL(TEST_URI);
 
-  info("Selecting ruleview.");
-  inspector.sidebar.select("ruleview");
-
-  is(inspector.sidebar.getCurrentTabID(), "ruleview",
-     "Rule View is selected by default");
-
   info("Selecting computed view.");
   inspector.sidebar.select("computedview");
 
-  // Finish initialization of the computed panel before
-  // destroying the toolbox.
-  await waitForTick();
+  is(inspector.sidebar.getCurrentTabID(), "computedview",
+    "Computed View is selected");
+
+  info("Selecting layout view.");
+  inspector.sidebar.select("layoutview");
+
+  is(inspector.sidebar.getCurrentTabID(), "layoutview",
+    "Layout View is selected");
 
   info("Closing inspector.");
   await toolbox.destroy();
 
   info("Re-opening inspector.");
   inspector = (await openInspector()).inspector;
 
   if (!inspector.sidebar.getCurrentTabID()) {
     info("Default sidebar still to be selected, adding select listener.");
     await inspector.sidebar.once("select");
   }
 
-  is(inspector.sidebar.getCurrentTabID(), "computedview",
-     "Computed view is selected by default.");
+  is(inspector.sidebar.getCurrentTabID(), "layoutview",
+     "Layout view is selected by default.");
 });
--- a/devtools/client/inspector/test/shared-head.js
+++ b/devtools/client/inspector/test/shared-head.js
@@ -73,17 +73,17 @@ var openInspectorSidebarTab = async func
 /**
  * Open the toolbox, with the inspector tool visible, and the rule-view
  * sidebar tab selected.
  *
  * @return a promise that resolves when the inspector is ready and the rule view
  * is visible and ready
  */
 function openRuleView() {
-  return openInspectorSidebarTab("ruleview").then(data => {
+  return openInspector().then(data => {
     // Replace the view to use a custom debounce function that can be triggered manually
     // through an additional ".flush()" property.
     data.inspector.getPanel("ruleview").view.debounce = manualDebounce();
 
     return {
       toolbox: data.toolbox,
       inspector: data.inspector,
       testActor: data.testActor,
@@ -144,17 +144,16 @@ function openLayoutView() {
 /**
  * Select the rule view sidebar tab on an already opened inspector panel.
  *
  * @param {InspectorPanel} inspector
  *        The opened inspector panel
  * @return {CssRuleView} the rule view
  */
 function selectRuleView(inspector) {
-  inspector.sidebar.select("ruleview");
   return inspector.getPanel("ruleview").view;
 }
 
 /**
  * Select the computed view sidebar tab on an already opened inspector panel.
  *
  * @param {InspectorPanel} inspector
  *        The opened inspector panel
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -44,30 +44,30 @@ pref("devtools.command-button-measure.en
 pref("devtools.command-button-noautohide.enabled", false);
 
 // Inspector preferences
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);
 // What was the last active sidebar in the inspector
 pref("devtools.inspector.activeSidebar", "ruleview");
 pref("devtools.inspector.remote", false);
+
+#if defined(NIGHTLY_BUILD)
+// Show the 3 pane onboarding tooltip in the inspector
+pref("devtools.inspector.show-three-pane-tooltip", true);
+// Enable the 3 pane mode in the inspector
+pref("devtools.inspector.three-pane-enabled", true);
 // Enable the 3 pane mode toggle in the inspector
-#if defined(NIGHTLY_BUILD)
 pref("devtools.inspector.three-pane-toggle", true);
 #else
+pref("devtools.inspector.show-three-pane-tooltip", false);
+pref("devtools.inspector.three-pane-enabled", false);
 pref("devtools.inspector.three-pane-toggle", false);
 #endif
-// Enable the 3 pane mode in the inspector
-pref("devtools.inspector.three-pane-enabled", false);
-// Show the 3 pane onboarding tooltip in the inspector
-#if defined(NIGHTLY_BUILD)
-pref("devtools.inspector.show-three-pane-tooltip", true);
-#else
-pref("devtools.inspector.show-three-pane-tooltip", false);
-#endif
+
 // Collapse pseudo-elements by default in the rule-view
 pref("devtools.inspector.show_pseudo_elements", false);
 // The default size for image preview tooltips in the rule-view/computed-view/markup-view
 pref("devtools.inspector.imagePreviewTooltipSize", 300);
 // Enable user agent style inspection in rule-view
 pref("devtools.inspector.showUserAgentStyles", false);
 // Show all native anonymous content (like controls in <video> tags)
 pref("devtools.inspector.showAllAnonymousContent", false);
--- a/devtools/client/shared/test/browser_telemetry_sidebar.js
+++ b/devtools/client/shared/test/browser_telemetry_sidebar.js
@@ -25,17 +25,17 @@ add_task(async function() {
   await gDevTools.closeToolbox(target);
   gBrowser.removeCurrentTab();
 });
 
 function testSidebar(toolbox) {
   info("Testing sidebar");
 
   let inspector = toolbox.getCurrentPanel();
-  let sidebarTools = ["ruleview", "computedview", "layoutview", "fontinspector",
+  let sidebarTools = ["computedview", "layoutview", "fontinspector",
                       "animationinspector"];
 
   // Concatenate the array with itself so that we can open each tool twice.
   sidebarTools.push.apply(sidebarTools, sidebarTools);
 
   return new Promise(resolve => {
     // See TOOL_DELAY for why we need setTimeout here
     setTimeout(function selectSidebarTab() {
@@ -57,17 +57,18 @@ function checkResults(Telemetry) {
 
   for (let [histId, value] of Object.entries(result)) {
     if (histId.startsWith("DEVTOOLS_INSPECTOR_")) {
       // Inspector stats are tested in browser_telemetry_toolboxtabs.js so we
       // skip them here because we only open the inspector once for this test.
       continue;
     }
 
-    if (histId === "DEVTOOLS_TOOLBOX_OPENED_COUNT") {
+    if (histId === "DEVTOOLS_TOOLBOX_OPENED_COUNT" ||
+        histId === "DEVTOOLS_RULEVIEW_OPENED_COUNT") {
       is(value.length, 1, histId + " has only one entry");
     } else if (histId.endsWith("OPENED_COUNT")) {
       ok(value.length > 1, histId + " has more than one entry");
 
       let okay = value.every(function(element) {
         return element === true;
       });
 
--- a/devtools/client/shared/test/shared-head.js
+++ b/devtools/client/shared/test/shared-head.js
@@ -103,19 +103,23 @@ function loadFrameScriptUtils(browser = 
   info("Loading the helper frame script " + frameURL);
   mm.loadFrameScript(frameURL, false);
   SimpleTest.registerCleanupFunction(() => {
     mm = null;
   });
   return mm;
 }
 
+Services.prefs.setBoolPref("devtools.inspector.three-pane-enabled", true);
+Services.prefs.setBoolPref("devtools.inspector.three-pane-toggle", true);
 Services.prefs.setBoolPref("devtools.inspector.show-three-pane-tooltip", false);
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.dump.emit");
+  Services.prefs.clearUserPref("devtools.inspector.three-pane-enabled");
+  Services.prefs.clearUserPref("devtools.inspector.three-pane-toggle");
   Services.prefs.clearUserPref("devtools.inspector.show-three-pane-tooltip");
   Services.prefs.clearUserPref("devtools.toolbox.host");
   Services.prefs.clearUserPref("devtools.toolbox.previousHost");
   Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
   Services.prefs.clearUserPref("devtools.toolbox.splitconsoleHeight");
 });
 
 registerCleanupFunction(async function cleanup() {