[cros] Layout for OOBE WebUI.

* Based on the layout done by UX designers
* Dropped div elements for EULA content since it should be a separate file (might be reconsidered later), using iframes instead.
* Extracted select CSS to common resources.

BUG=chromium-os:15632
TEST=Manual, navigated to chrome://oobe.

Review URL: http://codereview.chromium.org/7058048

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@88657 0039d316-1c4b-4281-b951-d872f2087c98

chrome/app/generated_resources.grd

@@ -10175,10 +10175,13 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Your computer will restart when the update is complete.
       </message>
       <message name="IDS_WELCOME_SCREEN_TITLE" desc="Title of the OOBE welcome screen">
-        <ph name="SHORT_PRODUCT_NAME">$1<ex>Chrome</ex></ph> › Connect
+        Connect
       </message>
       <message name="IDS_EULA_SCREEN_TITLE" desc="Title of the OOBE EULA screen">
-        <ph name="SHORT_PRODUCT_NAME">$1<ex>Chrome</ex></ph> › The small print
+        The small print
+      </message>
+      <message name="IDS_UPDATE_SCREEN_TITLE" desc="Title of the OOBE update screen">
+        Update
       </message>
       <message name="IDS_NETWORK_SELECTION_TITLE" desc="Welcome title shown on network selection screen">
         Let's get started

chrome/app/theme/theme_resources.grd

@@ -202,6 +202,7 @@
         <include name="IDR_PRODUCT_ICON_32" file="google_chrome/google_chrome_icon_32.png" type="BINDATA" />
         <include name="IDR_PRODUCT_LOGO" file="google_chrome/product_logo.png" type="BINDATA" />
         <include name="IDR_PRODUCT_LOGO_16" file="google_chrome/product_logo_16.png" type="BINDATA" />
+        <include name="IDR_PRODUCT_LOGO_64" file="google_chrome/product_logo_64.png" type="BINDATA" />
         <include name="IDR_PRODUCT_LOGO_WHITE" file="google_chrome/product_logo_white.png" type="BINDATA" />
       </if>
       <if expr="not pp_ifdef('_google_chrome')">
@@ -209,6 +210,7 @@
         <include name="IDR_PRODUCT_LOGO" file="chromium/product_logo.png" type="BINDATA" />
         <include name="IDR_PRODUCT_LOGO_WHITE" file="chromium/product_logo_white.png" type="BINDATA" />
         <include name="IDR_PRODUCT_LOGO_16" file="chromium/product_logo_16.png" type="BINDATA" />
+        <include name="IDR_PRODUCT_LOGO_64" file="chromium/product_logo_64.png" type="BINDATA" />
       </if>
       <!-- NOTE: product_logo_*.* files beyond what's listed above are
            referenced by installer code; don't remove them unless you know what

chrome/browser/resources/bug_report.html

@@ -4,7 +4,8 @@
 <meta charset="utf-8"/>
 <title i18n-content="page-title"></title>
 <!-- We want to keep our style in sync with the options page. -->
-<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="webui.css">
 <link rel="stylesheet" href="options/options_page.css">
 <link rel="stylesheet" href="bug_report.css">

chrome/browser/resources/chromeos/oobe.css

