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

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

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 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:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 23 matching lines @@
     this.contentElement = createElementWithClass("div", "widget");
     if (isWebComponent) {
         this.element = createElementWithClass("div", "vbox flex-auto");
         this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
         this._shadowRoot.appendChild(this.contentElement);
     } else {
         this.element = this.contentElement;
     }
     this._isWebComponent = isWebComponent;
     this.element.__widget = this;
-    this._visible = true;
+    this._visible = false;
     this._isRoot = false;
     this._isShowing = false;
     this._children = [];
     this._hideOnDetach = false;
     this._notificationDepth = 0;
+    this._invalidationsSuspended = 0;
 }
 
 WebInspector.Widget.prototype = {
     markAsRoot: function()
     {
         WebInspector.Widget.__assert(!this.element.parentElement, "Attempt to mark as root attached node");
         this._isRoot = true;
     },
 
     /**
@@ skipping 52 matching lines @@
      */
     _inNotification: function()
     {
         return !!this._notificationDepth || (this._parentWidget && this._parentWidget._inNotification());
     },
 
     _parentIsShowing: function()
     {
         if (this._isRoot)
             return true;
-        return this._parentWidget && this._parentWidget.isShowing();
+        return !!this._parentWidget && this._parentWidget.isShowing();
     },
 
     /**
      * @param {function(this:WebInspector.Widget)} method
      */
     _callOnVisibleChildren: function(method)
     {
         var copy = this._children.slice();
         for (var i = 0; i < copy.length; ++i) {
             if (copy[i]._parentWidget === this && copy[i]._visible)
@@ skipping 65 matching lines @@
 
     onResize: function()
     {
     },
 
     onLayout: function()
     {
     },
 
     /**
-     * @param {?Element} parentElement
+     * @param {!Element} parentElement
      * @param {?Element=} insertBefore
      */
     show: function(parentElement, insertBefore)
     {
+        this.attach(parentElement, insertBefore);
+        this.showWidget();
+    },
+
+    /**
+     * @param {!Element} parentElement
+     * @param {?Element=} insertBefore
+     */
+    attach: function(parentElement, insertBefore)
+    {
         WebInspector.Widget.__assert(parentElement, "Attempt to attach widget with no parent element");
 
         // Update widget hierarchy.
-        if (this.element.parentElement !== parentElement) {
-            if (this.element.parentElement)
-                this.detach();
+        var currentParent = parentElement;
+        while (currentParent && !currentParent.__widget)
+            currentParent = currentParent.parentElementOrShadowHost();
+        var newParentWidget = currentParent ? currentParent.__widget : null;
 
-            var currentParent = parentElement;
-            while (currentParent && !currentParent.__widget)
-                currentParent = currentParent.parentElementOrShadowHost();
-
-            if (currentParent) {
-                this._parentWidget = currentParent.__widget;
-                this._parentWidget._children.push(this);
-                this._isRoot = false;
-            } else
-                WebInspector.Widget.__assert(this._isRoot, "Attempt to attach widget to orphan node");
-        } else if (this._visible) {
-            return;
+        if (this._parentWidget && newParentWidget !== this._parentWidget) {
+            // Reparent.
+            this.detach();
         }
 
+        if (newParentWidget) {
+            if (this._parentWidget !== newParentWidget) {
+                this._parentWidget = newParentWidget;
+                this._parentWidget._children.push(this);
+            }
+            this._isRoot = false;
+        } else {
+            WebInspector.Widget.__assert(this._isRoot, "Attempt to attach widget to orphan node");
+        }
+
+        this._parentElement = parentElement;
+        this._insertBeforeElement = insertBefore;
+    },
+
+    showWidget: function()
+    {
+        WebInspector.Widget.__assert(this._parentElement, "Attempt to show detached widget");
+        if (this._visible)
+            return;
         this._visible = true;
 
         if (this._parentIsShowing())
             this._processWillShow();
 
         this.element.classList.remove("hidden");
 
         // Reparent
-        if (this.element.parentElement !== parentElement) {
-            WebInspector.Widget._incrementWidgetCounter(parentElement, this.element);
-            if (insertBefore)
-                WebInspector.Widget._originalInsertBefore.call(parentElement, this.element, insertBefore);
+        if (this.element.parentElement !== this._parentElement) {
+            WebInspector.Widget._incrementWidgetCounter(this._parentElement, this.element);
+            if (this._insertBeforeElement)
+                WebInspector.Widget._originalInsertBefore.call(this._parentElement, this.element, this._insertBeforeElement);
             else
-                WebInspector.Widget._originalAppendChild.call(parentElement, this.element);
+                WebInspector.Widget._originalAppendChild.call(this._parentElement, this.element);
         }
 
         if (this._parentIsShowing())
             this._processWasShown();
 
         if (this._parentWidget && this._hasNonZeroConstraints())
             this._parentWidget.invalidateConstraints();
         else
             this._processOnResize();
     },
 
+    hideWidget: function()
+    {
+        if (!this._parentWidget)
+            return;
+        this._hideWidget();
+    },
+
     /**
      * @param {boolean=} overrideHideOnDetach
      */
-    detach: function(overrideHideOnDetach)
+    _hideWidget: function(overrideHideOnDetach)
     {
-        var parentElement = this.element.parentElement;
-        if (!parentElement)
+        WebInspector.Widget.__assert(this._parentElement, "Attempt to hide detached widget");
+        if (!this._visible)
             return;
+        this._visible = false;
+        var parentElement = this._parentElement;
 
         if (this._parentIsShowing())
             this._processWillHide();
 
         if (!overrideHideOnDetach && this.shouldHideOnDetach()) {
             this.element.classList.add("hidden");
-            this._visible = false;
-            if (this._parentIsShowing())
-                this._processWasHidden();
-            if (this._parentWidget && this._hasNonZeroConstraints())
-                this._parentWidget.invalidateConstraints();
-            return;
+        } else {
+            // Force legal removal
+            WebInspector.Widget._decrementWidgetCounter(parentElement, this.element);
+            WebInspector.Widget._originalRemoveChild.call(parentElement, this.element);
         }
 
-        // Force legal removal
-        WebInspector.Widget._decrementWidgetCounter(parentElement, this.element);
-        WebInspector.Widget._originalRemoveChild.call(parentElement, this.element);
-
-        this._visible = false;
         if (this._parentIsShowing())
             this._processWasHidden();
+        if (this._hasNonZeroConstraints())
+            this._parentWidget.invalidateConstraints();
+    },
+
+    detach: function()
+    {
+        if (!this._parentWidget)
+            return;
+
+        if (this._visible)
+            this._hideWidget(true);
 
         // Update widget hierarchy.
         if (this._parentWidget) {
             var childIndex = this._parentWidget._children.indexOf(this);
             WebInspector.Widget.__assert(childIndex >= 0, "Attempt to remove non-child widget");
             this._parentWidget._children.splice(childIndex, 1);
             this._parentWidget.childWasDetached(this);
             var parent = this._parentWidget;
             this._parentWidget = null;
-            if (this._hasNonZeroConstraints())
-                parent.invalidateConstraints();
-        } else
+            this._parentElement = null;
+            this._insertBeforeElement = null;
+        } else {
             WebInspector.Widget.__assert(this._isRoot, "Removing non-root widget from DOM");
+        }
     },
 
     detachChildWidgets: function()
     {
         var children = this._children.slice();
         for (var i = 0; i < children.length; ++i)
             children[i].detach();
     },
 
     /**
@@ skipping 161 matching lines @@
 
     /**
      * @return {boolean}
      */
     _hasNonZeroConstraints: function()
     {
         var constraints = this.constraints();
         return !!(constraints.minimum.width || constraints.minimum.height || constraints.preferred.width || constraints.preferred.height);
     },
 
+    suspendInvalidations()
+    {
+        ++this._invalidationsSuspended;
+    },
+
+    resumeInvalidations()
+    {
+        --this._invalidationsSuspended;
+        if (!this._invalidationsSuspended && this._invalidationsRequested)
+            this.invalidateConstraints();
+    },
+
     invalidateConstraints: function()
     {
+        if (this._invalidationsSuspended) {
+            this._invalidationsRequested = true;
+            return;
+        }
+        this._invalidationsRequested = false;
         var cached = this._cachedConstraints;
         delete this._cachedConstraints;
         var actual = this.constraints();
         if (!actual.isEqual(cached) && this._parentWidget)
             this._parentWidget.invalidateConstraints();
         else
             this.doLayout();
     },
 
     invalidateSize: function()
@@ skipping 258 matching lines @@
 {
     WebInspector.Widget.__assert(!child.__widgetCounter && !child.__widget, "Attempt to remove element containing widget via regular DOM operation");
     return WebInspector.Widget._originalRemoveChild.call(this, child);
 }
 
 Element.prototype.removeChildren = function()
 {
     WebInspector.Widget.__assert(!this.__widgetCounter, "Attempt to remove element containing widget via regular DOM operation");
     WebInspector.Widget._originalRemoveChildren.call(this);
 }