OOBE: Migrate AppLaunchSplashScreen to polymer

Bug: 1143300
Change-Id: If08a81832077820d7950f72982e5d704b21193b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2507470
Commit-Queue: Ossama Mahmoud <osamafathy@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826264}

chrome/browser/chromeos/login/app_mode/kiosk_browsertest.cc

@@ -135,6 +135,8 @@ namespace chromeos {
 
 namespace {
 
+const test::UIPath kConfigNetwork = {"app-launch-splash", "configNetwork"};
+
 // This is a simple test app that creates an app window and immediately closes
 // it again. Webstore data json is in
 //   chrome/test/data/chromeos/app_mode/webstore/inlineinstall/
@@ -747,7 +749,7 @@ class KioskTest : public OobeBaseTest {
     WaitForAppLaunchNetworkTimeout();
 
     // Configure network link should be visible.
-    test::OobeJS().ExpectVisible("splash-config-network");
+    test::OobeJS().ExpectVisiblePath(kConfigNetwork);
 
     // Set up fake user manager with an owner for the test.
     LoginDisplayHost::default_host()->GetOobeUI()->ShowOobeUI(false);
@@ -1076,7 +1078,7 @@ IN_PROC_BROWSER_TEST_F(KioskTest, LaunchAppNetworkDownConfigureNotAllowed) {
   WaitForAppLaunchNetworkTimeout();
 
   // Configure network link should not be visible.
-  test::OobeJS().ExpectHidden("splash-config-network");
+  test::OobeJS().ExpectHiddenPath(kConfigNetwork);
 
   // Network becomes online and app launch is resumed.
   SimulateNetworkOnline();

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

@@ -54,7 +54,6 @@
 <link rel="stylesheet" href="api_keys_notice.css">
 <link rel="stylesheet" href="oobe_screen_autolaunch.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
-<link rel="stylesheet" href="screen_app_launch_splash.css">
 <link rel="stylesheet" href="screen_error_message.css">
 
 <script src="chrome://oobe/keyboard_utils.js"></script>

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

@@ -22,7 +22,6 @@
 // <include src="oobe_screen_autolaunch.js">
 // <include src="oobe_select.js">
 
-// <include src="screen_app_launch_splash.js">
 // <include src="screen_arc_terms_of_service.js">
 // <include src="screen_error_message.js">
 // <include src="screen_discover.js">
@@ -53,7 +52,6 @@ cr.define('cr.ui.Oobe', function() {
       login.AutolaunchScreen.register();
       login.ErrorMessageScreen.register();
       login.ArcTermsOfServiceScreen.register();
-      login.AppLaunchSplashScreen.register();
       login.DiscoverScreen.register();
       login.MultiDeviceSetupScreen.register();
 

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

@@ -60,7 +60,6 @@
 <link rel="stylesheet" href="oobe_screen_autolaunch.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
 
-<link rel="stylesheet" href="screen_app_launch_splash.css">
 <link rel="stylesheet" href="screen_error_message.css">
 
 <script src="chrome://oobe/keyboard_utils.js"></script>

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

@@ -23,7 +23,6 @@
 // <include src="oobe_screen_autolaunch.js">
 // <include src="oobe_select.js">
 
-// <include src="screen_app_launch_splash.js">
 // <include src="screen_arc_terms_of_service.js">
 // <include src="screen_error_message.js">
 // <include src="screen_discover.js">
@@ -47,7 +46,6 @@ cr.define('cr.ui.Oobe', function() {
       login.AccountPickerScreen.register();
       login.ErrorMessageScreen.register();
       login.ArcTermsOfServiceScreen.register();
-      login.AppLaunchSplashScreen.register();
       login.DiscoverScreen.register();
       login.MultiDeviceSetupScreen.register();
 

chrome/browser/resources/chromeos/login/screen_app_launch_splash.css

@@ -2,23 +2,17 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#app-launch-splash {
-  background: white;
-  display: flex;
-  justify-content: center;
-}
-
-
-#splash-content {
+#content {
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 100%;
+  height: 100%;
   position: relative;
 }
 
-#splash-title {
+#header {
   background: left center no-repeat;
   background-size: 96px;
   display: flex;
@@ -29,7 +23,7 @@
   padding-inline-start: 108px;
 }
 
-#splash-header {
+#appName {
   color: #666;
   font-size: 48px;
   overflow: hidden;
@@ -38,7 +32,7 @@
   word-break: break-all;
 }
 
-#splash-subheader {
+#appUrl {
   color: #666;
   font-size: 18px;
   font-style: italic;
@@ -48,29 +42,25 @@
   word-break: break-all;
 }
 
-#splash-launch-text {
+#launchText {
   color: #666;
   font-size: 18px;
   padding-top: 50px;
 }
 
-#splash-spinner {
-  height: 32px;
-  width: 32px;
-}
 
-#splash-config-network-container {
+#configNetworkContainer {
   height : 30px;
   opacity: 1;
   padding-bottom: 20px;
   transition: 1s opacity;
 }
 
