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

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 190 matching lines @@
     {
         isCloseable = typeof isCloseable === "boolean" ? isCloseable : this._closeableTabs;
         var tab = new WebInspector.TabbedPaneTab(this, id, tabTitle, isCloseable, view, tabTooltip);
         tab.setDelegate(this._delegate);
         this._tabsById[id] = tab;
         if (index !== undefined)
             this._tabs.splice(index, 0, tab);
         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();
     },
 
     /**
      * @param {string} id
      * @param {boolean=} userGesture
      */
     closeTab: function(id, userGesture)
@@ skipping 30 matching lines @@
         if (this._currentTab && this._currentTab.id === id)
             this._hideCurrentTab();
 
         var tab = this._tabsById[id];
         delete this._tabsById[id];
 
         this._tabsHistory.splice(this._tabsHistory.indexOf(tab), 1);
         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);
         return true;
     },
 
     /**
      * @param {string} tabId
      * @return {boolean}
      */
@@ skipping 51 matching lines @@
     {
         if (this._currentTabLocked)
             return false;
         var focused = this.hasFocus();
         var tab = this._tabsById[id];
         if (!tab)
             return false;
         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);
         this._tabsHistory.splice(0, 0, tab);
 
         this._updateTabElements();
         if (focused)
             this.focus();
 
         var eventData = { tabId: id, view: tab.view, isUserGesture: userGesture };
@@ skipping 72 matching lines @@
         this._updateTabElements();
     },
 
     /**
      * @param {string} id
      * @param {!WebInspector.Widget} view
      */
     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()
     {
         this._updateTabElements();
     },
 
     headerResized: function()
     {
         this._updateTabElements();
@@ skipping 309 matching lines @@
         this._hideTab(this._currentTab);
         delete this._currentTab;
     },
 
     /**
      * @param {!WebInspector.TabbedPaneTab} tab
      */
     _showTab: function(tab)
     {
         tab.tabElement.classList.add("selected");
-        tab.view.show(this.element);
+        tab.view.showWidget();
         this._updateTabSlider();
     },
 
     _updateTabSlider: function()
     {
         if (!this._currentTab || !this._sliderEnabled)
             return;
         var left = 0;
         for (var i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i] && this._tabs[i]._shown; i++)
             left += this._tabs[i]._measuredWidth;
         var sliderWidth = this._currentTab._shown ? this._currentTab._measuredWidth : this._dropDownButton.offsetWidth;
         var scaleFactor = window.devicePixelRatio >= 1.5 ? " scaleY(0.75)" : "";
         this._tabSlider.style.transform = "translateX(" + left + "px)" + scaleFactor;
         this._tabSlider.style.width = sliderWidth + "px";
 
         if (this._tabSlider.parentElement !== this._headerContentsElement)
             this._headerContentsElement.appendChild(this._tabSlider);
     },
 
     /**
      * @param {!WebInspector.TabbedPaneTab} tab
      */
     _hideTab: function(tab)
     {
         tab.tabElement.classList.remove("selected");
-        tab.view.detach();
+        tab.view.hideWidget();
     },
 
     /**
      * @override
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [ this._contentElement ];
     },
@@ skipping 624 matching lines @@
             if (this._viewCallback && view)
                 this._viewCallback(id, view);
             var shouldFocus = this._tabbedPane.visibleView.element.isSelfOrAncestor(WebInspector.currentFocusElement());
             this._tabbedPane.changeTabView(id, view);
             if (shouldFocus)
                 view.focus();
             return view;
         }
     }
 }