Polished UI for the host side of pairing flow.

* Polymer framework was used in the implementation
* Created custom element <oobe-screen>.
* HostPairingScreen was converted to <host-paring-screen> which extends <oobe-screen>.
* Several <core-*> Polymer elements were used.
* Roboto font used.

Polymer elements and fonts are imported to the page in a runtime, in contrast with a current implementation, where almost all resources are unlined. Can't say how runtime imports affect a performance.

BUG=375191
TEST=manually

Review URL: https://codereview.chromium.org/599273004

Cr-Commit-Position: refs/heads/master@{#297244}

chrome/browser/resources/chromeos/login/html-echo.html

+<!--
+  The <html-echo> injects given |content| into its innerHTML, bypassing HTML
+  escaping, which is always made by Polymer when we insert the result of an
+  Polymer expresion into element's body.
+
+  Example:
+
+  <html-echo content="<div>Hello</div>"></html-element>
+
+  will be equivalent to:
+
+  <span><div>Hello</div></span>
+-->
+<polymer-element name="html-echo" attributes="content"></polymer-element>

chrome/browser/resources/chromeos/login/html-echo.js

+// Copyright 2014 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.
+
+Polymer('html-echo', {
+  contentChanged: function() {
+    this.innerHTML = this.content;
+  }
+});

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

@@ -353,19 +353,30 @@ disableTextSelectAndDrag(function(e) {
   js: ['chrome://oobe/enrollment.js']
 }].forEach(cr.ui.login.ResourceLoader.registerAssets);
 
-document.addEventListener('DOMContentLoaded', function() {
+(function() {
   'use strict';
 
-  // Immediately load async assets.
-  // TODO(dconnelly): remove this at some point and only load as needed.
-  // See crbug.com/236426
-  cr.ui.login.ResourceLoader.loadAssets(SCREEN_OOBE_ENROLLMENT, function() {
-    // This screen is async-loaded so we manually trigger i18n processing.
-    i18nTemplate.process($('oauth-enrollment'), loadTimeData);
-    // Delayed binding since this isn't defined yet.
-    login.OAuthEnrollmentScreen.register();
-  });
+  function initializeOobe() {
+    // Immediately load async assets.
+    // TODO(dconnelly): remove this at some point and only load as needed.
+    // See crbug.com/236426
+    cr.ui.login.ResourceLoader.loadAssets(SCREEN_OOBE_ENROLLMENT, function() {
+      // This screen is async-loaded so we manually trigger i18n processing.
+      i18nTemplate.process($('oauth-enrollment'), loadTimeData);
+      // Delayed binding since this isn't defined yet.
+      login.OAuthEnrollmentScreen.register();
+    });
 
-  // Delayed binding since this isn't defined yet.
-  cr.ui.Oobe.initialize();
-});
+    cr.ui.Oobe.initialize();
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    if (!window['WAIT_FOR_POLYMER']) {
+      initializeOobe();
+      return;
+    }
+    window.addEventListener('polymer-ready', function() {
+      initializeOobe();
+    });
+  });
+})();

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

@@ -21,7 +21,6 @@
 <link rel="stylesheet" href="oobe_screen_terms_of_service.css">
 <link rel="stylesheet" href="oobe_screen_update.css">
 <link rel="stylesheet" href="oobe_screen_controller_pairing.css">
-<link rel="stylesheet" href="oobe_screen_host_pairing.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
 <link rel="stylesheet" href="oobe_screen_user_image.css">
 <link rel="stylesheet" href="screen_app_launch_splash.css">

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

+<link rel="import" href="polymer/polymer/polymer.html">
+
+<polymer-element name="oobe-screen" attributes="name"></polymer-element>

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