-#splash-config-network-container.faded {
+#configNetworkContainer.faded {
   opacity: 0;
 }
 
-#splash-config-network {
+#configNetwork {
   font-size: 10px;
   font-weight: bold;
   margin: 0;
@@ -78,11 +68,11 @@
   text-decoration: none;
 }
 
-#splash-config-network:hover {
+#configNetwork:hover {
   color: rgb(202, 67, 100)
 }
 
-#splash-shortcut-info {
+#shortcutInfo {
   bottom: 50px;
   color: rgb(102, 102, 102);  /* #666 */
   left: 0;

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

-<div id="app-launch-splash" class="step hidden fullscreen" hidden>
-  <div id="splash-content">
-    <div id="splash-title">
-      <div id="splash-header" i18n-content="productName"></div>
-      <div id="splash-subheader"></div>
+<!-- Copyright 2020 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/action_link.html">
+
+<link rel="import" href="/components/throbber_notice.html">
+
+<dom-module id="app-launch-splash-element">
+  <template>
+    <link rel="stylesheet" href="screen_app_launch_splash.css">
+    <div id="content">
+      <div id="header">
+        <div id="appName">[[appName]]</div>
+        <div id="appUrl">[[appUrl]]</div>
       </div>
-    <div id="splash-launch-text" i18n-content="appStartMessage"></div>
-    <div id="splash-config-network-container" class="faded">
-      <a id="splash-config-network" i18n-content="configureNetwork" href="javascript:void(0)"></a>
+      <div id="launchText">[[launchText]]</div>
+      <div id="configNetworkContainer" class="faded">
+        <a id="configNetwork" class="oobe-local-link" is="action-link" on-click='onConfigNetwork_'>
+          [[i18nDynamic(locale, 'configureNetwork')]]
+        </a>
       </div>
-    <div id="splash-spinner" class="spinner"></div>
+      <throbber-notice>
+      </throbber-notice>
     </div>
-  <p id="splash-shortcut-info" i18n-content="shortcutInfo"></p>
-</div>
+    <p id="shortcutInfo">
+      [[i18nDynamic(locale, 'shortcutInfo')]]
+    </p>
+  </template>
+</dom-module>
\ No newline at end of file

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

@@ -5,31 +5,34 @@
 /**
  * @fileoverview App install/launch splash screen implementation.
  */