+/* Copyright (c) 2011 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.
+ *
+ * This is the stylesheet used by the Out of the box experience (OOBE) flow.
+ */
+
 body {
-  cursor: default;
+  background: -webkit-gradient(radial, center center, 0, center center, 400,
+              from(#fefefe), to(#efefef));
+  font-size: 14px;
+  padding: 10px;
+}
+
+#oobe {
+  left: 50%;
+  margin-left: -320px;
+  margin-top: -270px;
+  position: absolute;
+  top: 50%;
+  width: 640px;
+}
+
+#inner-container {
+  -webkit-transition: height .2s ease-in-out;
+  height: 294px;
+  padding: 20px;
+  position: relative;
+  width: 640px;
+}
+
+a {
+  color: #006668;
+  text-decoration: none;
+}
+
+hr.topshadow {
+  -webkit-mask: -webkit-linear-gradient(left, rgba(0,0,0,0),
+                                        black 50%, rgba(0,0,0,0));
+  -webkit-mask-clip: padding-box;
+  background: -webkit-linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.0));
+  border: none;
+  border-top: 1px solid rgba(0,0,0,0.5);
+  height: 4px;
+  opacity: 0.3;
+}
+
+hr.bottomshadow {
+  -webkit-mask: -webkit-linear-gradient(left, rgba(0,0,0,0),
+                                        black 50%, rgba(0,0,0,0));
+  -webkit-mask-clip: padding-box;
+  background: -webkit-linear-gradient(bottom, top,
+                                      rgba(0,0,0,0.2)), rgba(0,0,0,0.0));
+  border: none;
+  border-bottom: 1px solid rgba(0,0,0,0.5);
+  height: 2px;
+  opacity: 0.3;
+}
+
+#header {
+  background: url('chrome://theme/IDR_PRODUCT_LOGO_64') left center no-repeat;
+  background-size: 48px;
+  color: #737373;
+  display: -webkit-box;
+  font-size: 20px;
+  height: 48px;
+  line-height: 48px;
+  padding-left: 54px;
+}
+
+#header-sections {
+  display: inline-block;
+  position: relative;
+}
+
+.header-section:before {
+  /* Divider in header between product name and title,
+     like "[Product name] > [step header]"  */
+  content: "\00A0\203A\00A0\00A0";
+}
+
+.header-section {
+  -webkit-transition: left .2s, opacity .2s ease-in-out;
+  position: absolute;
+  width: 20em;
+}
+
+.header-section.right {
+  left: 50px;
+  opacity: 0;
+}
+
+.header-section.left {
+  left: -20px;
+  opacity: 0;
+}
+
+.step {
+  -webkit-transition: left .2s, opacity .2s, visibility .2s ease-in-out;
+  left: 0;
+  min-height: 294px;
+  opacity: 1;
+  position: absolute;
+  width: 640px;
+}
+
+.step.right {
+  left: 100px;
+  opacity: 0;
+}
+
+.step.left {
+  left: -50px;
+  opacity: 0;
+}
+
+.step.hidden {
+  visibility: hidden;
+}
+
+#progress {
+  float: left;
+  padding: 10px;
+}
+
+.progdot {
+  background: black;
+  border-radius: 2px;
+  float: left;
+  height: 8px;
+  margin-right: 12px;
+  opacity: 0.1;
+  width: 8px;
+}
+
+.progdot-active {
+  opacity: 0.5;
+}
+
+.control-with-label {
+  margin: 10px 0 10px 0;
+  display: -webkit-box;
+}
+
+.label {
+  margin: 5px 5px 5px 0;
+  padding: 5px 5px 5px 0;
+  width: 170px;
+}
+
+.menu-area {
+  margin: 5px 5px 5px 5px;
+}
+
+.menu-control {
+  width: 150px;
+}
+
+#connect {
+  box-sizing: border-box;
+  padding: 60px 0 0 145px;
+}
+
+#logging {
+  clear: both;
+  margin-top: 20px;
+}
+
+#footer button {
+  display: none;
+}
+
+#oobe.connect #continue-button,
+#oobe.eula #back-button,
+#oobe.eula #accept-button {
+  display: inline-block;
+}
+
+#oobe.connect #connect-dot,
+#oobe.eula #eula-dot,
+#oobe.signin #signin-dot,
+#oobe.photo #photo-dot {
+  opacity: 0.4;
+}
+
+#connect table {
+  margin: 7em auto;
+}
+
+#security-info {
+  bottom: 10px;
+  position: absolute;
+  text-align: center;
+  visibility: hidden;
+  width: 98%;
+}
+
+#security-info a {
+  color: #8c8c8c;
   font-size: 13px;
-  background: #f1f1f1;
+}
+
+#oobe.eula + #security-info {
+  visibility: visible;
+}
+
+#update div {
+  margin: 6em auto;
+  width: 32em;
+}
+
+#update progress {
+  margin: 13px 0;
+  width: 380px;
+}
+
+button {
+  min-width: 80px;
+}
+
+.eula-columns {
+  display: -webkit-box;
+  width: 630px;
+}
+
+.eula-frame {
+  border: none;
+  height: 200px;
+  margin-right: 20px;
+  padding: 0 0 0 10px;
+  width: 270px;
+}
+
+#eulas.one-column #cros-eula {
+  width: 100%;
+}
+
+#eulas.one-column #cros-eula-frame {
+  width: 100%;
+}
+
+#eulas.one-column #oem-eula {
+  display: none;
+}
+
+.button-strip {
+  float: right;
 }