+// Copyright (c) 2014 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.
+
+Polymer('oobe-screen', (function() {
+  /** @const */ var CALLBACK_USER_ACTED = 'userActed';
+
+  function doNothing() {};
+
+  return {
+    /**
+     * The login.Screen which is hosting |this|.
+     */
+    screen_: null,
+
+    /**
+     * Dictionary of context observers that are methods of |this| bound to
+     * |this|.
+     */
+    contextObservers_: null,
+
+    /**
+     * login.ScreenContext used for sharing data with native backend.
+     */
+    context: null,
+
+    /**
+     * Internal storage of |this.context|. Short name has been choosen for
+     * reason: such name doesn't take much space in HTML data bindings, which
+     * are used very often.
+     * C binded to the native part of the context, that means that all the
+     * changes in the native part appear in C automticaly. Reverse is not true,
+     * you should use:
+     *    this.context.set(...);
+     *    this.context.commitContextChanges();
+     * to send updates to the native part.
+     * TODO(dzhioev): make binding two-way.
+     */
+    C: null,
+
+    /**
+     * Called when the screen is beeing registered.
+     */
+    initialize: doNothing,
+
+    ready: function() {
+      if (this.decorate_) {
+        this.initialize();
+      } else {
+        this.ready_ = true;
+      }
+    },
+
+    i18n: function(args) {
+      if (!(args instanceof Array))
+        args = [args];
+      args[0] = 'login_' + this.name + '_' + args[0];
+      return loadTimeData.getStringF.apply(loadTimeData, args);
+    },
+
+    /**
+     * Called by login.Screen when the screen is beeing registered.
+     */
+    decorate: function(screen) {
+      this.screen_ = screen;
+      screen.initialize();
+      this.context = screen.screenContext_;
+      this.C = this.context.storage_;
+      this.contextObservers_ = {};
+      var self = this;
+      this.querySelectorAllImpl_('button[action]').forEach(function(button) {
+        button.addEventListener('click', function(e) {
+          var action = this.getAttribute('action');
+          self.send(CALLBACK_USER_ACTED, action);
+          e.stopPropagation();
+        });
+      });
+      if (this.ready_) {
+        this.initialize();
+      } else {
+        this.decorate_ = true;
+      }
+    },
+
+    /**
+     * @final
+     */
+    send: function() {
+      return this.sendImpl_.apply(this, arguments);
+    },
+
+    /**
+     * @final
+     */
+    addContextObserver: function() {
+      return this.addContextObserverImpl_.apply(this, arguments);
+    },
+
+    /**
+     * @final
+     */
+    removeContextObserver: function() {
+      return this.removeContextObserverImpl_.apply(this, arguments);
+    },
+
+    /**
+     * @final
+     */
+    commitContextChanges: function() {
+      return this.commitContextChangesImpl_.apply(this, arguments);
+    },
+
+    /**
+     * @override
+     * @final
+     */
+    querySelector: function() {
+      return this.querySelectorImpl_.apply(this, arguments);
+    },
+
+    /**
+     * @override
+     * @final
+     */
+    querySelectorAll: function() {
+      return this.querySelectorAllImpl_.apply(this, arguments);
+    },
+
+    /**
+     * See login.Screen.send.
+     * @private
+     */
+    sendImpl_: function() {
+      return this.screen_.send.apply(this.screen_, arguments);
+    },
+
+    /**
+     * Starts observation of property with |key| of the context attached to
+     * current screen. This method differs from "login.ScreenContext" in that
+     * it automatically detects if observer is method of |this| and make
+     * all needed actions to make it work correctly. So it's no need for client
+     * to bind methods to |this| and keep resulting callback for
+     * |removeObserver| call:
+     *
+     *   this.addContextObserver('key', this.onKeyChanged_);
+     *   ...
+     *   this.removeContextObserver('key', this.onKeyChanged_);
+     * @private
+     */
+    addContextObserverImpl_: function(key, observer) {
+      var realObserver = observer;
+      var propertyName = this.getPropertyNameOf_(observer);
+      if (propertyName) {
+        if (!this.contextObservers_.hasOwnProperty(propertyName))
+          this.contextObservers_[propertyName] = observer.bind(this);
+        realObserver = this.contextObservers_[propertyName];
+      }
+      this.context.addObserver(key, realObserver);
+    },
+
+    /**
+     * Removes |observer| from the list of context observers. Supports not only
+     * regular functions but also screen methods (see comment to
+     * |addContextObserver|).
+     * @private
+     */
+    removeContextObserverImpl_: function(observer) {
+      var realObserver = observer;
+      var propertyName = this.getPropertyNameOf_(observer);
+      if (propertyName) {
+        if (!this.contextObservers_.hasOwnProperty(propertyName))
+          return;
+        realObserver = this.contextObservers_[propertyName];
+        delete this.contextObservers_[propertyName];
+      }
+      this.context.removeObserver(realObserver);
+    },
+
+    /**
+     * See login.Screen.commitContextChanges.
+     * @private
+     */
+    commitContextChangesImpl_: function() {
+      return this.screen_.commitContextChanges.apply(this.screen_, arguments);
+    },
+
+    /**
+     * Calls |querySelector| method of the shadow dom and returns the result.
+     * @private
+     */
+    querySelectorImpl_: function(selector) {
+      return this.shadowRoot.querySelector(selector);
+    },
+
+
+    /**
+     * Calls standart |querySelectorAll| method of the shadow dom and returns
+     * the result converted to Array.
+     * @private
+     */
+    querySelectorAllImpl_: function(selector) {
+      var list = this.shadowRoot.querySelectorAll(selector);
+      return Array.prototype.slice.call(list);
+    },
+
+    /**
+     * If |value| is the value of some property of |this| returns property's
+     * name. Otherwise returns empty string.
+     * @private
+     */
+    getPropertyNameOf_: function(value) {
+      for (var key in this)
+        if (this[key] === value)
+          return key;
+      return '';
+    }
+  };
+})());
+

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

