When inlining imports from head, put them inside a hidden div

pkg/polymer/lib/src/build/import_inliner.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 /// Transfomer that inlines polymer-element definitions from html imports.
 library polymer.src.build.import_inliner;
 
 import 'dart:async';
 import 'dart:convert';
 
@@ skipping 15 matching lines @@
 // TODO(sigmund): move to web_components package (dartbug.com/18037).
 class _HtmlInliner extends PolymerTransformer {
   final TransformOptions options;
   final Transform transform;
   final BuildLogger logger;
   final AssetId docId;
   final seen = new Set<AssetId>();
   final scriptIds = <AssetId>[];
   final extractedFiles = new Set<AssetId>();
   bool experimentalBootstrap = false;
+  final Element importsWrapper = new Element.html('<div hidden></div>');
 
   /// The number of extracted inline Dart scripts. Used as a counter to give
   /// unique-ish filenames.
   int inlineScriptCounter = 0;
 
   _HtmlInliner(TransformOptions options, Transform transform)
       : options = options,
         transform = transform,
         logger = new BuildLogger(transform,
             convertErrorsToWarnings: !options.releaseMode,
             detailsUri: 'http://goo.gl/5HPeuP'),
         docId = transform.primaryInput.id;
 
   Future apply() {
     seen.add(docId);
 
     Document document;
     bool changed = false;
 
     return readPrimaryAsHtml(transform, logger).then((doc) {
       document = doc;
+
+      // Insert our importsWrapper. This may be removed later if not needed, but
+      // it makes the logic simpler to have it in the document.
+      document.body.insertBefore(importsWrapper, document.body.firstChild);
+
       changed = new _UrlNormalizer(transform, docId, logger).visit(document)
         || changed;
       
       experimentalBootstrap = document.querySelectorAll('link').any((link) =>
           link.attributes['rel'] == 'import' &&
           link.attributes['href'] == POLYMER_EXPERIMENTAL_HTML);
       changed = _extractScripts(document) || changed;
+
+      // We only need to move the head into the body for the entry point.
+      _moveHeadToBody(document);
+
       return _visitImports(document);
     }).then((importsFound) {
       changed = changed || importsFound;
+
       return _removeScripts(document);
     }).then((scriptsRemoved) {
       changed = changed || scriptsRemoved;
 
+      // Remove the importsWrapper if it contains nothing. Wait until now to do
+      // this since it might have a script that got removed, and thus no longer
+      // have any children.
+      if (importsWrapper.children.isEmpty) importsWrapper.remove();
+
       var output = transform.primaryInput;
       if (changed) output = new Asset.fromString(docId, document.outerHtml);
       transform.addOutput(output);
 
       // We produce a secondary asset with extra information for later phases.
       transform.addOutput(new Asset.fromString(
           docId.addExtension('._data'),
           JSON.encode({
             'experimental_bootstrap': experimentalBootstrap,
             'script_ids': scriptIds,
           }, toEncodable: (id) => id.serialize())));
 
       // Write out the logs collected by our [BuildLogger].
       if (options.injectBuildLogsInOutput) {
         return logger.writeOutput();
       }
     });
   }
 
   /// Visits imports in [document] and add the imported documents to documents.
   /// Documents are added in the order they appear, transitive imports are added
   /// first.
   ///
   /// Returns `true` if and only if the document was changed and should be
   /// written out.
   Future<bool> _visitImports(Document document) {
     bool changed = false;
 
-    _moveHeadToBody(document);
-
     // Note: we need to preserve the import order in the generated output.
     return Future.forEach(document.querySelectorAll('link'), (Element tag) {
       var rel = tag.attributes['rel'];
       if (rel != 'import' && rel != 'stylesheet') return null;
 
       // Note: URL has already been normalized so use docId.
       var href = tag.attributes['href'];
       var id = uriToAssetId(docId, href, logger, tag.sourceSpan,
           errorOnAbsolute: rel != 'stylesheet');
 
@@ skipping 20 matching lines @@
   /// inlining.
   ///
   /// Note: we do this for stylesheets as well to preserve ordering with
   /// respect to eachother, because stylesheets can be pulled in transitively
   /// from imports.
   // TODO(jmesserly): vulcanizer doesn't need this because they inline JS
   // scripts, causing them to be naturally moved as part of the inlining.
   // Should we do the same? Alternatively could we inline head into head and
   // body into body and avoid this whole thing?
   void _moveHeadToBody(Document doc) {
-    var insertionPoint = doc.body.firstChild;
     for (var node in doc.head.nodes.toList(growable: false)) {
       if (node is! Element) continue;
       var tag = node.localName;
       var type = node.attributes['type'];
       var rel = node.attributes['rel'];
       if (tag == 'style' || tag == 'script' &&
             (type == null || type == TYPE_JS || type == TYPE_DART) ||
           tag == 'link' && (rel == 'stylesheet' || rel == 'import')) {
-        // Move the node into the body, where its contents will be placed.
-        doc.body.insertBefore(node, insertionPoint);
+        // Move the node into the importsWrapper, where its contents will be
+        // placed. This wrapper is a hidden div to prevent inlined html from
+        // causing a FOUC.
+        importsWrapper.append(node);
       }
     }
   }
 
   /// Loads an asset identified by [id], visits its imports and collects its
   /// html imports. Then inlines it into the main document.
   Future _inlineImport(AssetId id, Element link) {
     return readAsHtml(id, transform, logger).catchError((error) {
       logger.error(INLINE_IMPORT_FAIL.create({'error': error}),
           span: link.sourceSpan);
@@ skipping 362 matching lines @@
 /// style tag except these ones.
 const IGNORED_LINKED_STYLE_ATTRS =
     const ['charset', 'href', 'href-lang', 'rel', 'rev'];
 
 /// Global RegExp objects.
 final _INVALID_LIB_CHARS_REGEX = new RegExp('[^a-z0-9_]');
 final _NUM_REGEX = new RegExp('[0-9]');
 final _BINDING_REGEX = new RegExp(r'(({{.*}})|(\[\[.*\]\]))');
 
 _getSpan(SourceFile file, AstNode node) => file.span(node.offset, node.end);