chrome/browser/resources/chromeos/oobe.html

@@ -2,8 +2,95 @@
 <html i18n-values="dir:textdirection">
 <head>
 <title i18n-content="title"></title>
+<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="oobe.css">
+<script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://resources/js/cr/event_target.js"></script>
+<script src="chrome://resources/js/local_strings.js"></script>
+<script src="chrome://resources/js/util.js"></script>
+<script src="oobe.js"></script>
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;">
+  <div id="oobe" class="connect">
+    <div id="outer-container">
+      <div id="header">
+        <div>
+          <span i18n-content="productName"></span>
+        </div>
+        <div id="header-sections">
+          <span id="header-connect" class="header-section"
+              i18n-content="networkScreenTitle"></span>
+          <span id="header-eula" class="header-section right"
+              i18n-content="eulaScreenTitle"></span>
+          <span id="header-update" class="header-section right"
+              i18n-content="updateScreenTitle"></span>
+        </div>
+      </div>
+      <hr class="topshadow">
+      <div id="inner-container">
+        <div class="step" id="connect">
+          <div class="control-with-label">
+            <div i18n-content="selectLanguage" class="label"
+                class="menu-control"></div>
+            <div class="menu-area">
+              <select id='language-select' class="menu-control"></select>
+            </div>
+          </div>
+          <div class="control-with-label">
+            <div i18n-content="selectKeyboard" class="label"></div>
+            <div class="menu-area">
+              <select id='keyboard-select' class="menu-control"></select>
+            </div>
+          </div>
+          <div class="control-with-label">
+            <div i18n-content="selectNetwork" class="label"
+                class="menu-control"></div>
+            <div class="menu-area">
+              <!-- TODO(nkostylev): Embed network control. -->
+            </div>
+          </div>
+        </div>
+        <div class="step right hidden" id="eula">
+          <div id="eulas" class="eula-columns one-column">
+            <div id="cros-eula">
+              <iframe id="cros-eula-frame" class="eula-frame"
+                  src="chrome://about/terms"></iframe>
+            </div>
+            <div id="oem-eula"><iframe id="oem-eula-frame"
+                class="eula-frame"></iframe></div>
+          </div>
+          <p id="logging">
+            <input type="checkbox"/><span i18n-content="checkboxLogging"></span>
+            <a id="stats-help-link" href="#" i18n-content="learnMore"></a>
+          </p>
+        </div>
+        <div class="step right hidden" id="update">
+          <div>
+            <p i18n-content="installingUpdate"></p>
+            <progress id="" max="100" value="0"></progress>
+            <p i18n-content="installingUpdateDesc"></p>
+          </div>
+        </div>
+      </div>
+      <hr class="bottomshadow">
+      <div id="footer">
+        <div id="progress">
+          <div id="connect-dot" class="progdot"></div>
+          <div id="eula-dot" class="progdot"></div>
+          <div id="signin-dot" class="progdot"></div>
+          <div id="photo-dot" class="progdot"></div>
+        </div>
+        <div class="button-strip">
+          <button id="continue-button" i18n-content="continueButton"></button>
+          <button id="back-button" i18n-content="back"></button>
+          <button id="accept-button" i18n-content="acceptAgreement"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="security-info">
+    <a id="security-link" href="#" i18n-content="eulaSystemSecuritySetting"></a>
+  </div>
 </body>
 </html>

chrome/browser/resources/chromeos/oobe.js

