OOBE - Migrate to HTMLImports polyfill

Use the HTMLImports polyfill in OOBE to remove the dependence
on HTML imports until everything can be fully migrated to JS
modules/Polymer3.

Bug: 1111387
Change-Id: I3c760bdc5d41f57e44927363d47a5a193edd7c34
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2522072
Commit-Queue: Renato Silva <rrsilva@google.com>
Auto-Submit: Renato Silva <rrsilva@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#830571}

chrome/browser/chromeos/login/test/oobe_base_test.cc

@@ -39,6 +39,7 @@
 #include "content/public/browser/notification_observer.h"
 #include "content/public/browser/notification_registrar.h"
 #include "content/public/browser/notification_service.h"
+#include "content/public/common/content_switches.h"
 #include "content/public/test/browser_test_utils.h"
 #include "content/public/test/test_utils.h"
 #include "google_apis/gaia/gaia_switches.h"
@@ -106,6 +107,12 @@ void OobeBaseTest::SetUpCommandLine(base::CommandLine* command_line) {
     command_line->AppendSwitch(::switches::kDisableBackgroundNetworking);
   command_line->AppendSwitchASCII(chromeos::switches::kLoginProfile, "user");
 
+  // Blink features are controlled via a command line switch. Disable HTML
+  // imports which are deprecated. OOBE uses a polyfill for imports that will
+  // be replaced once the migration to JS modules is complete.
+  command_line->AppendSwitchASCII(::switches::kDisableBlinkFeatures,
+                                  "HTMLImports");
+
   MixinBasedInProcessBrowserTest::SetUpCommandLine(command_line);
 }
 

chrome/browser/resources/chromeos/login/cr_ui.js

@@ -31,6 +31,28 @@ cr.define('cr.ui', function() {
     __proto__: DisplayManager.prototype,
   };
 
+  /**
+   * OOBE initialization coordination. Used by tests to wait for OOBE
+   * to fully load when using the HTLImports polyfill.
+   * TODO(crbug.com/1111387) - Remove once migrated to JS modules.
+   * Remove spammy logging when closer to M89 branch point.
+   */
+  Oobe.initializationComplete = false;
+  Oobe.initCallbacks = [];
+  Oobe.waitForOobeToLoad = function() {
+    return new Promise(function(resolve, reject) {
+      if (cr.ui.Oobe.initializationComplete) {
+        // TODO(crbug.com/1111387) - Remove excessive logging.
+        console.warn('OOBE is already initialized. Continuing...');
+        resolve();
+      } else {
+        // TODO(crbug.com/1111387) - Remove excessive logging.
+        console.warn('OOBE not loaded yet. Waiting...');
+        cr.ui.Oobe.initCallbacks.push(resolve);
+      }
+    });
+  };
+
   /**
    * Called when focus is returned from ash::SystemTray.
    * @param {boolean} reverse Is focus returned in reverse order?

chrome/browser/resources/chromeos/login/md_login.html

@@ -7,6 +7,7 @@
 <meta charset="utf-8">
 <meta name="google" value="notranslate">
 <title i18n-content="title"></title>
+<script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js"></script>
 <!-- This must be the first import in all login pages. -->
 <link rel="import" href="chrome://resources/html/polymer.html">
 

chrome/browser/resources/chromeos/login/md_login.js

@@ -40,7 +40,8 @@ function ensurePinKeyboardLoaded(onLoaded) {
   setTimeout(onLoaded);
 }
 
-cr.define('cr.ui.Oobe', function() {
+HTMLImports.whenReady(() => {
+  cr.define('cr.ui.Oobe', function() {
     return {
       /**
        * Initializes the OOBE flow.  This will cause all C++ handlers to
@@ -94,6 +95,6 @@ cr.define('cr.ui.Oobe', function() {
         Oobe.getInstance().updateOobeConfiguration_(configuration);
       },
     };
+  });
+  // <include src="oobe_initialization.js">
 });
-
-// <include src="oobe_initialization.js">
\ No newline at end of file

chrome/browser/resources/chromeos/login/oobe.html

@@ -7,6 +7,7 @@
 <meta charset="utf-8">
 <meta name="google" value="notranslate">
 <title i18n-content="title"></title>
+<script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js"></script>
 <!-- This must be the first import in all login pages. -->
 <link rel="import" href="chrome://resources/html/polymer.html">
 

chrome/browser/resources/chromeos/login/oobe.js

@@ -33,7 +33,8 @@
 // <include src="multi_tap_detector.js">
 // <include src="web_view_helper.js">
 
-cr.define('cr.ui.Oobe', function() {
+HTMLImports.whenReady(() => {
+  cr.define('cr.ui.Oobe', function() {
     return {
       /**
        * Initializes the OOBE flow.  This will cause all C++ handlers to
@@ -106,6 +107,6 @@ cr.define('cr.ui.Oobe', function() {
         Oobe.getInstance().updateOobeConfiguration_(configuration);
       },
     };
+  });
+  // <include src="oobe_initialization.js">
 });
-
-// <include src="oobe_initialization.js">

chrome/browser/resources/chromeos/login/oobe_initialization.js

@@ -28,6 +28,11 @@ function initializeOobe() {
     // readyForTesting even on failures, just to make test bots happy.
     Oobe.readyForTesting = true;
   }
+
+  // Mark initialization complete and wake any callers that might be waiting
+  // for OOBE to load.
+  cr.ui.Oobe.initializationComplete = true;
+  cr.ui.Oobe.initCallbacks.forEach(resolvePromise => resolvePromise());
 }
 
 // Install a global error handler so stack traces are included in logs.
@@ -40,11 +45,18 @@ window.onerror = function(message, file, line, column, error) {
 console.warn('1082670 : cr_ui loaded');
 
 /**
- * Final initialization performed after DOM and all scripts have loaded.
+ * Final initialization performed after HTML imports are loaded. Loads
+ * common elements used in OOBE (Custom Elements).
  */
-if (document.readyState === 'loading') {
+HTMLImports.whenReady(() => {
+  // TODO(crbug.com/1111387) - Remove excessive logging.
+  console.warn('HTMLImports ready.');
+  loadCommonComponents();
+
+  if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initializeOobe);
-} else {
+  } else {
     initializeOobe();
-}
+  }
+});
 })();

