DevTools: keep widgets in widget hierarchy upon hide, split attach/detach cycle from show/hide.

third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js

Index: third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
index 5ab070652d9c3c41e95359341277d54bc386a908..5685bfb6bc05610b71c5efb210be8a5092a48eee 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
@@ -208,6 +208,7 @@ WebInspector.TabbedPane.prototype = {
         else
             this._tabs.push(tab);
         this._tabsHistory.push(tab);
+        view.attach(this.element);
         if (this._tabsHistory[0] === tab && this.isShowing())
             this.selectTab(tab.id, userGesture);
         this._updateTabElements();
@@ -258,6 +259,7 @@ WebInspector.TabbedPane.prototype = {
         this._tabs.splice(this._tabs.indexOf(tab), 1);
         if (tab._shown)
             this._hideTabElement(tab);
+        tab.view.detach();
 
         var eventData = { tabId: id, view: tab.view, isUserGesture: userGesture };
         this.dispatchEventToListeners(WebInspector.TabbedPane.EventTypes.TabClosed, eventData);
@@ -329,8 +331,10 @@ WebInspector.TabbedPane.prototype = {
         if (this._currentTab && this._currentTab.id === id)
             return true;
 
+        this.suspendInvalidations();
         this._hideCurrentTab();
         this._showTab(tab);
+        this.resumeInvalidations();
         this._currentTab = tab;
 
         this._tabsHistory.splice(this._tabsHistory.indexOf(tab), 1);
@@ -423,13 +427,19 @@ WebInspector.TabbedPane.prototype = {
     changeTabView: function(id, view)
     {
         var tab = this._tabsById[id];
-        if (this._currentTab && this._currentTab.id === tab.id) {
-            if (tab.view !== view)
-                this._hideTab(tab);
-            tab.view = view;
+        if (tab.view === view)
+            return;
+
+        this.suspendInvalidations();
+        var isSelected = this._currentTab && this._currentTab.id === id;
+        if (isSelected)
+            this._hideTab(tab);
+        tab.view.detach();
+        tab.view = view;
+        tab.view.attach(this.element);
+        if (isSelected)
             this._showTab(tab);
-        } else
-            tab.view = view;
+        this.resumeInvalidations();
     },
 
     onResize: function()
@@ -759,7 +769,7 @@ WebInspector.TabbedPane.prototype = {
     _showTab: function(tab)
     {
         tab.tabElement.classList.add("selected");
-        tab.view.show(this.element);
+        tab.view.showWidget();
         this._updateTabSlider();
     },
 
@@ -785,7 +795,7 @@ WebInspector.TabbedPane.prototype = {
     _hideTab: function(tab)
     {
         tab.tabElement.classList.remove("selected");
-        tab.view.detach();
+        tab.view.hideWidget();
     },
 
     /**