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,60 +40,61 @@ function ensurePinKeyboardLoaded(onLoaded) {
   setTimeout(onLoaded);
 }
 
-cr.define('cr.ui.Oobe', function() {
-  return {
-    /**
-     * Initializes the OOBE flow.  This will cause all C++ handlers to
-     * be invoked to do final setup.
-     */
-    initialize() {
-      cr.ui.login.DisplayManager.initialize();
-      login.AccountPickerScreen.register();
-      login.AutolaunchScreen.register();
-      login.ErrorMessageScreen.register();
-      login.ArcTermsOfServiceScreen.register();
-      login.DiscoverScreen.register();
-      login.MultiDeviceSetupScreen.register();
-
-      cr.ui.Bubble.decorate($('bubble-persistent'));
-      $('bubble-persistent').persistent = true;
-      $('bubble-persistent').hideOnKeyPress = false;
-
-      cr.ui.Bubble.decorate($('bubble'));
-
-      chrome.send('screenStateInitialize');
-    },
-
-    // Dummy Oobe functions not present with stripped login UI.
-    refreshA11yInfo(data) {},
-    reloadEulaContent(data) {},
-
-    /**
-     * Reloads content of the page.
-     * @param {!Object} data New dictionary with i18n values.
-     */
-    reloadContent(data) {
-      loadTimeData.overrideValues(data);
-      i18nTemplate.process(document, loadTimeData);
-      Oobe.getInstance().updateLocalizedContent_();
-    },
-
-    /**
-     * Updates "device in tablet mode" state when tablet mode is changed.
-     * @param {Boolean} isInTabletMode True when in tablet mode.
-     */
-    setTabletModeState(isInTabletMode) {
-      Oobe.getInstance().setTabletModeState_(isInTabletMode);
-    },
-
-    /**
-     * Updates OOBE configuration when it is loaded.
-     * @param {!OobeTypes.OobeConfiguration} configuration OOBE configuration.
-     */
-    updateOobeConfiguration(configuration) {
-      Oobe.getInstance().updateOobeConfiguration_(configuration);
-    },
-  };
+HTMLImports.whenReady(() => {
+  cr.define('cr.ui.Oobe', function() {
+    return {
+      /**
+       * Initializes the OOBE flow.  This will cause all C++ handlers to
+       * be invoked to do final setup.
+       */
+      initialize() {
+        cr.ui.login.DisplayManager.initialize();
+        login.AccountPickerScreen.register();
+        login.AutolaunchScreen.register();
+        login.ErrorMessageScreen.register();
+        login.ArcTermsOfServiceScreen.register();
+        login.DiscoverScreen.register();
+        login.MultiDeviceSetupScreen.register();
+
+        cr.ui.Bubble.decorate($('bubble-persistent'));
+        $('bubble-persistent').persistent = true;
+        $('bubble-persistent').hideOnKeyPress = false;
+
+        cr.ui.Bubble.decorate($('bubble'));
+
+        chrome.send('screenStateInitialize');
+      },
+
+      // Dummy Oobe functions not present with stripped login UI.
+      refreshA11yInfo(data) {},
+      reloadEulaContent(data) {},
+
+      /**
+       * Reloads content of the page.
+       * @param {!Object} data New dictionary with i18n values.
+       */
+      reloadContent(data) {
+        loadTimeData.overrideValues(data);
+        i18nTemplate.process(document, loadTimeData);
+        Oobe.getInstance().updateLocalizedContent_();
+      },
+
+      /**
+       * Updates "device in tablet mode" state when tablet mode is changed.
+       * @param {Boolean} isInTabletMode True when in tablet mode.
+       */
+      setTabletModeState(isInTabletMode) {
+        Oobe.getInstance().setTabletModeState_(isInTabletMode);
+      },
+
+      /**
+       * Updates OOBE configuration when it is loaded.
+       * @param {!OobeTypes.OobeConfiguration} configuration OOBE configuration.
+       */
+      updateOobeConfiguration(configuration) {
+        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,79 +33,80 @@
 // <include src="multi_tap_detector.js">
 // <include src="web_view_helper.js">
 
-cr.define('cr.ui.Oobe', function() {
-  return {
-    /**
-     * Initializes the OOBE flow.  This will cause all C++ handlers to
-     * be invoked to do final setup.
-     */
-    initialize() {
-      cr.ui.login.DisplayManager.initialize();
-      login.AutoEnrollmentCheckScreen.register();
-      login.AutolaunchScreen.register();
-      login.AccountPickerScreen.register();
-      login.ErrorMessageScreen.register();
-      login.ArcTermsOfServiceScreen.register();
-      login.DiscoverScreen.register();
-      login.MultiDeviceSetupScreen.register();
-
-      cr.ui.Bubble.decorate($('bubble-persistent'));
-      $('bubble-persistent').persistent = true;
-      $('bubble-persistent').hideOnKeyPress = false;
-
-      cr.ui.Bubble.decorate($('bubble'));
-
-      chrome.send('screenStateInitialize');
-    },
-
-    /**
-     * Reloads content of the page (localized strings, options of the select
-     * controls).
-     * @param {!Object} data New dictionary with i18n values.
-     */
-    reloadContent(data) {
-      // Reload global local strings, process DOM tree again.
-      loadTimeData.overrideValues(data);
-      i18nTemplate.process(document, loadTimeData);
-
-      // Update localized content of the screens.
-      Oobe.updateLocalizedContent();
-    },
-
-    /**
-     * Updates "device in tablet mode" state when tablet mode is changed.
-     * @param {Boolean} isInTabletMode True when in tablet mode.
-     */
-    setTabletModeState(isInTabletMode) {
-      Oobe.getInstance().setTabletModeState_(isInTabletMode);
-    },
-
-    /**
-     * Reloads localized strings for the eula page.
-     * @param {!Object} data New dictionary with changed eula i18n values.
-     */
-    reloadEulaContent(data) {
-      loadTimeData.overrideValues(data);
-      i18nTemplate.process(document, loadTimeData);
-    },
-
-    /**
-     * Updates localized content of the screens.
-     * Should be executed on language change.
-     */
-    updateLocalizedContent() {
-      // Buttons, headers and links.
-      Oobe.getInstance().updateLocalizedContent_();
-    },
-
-    /**
-     * Updates OOBE configuration when it is loaded.
-     * @param {!OobeTypes.OobeConfiguration} configuration OOBE configuration.
-     */
-    updateOobeConfiguration(configuration) {
-      Oobe.getInstance().updateOobeConfiguration_(configuration);
-    },
-  };
+HTMLImports.whenReady(() => {
+  cr.define('cr.ui.Oobe', function() {
+    return {
+      /**
+       * Initializes the OOBE flow.  This will cause all C++ handlers to
+       * be invoked to do final setup.
+       */
+      initialize() {
+        cr.ui.login.DisplayManager.initialize();
+        login.AutoEnrollmentCheckScreen.register();
+        login.AutolaunchScreen.register();
+        login.AccountPickerScreen.register();
+        login.ErrorMessageScreen.register();
+        login.ArcTermsOfServiceScreen.register();
+        login.DiscoverScreen.register();
+        login.MultiDeviceSetupScreen.register();
+
+        cr.ui.Bubble.decorate($('bubble-persistent'));
+        $('bubble-persistent').persistent = true;
+        $('bubble-persistent').hideOnKeyPress = false;
+
+        cr.ui.Bubble.decorate($('bubble'));
+
+        chrome.send('screenStateInitialize');
+      },
+
+      /**
+       * Reloads content of the page (localized strings, options of the select
+       * controls).
+       * @param {!Object} data New dictionary with i18n values.
+       */
+      reloadContent(data) {
+        // Reload global local strings, process DOM tree again.
+        loadTimeData.overrideValues(data);
+        i18nTemplate.process(document, loadTimeData);
+
+        // Update localized content of the screens.
+        Oobe.updateLocalizedContent();
+      },
+
+      /**
+       * Updates "device in tablet mode" state when tablet mode is changed.
+       * @param {Boolean} isInTabletMode True when in tablet mode.
+       */
+      setTabletModeState(isInTabletMode) {
+        Oobe.getInstance().setTabletModeState_(isInTabletMode);
+      },
+
+      /**
+       * Reloads localized strings for the eula page.
+       * @param {!Object} data New dictionary with changed eula i18n values.
+       */
+      reloadEulaContent(data) {
+        loadTimeData.overrideValues(data);
+        i18nTemplate.process(document, loadTimeData);
+      },
+
+      /**
+       * Updates localized content of the screens.
+       * Should be executed on language change.
+       */
+      updateLocalizedContent() {
+        // Buttons, headers and links.
+        Oobe.getInstance().updateLocalizedContent_();
+      },
+
+      /**
+       * Updates OOBE configuration when it is loaded.
+       * @param {!OobeTypes.OobeConfiguration} configuration OOBE configuration.
+       */
+      updateOobeConfiguration(configuration) {
+        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') {
-  document.addEventListener('DOMContentLoaded', initializeOobe);
-} else {
-  initializeOobe();
-}
+HTMLImports.whenReady(() => {
+  // TODO(crbug.com/1111387) - Remove excessive logging.
+  console.warn('HTMLImports ready.');
+  loadCommonComponents();
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeOobe);
+  } 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.