@@ -4,7 +4,11 @@
 <meta charset="utf-8">
 <meta name="google" value="notranslate">
 <title i18n-content="title"></title>
+<script src="chrome://oobe/polymer/platform/platform.js"></script>
+<include src="oobe-screen.html">
+<include src="html-echo.html">
 <include src="login_resources.html">
+<link rel="stylesheet" href="roboto_font.css">
 <link rel="stylesheet" href="accessibility_menu.css">
 <script src="chrome://oobe/oobe.js"></script>
 </head>

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

@@ -7,7 +7,15 @@
  * This is the main code for the OOBE WebUI implementation.
  */
 
+/**
+ * Setting WAIT_FOR_POLYMER to 'true' will delay screens' registration until
+ * Polymer is loaded.
+ */
+/* @const */ var WAIT_FOR_POLYMER = true;
+
 <include src="login_common.js">
+<include src="oobe-screen.js">
+<include src="html-echo.js">
 <include src="oobe_screen_eula.js">
 <include src="oobe_screen_network.js">
 <include src="oobe_screen_hid_detection.js">

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

@@ -3,14 +3,48 @@
  * found in the LICENSE file.
  */
 
-#host-pairing {
-  background: white;
-  height: 601px;
-  padding: 20px;
-  width: 720px;
+/* TODO(dzhioev): support RTL. */
+
+:host {
+  -webkit-user-select: none;
+  background-color: rgb(242, 166, 0);
+  color: white;
+  display: block;
+  font-family: 'Roboto';
+  height: 100%;
+}
+
+core-animated-pages {
+  left: 114px;
+  position: absolute;
+  right: 0;
+  top: 100px;
+}
+
+#illustration {
+  background-image: url(chrome://theme/IDR_BUILDINGS_ILLUSTRATION);
+  bottom: 95px;
+  height: 368px;
+  position: absolute;
+  right: 95px;
+  width: 503px;
+}
+
+#device-indicator {
+  bottom: 74px;
+  font-size: 33px;
+  font-weight: bolder;
+  left: 130px;
+  position: absolute;
+}
+
+#device-label {
+  margin-left: -0.3em;
 }
 
-#host-pairing .page-name {
-  text-align: center;
+#code {
+  font-family: 'Roboto';
+  font-size: 120px;
+  font-weight: lighter;
 }
 

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