chrome/browser/resources/chromeos/login/security_token_pin_browsertest.js

@@ -18,6 +18,15 @@ var PolymerSecurityTokenPinTest = class extends PolymerTest {
     return 'chrome://oobe/login';
   }
 
+  /** @override */
+  setUp() {
+    suiteSetup(async function() {
+      console.warn('Running suite setup..');
+      await cr.ui.Oobe.waitForOobeToLoad();
+      console.warn('OOBE has been loaded. Continuing with test.');
+    });
+  }
+
   get extraLibraries() {
     return super.extraLibraries.concat(['components/oobe_types.js']);
   }

chrome/browser/resources/chromeos/login/structure/components_common.js

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+
+function loadCommonComponents() {
+// TODO(crbug.com/1111387) - Remove excessive logging.
+  console.warn('loadCommonComponents() : Starting to load common components.');
 // This inclusion is types-only. No actual code to execute.
 // <include src="../components/oobe_types.js">
 
@@ -51,3 +55,6 @@
 // <include src="../screen_app_launch_splash.js">
 
 // <include src="components_[OOBE].js">
+// TODO(crbug.com/1111387) - Remove excessive logging.
+  console.warn('loadCommonComponents() : Common components have loaded.');
+}

chrome/renderer/chrome_content_renderer_client.cc

@@ -1635,9 +1635,6 @@ bool ChromeContentRendererClient::RequiresHtmlImports(const GURL& url) {
            host_piece == chrome::kChromeUIMultiDeviceSetupHost ||
            // TODO(crbug.com/1111852): Remove when migrated to Polymer3.
            host_piece == chrome::kChromeUINetworkHost ||
-           // TODO(crbug.com/1111387): Remove when migrated away from HTML
-           // Imports.
-           host_piece == chrome::kChromeUIOobeHost ||
            // TODO(crbug.com/1045266): Remove when migrated to Polymer3.
            host_piece == chrome::kChromeUIOSSettingsHost ||
            // TODO(crbug.com/1022192): Remove when migrated to Polymer3.