+// Copyright (c) 2011 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.
+
+/**
+ * @fileoverview Out of the box experience flow (OOBE).
+ * This is the main code for the OOBE WebUI implementation.
+ */
+
+const steps = ['connect', 'eula', 'update'];
+
+cr.define('cr.ui', function() {
+  /**
+  * Constructs an Out of box controller. It manages initialization of screens,
+  * transitions, error messages display.
+  *
+  * @constructor
+  */
+  function Oobe() {
+  }
+
+  cr.addSingletonGetter(Oobe);
+
+  Oobe.localStrings_ = new LocalStrings();
+
+  Oobe.prototype = {
+    /**
+     * Current OOBE step, index in the steps array.
+     * @type {number}
+     */
+    currentStep_: 0,
+
+    /**
+     * Switches to the next OOBE step.
+     * @param {number} nextStepIndex Index of the next step.
+     */
+    toggleStep_: function(nextStepIndex) {
+      var currentStepId = steps[this.currentStep_];
+      var nextStepId = steps[nextStepIndex];
+      var oldStep = $(currentStepId);
+      var oldHeader = $('header-' + currentStepId);
+      var newStep = $(nextStepId);
+      var newHeader = $('header-' + nextStepId);
+
+      newStep.classList.remove('hidden');
+
+      if (nextStepIndex > this.currentStep_) {
+        oldHeader.classList.add('left');
+        oldStep.classList.add('left');
+        newHeader.classList.remove('right');
+        newStep.classList.remove('right');
+      } else if (nextStepIndex < this.currentStep_) {
+        oldHeader.classList.add('right');
+        oldStep.classList.add('right');
+        newHeader.classList.remove('left');
+        newStep.classList.remove('left');
+      }
+
+      // Adjust inner container height based on new step's height.
+      $('inner-container').style.height = newStep.offsetHeight;
+
+      oldStep.addEventListener('webkitTransitionEnd', function f(e) {
+        oldStep.removeEventListener('webkitTransitionEnd', f);
+        oldStep.classList.add('hidden');
+      });
+      this.currentStep_ = nextStepIndex;
+      $('oobe').className = nextStepId;
+    },
+  };
+
+  /**
+   * Initializes the OOBE flow.  This will cause all C++ handlers to
+   * be invoked to do final setup.
+   */
+  Oobe.initialize = function() {
+    // Adjust inner container height based on first step's height
+    $('inner-container').style.height = $(steps[0]).offsetHeight;
+
+    $('continue-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(1);
+    });
+    $('back-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(0);
+    });
+    $('accept-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(2);
+    });
+
+    chrome.send('screenStateInitialize');
+  };
+
+  /**
+   * Switches to the next OOBE step.
+   * @param {number} nextStepIndex Index of the next step.
+   */
+  Oobe.toggleStep = function(nextStepIndex) {
+    Oobe.getInstance().toggleStep_(nextStepIndex);
+  };
+
+  // Export
+  return {
+    Oobe: Oobe
+  };
+});
+
+var Oobe = cr.ui.Oobe;
+
+document.addEventListener('DOMContentLoaded', cr.ui.Oobe.initialize);

chrome/browser/resources/chromeos/proxy_settings.html

@@ -3,6 +3,7 @@
 <head>
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
+<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="../webui.css">
 <link rel="stylesheet" href="../options/options_page.css">
 <link rel="stylesheet" href="../options/chromeos/proxy.css">

chrome/browser/resources/options/options.html

@@ -14,6 +14,7 @@
 <link rel="icon" href="../../../app/theme/settings_favicon.png">
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
+<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="chrome://resources/css/tree.css">
 <link rel="stylesheet" href="../webui.css">

chrome/browser/resources/options/options_page.css

@@ -668,48 +668,6 @@ input:not([type]) {
   padding: 3px;
 }
 