-<!-- TODO(dzhioev): replace all the strings with i18n-values. -->
-<div class="step hidden no-logo" id="host-pairing" hidden>
-  <div alias="pageNameLabel_" class="page-name"></div>
-  <div>My name is <strong alias="deviceNameLabel_"></strong>.</div>
-  <div class="page page-welcome">
-    <div>Welcome!</div>
-  </div>
-  <div class="page page-code-confirmation">
-    <div>Pair with a controller</div>
-    <div alias="confirmationCodeLabel_"></div>
-  </div>
-  <div class="page page-update">
-    <div>Updating Chromebox...</div>
-    <progress alias="updateProgressBar_"></progress>
-  </div>
-  <div class="page page-enrollment-introduction">
-    <div>Enroll your organization</div>
-  </div>
-  <div class="page page-enrollment">
-    <div>
-      Enrolling in <strong alias="domainNameLabel_">domain.com</strong>...
+<link rel="import" href="polymer/core-item/core-item.html">
+<link rel="import" href="polymer/core-animated-pages/core-animated-pages.html">
+<link rel="import" href="polymer/core-iconset-svg/core-iconset-svg.html">
+<link rel="import" href="polymer/polymer/polymer.html">
+
+<core-iconset-svg id="host-pairing-icons" iconSize="48">
+  <svg>
+    <defs>
+      <g id="cast">
+        <include src="../../../../app/theme/cast_icon.svg">
+      </g>
+    </defs>
+  </svg>
+</core-iconset-svg>
+
+<polymer-element name="host-pairing-page" noscript>
+  <template>
+    <link rel="stylesheet" href="oobe_screen_host_pairing_page.css">
+
+    <div id="title">
+      <content select=".title"></content>
     </div>
