Bug 592525 - Txul Regression between 1PM-3PM PDT, r=gavin, a=blocking2.0

browser/base/content/browser.xul

@@ -268,12 +268,7 @@
                        class="toolbarbutton-text"
                        oncommand="InspectorUI.toggleDOMPanel();"/>
       </toolbar>
-      <iframe id="inspector-tree-iframe"
-               flex="1"
-               type="content"
-               src="chrome://browser/content/inspector.html"
-               onclick="InspectorUI.onTreeClick(event);" />
-      <hbox align="end">
+      <hbox id="tree-panel-resizer-box" align="end">
         <spacer flex="1" />
         <resizer dir="bottomend" />
       </hbox>

browser/base/content/inspector.js

@@ -335,6 +335,7 @@ var InspectorUI = {
   selectEventsSuppressed: false,
   showTextNodesWithWhitespace: false,
   inspecting: false,
+  treeLoaded: false,
 
   /**
    * Toggle the inspector interface elements on or off.
@@ -434,6 +435,21 @@ var InspectorUI = {
     return doc.documentElement.lastElementChild;
   },
 
+  initializeTreePanel: function IUI_initializeTreePanel()
+  {
+    this.treeBrowserDocument = this.treeIFrame.contentDocument;
+    this.treePanelDiv = this.treeBrowserDocument.createElement("div");
+    this.treeBrowserDocument.body.appendChild(this.treePanelDiv);
+    this.treePanelDiv.ownerPanel = this;
+    this.ioBox = new InsideOutBox(this, this.treePanelDiv);
+    this.ioBox.createObjectBox(this.win.document.documentElement);
+    this.treeLoaded = true;
+    if (this.isTreePanelOpen && this.isStylePanelOpen &&
+        this.isDOMPanelOpen && this.treeLoaded) {
+      this.notifyReady();
+    }
+  },
+
   /**
    * Open the inspector's tree panel and initialize it.
    */
@@ -444,6 +460,17 @@ var InspectorUI = {
       this.treePanel.hidden = false;
     }
 
+    this.treeIFrame = document.getElementById("inspector-tree-iframe");
+    if (!this.treeIFrame) {
+      let resizerBox = document.getElementById("tree-panel-resizer-box");
+      this.treeIFrame = document.createElement("iframe");
+      this.treeIFrame.setAttribute("id", "inspector-tree-iframe");
+      this.treeIFrame.setAttribute("flex", "1");
+      this.treeIFrame.setAttribute("type", "content");
+      this.treeIFrame.setAttribute("onclick", "InspectorUI.onTreeClick(event)");
+      this.treeIFrame = this.treePanel.insertBefore(this.treeIFrame, resizerBox);
+    }
+    
     const panelWidthRatio = 7 / 8;
     const panelHeightRatio = 1 / 5;
     this.treePanel.openPopup(this.browser, "overlap", 80, this.win.innerHeight,
@@ -451,13 +478,18 @@ var InspectorUI = {
     this.treePanel.sizeTo(this.win.outerWidth * panelWidthRatio,
       this.win.outerHeight * panelHeightRatio);
 
-    this.treeIFrame = document.getElementById("inspector-tree-iframe");
-    this.treeBrowserDocument = this.treeIFrame.contentDocument;
-    this.treePanelDiv = this.treeBrowserDocument.createElement("div");
-    this.treeBrowserDocument.body.appendChild(this.treePanelDiv);
-    this.treePanelDiv.ownerPanel = this;
-    this.ioBox = new InsideOutBox(this, this.treePanelDiv);
-    this.ioBox.createObjectBox(this.win.document.documentElement);
+    let src = this.treeIFrame.getAttribute("src");
+    if (src != "chrome://browser/content/inspector.html") {
+      let self = this;
+      this.treeIFrame.addEventListener("DOMContentLoaded", function() {
+        self.treeIFrame.removeEventListener("DOMContentLoaded", arguments.callee, true);
+        self.initializeTreePanel();
+      }, true);
+
+      this.treeIFrame.setAttribute("src", "chrome://browser/content/inspector.html");
+    } else {
+      this.initializeTreePanel();
+    }
   },
 
   createObjectBox: function IUI_createObjectBox(object, isRoot)
@@ -773,6 +805,7 @@ var InspectorUI = {
     this.browser = this.win = null; // null out references to browser and window
     this.winID = null;
     this.selection = null;
+    this.treeLoaded = false;
     this.closing = false;
     Services.obs.notifyObservers(null, "inspector-closed", null);
   },
@@ -964,6 +997,12 @@ var InspectorUI = {
   /////////////////////////////////////////////////////////////////////////
   //// Event Handling
 
+  notifyReady: function IUI_notifyReady()
+  {
+    document.removeEventListener("popupshowing", this, false);
+    Services.obs.notifyObservers(null, "inspector-opened", null);
+  },
+
   /**
    * Main callback handler for events.
    *
@@ -981,9 +1020,9 @@ var InspectorUI = {
         if (event.target.id == "inspector-tree-panel" ||
             event.target.id == "inspector-style-panel" ||
             event.target.id == "inspector-dom-panel")
-          if (this.isTreePanelOpen && this.isStylePanelOpen && this.isDOMPanelOpen) {
-            document.removeEventListener("popupshowing", this, false);
-            Services.obs.notifyObservers(null, "inspector-opened", null);
+          if (this.isTreePanelOpen && this.isStylePanelOpen &&
+              this.isDOMPanelOpen && this.treeLoaded) {
+            this.notifyReady();
           }
         break;
       case "TabSelect":

browser/base/content/test/browser_inspector_initialization.js

@@ -50,6 +50,8 @@ function runInspectorTests()
 {
   Services.obs.removeObserver(runInspectorTests, "inspector-opened", false);
   Services.obs.addObserver(finishInspectorTests, "inspector-closed", false);
+  let iframe = document.getElementById("inspector-tree-iframe");
+  is(InspectorUI.treeIFrame, iframe, "Inspector IFrame matches");
   ok(InspectorUI.inspecting, "Inspector is highlighting");
   ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");