Bug 1433718 - Make unit tests pass with the 3 pane inspector on in nightly. r=pbro
☠☠ backed out by 18f6c21aeef4 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 04 May 2018 09:38:47 -0400
changeset 473151 b7aeba47bb1fdac1946cc2afcf19accaf4ff4c91
parent 473149 c1493d2344e9b085961d9d1684b250d710875d1c
child 473152 19576ace167cab470f22c16e4970f483df99fb6e
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1433718
milestone61.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 1433718 - Make unit tests pass with the 3 pane inspector on in nightly. r=pbro
browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js
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/rules/views/rule-editor.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/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js
+++ b/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js
@@ -10,17 +10,17 @@ ChromeUtils.defineModuleGetter(this, "de
 /* globals getExtensionSidebarActors, expectNoSuchActorIDs, testSetExpressionSidebarPanel */
 
 // Import the shared test helpers from the related devtools tests.
 Services.scriptloader.loadSubScript(
   new URL("head_devtools_inspector_sidebar.js", gTestPath).href,
   this);
 
 function isActiveSidebarTabTitle(inspector, expectedTabTitle, message) {
-  const actualTabTitle = inspector.panelDoc.querySelector(".tabs-menu-item.is-active").innerText;
+  const actualTabTitle = inspector.panelDoc.querySelector("#inspector-sidebar .tabs-menu-item.is-active").innerText;
   is(actualTabTitle, expectedTabTitle, message);
 }
 
 function testSetObjectSidebarPanel(panel, expectedCellType, expectedTitle) {
   is(panel.querySelectorAll("table.treeTable").length, 1,
      "The sidebar panel contains a rendered TreeView component");
 
   is(panel.querySelectorAll(`table.treeTable .${expectedCellType}Cell`).length, 1,
--- 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/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -189,17 +189,19 @@ RuleEditor.prototype = {
           title: l10n("rule.selectorHighlighter.tooltip")
         });
         selectorHighlighter.addEventListener("click", () => {
           this.ruleView.toggleSelectorHighlighter(selectorHighlighter, selector);
         });
 
         this.uniqueSelector = selector;
         this.emit("selector-icon-created");
-      }.bind(this))();
+      }.bind(this))().catch(error => {
+        console.error("Exception while getting unique selector", error);
+      });;
     }
 
     this.openBrace = createChild(header, "span", {
       class: "ruleview-ruleopen",
       textContent: " {"
     });
 
     this.propertyList = createChild(code, "ul", {
--- 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
@@ -24,17 +24,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 = [...sidebarTools, ...sidebarTools];
 
   return new Promise(resolve => {
     // See TOOL_DELAY for why we need setTimeout here
     setTimeout(function selectSidebarTab() {
@@ -50,17 +50,16 @@ function testSidebar(toolbox) {
     }, TOOL_DELAY);
   });
 }
 
 function checkResults() {
   // For help generating these tests use generateTelemetryTests("DEVTOOLS_")
   // here.
   checkTelemetry("DEVTOOLS_INSPECTOR_OPENED_COUNT", "", [1, 0, 0], "array");
-  checkTelemetry("DEVTOOLS_RULEVIEW_OPENED_COUNT", "", [3, 0, 0], "array");
-  checkTelemetry("DEVTOOLS_COMPUTEDVIEW_OPENED_COUNT", "", [2, 0, 0], "array");
+  checkTelemetry("DEVTOOLS_RULEVIEW_OPENED_COUNT", "", [1, 0, 0], "array");
+  checkTelemetry("DEVTOOLS_COMPUTEDVIEW_OPENED_COUNT", "", [3, 0, 0], "array");
   checkTelemetry("DEVTOOLS_LAYOUTVIEW_OPENED_COUNT", "", [2, 0, 0], "array");
   checkTelemetry("DEVTOOLS_FONTINSPECTOR_OPENED_COUNT", "", [2, 0, 0], "array");
-  checkTelemetry("DEVTOOLS_RULEVIEW_TIME_ACTIVE_SECONDS", "", null, "hasentries");
   checkTelemetry("DEVTOOLS_COMPUTEDVIEW_TIME_ACTIVE_SECONDS", "", null, "hasentries");
   checkTelemetry("DEVTOOLS_LAYOUTVIEW_TIME_ACTIVE_SECONDS", "", null, "hasentries");
   checkTelemetry("DEVTOOLS_FONTINSPECTOR_TIME_ACTIVE_SECONDS", "", null, "hasentries");
 }
--- a/devtools/client/shared/test/shared-head.js
+++ b/devtools/client/shared/test/shared-head.js
@@ -106,19 +106,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() {