-  </div>
-  <div class="page page-enrollment-error">
-    <div>Enrollment failed =(</div>
-  </div>
-  <div class="page page-pairing-done">
-    <div>Great success!</div>
-  </div>
+    <div id="content">
+      <content></content>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="host-pairing-screen" extends="oobe-screen">
+  <template>
+    <link rel="stylesheet" href="oobe_screen_host_pairing.css">
+
+    <core-animated-pages transitions="cross-fade-all"
+                         selected="{{C.page}}">
+      <host-pairing-page name="welcome">
+        <div class="title">{{'welcomeTitle' | i18n}}</div>
+        <div>{{'welcomeText' | i18n}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="code-confirmation">
+        <div class="title">{{'confirmationTitle' | i18n}}</div>
+        <div id="code">{{C.code}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="update">
+        <div class="title">{{'updatingTitle' | i18n}}</div>
+        <!-- Not yet implemented on backend side. -->
+        <!--div>{{['updatingText', C.downloadedMb, C.totalMb] | i18n}}</div-->
+      </host-pairing-page>
+      <host-pairing-page name="enrollment-introduction">
+        <div class="title">{{'enrollTitle' | i18n}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="enrollment">
+        <div class="title">
+          <!-- 'enrollmentTitle' contains <strong> tag. We need to wrap it in
+               'html-echo' to prevent HTML escaping. -->
+          <html-echo
+              content="{{['enrollingTitle', C.enrollmentDomain] | i18n}}">
+          </html-echo>
+        </div>
+      </host-pairing-page>
+      <host-pairing-page name="enrollment-error">
+        <div class="title">{{'enrollmentErrorTitle' | i18n}}</div>
+        <div>{{'errorNeedsRestart' | i18n}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="pairing-done">
+        <div class="title">{{'doneTitle' | i18n}}</div>
+        <div>{{'doneText' | i18n}}</div>
+      </host-pairing-page>
+    </core-animated-pages>
+    <core-item id="device-indicator"class="font-scalable"
+        icon="host-pairing-icons:cast">
+      <div id="device-label">{{C.deviceName}}</div>
+    </core-item>
+    <div id="illustration"></div>
+  </template>
+</polymer-element>
+
+<div class="step hidden no-logo fullscreen" id="host-pairing" hidden>
+  <host-pairing-screen name="HostPairingScreen"></host-pairing-screen>
 </div>
+

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

@@ -7,89 +7,38 @@
  */
 
 login.createScreen('HostPairingScreen', 'host-pairing', function() {
-  'use strict';
-
-  // Keep these constants synced with corresponding constants in
-  // host_pairing_screen_actor.{h,cc}.
-  /** @const */ var CONTEXT_KEY_PAGE = 'page';
-  /** @const */ var CONTEXT_KEY_DEVICE_NAME = 'deviceName';
-  /** @const */ var CONTEXT_KEY_CONFIRMATION_CODE = 'code';
-  /** @const */ var CONTEXT_KEY_ENROLLMENT_DOMAIN = 'enrollmentDomain';
-  /** @const */ var CONTEXT_KEY_UPDATE_PROGRESS = 'updateProgress';
-
-  /** @const */ var PAGE_WELCOME = 'welcome';
-  /** @const */ var PAGE_CODE_CONFIRMATION = 'code-confirmation';
-  /** @const */ var PAGE_UPDATE = 'update';
-  /** @const */ var PAGE_ENROLLMENT_INTRODUCTION = 'enrollment-introduction';
-  /** @const */ var PAGE_ENROLLMENT = 'enrollment';
-  /** @const */ var PAGE_ENROLLMENT_ERROR = 'enrollment-error';
-  /** @const */ var PAGE_PAIRING_DONE = 'pairing-done';
-
-  /** @const */ var CALLBACK_CONTEXT_READY = 'contextReady';
-
-
-  /** @const */ var PAGE_NAMES = [
-      PAGE_WELCOME,
-      PAGE_CODE_CONFIRMATION,
-      PAGE_UPDATE,
-      PAGE_ENROLLMENT_INTRODUCTION,
-      PAGE_ENROLLMENT,
-      PAGE_ENROLLMENT_ERROR,
-      PAGE_PAIRING_DONE];
-
+  /**
+   * We can't pass Polymer screen directly to login.createScreen, because it
+   * changes object's prototype chain.
+   */
   return {
-    pages_: null,
+    polymerScreen_: null,
 
-    /** @override */
     decorate: function() {
-      this.initialize();
-
-      this.pages_ = {};
-      PAGE_NAMES.forEach(function(pageName) {
-        var page = this.querySelector('.page-' + pageName);
-        if (page === null)
-          throw Error('Page "' + pageName + '" was not found.');
-        page.hidden = true;
-        this.pages_[pageName] = page;
-      }, this);
-
-      this.addContextObserver(CONTEXT_KEY_PAGE, this.pageChanged_);
-      this.send(CALLBACK_CONTEXT_READY);
+      polymerScreen_ = this.children[0];
+      polymerScreen_.decorate(this);
     },
 
-    pageChanged_: function(newPage, oldPage) {
-      this.pageNameLabel_.textContent = '<<<< ' + newPage + ' >>>>';
-      this.deviceNameLabel_.textContent =
-          this.context.get(CONTEXT_KEY_DEVICE_NAME);
-
-      if (newPage == PAGE_CODE_CONFIRMATION)
-        this.confirmationCodeLabel_.textContent =
-            this.context.get(CONTEXT_KEY_CONFIRMATION_CODE);
-
-      if (newPage == PAGE_UPDATE) {
-        this.setUpdateProgress_(this.context.get(CONTEXT_KEY_UPDATE_PROGRESS));
-        this.addContextObserver(CONTEXT_KEY_UPDATE_PROGRESS,
-            this.setUpdateProgress_);
-      } else if (oldPage == PAGE_UPDATE) {
-        this.removeContextObserver(this.setUpdateProgress_);
-      }
+    onBeforeShow: function() {
+      polymerScreen_.onBeforeShow();
+    }
+  };
+});
 
-      if (newPage == PAGE_ENROLLMENT)
-        this.domainNameLabel_.textContent =
-            this.context.get(CONTEXT_KEY_ENROLLMENT_DOMAIN);
+Polymer('host-pairing-screen', (function() {
+  'use strict';
 
-      this.togglePage_(newPage);
-    },
+  /** @const */ var CALLBACK_CONTEXT_READY = 'contextReady';
 
-    togglePage_: function(newPage) {
-      PAGE_NAMES.forEach(function(pageName) {
-        this.pages_[pageName].hidden = (pageName !== newPage);
-      }, this);
+  return {
+    onBeforeShow: function() {
+      Oobe.getInstance().headerHidden = true;
     },
 
-    setUpdateProgress_: function(progress) {
-      this.updateProgressBar_.value = progress;
+    /** @override */
+    initialize: function() {
+      this.send(CALLBACK_CONTEXT_READY);
     }
   };
-});
+})());
 

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

+/* Copyright 2014 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.
+ */
+
+:host {
+  display: block;
+}
+
+#title {
+  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+  font-size: 45px;
+  padding-bottom: 18px;
+}
+
+#content {
+  font-size: 24px;
+  padding-top: 25px;
+}
+

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

+/* Copyright 2014 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.
+ */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: url(Roboto-Thin.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(Roboto-Light.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: url(Roboto-Bold.ttf) format('truetype');
+}

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

@@ -35,6 +35,7 @@
 #include "chrome/browser/ui/webui/chromeos/login/network_dropdown_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/network_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/network_state_informer.h"
+#include "chrome/browser/ui/webui/chromeos/login/polymer_resources_map.h"
 #include "chrome/browser/ui/webui/chromeos/login/reset_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/signin_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/supervised_user_creation_screen_handler.h"
@@ -50,6 +51,7 @@
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_data_source.h"
 #include "grit/browser_resources.h"
+#include "grit/chrome_unscaled_resources.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/base/webui/web_ui_util.h"
 
@@ -76,6 +78,11 @@ const char kEnrollmentHTMLPath[] = "enrollment.html";
 const char kEnrollmentCSSPath[] = "enrollment.css";
 const char kEnrollmentJSPath[] = "enrollment.js";
 
+void AddPolymerResourcesPaths(content::WebUIDataSource* source) {
+  for (const auto& mapping: GetPolymerResourcesMap())
+    source->AddResourcePath(mapping.first, mapping.second);
+}
+
 // Creates a WebUIDataSource for chrome://oobe
 content::WebUIDataSource* CreateOobeUIDataSource(
     const base::DictionaryValue& localized_strings,
@@ -108,6 +115,13 @@ content::WebUIDataSource* CreateOobeUIDataSource(
   source->AddResourcePath(kEnrollmentCSSPath, IDR_OOBE_ENROLLMENT_CSS);
   source->AddResourcePath(kEnrollmentJSPath, IDR_OOBE_ENROLLMENT_JS);
 
+  if (display_type == OobeUI::kOobeDisplay) {
+    AddPolymerResourcesPaths(source);
+    source->AddResourcePath("Roboto-Thin.ttf", IDR_FONT_ROBOTO_THIN);
+    source->AddResourcePath("Roboto-Light.ttf", IDR_FONT_ROBOTO_LIGHT);
+    source->AddResourcePath("Roboto-Bold.ttf", IDR_FONT_ROBOTO_BOLD);
+  }
+
   return source;
 }
 

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

+// Copyright 2014 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.
+
+#include "chrome/browser/ui/webui/chromeos/login/polymer_resources_map.h"
+
+#include "grit/browser_resources.h"
+
+namespace chromeos {
+
+std::vector<std::pair<std::string, int>> GetPolymerResourcesMap() {
+  std::vector<std::pair<std::string, int>> result;
+  result.push_back(
+      std::make_pair("polymer/core-animated-pages/core-animated-pages.css",
+                     IDR_POLYMER_CORE_ANIMATED_PAGES_CORE_ANIMATED_PAGES_CSS));
+  result.push_back(std::make_pair(
+      "polymer/core-animated-pages/core-animated-pages-extracted.js",
+      IDR_POLYMER_CORE_ANIMATED_PAGES_CORE_ANIMATED_PAGES_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/core-animated-pages/core-animated-pages.html",
+                     IDR_POLYMER_CORE_ANIMATED_PAGES_CORE_ANIMATED_PAGES_HTML));
+  result.push_back(std::make_pair(
+      "polymer/core-animated-pages/transitions/"
+      "core-transition-pages-extracted.js",
+      IDR_POLYMER_CORE_ANIMATED_PAGES_TRANSITIONS_CORE_TRANSITION_PAGES_EXTRACTED_JS));
+  result.push_back(std::make_pair(
+      "polymer/core-animated-pages/transitions/core-transition-pages.html",
+      IDR_POLYMER_CORE_ANIMATED_PAGES_TRANSITIONS_CORE_TRANSITION_PAGES_HTML));
+  result.push_back(std::make_pair(
+      "polymer/core-animated-pages/transitions/cross-fade.html",
+      IDR_POLYMER_CORE_ANIMATED_PAGES_TRANSITIONS_CROSS_FADE_HTML));
+  result.push_back(std::make_pair(
+      "polymer/core-animated-pages/transitions/hero-transition-extracted.js",
+      IDR_POLYMER_CORE_ANIMATED_PAGES_TRANSITIONS_HERO_TRANSITION_EXTRACTED_JS));
+  result.push_back(std::make_pair(
+      "polymer/core-animated-pages/transitions/hero-transition.html",
+      IDR_POLYMER_CORE_ANIMATED_PAGES_TRANSITIONS_HERO_TRANSITION_HTML));
+  result.push_back(std::make_pair("polymer/core-icon/core-icon.css",
+                                  IDR_POLYMER_CORE_ICON_CORE_ICON_CSS));
+  result.push_back(
+      std::make_pair("polymer/core-icon/core-icon-extracted.js",
+                     IDR_POLYMER_CORE_ICON_CORE_ICON_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/core-icon/core-icon.html",
+                                  IDR_POLYMER_CORE_ICON_CORE_ICON_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-iconset/core-iconset-extracted.js",
+                     IDR_POLYMER_CORE_ICONSET_CORE_ICONSET_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/core-iconset/core-iconset.html",
+                                  IDR_POLYMER_CORE_ICONSET_CORE_ICONSET_HTML));
+  result.push_back(std::make_pair(
+      "polymer/core-iconset-svg/core-iconset-svg-extracted.js",
+      IDR_POLYMER_CORE_ICONSET_SVG_CORE_ICONSET_SVG_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/core-iconset-svg/core-iconset-svg.html",
+                     IDR_POLYMER_CORE_ICONSET_SVG_CORE_ICONSET_SVG_HTML));
+  result.push_back(std::make_pair("polymer/core-item/core-item.css",
+                                  IDR_POLYMER_CORE_ITEM_CORE_ITEM_CSS));
+  result.push_back(
+      std::make_pair("polymer/core-item/core-item-extracted.js",
+                     IDR_POLYMER_CORE_ITEM_CORE_ITEM_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/core-item/core-item.html",
+                                  IDR_POLYMER_CORE_ITEM_CORE_ITEM_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-meta/core-meta-extracted.js",
+                     IDR_POLYMER_CORE_META_CORE_META_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/core-meta/core-meta.html",
+                                  IDR_POLYMER_CORE_META_CORE_META_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-range/core-range-extracted.js",
+                     IDR_POLYMER_CORE_RANGE_CORE_RANGE_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/core-range/core-range.html",
+                                  IDR_POLYMER_CORE_RANGE_CORE_RANGE_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-selection/core-selection-extracted.js",
+                     IDR_POLYMER_CORE_SELECTION_CORE_SELECTION_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/core-selection/core-selection.html",
+                     IDR_POLYMER_CORE_SELECTION_CORE_SELECTION_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-selector/core-selector-extracted.js",
+                     IDR_POLYMER_CORE_SELECTOR_CORE_SELECTOR_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/core-selector/core-selector.html",
+                     IDR_POLYMER_CORE_SELECTOR_CORE_SELECTOR_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-style/core-style-extracted.js",
+                     IDR_POLYMER_CORE_STYLE_CORE_STYLE_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/core-style/core-style.html",
+                                  IDR_POLYMER_CORE_STYLE_CORE_STYLE_HTML));
+  result.push_back(
+      std::make_pair("polymer/core-transition/core-transition-extracted.js",
+                     IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/core-transition/core-transition.html",
+                     IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_HTML));
+  result.push_back(std::make_pair("polymer/paper-button/paper-button.css",
+                                  IDR_POLYMER_PAPER_BUTTON_PAPER_BUTTON_CSS));
+  result.push_back(
+      std::make_pair("polymer/paper-button/paper-button-extracted.js",
+                     IDR_POLYMER_PAPER_BUTTON_PAPER_BUTTON_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/paper-button/paper-button.html",
+                                  IDR_POLYMER_PAPER_BUTTON_PAPER_BUTTON_HTML));
+  result.push_back(
+      std::make_pair("polymer/paper-focusable/paper-focusable-extracted.js",
+                     IDR_POLYMER_PAPER_FOCUSABLE_PAPER_FOCUSABLE_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/paper-focusable/paper-focusable.html",
+                     IDR_POLYMER_PAPER_FOCUSABLE_PAPER_FOCUSABLE_HTML));
+  result.push_back(
+      std::make_pair("polymer/paper-progress/paper-progress.css",
+                     IDR_POLYMER_PAPER_PROGRESS_PAPER_PROGRESS_CSS));
+  result.push_back(
+      std::make_pair("polymer/paper-progress/paper-progress-extracted.js",
+                     IDR_POLYMER_PAPER_PROGRESS_PAPER_PROGRESS_EXTRACTED_JS));
+  result.push_back(
+      std::make_pair("polymer/paper-progress/paper-progress.html",
+                     IDR_POLYMER_PAPER_PROGRESS_PAPER_PROGRESS_HTML));
+  result.push_back(
+      std::make_pair("polymer/paper-ripple/paper-ripple-extracted.js",
+                     IDR_POLYMER_PAPER_RIPPLE_PAPER_RIPPLE_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/paper-ripple/paper-ripple.html",
+                                  IDR_POLYMER_PAPER_RIPPLE_PAPER_RIPPLE_HTML));
+  result.push_back(std::make_pair("polymer/paper-shadow/paper-shadow.css",
+                                  IDR_POLYMER_PAPER_SHADOW_PAPER_SHADOW_CSS));
+  result.push_back(
+      std::make_pair("polymer/paper-shadow/paper-shadow-extracted.js",
+                     IDR_POLYMER_PAPER_SHADOW_PAPER_SHADOW_EXTRACTED_JS));
+  result.push_back(std::make_pair("polymer/paper-shadow/paper-shadow.html",
+                                  IDR_POLYMER_PAPER_SHADOW_PAPER_SHADOW_HTML));
+  result.push_back(std::make_pair("polymer/platform/platform.js",
+                                  IDR_POLYMER_PLATFORM_PLATFORM_JS));
+  result.push_back(std::make_pair("polymer/polymer/layout.html",
+                                  IDR_POLYMER_POLYMER_LAYOUT_HTML));
+  result.push_back(std::make_pair("polymer/polymer/polymer.html",
+                                  IDR_POLYMER_POLYMER_POLYMER_HTML));
+  result.push_back(std::make_pair("polymer/polymer/polymer.js",
+                                  IDR_POLYMER_POLYMER_POLYMER_JS));
+  return result;
+}
+
+}  // namespace chromeos

chrome/browser/ui/webui/chromeos/login/polymer_resources_map.h

+// Copyright 2014 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.
+//
+#ifndef CHROME_BROWSER_UI_WEBUI_CHROMEOS_LOGIN_POLYMER_RESOURCES_MAP_H_
+#define CHROME_BROWSER_UI_WEBUI_CHROMEOS_LOGIN_POLYMER_RESOURCES_MAP_H_
+
+#include <string>
+#include <utility>
+#include <vector>
+
+namespace chromeos {
+
+std::vector<std::pair<std::string, int>> GetPolymerResourcesMap();
+
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_UI_WEBUI_CHROMEOS_LOGIN_POLYMER_RESOURCES_MAP_H_

chrome/chrome_browser_ui.gypi

@@ -988,6 +988,8 @@
       'browser/ui/webui/chromeos/login/network_state_informer.h',
       'browser/ui/webui/chromeos/login/oobe_ui.cc',
       'browser/ui/webui/chromeos/login/oobe_ui.h',
+      'browser/ui/webui/chromeos/login/polymer_resources_map.cc',
+      'browser/ui/webui/chromeos/login/polymer_resources_map.h',
       'browser/ui/webui/chromeos/login/reset_screen_handler.cc',
       'browser/ui/webui/chromeos/login/reset_screen_handler.h',
       'browser/ui/webui/chromeos/login/screenlock_icon_provider.cc',