+'use strict';
+
+(function() {
+Polymer({
+  is: 'app-launch-splash-element',
+
+  behaviors: [OobeI18nBehavior, LoginScreenBehavior],
 
-login.createScreen('AppLaunchSplashScreen', 'app-launch-splash', function() {
-  return {
   EXTERNAL_API: [
     'toggleNetworkConfig',
     'updateApp',
     'updateMessage',
   ],
 
-    /** Initial UI State for screen */
-    getOobeUIInitialState() {
-      return OOBE_UI_STATE.KIOSK;
+  properties: {
+    appName: {type: String, value: ''},
+    appUrl: {type: String, value: ''},
+    launchText: {type: String, value: ''},
   },
 
-    /** @override */
-    decorate() {
-      $('splash-config-network').addEventListener('click', function(e) {
-        chrome.send('configureNetwork');
+  ready() {
+    this.initializeLoginScreen('AppLaunchSplashScreen', {
+      resetAllowed: false,
     });
 
-      var networkContainer = $('splash-config-network-container');
-      networkContainer.addEventListener('transitionend', function(e) {
-        if (this.classList.contains('faded'))
-          $('splash-config-network').hidden = true;
-      }.bind(networkContainer));
+    var networkContainer = this.$.configNetworkContainer;
+    networkContainer.addEventListener(
+        'transitionend', this.onConfigNetworkTransitionend_.bind(this));
 
     // Ensure the transitionend event gets called after a wait time.
     // The wait time should be inline with the transition duration time
@@ -39,6 +42,11 @@ login.createScreen('AppLaunchSplashScreen', 'app-launch-splash', function() {
     ensureTransitionEndEvent(networkContainer, 1050);
   },
 
+  /** Initial UI State for screen */
+  getOobeUIInitialState() {
+    return OOBE_UI_STATE.KIOSK;
+  },
+
   /** @override */
   onWindowResize() {
     if (Oobe.getInstance().currentScreen !== this)
@@ -47,16 +55,25 @@ login.createScreen('AppLaunchSplashScreen', 'app-launch-splash', function() {
     Oobe.getInstance().updateScreenSize(this);
   },
 
+  onConfigNetwork_(e) {
+    chrome.send('configureNetwork');
+  },
+
+  onConfigNetworkTransitionend_(e) {
+    if (this.$.configNetworkContainer.classList.contains('faded'))
+      this.$.configNetwork.hidden = true;
+  },
+
   /**
    * Event handler that is invoked just before the frame is shown.
    * @param {string} data Screen init payload.
    */
   onBeforeShow(data) {
-      $('splash-config-network').hidden = true;
+    this.$.configNetwork.hidden = true;
     this.toggleNetworkConfig(false);
     this.updateApp(data['appInfo']);
 
-      $('splash-shortcut-info').hidden = !data['shortcutEnabled'];
+    this.$.shortcutInfo.hidden = !data['shortcutEnabled'];
 
     Oobe.getInstance().solidBackground = true;
   },
@@ -73,16 +90,16 @@ login.createScreen('AppLaunchSplashScreen', 'app-launch-splash', function() {
    * @param {boolean} visible Whether to show the option.
    */
   toggleNetworkConfig(visible) {
-      var container = $('splash-config-network-container');
-      var currVisible = !container.classList.contains('faded');
+    var currVisible =
+        !this.$.configNetworkContainer.classList.contains('faded');
     if (currVisible == visible)
       return;
 
     if (visible) {
-        $('splash-config-network').hidden = false;
-        container.classList.remove('faded');
+      this.$.configNetwork.hidden = false;
+      this.$.configNetworkContainer.classList.remove('faded');
     } else {
-        container.classList.add('faded');
+      this.$.configNetworkContainer.classList.add('faded');
     }
   },
 
@@ -91,9 +108,9 @@ login.createScreen('AppLaunchSplashScreen', 'app-launch-splash', function() {
    * @param {Object} app Details of app being launched.
    */
   updateApp(app) {
-      $('splash-header').textContent = app.name;
-      $('splash-subheader').textContent = app.url;
-      $('splash-title').style.backgroundImage = 'url(' + app.iconURL + ')';
+    this.appName = app.name;
+    this.appUrl = app.url;
+    this.$.header.style.backgroundImage = 'url(' + app.iconURL + ')';
   },
 
   /**
@@ -101,7 +118,7 @@ login.createScreen('AppLaunchSplashScreen', 'app-launch-splash', function() {
    * @param {string} message Description for current launch state.
    */
   updateMessage(message) {
-      $('splash-launch-text').textContent = message;
-    }
-  };
+    this.launchText = message;
+  },
 });
+}());

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

@@ -54,6 +54,7 @@
 <include src="../user_creation.html">
 <include src="../screen_signin_fatal_error.html">
 <include src="../parental_handoff.html">
+<include src="../screen_app_launch_splash.html">
 
 <include src="components_[OOBE].html">
 

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

@@ -49,5 +49,6 @@
 // <include src="../user_creation.js">
 // <include src="../screen_signin_fatal_error.js">
 // <include src="../parental_handoff.js">
+// <include src="../screen_app_launch_splash.js">
 
 // <include src="components_[OOBE].js">

chrome/browser/resources/chromeos/login/structure/screens_common.html

@@ -21,7 +21,9 @@
 <tpm-error-message-element id="tpm-error-message" class="step hidden">
 </tpm-error-message-element>
 <wrong-hwid-element id="wrong-hwid" class="step hidden"></wrong-hwid-element>
-<include src="../screen_app_launch_splash.html">
+<!-- TODO(osamafathy): move `app-launch-splash` to screens_login.html -->
+<app-launch-splash-element id="app-launch-splash" class="step hidden fullscreen" hidden>
+</app-launch-splash-element>
 <saml-confirm-password-element id="saml-confirm-password" class="step hidden" hidden>
 </saml-confirm-password-element>
 <signin-fatal-error-element id="signin-fatal-error" class="step faded hidden">

chrome/browser/ui/webui/chromeos/login/app_launch_splash_screen_handler.cc

@@ -67,9 +67,6 @@ void AppLaunchSplashScreenHandler::DeclareLocalizedValues(
   builder->Add("shortcutInfo",
                l10n_util::GetStringFUTF16(IDS_APP_START_BAILOUT_SHORTCUT_FORMAT,
                                           product_os_name));
-
-  builder->Add("productName",
-               l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_OS_NAME));
 }
 
 void AppLaunchSplashScreenHandler::Initialize() {