Bug 1496990 - Move the onSidebarSelect event handler before adding the sidebar tabs. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 10 Oct 2018 11:40:30 -0400
changeset 488823 c2dd39bde2cc1b5bbbd48a43a7ba616152159777
parent 488822 e8121fadb5b840950624f0429c370d19f07a61cc
child 488856 3c2fc3b5c03adc291583cb49e346e7580f283c0f
push id246
push userfmarier@mozilla.com
push dateSat, 13 Oct 2018 00:15:40 +0000
reviewerspbro
bugs1496990
milestone64.0a1
Bug 1496990 - Move the onSidebarSelect event handler before adding the sidebar tabs. r=pbro
devtools/client/inspector/computed/test/browser.ini
devtools/client/inspector/computed/test/browser_computed_default_tab.js
devtools/client/inspector/inspector.js
--- a/devtools/client/inspector/computed/test/browser.ini
+++ b/devtools/client/inspector/computed/test/browser.ini
@@ -14,16 +14,17 @@ support-files =
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-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_computed_browser-styles.js]
 [browser_computed_cycle_color.js]
+[browser_computed_default_tab.js]
 [browser_computed_getNodeInfo.js]
 [browser_computed_keybindings_01.js]
 [browser_computed_keybindings_02.js]
 [browser_computed_matched-selectors-toggle.js]
 [browser_computed_matched-selectors_01.js]
 [browser_computed_matched-selectors_02.js]
 [browser_computed_media-queries.js]
 [browser_computed_no-results-placeholder.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_default_tab.js
@@ -0,0 +1,36 @@
+/* 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 computed view is initialized when the computed view is the default tab
+// for the inspector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches">Some styled text</span>
+`;
+
+add_task(async function() {
+  await pushPref("devtools.inspector.activeSidebar", "computedview");
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const {inspector, view} = await openComputedView();
+  await selectNode("#matches", inspector);
+  is(isPropertyVisible("color", view), true, "span #matches color property is visible");
+});
+
+function isPropertyVisible(name, view) {
+  info("Checking property visibility for " + name);
+  const propertyViews = view.propertyViews;
+  for (const propView of propertyViews) {
+    if (propView.name == name) {
+      return propView.visible;
+    }
+  }
+  return false;
+}
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -750,29 +750,27 @@ Inspector.prototype = {
    * panel. Otherwise, we specify the default tab when handling the sidebar setup.
    *
    * @params {String} defaultTab
    *         Thie id of the default tab for the sidebar.
    */
   async addRuleView({ defaultTab = "ruleview", skipQueue = false } = {}) {
     const ruleViewSidebar = this.sidebarSplitBox.startPanelContainer;
 
-    if (this.is3PaneModeEnabled || defaultTab === "ruleview") {
-      // Force the rule view panel creation by calling getPanel
-      this.getPanel("ruleview");
-    }
-
     if (this.is3PaneModeEnabled) {
       // Convert to 3 pane mode by removing the rule view from the inspector sidebar
       // and adding the rule view to the middle (in landscape/horizontal mode) or
       // bottom-left (in portrait/vertical mode) panel.
       ruleViewSidebar.style.display = "block";
 
       this.setSidebarSplitBoxState();
 
+      // Force the rule view panel creation by calling getPanel
+      this.getPanel("ruleview");
+
       await this.sidebar.removeTab("ruleview");
 
       this.ruleViewSideBar.addExistingTab(
         "ruleview",
         INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
         true);
 
       this.ruleViewSideBar.show();
@@ -861,16 +859,17 @@ Inspector.prototype = {
         collapsed: !this.is3PaneModeEnabled,
         collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideThreePaneMode"),
         expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showThreePaneMode"),
         onClick: this.onSidebarToggle,
       }
     };
 
     this.sidebar = new ToolSidebar(sidebar, this, "inspector", options);
+    this.sidebar.on("select", this.onSidebarSelect);
 
     const ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
     this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
       hideTabstripe: true
     });
 
     // defaultTab may also be an empty string or a tab id that doesn't exist anymore
     // (e.g. it was a tab registered by an addon that has been uninstalled).
@@ -981,17 +980,16 @@ Inspector.prototype = {
           }
         },
         defaultTab == changesId);
     }
 
     this.sidebar.addAllQueuedTabs();
 
     // Persist splitter state in preferences.
-    this.sidebar.on("select", this.onSidebarSelect);
     this.sidebar.on("show", this.onSidebarShown);
     this.sidebar.on("hide", this.onSidebarHidden);
     this.sidebar.on("destroy", this.onSidebarHidden);
 
     this.sidebar.show();
   },
 
   /**