fix(dialog): do not compile an empty element when using a content element (#9303)

I recently noticed while playing with the pre-rendered dialog around, that despite of the pre-rendered dialog, the interim element triggers a compilation in the `$mdCompiler`.
It doesn't introduce any bugs, but it's unnecessary and could damage the performance.

Also moves the content element stuff into its own function, which makes the source more clean and allows us to maintain it easily.

Author: devversion

src/components/dialog/dialog.js

@@ -679,6 +679,10 @@ function MdDialogProvider($$interimElementProvider) {
       // Those option changes need to be done, before the compilation has started, because otherwise
       // the option changes will be not available in the $mdCompilers locales.
       detectTheming(options);
+
+      if (options.contentElement) {
+        options.restoreContentElement = installContentElement(options);
+      }
     }
 
     function beforeShow(scope, element, options, controller) {
@@ -702,29 +706,6 @@ function MdDialogProvider($$interimElementProvider) {
     function onShow(scope, element, options, controller) {
       angular.element($document[0].body).addClass('md-dialog-is-showing');
 
-      if (options.contentElement) {
-        var contentEl = options.contentElement;
-
-        if (angular.isString(contentEl)) {
-          contentEl = document.querySelector(contentEl);
-          options.elementInsertionSibling = contentEl.nextElementSibling;
-          options.elementInsertionParent = contentEl.parentNode;
-        } else {
-          contentEl = contentEl[0] || contentEl;
-          // When the element is not visible in the DOM, then we can treat is as same
-          // as a normal dialog would do. Removing it at close etc.
-          // ---
-          // When the element is visible in the DOM, then we restore it at close of the dialog.
-          if (document.contains(contentEl)) {
-            options.elementInsertionSibling = contentEl.nextElementSibling;
-            options.elementInsertionParent = contentEl.parentNode;
-          }
-        }
-
-        options.elementInsertionEntry = contentEl;
-        element = angular.element(contentEl);
-      }
-
       var dialogElement = element.find('md-dialog');
 
       // Once a dialog has `ng-cloak` applied on his template the dialog animation will not work properly.
@@ -813,26 +794,6 @@ function MdDialogProvider($$interimElementProvider) {
         return dialogPopOut(element, options);
       }
 
-      function removeContentElement() {
-        if (!options.contentElement) return;
-
-        options.reverseContainerStretch();
-
-        if (!options.elementInsertionParent) {
-          // When the contentElement has no parent, then it's a virtual DOM element, which should
-          // be removed at close, as same as normal templates inside of a dialog.
-          options.elementInsertionEntry.parentNode.removeChild(options.elementInsertionEntry);
-        } else if (!options.elementInsertionSibling) {
-          // When the contentElement doesn't have any sibling, then it can be simply appended to the
-          // parent, because it plays no role, which index it had before.
-          options.elementInsertionParent.appendChild(options.elementInsertionEntry);
-        } else {
-          // When the contentElement has a sibling, which marks the previous position of the contentElement
-          // in the DOM, we insert it correctly before the sibling, to have the same index as before.
-          options.elementInsertionParent.insertBefore(options.elementInsertionEntry, options.elementInsertionSibling);
-        }
-      }
-
       /**
        * Detach the element
        */
@@ -842,7 +803,8 @@ function MdDialogProvider($$interimElementProvider) {
         if (!options.contentElement) {
           element.remove();
         } else {
-          removeContentElement();
+          options.reverseContainerStretch();
+          options.restoreContentElement();
         }
 
         if (!options.$destroy) options.origin.focus();
@@ -865,6 +827,56 @@ function MdDialogProvider($$interimElementProvider) {
 
     }
 
+    /**
+     * Installs a content element to the current $$interimElement provider options.
+     * @returns {Function} Function to restore the content element at its old DOM location.
+     */
+    function installContentElement(options) {
+      var contentEl = options.contentElement;
+      var restoreFn = null;
+
+      if (angular.isString(contentEl)) {
+        contentEl = document.querySelector(contentEl);
+        restoreFn = createRestoreFn(contentEl);
+      } else {
+        contentEl = contentEl[0] || contentEl;
+
+        // When the element is visible in the DOM, then we restore it at close of the dialog.
+        // Otherwise it will be removed from the DOM after close.
+        if (document.contains(contentEl)) {
+          restoreFn = createRestoreFn(contentEl);
+        } else {
+          restoreFn = function() {
+            contentEl.parentNode.removeChild(contentEl);
+          }
+        }
+      }
+
+      // Overwrite the options to use the content element.
+      options.element = angular.element(contentEl);
+      options.skipCompile = true;
+
+      return restoreFn;
+
+      function createRestoreFn(element) {
+        var parent = element.parentNode;
+        var nextSibling = element.nextElementSibling;
+
+        return function() {
+          if (!nextSibling) {
+            // When the element didn't had any sibling, then it can be simply appended to the
+            // parent, because it plays no role, which index it had before.
+            parent.appendChild(element);
+          } else {
+            // When the element had a sibling, which marks the previous position of the element
+            // in the DOM, we insert it correctly before the sibling, to have the same index as
+            // before.
+            parent.insertBefore(element, nextSibling);
+          }
+        }
+      }
+    }
+
     /**
      * Capture originator/trigger/from/to element information (if available)
      * and the parent container for the dialog; defaults to the $rootElement

src/components/dialog/dialog.spec.js

@@ -1390,6 +1390,8 @@ describe('$mdDialog', function() {
 
         $mdDialog.hide();
         runAnimation();
+
+        expect(contentElement[0].offsetParent).toBeFalsy();
       });
 
       it('should properly toggle the fullscreen class', function() {
@@ -1471,6 +1473,48 @@ describe('$mdDialog', function() {
         expect(dialogEl).not.toHaveClass('md-transition-out');
       });
 
+      it('should restore the contentElement at its previous position', function() {
+        var contentElement = $compile(
+          '<div class="md-dialog-container">' +
+          '<md-dialog>Dialog</md-dialog>' +
+          '</div>'
+        )($rootScope);
+
+        var dialogParent = angular.element('<div>');
+        var contentParent = angular.element(
+          '<div>' +
+          '<span>Child Element</span>' +
+          '</div>'
+        );
+
+        // Append the content parent to the document, otherwise contentElement is not able
+        // to detect it properly.
+        document.body.appendChild(contentParent[0]);
+
+        contentParent.prepend(contentElement);
+
+        $mdDialog.show({
+          contentElement: contentElement,
+          parent: dialogParent,
+          escapeToClose: true
+        });
+
+        $rootScope.$apply();
+        runAnimation();
+
+        expect(contentElement[0].parentNode).toBe(dialogParent[0]);
+
+        $mdDialog.hide();
+        runAnimation();
+
+        expect(contentElement[0].parentNode).toBe(contentParent[0]);
+
+        var childNodes = [].slice.call(contentParent[0].children);
+        expect(childNodes.indexOf(contentElement[0])).toBe(0);
+
+        document.body.removeChild(contentParent[0]);
+      })
+
     });
 
     it('should have the dialog role', inject(function($mdDialog, $rootScope) {