-/* SELECT */
-select {
-  -webkit-appearance: button;
-  -webkit-border-radius: 2px;
-  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-  -webkit-padding-end: 20px;
-  -webkit-padding-start: 2px;
-  -webkit-user-select: none;
-  background-image: url("select.png"), -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
-  background-position: center right;
-  background-repeat: no-repeat;
-  border: 1px solid #aaa;
-  color: #555;
-  font-size: inherit;
-  margin: 0;
-  overflow: hidden;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-select:disabled {
-  color: graytext;
-}
-
-html[dir='rtl'] select {
-  background-position: center left;
-}
-
-select:enabled:hover {
-  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
-  background-image: url("select.png"), -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
-  color: #333;
-}
-
-select:enabled:active {
-  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-  background-image: url("select.png"), -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
-  color: #444;
-}
-
 /* CHECKBOX, RADIO */
 input[type=checkbox],
 input[type=radio] {

chrome/browser/resources/shared/css/select.css

+/* Copyright (c) 2011 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.
+ *
+ * This is the generic select css used on various WebUI implementations.
+ */
+
+select {
+  -webkit-appearance: button;
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 2px;
+  -webkit-user-select: none;
+  background-image: url("../images/select.png"),
+                    -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  background-position: center right;
+  background-repeat: no-repeat;
+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  margin: 0;
+  overflow: hidden;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html[dir='rtl'] select {
+  background-position: center left;
+}
+
+
+select:disabled {
+  color: graytext;
+}
+
+select:enabled:hover {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url("../images/select.png"),
+                    -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  color: #333;
+}
+
+select:enabled:active {
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url("../images/select.png"),
+                    -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #444;
+}
\ No newline at end of file

chrome/browser/resources/shared_resources.grd

@@ -20,6 +20,8 @@ without changes to the corresponding grd file. paaaae -->
                file="shared/css/list.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_MENU"
                file="shared/css/menu.css" type="BINDATA" />
+      <include name="IDR_SHARED_CSS_SELECT"
+               file="shared/css/select.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_TABLE"
                file="shared/css/table.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_TABS"

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

@@ -36,16 +36,17 @@ void EulaScreenHandler::SetDelegate(Delegate* delegate) {
 void EulaScreenHandler::GetLocalizedSettings(
     DictionaryValue* localized_strings) {
   localized_strings->SetString("eulaScreenTitle",
-                    l10n_util::GetStringFUTF16(IDS_EULA_SCREEN_TITLE,
-                        l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
-  localized_strings->SetString("acceptAgreement",
-      l10n_util::GetStringUTF16(IDS_EULA_ACCEPT_AND_CONTINUE_BUTTON));
-  localized_strings->SetString("back",
-                    l10n_util::GetStringUTF16(IDS_EULA_BACK_BUTTON));
+      l10n_util::GetStringUTF16(IDS_EULA_SCREEN_TITLE));
   localized_strings->SetString("checkboxLogging",
       l10n_util::GetStringUTF16(IDS_EULA_CHECKBOX_ENABLE_LOGGING));
   localized_strings->SetString("learnMore",
-                    l10n_util::GetStringUTF16(IDS_LEARN_MORE));
+      l10n_util::GetStringUTF16(IDS_LEARN_MORE));
+  localized_strings->SetString("eulaSystemSecuritySetting",
+      l10n_util::GetStringUTF16(IDS_EULA_SYSTEM_SECURITY_SETTING));
+  localized_strings->SetString("back",
+      l10n_util::GetStringUTF16(IDS_EULA_BACK_BUTTON));
+  localized_strings->SetString("acceptAgreement",
+      l10n_util::GetStringUTF16(IDS_EULA_ACCEPT_AND_CONTINUE_BUTTON));
 }
 
 void EulaScreenHandler::Initialize() {

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

@@ -69,9 +69,7 @@ void NetworkScreenHandler::EnableContinue(bool enabled) {
 void NetworkScreenHandler::GetLocalizedSettings(
     DictionaryValue* localized_strings) {
   localized_strings->SetString("networkScreenTitle",
-      l10n_util::GetStringFUTF16(
-          IDS_WELCOME_SCREEN_TITLE,
-          l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
+      l10n_util::GetStringUTF16(IDS_WELCOME_SCREEN_TITLE));
   localized_strings->SetString("selectLanguage",
       l10n_util::GetStringUTF16(IDS_LANGUAGE_SELECTION_SELECT));
   localized_strings->SetString("selectKeyboard",

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

@@ -18,6 +18,9 @@
 #include "chrome/common/url_constants.h"
 #include "content/browser/tab_contents/tab_contents.h"
 #include "grit/browser_resources.h"
+#include "grit/chromium_strings.h"
+#include "grit/generated_resources.h"
+#include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 
 namespace {
@@ -114,6 +117,15 @@ CoreOobeHandler::~CoreOobeHandler() {
 }
 
 void CoreOobeHandler::GetLocalizedSettings(DictionaryValue* localized_strings) {
+  localized_strings->SetString("productName",
+      l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME));
+  localized_strings->SetString("updateScreenTitle",
+      l10n_util::GetStringUTF16(IDS_UPDATE_SCREEN_TITLE));
+  localized_strings->SetString("installingUpdate",
+      l10n_util::GetStringFUTF16(IDS_INSTALLING_UPDATE,
+          l10n_util::GetStringUTF16(IDS_SHORT_PRODUCT_NAME)));
+  localized_strings->SetString("installingUpdateDesc",
+      l10n_util::GetStringUTF16(IDS_INSTALLING_UPDATE_DESC));
 }
 
 void CoreOobeHandler::Initialize() {