BASELINE: Update Chromium to 61.0.3163.99

Change-Id: I8452f34574d88ca2b27af9bd56fc9ff3f16b1367
Reviewed-by: Alexandru Croitor <alexandru.croitor@qt.io>

860 files changed, 25764 insertions, 19659 deletions

diff --git a/chromium/chrome/browser/resources/BUILD.gn b/chromium/chrome/browser/resources/BUILD.gn
index 8d4b2551a05..1360570acae 100644
--- a/chromium/chrome/browser/resources/BUILD.gn
+++ b/chromium/chrome/browser/resources/BUILD.gn
@@ -7,22 +7,22 @@ import("//tools/grit/grit_rule.gni")
 
 assert(!is_ios, "Chromium/iOS shouldn't use anything in //chrome")
 
-grit("net_internals_resources") {
-  source = "net_internals_resources.grd"
+grit("invalidations_resources") {
+  source = "invalidations_resources.grd"
   defines = chrome_grit_defines
   outputs = [
-    "grit/net_internals_resources.h",
-    "net_internals_resources.pak",
+    "grit/invalidations_resources.h",
+    "invalidations_resources.pak",
   ]
   output_dir = "$root_gen_dir/chrome"
 }
 
-grit("invalidations_resources") {
-  source = "invalidations_resources.grd"
+grit("net_internals_resources") {
+  source = "net_internals_resources.grd"
   defines = chrome_grit_defines
   outputs = [
-    "grit/invalidations_resources.h",
-    "invalidations_resources.pak",
+    "grit/net_internals_resources.h",
+    "net_internals_resources.pak",
   ]
   output_dir = "$root_gen_dir/chrome"
 }
@@ -49,6 +49,16 @@ grit("policy_resources") {
   output_dir = "$root_gen_dir/chrome"
 }
 
+grit("quota_internals_resources") {
+  source = "quota_internals_resources.grd"
+  defines = chrome_grit_defines
+  outputs = [
+    "grit/quota_internals_resources.h",
+    "quota_internals_resources.pak",
+  ]
+  output_dir = "$root_gen_dir/chrome"
+}
+
 grit("task_scheduler_internals_resources") {
   source = "task_scheduler_internals/resources.grd"
   defines = chrome_grit_defines
@@ -69,6 +79,16 @@ grit("translate_internals_resources") {
   output_dir = "$root_gen_dir/chrome"
 }
 
+grit("webapks_ui_resources") {
+  source = "webapks_ui_resources.grd"
+  defines = chrome_grit_defines
+  outputs = [
+    "grit/webapks_ui_resources.h",
+    "webapks_ui_resources.pak",
+  ]
+  output_dir = "$root_gen_dir/chrome"
+}
+
 if (!is_android) {
   grit("component_extension_resources") {
     source = "component_extension_resources.grd"
@@ -89,6 +109,10 @@ if (!is_android) {
   grit("settings_resources") {
     if (use_vulcanize) {
       source = "settings/settings_resources_vulcanized.grd"
+
+      # The .grd contains references to generated files.
+      source_is_generated = true
+
       deps = [
         "//chrome/browser/resources/settings:build",
       ]
@@ -109,7 +133,9 @@ if (!is_android) {
     ]
     output_dir = "$root_gen_dir/chrome"
   }
+}
 
+if (is_chromeos) {
   grit("options_resources") {
     source = "options_resources.grd"
     defines = chrome_grit_defines
@@ -119,45 +145,27 @@ if (!is_android) {
     ]
     output_dir = "$root_gen_dir/chrome"
   }
+}
 
-  grit("options_test_resources") {
-    source = "options_test_resources.grd"
+if (enable_extensions) {
+  grit("sync_file_system_internals_resources") {
+    source = "sync_file_system_internals_resources.grd"
     defines = chrome_grit_defines
     outputs = [
-      "grit/options_test_resources.h",
-      "options_test_resources.pak",
+      "grit/sync_file_system_internals_resources.h",
+      "sync_file_system_internals_resources.pak",
     ]
     output_dir = "$root_gen_dir/chrome"
   }
 }
 
-grit("quota_internals_resources") {
-  source = "quota_internals_resources.grd"
-  defines = chrome_grit_defines
-  outputs = [
-    "grit/quota_internals_resources.h",
-    "quota_internals_resources.pak",
-  ]
-  output_dir = "$root_gen_dir/chrome"
-}
-
-grit("webapks_ui_resources") {
-  source = "webapks_ui_resources.grd"
-  defines = chrome_grit_defines
-  outputs = [
-    "grit/webapks_ui_resources.h",
-    "webapks_ui_resources.pak",
-  ]
-  output_dir = "$root_gen_dir/chrome"
-}
-
-if (enable_extensions) {
-  grit("sync_file_system_internals_resources") {
-    source = "sync_file_system_internals_resources.grd"
+if (enable_vr) {
+  grit("vr_shell_resources") {
+    source = "vr_shell_resources.grd"
     defines = chrome_grit_defines
     outputs = [
-      "grit/sync_file_system_internals_resources.h",
-      "sync_file_system_internals_resources.pak",
+      "grit/vr_shell_resources.h",
+      "vr_shell_resources.pak",
     ]
     output_dir = "$root_gen_dir/chrome"
   }
diff --git a/chromium/chrome/browser/resources/PRESUBMIT.py b/chromium/chrome/browser/resources/PRESUBMIT.py
index b523d6bec85..b8a8396d241 100644
--- a/chromium/chrome/browser/resources/PRESUBMIT.py
+++ b/chromium/chrome/browser/resources/PRESUBMIT.py
@@ -126,6 +126,8 @@ def _CheckChangeOnUploadOrCommit(input_api, output_api):
   if any(f for f in affected if f.LocalPath().endswith('vulcanize_gn.py')):
     results += RunVulcanizeTests(input_api, output_api)
   results += _CheckWebDevStyle(input_api, output_api)
+  results += input_api.canned_checks.CheckPatchFormatted(input_api, output_api,
+                                                         check_js=True)
   return results
 
 
diff --git a/chromium/chrome/browser/resources/about_conflicts.html b/chromium/chrome/browser/resources/about_conflicts.html
index 739db7119e9..59602eae8d8 100644
--- a/chromium/chrome/browser/resources/about_conflicts.html
+++ b/chromium/chrome/browser/resources/about_conflicts.html
@@ -36,13 +36,13 @@ html[dir=rtl] #header {
 h1 {
   font-size: 156%;
   font-weight: bold;
-  padding: 0;
   margin: 0;
+  padding: 0;
 }
 
 #blurb-container {
-  padding-bottom: 1.5em;
   font-size: 120%;
+  padding-bottom: 1.5em;
 }
 
 div.content {
@@ -51,11 +51,11 @@ div.content {
 }
 
 .section-header {
-  background: #ebeff9;
-  border-top: 1px solid #b5c7de;
+  -webkit-padding-start: 5px;
+  background: rgb(235, 239, 249);
+  border-top: 1px solid rgb(181, 199, 222);
   font-size: 99%;
   padding-bottom: 2px;
-  -webkit-padding-start: 5px;
   padding-top: 3px;
   width: 100%;
 }
@@ -73,14 +73,14 @@ div.content {
 }
 
 .vbox-container {
-  display: -webkit-box;
   -webkit-box-orient: vertical;
+  display: -webkit-box;
 }
 
 .wbox {
-  display: -webkit-box;
   -webkit-box-align: stretch;
   -webkit-box-flex: 1;
+  display: -webkit-box;
 }
 
 #top {
@@ -101,13 +101,13 @@ div.content {
 }
 
 .no-modules {
+  font-size: 1.2em;
   margin: 6em 0 0;
   text-align: center;
-  font-size: 1.2em;
 }
 
 .suspected-bad {
-  color: #DD7700;
+  color: rgb(221, 119, 0);
 }
 
 .confirmed-bad {
@@ -119,8 +119,8 @@ div.content {
 }
 
 .extra-info-text {
-  margin-top: -1em;
   margin-bottom: 1em;
+  margin-top: -1em;
 }
 
 .clearing {
@@ -240,8 +240,10 @@ html[dir=rtl] .clearing {
     </div>
   </div>
 </div>
+<script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/jstemplate_compiled.js"></script>
 <script src="chrome://resources/js/load_time_data.js"></script>
+<script src="chrome://resources/js/promise_resolver.js"></script>
 <script src="chrome://resources/js/util.js"></script>
 
 <script src="chrome://conflicts/strings.js"></script>
diff --git a/chromium/chrome/browser/resources/about_conflicts.js b/chromium/chrome/browser/resources/about_conflicts.js
index e8eb92ea557..75af797eba1 100644
--- a/chromium/chrome/browser/resources/about_conflicts.js
+++ b/chromium/chrome/browser/resources/about_conflicts.js
@@ -3,15 +3,14 @@
 // found in the LICENSE file.
 
 /**
-* This variable structure is here to document the structure that the template
-* expects to correctly populate the page.
-*/
+ * This variable structure is here to document the structure that the template
+ * expects to correctly populate the page.
+ */
 var moduleListDataFormat = {
-  'moduleList': [
-  {
+  'moduleList': [{
     'type': 'The type of module found',
     'type_description':
-    'The type of module (string), defaults to blank for regular modules',
+        'The type of module (string), defaults to blank for regular modules',
     'status': 'The module status',
     'location': 'The module path, not including filename',
     'name': 'The name of the module',
@@ -22,16 +21,15 @@ var moduleListDataFormat = {
     'recommended_action': 'The help tips bitmask',
     'possible_resolution': 'The help tips in string form',
     'help_url': 'The link to the Help Center article'
-  }
-]
+  }]
 };
 
 /**
-* Takes the |moduleListData| input argument which represents data about
-* the currently available modules and populates the html jstemplate
-* with that data. It expects an object structure like the above.
-* @param {Object} moduleListData Information about available modules.
-*/
+ * Takes the |moduleListData| input argument which represents data about
+ * the currently available modules and populates the html jstemplate
+ * with that data. It expects an object structure like the above.
+ * @param {Object} moduleListData Information about available modules.
+ */
 function renderTemplate(moduleListData) {
   // This is the javascript code that processes the template:
   var input = new JsEvalContext(moduleListData);
@@ -40,19 +38,18 @@ function renderTemplate(moduleListData) {
 }
 
 /**
-* Asks the C++ ConflictsDOMHandler to get details about the available modules
-* and return detailed data about the configuration. The ConflictsDOMHandler
-* should reply to returnModuleList() (below).
-*/
+ * Asks the C++ ConflictsHandler to get details about the available modules
+ * and return detailed data about the configuration.
+ */
 function requestModuleListData() {
-  chrome.send('requestModuleList');
+  cr.sendWithPromise('requestModuleList').then(returnModuleList);
 }
 
 /**
-* Called by the WebUI to re-populate the page with data representing the
-* current state of installed modules.
-* @param {Object} moduleListData Information about available modules.
-*/
+ * Called by the WebUI to re-populate the page with data representing the
+ * current state of installed modules.
+ * @param {Object} moduleListData Information about available modules.
+ */
 function returnModuleList(moduleListData) {
   renderTemplate(moduleListData);
   $('loading-message').style.visibility = 'hidden';
diff --git a/chromium/chrome/browser/resources/about_flash.js b/chromium/chrome/browser/resources/about_flash.js
index 9734542bd23..5b213955d0e 100644
--- a/chromium/chrome/browser/resources/about_flash.js
+++ b/chromium/chrome/browser/resources/about_flash.js
@@ -3,11 +3,11 @@
 // found in the LICENSE file.
 
 /**
-* Takes the |moduleListData| input argument which represents data about
-* the currently available modules and populates the html jstemplate
-* with that data. It expects an object structure like the above.
-* @param {Object} moduleListData Information about available modules
-*/
+ * Takes the |moduleListData| input argument which represents data about
+ * the currently available modules and populates the html jstemplate
+ * with that data. It expects an object structure like the above.
+ * @param {Object} moduleListData Information about available modules
+ */
 function renderTemplate(moduleListData) {
   // This is the javascript code that processes the template:
   var input = new JsEvalContext(moduleListData);
@@ -16,18 +16,18 @@ function renderTemplate(moduleListData) {
 }
 
 /**
-* Asks the C++ FlashUIDOMHandler to get details about the Flash and return
-* the data in returnFlashInfo() (below).
-*/
+ * Asks the C++ FlashUIDOMHandler to get details about the Flash and return
+ * the data in returnFlashInfo() (below).
+ */
 function requestFlashInfo() {
   chrome.send('requestFlashInfo');
 }
 
 /**
-* Called by the WebUI to re-populate the page with data representing the
-* current state of Flash.
-* @param {Object} moduleListData Information about available modules.
-*/
+ * Called by the WebUI to re-populate the page with data representing the
+ * current state of Flash.
+ * @param {Object} moduleListData Information about available modules.
+ */
 function returnFlashInfo(moduleListData) {
   $('loading-message').style.visibility = 'hidden';
   $('body-container').style.visibility = 'visible';
diff --git a/chromium/chrome/browser/resources/about_invalidations.js b/chromium/chrome/browser/resources/about_invalidations.js
index 0aaf8379fc6..46cbefed1e2 100644
--- a/chromium/chrome/browser/resources/about_invalidations.js
+++ b/chromium/chrome/browser/resources/about_invalidations.js
@@ -47,7 +47,7 @@ cr.define('chrome.invalidations', function() {
     for (var i = 0; i < keys.length; i++) {
       sortedInvalidations.push(tableObjects[keys[i]]);
     }
-    var wrapped = { objectsidtable: sortedInvalidations };
+    var wrapped = {objectsidtable: sortedInvalidations};
     jstProcess(new JsEvalContext(wrapped), $('objectsid-table-div'));
   }
 
@@ -59,11 +59,11 @@ cr.define('chrome.invalidations', function() {
    */
   function updateInvalidatorState(newState, lastChangedTime) {
     var logMessage = nowTimeString() +
-      'Invalidations service state changed to ' + quote(newState);
+        'Invalidations service state changed to ' + quote(newState);
 
     appendToLog(logMessage);
-    $('invalidations-state').textContent = newState + ' (since ' +
-        new Date(lastChangedTime) + ')';
+    $('invalidations-state').textContent =
+        newState + ' (since ' + new Date(lastChangedTime) + ')';
   }
 
   /**
@@ -75,13 +75,10 @@ cr.define('chrome.invalidations', function() {
     for (var i = 0; i < allInvalidations.length; i++) {
       var inv = allInvalidations[i];
       if (inv.hasOwnProperty('objectId')) {
-        var logMessage = nowTimeString() +
-          'Received Invalidation with type ' +
-          quote(inv.objectId.name) +
-          ' version ' +
-          quote((inv.isUnknownVersion ? 'Unknown' : inv.version)) +
-          ' with payload ' +
-          quote(inv.payload);
+        var logMessage = nowTimeString() + 'Received Invalidation with type ' +
+            quote(inv.objectId.name) + ' version ' +
+            quote((inv.isUnknownVersion ? 'Unknown' : inv.version)) +
+            ' with payload ' + quote(inv.payload);
 
         appendToLog(logMessage);
         var isInvalidation = true;
@@ -106,8 +103,7 @@ cr.define('chrome.invalidations', function() {
     var totalCount = oId.objectId.totalCount || 0;
     var key = source + '-' + name;
     var time = new Date();
-    var version = oId.isUnknownVersion ? '?' :
-      oId.version;
+    var version = oId.isUnknownVersion ? '?' : oId.version;
     var payload = '';
     if (oId.hasOwnProperty('payload'))
       payload = oId.payload;
@@ -169,7 +165,7 @@ cr.define('chrome.invalidations', function() {
     }
     // Reenable those ObjectsIds still registered with this registrar.
     for (var i = 0; i < allIds.length; i++) {
-      var oId = { objectId: allIds[i], registrar: registrar };
+      var oId = {objectId: allIds[i], registrar: registrar};
       var isInvalidation = false;
       logToTable(oId, isInvalidation);
     }
diff --git a/chromium/chrome/browser/resources/about_nacl.js b/chromium/chrome/browser/resources/about_nacl.js
index 09519e16142..7bbc87c3f70 100644
--- a/chromium/chrome/browser/resources/about_nacl.js
+++ b/chromium/chrome/browser/resources/about_nacl.js
@@ -5,38 +5,38 @@
 var nacl = nacl || {};
 
 (function() {
-  /**
-   * Takes the |moduleListData| input argument which represents data about
-   * the currently available modules and populates the html jstemplate
-   * with that data. It expects an object structure like the above.
-   * @param {Object} moduleListData Information about available modules
-   */
-  function renderTemplate(moduleListData) {
-    // Process the template.
-    var input = new JsEvalContext(moduleListData);
-    var output = $('naclInfoTemplate');
-    jstProcess(input, output);
-  }
+/**
+ * Takes the |moduleListData| input argument which represents data about
+ * the currently available modules and populates the html jstemplate
+ * with that data. It expects an object structure like the above.
+ * @param {Object} moduleListData Information about available modules
+ */
+function renderTemplate(moduleListData) {
+  // Process the template.
+  var input = new JsEvalContext(moduleListData);
+  var output = $('naclInfoTemplate');
+  jstProcess(input, output);
+}
 
-  /**
-   * Asks the C++ NaClUIDOMHandler to get details about the NaCl and return
-   * the data in returnNaClInfo() (below).
-   */
-  function requestNaClInfo() {
-    chrome.send('requestNaClInfo');
-  }
+/**
+ * Asks the C++ NaClUIDOMHandler to get details about the NaCl and return
+ * the data in returnNaClInfo() (below).
+ */
+function requestNaClInfo() {
+  chrome.send('requestNaClInfo');
+}
 
-  /**
-   * Called by the WebUI to re-populate the page with data representing the
-   * current state of NaCl.
-   * @param {Object} moduleListData Information about available modules
-   */
-  nacl.returnNaClInfo = function(moduleListData) {
-    $('loading-message').hidden = 'hidden';
-    $('body-container').hidden = '';
-    renderTemplate(moduleListData);
-  };
+/**
+ * Called by the WebUI to re-populate the page with data representing the
+ * current state of NaCl.
+ * @param {Object} moduleListData Information about available modules
+ */
+nacl.returnNaClInfo = function(moduleListData) {
+  $('loading-message').hidden = 'hidden';
+  $('body-container').hidden = '';
+  renderTemplate(moduleListData);
+};
 
-  // Get data and have it displayed upon loading.
-  document.addEventListener('DOMContentLoaded', requestNaClInfo);
+// Get data and have it displayed upon loading.
+document.addEventListener('DOMContentLoaded', requestNaClInfo);
 })();
diff --git a/chromium/chrome/browser/resources/about_sys/about_sys.html b/chromium/chrome/browser/resources/about_sys/about_sys.html
index 9b1cd36485e..796eb293e28 100644
--- a/chromium/chrome/browser/resources/about_sys/about_sys.html
+++ b/chromium/chrome/browser/resources/about_sys/about_sys.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<html id="t" i18n-values="dir:textdirection;lang:language">
+<html id="t" dir="$i18n{textdirection}" lang="$i18n{language}">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title i18n-content="title"></title>
+    <title>$i18n{title}</title>
     <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
     <link rel="stylesheet" href="about_sys.css">
     <script src="chrome://resources/js/util.js"></script>
@@ -12,16 +12,16 @@
   </head>
   <body>
     <div id="header">
-      <h1 i18n-content="title"></h1>
-      <p i18n-content="description"></p>
+      <h1>$i18n{title}</h1>
+      <p>$i18n{description}</p>
     </div>
     <div id="content">
-      <h2 id="tableTitle" i18n-content="tableTitle"></h2>
+      <h2 id="tableTitle">$i18n{tableTitle}</h2>
       <div id="anchor" jscontent="anchor"></div>
-      <button id="expandAll" class="global-button" i18n-content="expandAllBtn">
+      <button id="expandAll" class="global-button">$i18n{expandAllBtn}</button>
+      <button id="collapseAll" class="global-button">
+        $i18n{collapseAllBtn}
       </button>
-      <button id="collapseAll" class="global-button"
-          i18n-content="collapseAllBtn"></button>
       <p id="status"></p>
       <table class="list" id="details">
         <tr jsselect="details">
diff --git a/chromium/chrome/browser/resources/about_sys/about_sys.js b/chromium/chrome/browser/resources/about_sys/about_sys.js
index f6d50fb6323..363a86a0953 100644
--- a/chromium/chrome/browser/resources/about_sys/about_sys.js
+++ b/chromium/chrome/browser/resources/about_sys/about_sys.js
@@ -107,7 +107,7 @@ function importLog(file) {
       if (parseSystemLog(this.result)) {
         // Reset table title and status
         $('tableTitle').textContent =
-              loadTimeData.getStringF('logFileTableTitle', file.name);
+            loadTimeData.getStringF('logFileTableTitle', file.name);
         $('status').textContent = '';
       } else {
         showError(file.name);
@@ -135,7 +135,7 @@ function parseSystemLog(text) {
     var delimiter = lines[i].indexOf('=');
     if (delimiter <= 0) {
       if (i == lines.length - 1)
-         break;
+        break;
       // If '=' is missing here, format is wrong.
       return false;
     }
@@ -151,8 +151,7 @@ function parseSystemLog(text) {
     // If these change, we should check for both the old and new versions.
     if (value == '<multiline>') {
       // Skip start delimiter.
-      if (i == len - 1 ||
-          lines[++i].indexOf(DELIM_START) == -1)
+      if (i == len - 1 || lines[++i].indexOf(DELIM_START) == -1)
         return false;
 
       ++i;
diff --git a/chromium/chrome/browser/resources/about_voicesearch.js b/chromium/chrome/browser/resources/about_voicesearch.js
index 7cf90a6a67b..bcf8cbd5f7b 100644
--- a/chromium/chrome/browser/resources/about_voicesearch.js
+++ b/chromium/chrome/browser/resources/about_voicesearch.js
@@ -2,36 +2,36 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-  /**
-   * Takes the |moduleListData| input argument which represents data about
-   * the currently available modules and populates the html jstemplate
-   * with that data. It expects an object structure like the above.
-   * @param {Object} moduleListData Information about available modules
-   */
-  function renderTemplate(moduleListData) {
-    var input = new JsEvalContext(moduleListData);
-    var output = $('voice-search-info-template');
-    jstProcess(input, output);
-  }
+/**
+ * Takes the |moduleListData| input argument which represents data about
+ * the currently available modules and populates the html jstemplate
+ * with that data. It expects an object structure like the above.
+ * @param {Object} moduleListData Information about available modules
+ */
+function renderTemplate(moduleListData) {
+  var input = new JsEvalContext(moduleListData);
+  var output = $('voice-search-info-template');
+  jstProcess(input, output);
+}
 
-  /**
-   * Asks the C++ VoiceSearchUIDOMHandler to get details about voice search and
-   * return the data in returnVoiceSearchInfo() (below).
-   */
-  function requestVoiceSearchInfo() {
-    chrome.send('requestVoiceSearchInfo');
-  }
+/**
+ * Asks the C++ VoiceSearchUIDOMHandler to get details about voice search and
+ * return the data in returnVoiceSearchInfo() (below).
+ */
+function requestVoiceSearchInfo() {
+  chrome.send('requestVoiceSearchInfo');
+}
 
-  /**
-   * Called by the WebUI to re-populate the page with data representing the
-   * current state of voice search.
-   * @param {Object} moduleListData Information about available modules.
-   */
-  function returnVoiceSearchInfo(moduleListData) {
-    $('loading-message').hidden = true;
-    $('body-container').hidden = false;
-    renderTemplate(moduleListData);
-  }
+/**
+ * Called by the WebUI to re-populate the page with data representing the
+ * current state of voice search.
+ * @param {Object} moduleListData Information about available modules.
+ */
+function returnVoiceSearchInfo(moduleListData) {
+  $('loading-message').hidden = true;
+  $('body-container').hidden = false;
+  renderTemplate(moduleListData);
+}
 
-  // Get data and have it displayed upon loading.
-  document.addEventListener('DOMContentLoaded', requestVoiceSearchInfo);
+// Get data and have it displayed upon loading.
+document.addEventListener('DOMContentLoaded', requestVoiceSearchInfo);
diff --git a/chromium/chrome/browser/resources/app_list/start_page.js b/chromium/chrome/browser/resources/app_list/start_page.js
index 428e81bf5f0..2a01e136998 100644
--- a/chromium/chrome/browser/resources/app_list/start_page.js
+++ b/chromium/chrome/browser/resources/app_list/start_page.js
@@ -114,5 +114,7 @@ cr.define('appList.startPage', function() {
   };
 });
 
-document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
+document.addEventListener('contextmenu', function(e) {
+  e.preventDefault();
+});
 document.addEventListener('DOMContentLoaded', appList.startPage.initialize);
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/adapter_broker.js b/chromium/chrome/browser/resources/bluetooth_internals/adapter_broker.js
index f6bff00a61a..37c8fb829a4 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/adapter_broker.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/adapter_broker.js
@@ -89,8 +89,7 @@ cr.define('adapter_broker', function() {
      */
     setClient: function(adapterClient) {
       adapterClient.binding = new interfaces.Bindings.Binding(
-          interfaces.BluetoothAdapter.AdapterClient,
-          adapterClient);
+          interfaces.BluetoothAdapter.AdapterClient, adapterClient);
 
       this.adapter_.setClient(
           adapterClient.binding.createInterfacePtrAndBind());
@@ -185,11 +184,8 @@ cr.define('adapter_broker', function() {
      * @param {!interfaces.BluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceAdded: function(deviceInfo) {
-      var event = new CustomEvent('deviceadded', {
-        detail: {
-          deviceInfo: deviceInfo
-        }
-      });
+      var event =
+          new CustomEvent('deviceadded', {detail: {deviceInfo: deviceInfo}});
       this.adapterBroker_.dispatchEvent(event);
     },
 
@@ -198,11 +194,8 @@ cr.define('adapter_broker', function() {
      * @param {!interfaces.BluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceChanged: function(deviceInfo) {
-      var event = new CustomEvent('devicechanged', {
-        detail: {
-          deviceInfo: deviceInfo
-        }
-      });
+      var event =
+          new CustomEvent('devicechanged', {detail: {deviceInfo: deviceInfo}});
       this.adapterBroker_.dispatchEvent(event);
     },
 
@@ -211,11 +204,8 @@ cr.define('adapter_broker', function() {
      * @param {!interfaces.BluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceRemoved: function(deviceInfo) {
-      var event = new CustomEvent('deviceremoved', {
-        detail: {
-          deviceInfo: deviceInfo
-        }
-      });
+      var event =
+          new CustomEvent('deviceremoved', {detail: {deviceInfo: deviceInfo}});
       this.adapterBroker_.dispatchEvent(event);
     },
   };
@@ -228,23 +218,27 @@ cr.define('adapter_broker', function() {
    *     rejects if Bluetooth is not supported.
    */
   function getAdapterBroker() {
-    if (adapterBroker) return Promise.resolve(adapterBroker);
-
-    return interfaces.setupInterfaces().then(function(adapter) {
-      var adapterFactory = new interfaces.BluetoothAdapter.AdapterFactoryPtr(
-          interfaces.FrameInterfaces.getInterface(
-              interfaces.BluetoothAdapter.AdapterFactory.name));
-
-      // Get an Adapter service.
-      return adapterFactory.getAdapter();
-    }).then(function(response) {
-      if (!response.adapter.ptr.isBound()) {
-        throw new Error('Bluetooth Not Supported on this platform.');
-      }
-
-      adapterBroker = new AdapterBroker(response.adapter);
-      return adapterBroker;
-    });
+    if (adapterBroker)
+      return Promise.resolve(adapterBroker);
+
+    return interfaces.setupInterfaces()
+        .then(function(adapter) {
+          var adapterFactory =
+              new interfaces.BluetoothAdapter.AdapterFactoryPtr(
+                  interfaces.FrameInterfaces.getInterface(
+                      interfaces.BluetoothAdapter.AdapterFactory.name));
+
+          // Get an Adapter service.
+          return adapterFactory.getAdapter();
+        })
+        .then(function(response) {
+          if (!response.adapter.ptr.isBound()) {
+            throw new Error('Bluetooth Not Supported on this platform.');
+          }
+
+          adapterBroker = new AdapterBroker(response.adapter);
+          return adapterBroker;
+        });
   }
 
   return {
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/adapter_page.js b/chromium/chrome/browser/resources/bluetooth_internals/adapter_page.js
index cf2ad130e11..98d296a192f 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/adapter_page.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/adapter_page.js
@@ -10,13 +10,13 @@ cr.define('adapter_page', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
 
   var PROPERTY_NAMES = {
-      address: 'Address',
-      name: 'Name',
-      initialized: 'Initialized',
-      present: 'Present',
-      powered: 'Powered',
-      discoverable: 'Discoverable',
-      discovering: 'Discovering',
+    address: 'Address',
+    name: 'Name',
+    initialized: 'Initialized',
+    present: 'Present',
+    powered: 'Powered',
+    discoverable: 'Discoverable',
+    discovering: 'Discovering',
   };
 
   /**
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js b/chromium/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
index e46d742cf6c..6eedc5a88cc 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
@@ -93,7 +93,8 @@ cr.define('bluetooth_internals', function() {
   function makeDeviceDetailsPage(deviceInfo) {
     var deviceDetailsPageId = 'devices/' + deviceInfo.address.toLowerCase();
     var deviceDetailsPage = PageManager.registeredPages[deviceDetailsPageId];
-    if (deviceDetailsPage) return deviceDetailsPage;
+    if (deviceDetailsPage)
+      return deviceDetailsPage;
 
     var pageSection = document.createElement('section');
     pageSection.hidden = true;
@@ -101,8 +102,8 @@ cr.define('bluetooth_internals', function() {
     $('page-container').appendChild(pageSection);
 
     deviceDetailsPage = new DeviceDetailsPage(deviceDetailsPageId, deviceInfo);
-    deviceDetailsPage.pageDiv.addEventListener('connectionchanged',
-        function(event) {
+    deviceDetailsPage.pageDiv.addEventListener(
+        'connectionchanged', function(event) {
           devices.updateConnectionStatus(
               event.detail.address, event.detail.status);
         });
@@ -111,8 +112,8 @@ cr.define('bluetooth_internals', function() {
       devices.addOrUpdate(event.detail.info);
     });
 
-    deviceDetailsPage.pageDiv.addEventListener('forgetpressed',
-        function(event) {
+    deviceDetailsPage.pageDiv.addEventListener(
+        'forgetpressed', function(event) {
           PageManager.showPageByName(devicesPage.name);
           removeDeviceDetailsPage(event.detail.address);
         });
@@ -139,7 +140,8 @@ cr.define('bluetooth_internals', function() {
   function updateDeviceDetailsPage(address) {
     var detailPageId = 'devices/' + address.toLowerCase();
     var page = PageManager.registeredPages[detailPageId];
-    if (page) page.redraw();
+    if (page)
+      page.redraw();
   }
 
   function updateStoppedDiscoverySession() {
@@ -191,8 +193,8 @@ cr.define('bluetooth_internals', function() {
     devicesPage.setDevices(devices);
 
     devicesPage.pageDiv.addEventListener('inspectpressed', function(event) {
-      var detailsPage = makeDeviceDetailsPage(
-          devices.getByAddress(event.detail.address));
+      var detailsPage =
+          makeDeviceDetailsPage(devices.getByAddress(event.detail.address));
       PageManager.showPageByName(detailsPage.name);
     });
 
@@ -214,8 +216,7 @@ cr.define('bluetooth_internals', function() {
           }
 
           devicesPage.setScanStatus(devices_page.ScanStatus.ON);
-          Snackbar.show(
-              'Failed to stop discovery session', SnackbarType.ERROR);
+          Snackbar.show('Failed to stop discovery session', SnackbarType.ERROR);
           userRequestedScanStop = false;
         });
 
@@ -223,26 +224,31 @@ cr.define('bluetooth_internals', function() {
       }
 
       devicesPage.setScanStatus(devices_page.ScanStatus.STARTING);
-      adapterBroker.startDiscoverySession().then(function(session) {
-        discoverySession = session;
-
-        discoverySession.ptr.setConnectionErrorHandler(function() {
-          updateStoppedDiscoverySession();
-          Snackbar.show('Discovery session ended', SnackbarType.WARNING);
-        });
-
-        devicesPage.setScanStatus(devices_page.ScanStatus.ON);
-      }).catch(function(error) {
-        devicesPage.setScanStatus(devices_page.ScanStatus.OFF);
-        Snackbar.show('Failed to start discovery session', SnackbarType.ERROR);
-        console.error(error);
-      });
+      adapterBroker.startDiscoverySession()
+          .then(function(session) {
+            discoverySession = session;
+
+            discoverySession.ptr.setConnectionErrorHandler(function() {
+              updateStoppedDiscoverySession();
+              Snackbar.show('Discovery session ended', SnackbarType.WARNING);
+            });
+
+            devicesPage.setScanStatus(devices_page.ScanStatus.ON);
+          })
+          .catch(function(error) {
+            devicesPage.setScanStatus(devices_page.ScanStatus.OFF);
+            Snackbar.show(
+                'Failed to start discovery session', SnackbarType.ERROR);
+            console.error(error);
+          });
     });
   }
 
   function setupPages() {
     sidebarObj = new window.sidebar.Sidebar($('sidebar'));
-    $('menu-btn').addEventListener('click', function() { sidebarObj.open(); });
+    $('menu-btn').addEventListener('click', function() {
+      sidebarObj.open();
+    });
     PageManager.addObserver(sidebarObj);
     PageManager.addObserver(new PageObserver());
 
@@ -272,15 +278,21 @@ cr.define('bluetooth_internals', function() {
     setupPages();
 
     adapter_broker.getAdapterBroker()
-      .then(function(broker) { adapterBroker = broker; })
-      .then(function() { return adapterBroker.getInfo(); })
-      .then(setupAdapterSystem)
-      .then(function() { return adapterBroker.getDevices(); })
-      .then(setupDeviceSystem)
-      .catch(function(error) {
-        Snackbar.show(error.message, SnackbarType.ERROR);
-        console.error(error);
-      });
+        .then(function(broker) {
+          adapterBroker = broker;
+        })
+        .then(function() {
+          return adapterBroker.getInfo();
+        })
+        .then(setupAdapterSystem)
+        .then(function() {
+          return adapterBroker.getDevices();
+        })
+        .then(setupDeviceSystem)
+        .catch(function(error) {
+          Snackbar.show(error.message, SnackbarType.ERROR);
+          console.error(error);
+        });
   }
 
   return {
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/characteristic_list.js b/chromium/chrome/browser/resources/bluetooth_internals/characteristic_list.js
index 17f4ebab97c..71d93b8c69c 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/characteristic_list.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/characteristic_list.js
@@ -91,24 +91,24 @@ cr.define('characteristic_list', function() {
       this.propertiesFieldSet_.setObject({
         broadcast: (this.info.properties & Property.BROADCAST) > 0,
         read: (this.info.properties & Property.READ) > 0,
-        write_without_response: (this.info.properties &
-            Property.WRITE_WITHOUT_RESPONSE) > 0,
+        write_without_response:
+            (this.info.properties & Property.WRITE_WITHOUT_RESPONSE) > 0,
         write: (this.info.properties & Property.WRITE) > 0,
         notify: (this.info.properties & Property.NOTIFY) > 0,
         indicate: (this.info.properties & Property.INDICATE) > 0,
-        authenticated_signed_writes: (this.info.properties &
-            Property.AUTHENTICATED_SIGNED_WRITES) > 0,
-        extended_properties: (this.info.properties &
-            Property.EXTENDED_PROPERTIES) > 0,
+        authenticated_signed_writes:
+            (this.info.properties & Property.AUTHENTICATED_SIGNED_WRITES) > 0,
+        extended_properties:
+            (this.info.properties & Property.EXTENDED_PROPERTIES) > 0,
         reliable_write: (this.info.properties & Property.RELIABLE_WRITE) > 0,
-        writable_auxiliaries: (this.info.properties &
-            Property.WRITABLE_AUXILIARIES) > 0,
-        read_encrypted: (this.info.properties & Property.READ_ENCRYPTED)  > 0,
-        write_encrypted: (this.info.properties & Property.WRITE_ENCRYPTED)  > 0,
-        read_encrypted_authenticated: (this.info.properties &
-            Property.READ_ENCRYPTED_AUTHENTICATED) > 0,
-        write_encrypted_authenticated: (this.info.properties &
-            Property.WRITE_ENCRYPTED_AUTHENTICATED) > 0,
+        writable_auxiliaries:
+            (this.info.properties & Property.WRITABLE_AUXILIARIES) > 0,
+        read_encrypted: (this.info.properties & Property.READ_ENCRYPTED) > 0,
+        write_encrypted: (this.info.properties & Property.WRITE_ENCRYPTED) > 0,
+        read_encrypted_authenticated:
+            (this.info.properties & Property.READ_ENCRYPTED_AUTHENTICATED) > 0,
+        write_encrypted_authenticated:
+            (this.info.properties & Property.WRITE_ENCRYPTED_AUTHENTICATED) > 0,
       });
 
       /** @private {!value_control.ValueControl} */
@@ -225,20 +225,23 @@ cr.define('characteristic_list', function() {
       this.serviceId_ = serviceId;
       this.characteristicsRequested_ = true;
 
-      device_broker.connectToDevice(deviceAddress).then(function(device) {
-        return device.getCharacteristics(serviceId);
-      }.bind(this)).then(function(response) {
-        this.setData(new ArrayDataModel(response.characteristics || []));
-        this.setSpinnerShowing(false);
-        this.characteristicsRequested_ = false;
-      }.bind(this)).catch(function(error) {
-        this.characteristicsRequested_ = false;
-        Snackbar.show(
-            deviceAddress + ': ' + error.message, SnackbarType.ERROR, 'Retry',
-            function() {
-              this.load(deviceAddress, serviceId);
-            }.bind(this));
-      }.bind(this));
+      device_broker.connectToDevice(deviceAddress)
+          .then(function(device) {
+            return device.getCharacteristics(serviceId);
+          }.bind(this))
+          .then(function(response) {
+            this.setData(new ArrayDataModel(response.characteristics || []));
+            this.setSpinnerShowing(false);
+            this.characteristicsRequested_ = false;
+          }.bind(this))
+          .catch(function(error) {
+            this.characteristicsRequested_ = false;
+            Snackbar.show(
+                deviceAddress + ': ' + error.message, SnackbarType.ERROR,
+                'Retry', function() {
+                  this.load(deviceAddress, serviceId);
+                }.bind(this));
+          }.bind(this));
     },
   };
 
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/device_broker.js b/chromium/chrome/browser/resources/bluetooth_internals/device_broker.js
index 60181338e34..5704e5a1a7e 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/device_broker.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/device_broker.js
@@ -29,27 +29,27 @@ cr.define('device_broker', function() {
     if (deviceOrPromise !== null)
       return Promise.resolve(deviceOrPromise);
 
-    var promise = adapter_broker.getAdapterBroker().then(
-        function(adapterBroker) {
-          return adapterBroker.connectToDevice(address);
-        }).then(function(device) {
-          connectedDevices.set(address, device);
-
-          device.ptr.setConnectionErrorHandler(function() {
-            connectedDevices.delete(address);
-          });
-
-          return device;
-        }).catch(function(error) {
-          connectedDevices.delete(address);
-          throw error;
-        });
+    var promise = adapter_broker.getAdapterBroker()
+                      .then(function(adapterBroker) {
+                        return adapterBroker.connectToDevice(address);
+                      })
+                      .then(function(device) {
+                        connectedDevices.set(address, device);
+
+                        device.ptr.setConnectionErrorHandler(function() {
+                          connectedDevices.delete(address);
+                        });
+
+                        return device;
+                      })
+                      .catch(function(error) {
+                        connectedDevices.delete(address);
+                        throw error;
+                      });
 
     connectedDevices.set(address, promise);
     return promise;
   }
 
-  return {
-    connectToDevice: connectToDevice
-  };
+  return {connectToDevice: connectToDevice};
 });
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/device_collection.js b/chromium/chrome/browser/resources/bluetooth_internals/device_collection.js
index 9fdc7435e7d..7245f26c2ef 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/device_collection.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/device_collection.js
@@ -65,7 +65,7 @@ cr.define('device_collection', function() {
         // on |deviceInfo|. The rssi property may be null, so it must be
         // re-assigned.
         Object.assign(oldDeviceInfo, deviceInfo);
-        oldDeviceInfo.rssi = { value: rssi };
+        oldDeviceInfo.rssi = {value: rssi};
         this.updateIndex(this.indexOf(oldDeviceInfo));
       } else {
         deviceInfo.connectionStatus = ConnectionStatus.DISCONNECTED;
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/device_details_page.js b/chromium/chrome/browser/resources/bluetooth_internals/device_details_page.js
index 3077fb53961..7a573910768 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/device_details_page.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/device_details_page.js
@@ -58,23 +58,21 @@ cr.define('device_details_page', function() {
     /** @private {?HTMLElement} */
     this.connectBtn_ = null;
 
-    this.pageDiv.appendChild(
-        document.importNode($('device-details-template').content,
-                            true /* deep */));
+    this.pageDiv.appendChild(document.importNode(
+        $('device-details-template').content, true /* deep */));
 
-    this.pageDiv.querySelector('.device-details').appendChild(
-        this.deviceFieldSet_);
+    this.pageDiv.querySelector('.device-details')
+        .appendChild(this.deviceFieldSet_);
     this.pageDiv.querySelector('.services').appendChild(this.serviceList_);
 
-    this.pageDiv.querySelector('.forget').addEventListener(
-        'click', function() {
-          this.disconnect();
-          this.pageDiv.dispatchEvent(new CustomEvent('forgetpressed', {
-              detail: {
-                address: this.deviceInfo.address,
-              },
-          }));
-        }.bind(this));
+    this.pageDiv.querySelector('.forget').addEventListener('click', function() {
+      this.disconnect();
+      this.pageDiv.dispatchEvent(new CustomEvent('forgetpressed', {
+        detail: {
+          address: this.deviceInfo.address,
+        },
+      }));
+    }.bind(this));
 
     this.connectBtn_ = this.pageDiv.querySelector('.disconnect');
     this.connectBtn_.addEventListener('click', function() {
@@ -95,8 +93,8 @@ cr.define('device_details_page', function() {
       this.updateConnectionStatus_(
           device_collection.ConnectionStatus.CONNECTING);
 
-      device_broker.connectToDevice(this.deviceInfo.address).then(
-          function(devicePtr) {
+      device_broker.connectToDevice(this.deviceInfo.address)
+          .then(function(devicePtr) {
             this.devicePtr_ = devicePtr;
 
             this.updateConnectionStatus_(
@@ -104,12 +102,14 @@ cr.define('device_details_page', function() {
 
             // Fetch services asynchronously.
             return this.devicePtr_.getServices();
-          }.bind(this)).then(function(response) {
+          }.bind(this))
+          .then(function(response) {
             this.deviceInfo.services = response.services;
             this.serviceList_.load(this.deviceInfo.address);
             this.redraw();
             this.fireDeviceInfoChanged_();
-          }.bind(this)).catch(function(error) {
+          }.bind(this))
+          .catch(function(error) {
             // If a connection error occurs while fetching the services, the
             // devicePtr reference must be removed.
             if (this.devicePtr_) {
@@ -128,7 +128,8 @@ cr.define('device_details_page', function() {
 
     /** Disconnects the page from the Bluetooth device. */
     disconnect: function() {
-      if (!this.devicePtr_) return;
+      if (!this.devicePtr_)
+        return;
 
       this.devicePtr_.disconnect();
       this.devicePtr_ = null;
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/device_table.js b/chromium/chrome/browser/resources/bluetooth_internals/device_table.js
index b177864f880..0068e27d123 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/device_table.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/device_table.js
@@ -27,8 +27,8 @@ cr.define('device_table', function() {
     /** @private {?Array<device_collection.Device>} */
     this.devices_ = null;
 
-    return document.importNode($('table-template').content.children[0],
-                               true /* deep */);
+    return document.importNode(
+        $('table-template').content.children[0], true /* deep */);
   });
 
   DeviceTable.prototype = {
@@ -140,7 +140,8 @@ cr.define('device_table', function() {
 
       for (var i = 0; i < this.headers_.length; i++) {
         // Skip the LINKS column. It has no data-field attribute.
-        if (i === COLUMNS.LINKS) continue;
+        if (i === COLUMNS.LINKS)
+          continue;
         row.insertCell();
       }
 
@@ -201,7 +202,8 @@ cr.define('device_table', function() {
       // Update the properties based on the header field path.
       for (var i = 0; i < this.headers_.length; i++) {
         // Skip the LINKS column. It has no data-field attribute.
-        if (i === COLUMNS.LINKS) continue;
+        if (i === COLUMNS.LINKS)
+          continue;
 
         var header = this.headers_[i];
         var propName = header.dataset.field;
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/expandable_list.js b/chromium/chrome/browser/resources/bluetooth_internals/expandable_list.js
index 5f543e688e1..05309cfa06a 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/expandable_list.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/expandable_list.js
@@ -30,8 +30,7 @@ cr.define('expandable_list', function() {
       this.classList.add('expandable-list-item');
       this.briefContent_ = document.createElement('div');
       this.briefContent_.classList.add('brief-content');
-      this.briefContent_.addEventListener(
-          'click', this.onExpand_.bind(this));
+      this.briefContent_.addEventListener('click', this.onExpand_.bind(this));
       this.appendChild(this.briefContent_);
 
       this.expandedContent_ = document.createElement('div');
@@ -137,5 +136,5 @@ cr.define('expandable_list', function() {
   return {
     ExpandableListItem: ExpandableListItem,
     ExpandableList: ExpandableList,
-  }
+  };
 });
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/interfaces.js b/chromium/chrome/browser/resources/bluetooth_internals/interfaces.js
index 20eb2b8b31d..5bec864ca04 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/interfaces.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/interfaces.js
@@ -9,11 +9,13 @@
 
 cr.define('interfaces', function() {
   /**
-  * Overriden by tests to give them a chance to setup a fake Mojo browser proxy
-  * before any other code executes.
-  * @return {!Promise} A promise firing once necessary setup has been completed.
-  */
-  var setupFn = window.setupFn || function() { return Promise.resolve(); };
+   * Overriden by tests to give them a chance to setup a fake Mojo browser proxy
+   * before any other code executes.
+   * @return {!Promise} A promise firing once necessary setup has been completed.
+   */
+  var setupFn = window.setupFn || function() {
+    return Promise.resolve();
+  };
 
   /**
    * Sets up Mojo interfaces and adds them to window.interfaces.
@@ -22,17 +24,18 @@ cr.define('interfaces', function() {
   function setupInterfaces() {
     return setupFn().then(function() {
       return importModules([
-        'content/public/renderer/frame_interfaces',
-        'device/bluetooth/public/interfaces/adapter.mojom',
-        'device/bluetooth/public/interfaces/device.mojom',
-        'mojo/public/js/bindings',
-      ]).then(function([frameInterfaces, bluetoothAdapter, bluetoothDevice,
-          bindings]) {
-        interfaces.BluetoothAdapter = bluetoothAdapter;
-        interfaces.BluetoothDevice = bluetoothDevice;
-        interfaces.Bindings = bindings;
-        interfaces.FrameInterfaces = frameInterfaces;
-      });
+               'content/public/renderer/frame_interfaces',
+               'device/bluetooth/public/interfaces/adapter.mojom',
+               'device/bluetooth/public/interfaces/device.mojom',
+               'mojo/public/js/bindings',
+             ])
+          .then(function(
+              [frameInterfaces, bluetoothAdapter, bluetoothDevice, bindings]) {
+            interfaces.BluetoothAdapter = bluetoothAdapter;
+            interfaces.BluetoothDevice = bluetoothDevice;
+            interfaces.Bindings = bindings;
+            interfaces.FrameInterfaces = frameInterfaces;
+          });
     });
   }
 
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/service_list.js b/chromium/chrome/browser/resources/bluetooth_internals/service_list.js
index 0512e54aebc..60df11061dc 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/service_list.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/service_list.js
@@ -147,18 +147,22 @@ cr.define('service_list', function() {
       this.deviceAddress_ = deviceAddress;
       this.servicesRequested_ = true;
 
-      device_broker.connectToDevice(this.deviceAddress_).then(
-          function(device) {
+      device_broker.connectToDevice(this.deviceAddress_)
+          .then(function(device) {
             return device.getServices();
-          }.bind(this)).then(function(response) {
+          }.bind(this))
+          .then(function(response) {
             this.setData(new ArrayDataModel(response.services));
             this.setSpinnerShowing(false);
             this.servicesRequested_ = false;
-          }.bind(this)).catch(function(error) {
+          }.bind(this))
+          .catch(function(error) {
             this.servicesRequested_ = false;
             Snackbar.show(
                 deviceAddress + ': ' + error.message, SnackbarType.ERROR,
-                'Retry', function() { this.load(deviceAddress); }.bind(this));
+                'Retry', function() {
+                  this.load(deviceAddress);
+                }.bind(this));
           }.bind(this));
     },
   };
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/sidebar.js b/chromium/chrome/browser/resources/bluetooth_internals/sidebar.js
index 9071614f354..4fb3076d01d 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/sidebar.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/sidebar.js
@@ -35,8 +35,11 @@ cr.define('sidebar', function() {
     this.overlayDiv_ = this.sidebarDiv_.querySelector('.overlay');
     this.overlayDiv_.addEventListener('click', this.close.bind(this));
 
-    window.matchMedia('screen and (max-width: 600px)').addListener(
-        function(query) { if (!query.matches) this.close(); }.bind(this));
+    window.matchMedia('screen and (max-width: 600px)')
+        .addListener(function(query) {
+          if (!query.matches)
+            this.close();
+        }.bind(this));
   }
 
   Sidebar.prototype = {
@@ -109,7 +112,5 @@ cr.define('sidebar', function() {
     },
   };
 
-  return {
-    Sidebar: Sidebar
-  };
+  return {Sidebar: Sidebar};
 });
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/snackbar.js b/chromium/chrome/browser/resources/bluetooth_internals/snackbar.js
index 54db660f055..c074ac88c4f 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/snackbar.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/snackbar.js
@@ -72,7 +72,8 @@ cr.define('snackbar', function() {
       this.actionLink_.textContent = options.actionText || 'Dismiss';
 
       this.actionLink_.addEventListener('click', function() {
-        if (options.action) options.action();
+        if (options.action)
+          options.action();
         this.dismiss();
       }.bind(this));
     },
@@ -82,8 +83,10 @@ cr.define('snackbar', function() {
      */
     show: function() {
       this.classList.add('open');
-      if (Snackbar.hasContentFocus_) this.startTimeout_();
-      else this.stopTimeout_();
+      if (Snackbar.hasContentFocus_)
+        this.startTimeout_();
+      else
+        this.stopTimeout_();
 
       document.addEventListener('contentfocus', this.boundStartTimeout_);
       document.addEventListener('contentblur', this.boundStopTimeout_);
@@ -224,8 +227,10 @@ cr.define('snackbar', function() {
    *     dismissing.
    */
   Snackbar.dismiss = function(clearQueue) {
-    if (clearQueue) Snackbar.queue_ = [];
-    if (Snackbar.current_) return Snackbar.current_.dismiss();
+    if (clearQueue)
+      Snackbar.queue_ = [];
+    if (Snackbar.current_)
+      return Snackbar.current_.dismiss();
     return Promise.resolve();
   };
 
diff --git a/chromium/chrome/browser/resources/bluetooth_internals/value_control.js b/chromium/chrome/browser/resources/bluetooth_internals/value_control.js
index bd5673f3d61..04b5a4aabed 100644
--- a/chromium/chrome/browser/resources/bluetooth_internals/value_control.js
+++ b/chromium/chrome/browser/resources/bluetooth_internals/value_control.js
@@ -341,29 +341,33 @@ cr.define('value_control', function() {
     readValue_: function() {
       this.readBtn_.disabled = true;
 
-      device_broker.connectToDevice(this.deviceAddress_).then(function(device) {
-        if (this.descriptorId_) {
-          return device.readValueForDescriptor(
-              this.serviceId_, this.characteristicId_, this.descriptorId_);
-        }
-
-        return device.readValueForCharacteristic(
-            this.serviceId_, this.characteristicId_);
-      }.bind(this)).then(function(response) {
-        this.readBtn_.disabled = false;
-
-        if (response.result === interfaces.BluetoothDevice.GattResult.SUCCESS) {
-          this.setValue(response.value);
-          Snackbar.show(
-              this.deviceAddress_ + ': Read succeeded', SnackbarType.SUCCESS);
-          return;
-        }
-
-        var errorString = this.getErrorString_(response.result);
-        Snackbar.show(
-            this.deviceAddress_ + ': ' + errorString, SnackbarType.ERROR,
-            'Retry', this.readValue_.bind(this));
-      }.bind(this));
+      device_broker.connectToDevice(this.deviceAddress_)
+          .then(function(device) {
+            if (this.descriptorId_) {
+              return device.readValueForDescriptor(
+                  this.serviceId_, this.characteristicId_, this.descriptorId_);
+            }
+
+            return device.readValueForCharacteristic(
+                this.serviceId_, this.characteristicId_);
+          }.bind(this))
+          .then(function(response) {
+            this.readBtn_.disabled = false;
+
+            if (response.result ===
+                interfaces.BluetoothDevice.GattResult.SUCCESS) {
+              this.setValue(response.value);
+              Snackbar.show(
+                  this.deviceAddress_ + ': Read succeeded',
+                  SnackbarType.SUCCESS);
+              return;
+            }
+
+            var errorString = this.getErrorString_(response.result);
+            Snackbar.show(
+                this.deviceAddress_ + ': ' + errorString, SnackbarType.ERROR,
+                'Retry', this.readValue_.bind(this));
+          }.bind(this));
     },
 
     /**
@@ -376,31 +380,36 @@ cr.define('value_control', function() {
     writeValue_: function() {
       this.writeBtn_.disabled = true;
 
-      device_broker.connectToDevice(this.deviceAddress_).then(function(device) {
-        if (this.descriptorId_) {
-          return device.writeValueForDescriptor(
-              this.serviceId_, this.characteristicId_, this.descriptorId_,
-              this.value_.getArray());
-        }
-
-        return device.writeValueForCharacteristic(
-            this.serviceId_, this.characteristicId_, this.value_.getArray());
-      }.bind(this)).then(function(response) {
-        this.writeBtn_.disabled = false;
-
-        if (response.result === interfaces.BluetoothDevice.GattResult.SUCCESS) {
-          Snackbar.show(
-              this.deviceAddress_ + ': Write succeeded', SnackbarType.SUCCESS);
-          return;
-        }
-
-        var errorString = this.getErrorString_(response.result);
-        Snackbar.show(
-            this.deviceAddress_ + ': ' + errorString, SnackbarType.ERROR,
-            'Retry', this.writeValue_.bind(this));
-      }.bind(this));
+      device_broker.connectToDevice(this.deviceAddress_)
+          .then(function(device) {
+            if (this.descriptorId_) {
+              return device.writeValueForDescriptor(
+                  this.serviceId_, this.characteristicId_, this.descriptorId_,
+                  this.value_.getArray());
+            }
+
+            return device.writeValueForCharacteristic(
+                this.serviceId_, this.characteristicId_,
+                this.value_.getArray());
+          }.bind(this))
+          .then(function(response) {
+            this.writeBtn_.disabled = false;
+
+            if (response.result ===
+                interfaces.BluetoothDevice.GattResult.SUCCESS) {
+              Snackbar.show(
+                  this.deviceAddress_ + ': Write succeeded',
+                  SnackbarType.SUCCESS);
+              return;
+            }
+
+            var errorString = this.getErrorString_(response.result);
+            Snackbar.show(
+                this.deviceAddress_ + ': ' + errorString, SnackbarType.ERROR,
+                'Retry', this.writeValue_.bind(this));
+          }.bind(this));
     },
-  }
+  };
 
   return {
     ValueControl: ValueControl,
diff --git a/chromium/chrome/browser/resources/bookmark_manager/js/main.js b/chromium/chrome/browser/resources/bookmark_manager/js/main.js
index ad2568bd133..c2689e2185b 100644
--- a/chromium/chrome/browser/resources/bookmark_manager/js/main.js
+++ b/chromium/chrome/browser/resources/bookmark_manager/js/main.js
@@ -883,7 +883,7 @@ function getSelectedBookmarkNodes(opt_target) {
  */
 function getSelectedBookmarkIds(opt_target) {
   var selectedNodes = getSelectedBookmarkNodes(opt_target);
-  selectedNodes.sort(function(a, b) { return a.index - b.index });
+  selectedNodes.sort(function(a, b) { return a.index - b.index; });
   return selectedNodes.map(function(node) {
     return node.id;
   });
diff --git a/chromium/chrome/browser/resources/cast/cast.js b/chromium/chrome/browser/resources/cast/cast.js
index 57c4a160396..02e5305e3c2 100644
--- a/chromium/chrome/browser/resources/cast/cast.js
+++ b/chromium/chrome/browser/resources/cast/cast.js
@@ -21,14 +21,12 @@ window.addEventListener('load', function init() {
     if (newHash !== oldHash) {
       window.location.hash = newHash;
     }
-  }).observe(extensionView, {
-    attributes: true
-  });
+  }).observe(extensionView, {attributes: true});
 
   window.addEventListener('hashchange', function() {
     var newHash = window.location.hash.substr(1);
-    var extensionViewSrcParts = splitUrlOnHash(
-        extensionView.getAttribute('src'));
+    var extensionViewSrcParts =
+        splitUrlOnHash(extensionView.getAttribute('src'));
     if (newHash !== extensionViewSrcParts[1]) {
       extensionView.load(extensionViewSrcParts[0] + '#' + newHash);
     }
@@ -36,6 +34,6 @@ window.addEventListener('load', function init() {
 
   extensionView.load(
       'chrome-extension://' + loadTimeData.getString('extensionId') +
-      '/cast_setup/index.html#' + window.location.hash.substr(1) || 'devices');
+          '/cast_setup/index.html#' + window.location.hash.substr(1) ||
+      'devices');
 });
-
diff --git a/chromium/chrome/browser/resources/certificate_viewer.js b/chromium/chrome/browser/resources/certificate_viewer.js
index e95a1d9d993..447534b08c6 100644
--- a/chromium/chrome/browser/resources/certificate_viewer.js
+++ b/chromium/chrome/browser/resources/certificate_viewer.js
@@ -52,9 +52,10 @@ cr.define('cert_viewer', function() {
   function oneShot(fn) {
     var fired = false;
     return function() {
-       if (fired) return;
-       fired = true;
-       fn();
+      if (fired)
+        return;
+      fired = true;
+      fn();
     };
   }
 
@@ -130,17 +131,15 @@ cr.define('cert_viewer', function() {
    * @param {Object} tree Dictionary describing the tree structure.
    * @return {cr.ui.TreeItem} Tree node corresponding to the input dictionary.
    */
-  function constructTree(tree)
-  {
+  function constructTree(tree) {
     var treeItem = new cr.ui.TreeItem({
-        label: tree.label,
-        detail: {payload: tree.payload ? tree.payload : {},
-            children: {}
-        }});
+      label: tree.label,
+      detail: {payload: tree.payload ? tree.payload : {}, children: {}}
+    });
     if (tree.children) {
       for (var i = 0; i < tree.children.length; i++) {
-        treeItem.add(treeItem.detail.children[i] =
-            constructTree(tree.children[i]));
+        treeItem.add(
+            treeItem.detail.children[i] = constructTree(tree.children[i]));
       }
     }
     return treeItem;
@@ -175,8 +174,8 @@ cr.define('cert_viewer', function() {
   function getCertificateFields(certFields) {
     clearCertificateFields();
     var treeItem = $('cert-fields');
-    treeItem.add(treeItem.detail.children['root'] =
-        constructTree(certFields[0]));
+    treeItem.add(
+        treeItem.detail.children['root'] = constructTree(certFields[0]));
     revealTree(treeItem);
     // Ensure the list is scrolled to the top by selecting the first item.
     treeItem.children[0].selected = true;
diff --git a/chromium/chrome/browser/resources/chromeos/chromevox/BUILD.gn b/chromium/chrome/browser/resources/chromeos/chromevox/BUILD.gn
index 913079e5d3f..5f75f2aaf29 100644
--- a/chromium/chrome/browser/resources/chromeos/chromevox/BUILD.gn
+++ b/chromium/chrome/browser/resources/chromeos/chromevox/BUILD.gn
@@ -146,6 +146,7 @@ chromevox_modules = [
   "cvox2/background/panel_command.js",
   "cvox2/background/panel_menu.js",
   "cvox2/background/panel_menu_item.js",
+  "cvox2/background/recovery_strategy.js",
   "cvox2/background/tabs_automation_handler.js",
   "cvox2/background/tree_walker.js",
   "cvox2/background/tutorial.js",
@@ -679,6 +680,7 @@ js2gtest("chromevox_extjs_tests") {
     "cvox2/background/live_regions_test.extjs",
     "cvox2/background/output_test.extjs",
     "cvox2/background/panel_test.extjs",
+    "cvox2/background/recovery_strategy_test.extjs",
     "cvox2/background/tree_walker_test.extjs",
     "host/chrome/tts_background_test.extjs",
   ]
diff --git a/chromium/chrome/browser/resources/chromeos/chromevox/strings/chromevox_strings.grd b/chromium/chrome/browser/resources/chromeos/chromevox/strings/chromevox_strings.grd
index 7ed86e84264..6b81e38dbe5 100644
--- a/chromium/chrome/browser/resources/chromeos/chromevox/strings/chromevox_strings.grd
+++ b/chromium/chrome/browser/resources/chromeos/chromevox/strings/chromevox_strings.grd
@@ -1699,7 +1699,7 @@
       <message desc="In an editable text box, describes a blank line." name="IDS_CHROMEVOX_TEXT_BOX_BLANK">
         Blank
       </message>
-      <message desc="In an editable text box, describes a line with only whitespace." name="IDS_CHROMEVOX_TEXT_BOX_WHITESPACE">
+      <message desc="In an editable text box, describes a line with only whitespace." name="IDS_CHROMEVOX_TEXT_BOX_WHITESPACE" meaning="UI element">
         Space
       </message>
       <message desc="Further describes a list-like element with a number of items. e.g. This will be combined with other messages to produce: List with 3 items." name="IDS_CHROMEVOX_LIST_WITH_ITEMS_NOT_PLURALIZED">
@@ -2515,6 +2515,9 @@
       <message desc="Title displayed in the panel for the ChromeVox menu." name="IDS_CHROMEVOX_PANEL_MENU_CHROMEVOX">
         ChromeVox
       </message>
+      <message desc="Title displayed in the panel for the actions menu." name="IDS_CHROMEVOX_PANEL_MENU_ACTIONS">
+        Actions
+      </message>
       <message desc="Title displayed in the panel when there are no menu items." name="IDS_CHROMEVOX_PANEL_MENU_ITEM_NONE">
         No items.
       </message>
@@ -2730,6 +2733,57 @@ If you're done with the tutorial, use ChromeVox to navigate to the Close button
       <message desc="Description of a command that toggles between 6 and 8 dot braille." name="IDS_CHROMEVOX_TOGGLE_BRAILLE_TABLE">
         Toggle between 6 and 8 dot braille
       </message>
+      <message desc="Spoken when a user navigates to the beginning of a misspelled word." name="IDS_CHROMEVOX_MISSPELLING_START">
+        Misspelling start
+      </message>
+      <message desc="Spoken when a user navigates to the end of a misspelled word." name="IDS_CHROMEVOX_MISSPELLING_END">
+        Misspelling end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of a grammar error." name="IDS_CHROMEVOX_GRAMMAR_START">
+        Grammar error start
+      </message>
+      <message desc="Spoken when a user navigates to the end of a grammar error." name="IDS_CHROMEVOX_GRAMMAR_END">
+        Grammar error end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of a text match from a find in page." name="IDS_CHROMEVOX_TEXT_MATCH_START">
+        Text match start
+      </message>
+      <message desc="Spoken when a user navigates to the end of a text match from a find in page." name="IDS_CHROMEVOX_TEXT_MATCH_END">
+        Text match end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of bolded text." name="IDS_CHROMEVOX_BOLD_START">
+        Bold start
+      </message>
+      <message desc="Spoken when a user navigates to the end of bolded text." name="IDS_CHROMEVOX_BOLD_END">
+        Bold end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of italic text." name="IDS_CHROMEVOX_ITALIC_START">
+        Italic start
+      </message>
+      <message desc="Spoken when a user navigates to the end of italic text." name="IDS_CHROMEVOX_ITALIC_END">
+        Italic end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of underline text." name="IDS_CHROMEVOX_UNDERLINE_START">
+        Underline start
+      </message>
+      <message desc="Spoken when a user navigates to the end of underline text." name="IDS_CHROMEVOX_UNDERLINE_END">
+        Underline end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of strike through text." name="IDS_CHROMEVOX_LINE_THROUGH_START">
+        Strike through start
+      </message>
+      <message desc="Spoken when a user navigates to the end of strike through text." name="IDS_CHROMEVOX_LINE_THROUGH_END">
+        Strike through end
+      </message>
+      <message desc="Spoken when a user navigates to the beginning of a link's text." name="IDS_CHROMEVOX_LINK_START">
+        Link start
+      </message>
+      <message desc="Spoken when a user navigates to the end of a link's text." name="IDS_CHROMEVOX_LINK_END">
+        Link end
+      </message>
+      <message desc="Shown to a user when they press a braille keyboard command that requires on screen keyboard to be enabled." name="IDS_CHROMEVOX_ENABLE_VIRTUAL_KEYBOARD">
+        Please enable the on screen keyboard under status tray, accessibility to use extended braille commands.
+      </message>
     </messages>
   </release>
 </grit>
diff --git a/chromium/chrome/browser/resources/chromeos/compiled_resources2.gyp b/chromium/chrome/browser/resources/chromeos/compiled_resources2.gyp
index 7269606b850..c00877f1a61 100644
--- a/chromium/chrome/browser/resources/chromeos/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/chromeos/compiled_resources2.gyp
@@ -14,7 +14,7 @@
           '<(DEPTH)/third_party/jstemplate/util.js',
           '<(DEPTH)/third_party/jstemplate/jsevalcontext.js',
           '<(DEPTH)/third_party/jstemplate/jstemplate.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_onc_types.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js',
           '<(DEPTH)/ui/webui/resources/js/action_link.js',
           '<(DEPTH)/ui/webui/resources/js/cr.js',
           '<(DEPTH)/ui/webui/resources/js/cr/event_target.js',
@@ -53,6 +53,7 @@
           '../chromeos/keyboard/keyboard_utils.js',
           '<(DEPTH)/ui/webui/resources/js/i18n_behavior.js',
           '<(DEPTH)/ui/webui/resources/js/web_ui_listener_behavior.js',
+          '../settings/page_visibility.js',
           '../settings/route.js',
           '../settings/people_page/easy_unlock_browser_proxy.js',
           '../settings/people_page/fingerprint_browser_proxy.js',
@@ -86,7 +87,7 @@
           '<(DEPTH)/third_party/closure_compiler/externs/networking_private.js',
           '<(DEPTH)/third_party/closure_compiler/externs/chrome_send.js',
           '<(DEPTH)/third_party/closure_compiler/externs/web_animations.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_network_icon_externs.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon_externs.js',
           '../options/options_bundle.js',
           # Note: ^ this is just a copy of
           # ../options/compiled_resources2.gyp:options_bundle#source_files. Most
@@ -108,7 +109,7 @@
           '<(DEPTH)/third_party/jstemplate/util.js',
           '<(DEPTH)/third_party/jstemplate/jsevalcontext.js',
           '<(DEPTH)/third_party/jstemplate/jstemplate.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_onc_types.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js',
           '<(DEPTH)/ui/webui/resources/js/action_link.js',
           '<(DEPTH)/ui/webui/resources/js/cr.js',
           '<(DEPTH)/ui/webui/resources/js/cr/event_target.js',
@@ -147,6 +148,7 @@
           '../chromeos/keyboard/keyboard_utils.js',
           '<(DEPTH)/ui/webui/resources/js/i18n_behavior.js',
           '<(DEPTH)/ui/webui/resources/js/web_ui_listener_behavior.js',
+          '../settings/page_visibility.js',
           '../settings/route.js',
           '../settings/people_page/easy_unlock_browser_proxy.js',
           '../settings/people_page/fingerprint_browser_proxy.js',
@@ -180,7 +182,7 @@
           '<(DEPTH)/third_party/closure_compiler/externs/networking_private.js',
           '<(DEPTH)/third_party/closure_compiler/externs/chrome_send.js',
           '<(DEPTH)/third_party/closure_compiler/externs/web_animations.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_network_icon_externs.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon_externs.js',
           '../options/options_bundle.js',
           # Note: ^ this is just a copy of
           # ../options/compiled_resources2.gyp:options_bundle#source_files. Most
diff --git a/chromium/chrome/browser/resources/chromeos/echo/manifest.json b/chromium/chrome/browser/resources/chromeos/echo/manifest.json
index c7bcde955bb..8297d275f6e 100644
--- a/chromium/chrome/browser/resources/chromeos/echo/manifest.json
+++ b/chromium/chrome/browser/resources/chromeos/echo/manifest.json
@@ -40,7 +40,8 @@
   "externally_connectable": {
     "ids": ["*"],
     "matches": [
-      "*://www.google.com/*chrome/devices/goodies.html*"
+      "*://www.google.com/*chromebook/*",
+      "*://chromebook-dot-googwebreview.appspot.com/*chromebook/*"
     ]
   }
 }
diff --git a/chromium/chrome/browser/resources/chromeos/genius_app/manifest.json b/chromium/chrome/browser/resources/chromeos/genius_app/manifest.json
index 46771740b21..6a625f766a7 100644
--- a/chromium/chrome/browser/resources/chromeos/genius_app/manifest.json
+++ b/chromium/chrome/browser/resources/chromeos/genius_app/manifest.json
@@ -35,10 +35,9 @@
     "unlimitedStorage",
     "https://*.ytimg.com/*",
     "https://www.google.com/*",
+    "https://support.google.com/*",
     "https://commondatastorage.googleapis.com/*",
     "https://storage.googleapis.com/*",
-    "https://www-googleapis-test.sandbox.google.com/*",
-    "https://www.googleapis.com/*",
     "https://www.google-analytics.com/"
   ],
   "oauth2": {
diff --git a/chromium/chrome/browser/resources/chromeos/input_method/google_input_tools_manifest.json b/chromium/chrome/browser/resources/chromeos/input_method/google_input_tools_manifest.json
deleted file mode 100644
index 1b6c50484c4..00000000000
--- a/chromium/chrome/browser/resources/chromeos/input_method/google_input_tools_manifest.json
+++ /dev/null
@@ -1,856 +0,0 @@
-{
-  "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDyRb75ZzKuseD4ZEposVSGTJQjdySVjVA0s2hgFYDJ3hRh5wATyWsLL7EYvbfi2K+hbYBvrxOQYot4eArQloShy4tdQTZovmTXIINIOzN3j/avFfrYSnJNV6C6gpGKglGVEw/lhf+6WdSnGoWjqXWQnnJltc2JtiAk51nkFJUWZwIDAQAB",
-  "name": "__MSG_chos_inputtool_title__",
-  "version": "4.3.2.3",
-  "description": "The Google Input Tools",
-  "default_locale": "en",
-  "incognito": "split",
-  "permissions": [
-    "accessibilityFeatures.read",
-    "app.window.alpha",
-    "app.window.alwaysOnTop",
-    "app.window.ime",
-    "audioCapture",
-    "https://clients4.google.com/",
-    "https://dl.google.com/",
-    "https://www.googleapis.com/",
-    "input",
-    "inputMethodPrivate",
-    "metricsPrivate",
-    "system.display",
-    "tabs",
-    "tts",
-    "unlimitedStorage",
-    "virtualKeyboardPrivate"
-  ],
-  "background": {
-    "page": "background.html"
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "https://www.googleapis.com/auth/imesync*"
-      ],
-      "js": [
-        "chos_inject-debug.js"
-      ]
-    }
-  ],
-  "ime_path": "/usr/share/chromeos-assets/input_methods/input_tools",
-  "input_components": [
-    {
-      "name": "__MSG_inputmethod_pinyin__",
-      "type": "ime",
-      "id": "zh-t-i0-pinyin",
-      "indicator": "\u62fc",
-      "description": "Pinyin",
-      "language": [
-        "zh-CN",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=pinyin-zh-CN.compact.qwerty&language=zh-CN&passwordLayout=pinyin-zh-CN.en.compact.qwerty&name=inputmethod_pinyin",
-      "options_page": "hmm_options.html?code=zh-t-i0-pinyin"
-    },
-    {
-      "name": "__MSG_inputmethod_traditional_pinyin__",
-      "type": "ime",
-      "id": "zh-hant-t-i0-pinyin",
-      "indicator": "\u62fc",
-      "description": "Pinyin for Tranditional Chinese",
-      "language": [
-        "zh-TW",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=pinyin-zh-TW&language=zh-TW&passwordLayout=pinyin-zh-TW&name=inputmethod_traditional_pinyin",
-      "options_page": "hmm_options.html?code=zh-hant-t-i0-pinyin"
-    },
-    {
-      "name": "__MSG_inputmethod_cangjie__",
-      "type": "ime",
-      "id": "zh-hant-t-i0-cangjie-1987",
-      "indicator": "\u5009",
-      "description": "Cangjie",
-      "language": [
-        "zh-TW",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=cangjie&language=zh-TW&passwordLayout=cangjie&name=inputmethod_cangjie"
-    },
-    {
-      "name": "__MSG_inputmethod_quick__",
-      "type": "ime",
-      "id": "zh-hant-t-i0-cangjie-1987-x-m0-simplified",
-      "indicator": "\u901f",
-      "description": "Quick",
-      "language": [
-        "zh-TW",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=quick&language=zh-TW&passwordLayout=quick&name=inputmethod_quick"
-    },
-    {
-      "name": "__MSG_inputmethod_cantonese__",
-      "type": "ime",
-      "id": "yue-hant-t-i0-und",
-      "indicator": "\u7CA4",
-      "description": "Cantonese",
-      "language": [
-        "zh-TW"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=us&language=zh-CN&passwordLayout=us&name=inputmethod_cantonese"
-    },
-    {
-      "name": "__MSG_inputmethod_wubi__",
-      "type": "ime",
-      "id": "zh-t-i0-wubi-1986",
-      "indicator": "\u4e94",
-      "description": "Wubi",
-      "language": [
-        "zh-CN",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=wubi&language=zh-CN&passwordLayout=wubi&name=inputmethod_wubi"
-    },
-    {
-      "name": "__MSG_inputmethod_array__",
-      "type": "ime",
-      "id": "zh-hant-t-i0-array-1992",
-      "indicator": "\u884c\u5217",
-      "description": "Array",
-      "language": [
-        "zh-TW",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=array&language=zh-TW&passwordLayout=array&name=inputmethod_array"
-    },
-    {
-      "name": "__MSG_inputmethod_dayi__",
-      "type": "ime",
-      "id": "zh-hant-t-i0-dayi-1988",
-      "indicator": "\u5927\u6613",
-      "description": "Dayi",
-      "language": [
-        "zh-TW",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=dayi&language=zh-TW&passwordLayout=dayi&name=inputmethod_dayi"
-    },
-    {
-      "name": "__MSG_inputmethod_zhuyin__",
-      "type": "ime",
-      "id": "zh-hant-t-i0-und",
-      "indicator": "\u6CE8",
-      "description": "Zhuyin",
-      "language": [
-        "zh-TW",
-        "zh"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=zhuyin.compact.qwerty&language=zh-TW&passwordLayout=zhuyin.en.compact.qwerty&name=inputmethod_zhuyin",
-      "options_page": "hmm_options.html?code=zh-hant-t-i0-und"
-    },
-    {
-      "name": "__MSG_transliteration_am__",
-      "type": "ime",
-      "id": "am-t-i0-und",
-      "description": "Amharic",
-      "language": "am",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=am&passwordLayout=t13n&name=transliteration_am"
-    },
-    {
-      "name": "__MSG_transliteration_ar__",
-      "type": "ime",
-      "id": "ar-t-i0-und",
-      "description": "Arabic",
-      "language": "ar",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n-rtl&language=ar&passwordLayout=t13n-rtl&name=transliteration_ar"
-    },
-    {
-      "name": "__MSG_transliteration_bn__",
-      "type": "ime",
-      "id": "bn-t-i0-und",
-      "description": "Bengali",
-      "language": "bn",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=bn&passwordLayout=t13n&name=transliteration_bn"
-    },
-    {
-      "name": "__MSG_transliteration_el__",
-      "type": "ime",
-      "id": "el-t-i0-und",
-      "description": "Greek",
-      "language": "el",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=el&passwordLayout=t13n&name=transliteration_el"
-    },
-    {
-      "name": "__MSG_transliteration_fa__",
-      "type": "ime",
-      "id": "fa-t-i0-und",
-      "description": "Persian",
-      "language": "fa",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n-rtl&language=fa&passwordLayout=t13n-rtl&name=transliteration_fa"
-    },
-    {
-      "name": "__MSG_transliteration_gu__",
-      "type": "ime",
-      "id": "gu-t-i0-und",
-      "description": "Gujarati",
-      "language": "gu",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=gu&passwordLayout=t13n&name=transliteration_gu"
-    },
-    {
-      "name": "__MSG_transliteration_he__",
-      "type": "ime",
-      "id": "he-t-i0-und",
-      "description": "Hebrew",
-      "language": "he",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n-rtl&language=he&passwordLayout=t13n-rtl&name=transliteration_he"
-    },
-    {
-      "name": "__MSG_transliteration_hi__",
-      "type": "ime",
-      "id": "hi-t-i0-und",
-      "description": "Hindi",
-      "language": "hi",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=hi&passwordLayout=t13n&name=transliteration_hi"
-    },
-    {
-      "name": "__MSG_transliteration_kn__",
-      "type": "ime",
-      "id": "kn-t-i0-und",
-      "description": "Kannada",
-      "language": "kn",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=kn&passwordLayout=t13n&name=transliteration_kn"
-    },
-    {
-      "name": "__MSG_transliteration_ml__",
-      "type": "ime",
-      "id": "ml-t-i0-und",
-      "description": "Malayalam",
-      "language": "ml",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=ml&passwordLayout=t13n&name=transliteration_ml"
-    },
-    {
-      "name": "__MSG_transliteration_mr__",
-      "type": "ime",
-      "id": "mr-t-i0-und",
-      "description": "Marathi",
-      "language": "mr",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=mr&passwordLayout=t13n&name=transliteration_mr"
-    },
-    {
-      "name": "__MSG_transliteration_ne__",
-      "type": "ime",
-      "id": "ne-t-i0-und",
-      "description": "Nepali",
-      "language": "ne",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=ne&passwordLayout=t13n&name=transliteration_ne"
-    },
-    {
-      "name": "__MSG_transliteration_or__",
-      "type": "ime",
-      "id": "or-t-i0-und",
-      "description": "Oriya",
-      "language": "or",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=or&passwordLayout=t13n&name=transliteration_or"
-    },
-    {
-      "name": "__MSG_transliteration_pa__",
-      "type": "ime",
-      "id": "pa-t-i0-und",
-      "description": "Punjabi",
-      "language": "pa",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=pa&passwordLayout=t13n&name=transliteration_pa"
-    },
-    {
-      "name": "__MSG_transliteration_sa__",
-      "type": "ime",
-      "id": "sa-t-i0-und",
-      "description": "Sanskrit",
-      "language": "sa",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=sa&passwordLayout=t13n&name=transliteration_sa"
-    },
-    {
-      "name": "__MSG_transliteration_sr__",
-      "type": "ime",
-      "id": "sr-t-i0-und",
-      "description": "Serbian",
-      "language": "sr",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=sr&passwordLayout=t13n&name=transliteration_sr"
-    },
-    {
-      "name": "__MSG_transliteration_ta__",
-      "type": "ime",
-      "id": "ta-t-i0-und",
-      "description": "Tamil",
-      "language": "ta",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=ta&passwordLayout=t13n&name=transliteration_ta"
-    },
-    {
-      "name": "__MSG_transliteration_te__",
-      "type": "ime",
-      "id": "te-t-i0-und",
-      "description": "Telugu",
-      "language": "te",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=te&passwordLayout=t13n&name=transliteration_te"
-    },
-    {
-      "name": "__MSG_transliteration_ti__",
-      "type": "ime",
-      "id": "ti-t-i0-und",
-      "description": "Tigrinya",
-      "language": "ti",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n&language=ti&passwordLayout=t13n&name=transliteration_ti"
-    },
-    {
-      "name": "__MSG_transliteration_ur__",
-      "type": "ime",
-      "id": "ur-t-i0-und",
-      "description": "Urdu",
-      "language": "ur",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=t13n-rtl&language=ur&passwordLayout=t13n-rtl&name=transliteration_ur"
-    },
-    {
-      "name": "__MSG_inputmethod_hangul__",
-      "type": "ime",
-      "id": "ko-t-i0-und",
-      "indicator": "\ud55c",
-      "description": "Korean input method.",
-      "language": "ko",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=ko&language=ko&passwordLayout=us-ltr&name=inputmethod_hangul",
-      "options_page": "hmm_options.html?code=ko-t-i0-und"
-    },
-    {
-      "name": "__MSG_inputmethod_mozc_us__",
-      "type": "ime",
-      "id": "nacl_mozc_us",
-      "indicator": "\u3042",
-      "description": "Japanese input method.",
-      "language": "ja",
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=jp_us&language=ja&passwordLayout=us-ltr&name=appNameUSKeyboard",
-      "options_page": "mozc_option.html"
-    },
-    {
-      "name": "__MSG_inputmethod_mozc_jp__",
-      "type": "ime",
-      "id": "nacl_mozc_jp",
-      "indicator": "\u3042",
-      "description": "Japanese input method.",
-      "language": "ja",
-      "layouts": [
-        "jp"
-      ],
-      "input_view": "inputview.html#id=jp&language=ja&passwordLayout=us-ltr&name=appNameJPKeyboard",
-      "options_page": "mozc_option.html"
-    },
-    {
-      "name": "__MSG_keyboard_bengali_phonetic__",
-      "type": "ime",
-      "id": "vkd_bn_phone",
-      "description": "",
-      "language": [
-        "bn"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:bn_phone&language=bn&passwordLayout=us-ltr&name=keyboard_bengali_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_gujarati_phonetic__",
-      "type": "ime",
-      "id": "vkd_gu_phone",
-      "description": "",
-      "language": [
-        "gu"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:gu_phone&language=gu&passwordLayout=us-ltr&name=keyboard_gujarati_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_devanagari_phonetic__",
-      "type": "ime",
-      "id": "vkd_deva_phone",
-      "description": "",
-      "language": [
-        "hi",
-        "mr"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:deva_phone&language=hi&passwordLayout=us-ltr&name=keyboard_devanagari_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_kannada_phonetic__",
-      "type": "ime",
-      "id": "vkd_kn_phone",
-      "description": "",
-      "language": [
-        "kn"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:kn_phone&language=kn&passwordLayout=us-ltr&name=keyboard_kannada_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_malayalam_phonetic__",
-      "type": "ime",
-      "id": "vkd_ml_phone",
-      "description": "",
-      "language": [
-        "ml"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ml_phone&language=ml&passwordLayout=us-ltr&name=keyboard_malayalam_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_tamil_inscript__",
-      "type": "ime",
-      "id": "vkd_ta_inscript",
-      "description": "",
-      "language": [
-        "ta"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ta_inscript&language=ta&passwordLayout=us-ltr&name=keyboard_tamil_inscript"
-    },
-    {
-      "name": "__MSG_keyboard_tamil_phonetic__",
-      "type": "ime",
-      "id": "vkd_ta_phone",
-      "description": "",
-      "language": [
-        "ta"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ta_phone&language=ta&passwordLayout=us-ltr&name=keyboard_tamil_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_tamil_tamil99__",
-      "type": "ime",
-      "id": "vkd_ta_tamil99",
-      "description": "",
-      "language": [
-        "ta"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ta_tamil99&language=ta&passwordLayout=us-ltr&name=keyboard_tamil_tamil99"
-    },
-    {
-      "name": "__MSG_keyboard_tamil_typewriter__",
-      "type": "ime",
-      "id": "vkd_ta_typewriter",
-      "description": "",
-      "language": [
-        "ta"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ta_typewriter&language=ta&passwordLayout=us-ltr&name=keyboard_tamil_typewriter"
-    },
-    {
-      "name": "__MSG_keyboard_tamil_itrans__",
-      "type": "ime",
-      "id": "vkd_ta_itrans",
-      "description": "",
-      "language": [
-        "ta"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ta_itrans&language=ta&passwordLayout=us-ltr&name=keyboard_tamil_itrans"
-    },
-    {
-      "name": "__MSG_keyboard_telugu_phonetic__",
-      "type": "ime",
-      "id": "vkd_te_phone",
-      "description": "",
-      "language": [
-        "te"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:te_phone&language=te&passwordLayout=us-ltr&name=keyboard_telugu_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_ethiopic__",
-      "type": "ime",
-      "id": "vkd_ethi",
-      "description": "",
-      "language": [
-        "am"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ethi&language=am&passwordLayout=us-ltr&name=keyboard_ethiopic"
-    },
-    {
-      "name": "__MSG_keyboard_thai_kedmanee__",
-      "type": "ime",
-      "id": "vkd_th",
-      "description": "",
-      "language": [
-        "th"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:th&language=th&passwordLayout=us-ltr&name=keyboard_thai_kedmanee"
-    },
-    {
-      "name": "__MSG_keyboard_thai_pattachote__",
-      "type": "ime",
-      "id": "vkd_th_pattajoti",
-      "description": "",
-      "language": [
-        "th"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:th_pattajoti&language=th&passwordLayout=us-ltr&name=keyboard_thai_pattachote"
-    },
-    {
-      "name": "__MSG_keyboard_thai_tis__",
-      "type": "ime",
-      "id": "vkd_th_tis",
-      "description": "",
-      "language": [
-        "th"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:th_tis&language=th&passwordLayout=us-ltr&name=keyboard_thai_tis"
-    },
-    {
-      "name": "__MSG_keyboard_persian__",
-      "type": "ime",
-      "id": "vkd_fa",
-      "description": "",
-      "language": [
-        "fa"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:fa&language=fa&passwordLayout=us-rtl&name=keyboard_persian"
-    },
-    {
-      "name": "__MSG_keyboard_vietnamese_tcvn__",
-      "type": "ime",
-      "id": "vkd_vi_tcvn",
-      "description": "",
-      "language": [
-        "vi"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:vi_tcvn&language=vi&passwordLayout=us-ltr&name=keyboard_vietnamese_tcvn"
-    },
-    {
-      "name": "__MSG_keyboard_vietnamese_telex__",
-      "type": "ime",
-      "id": "vkd_vi_telex",
-      "description": "",
-      "language": [
-        "vi"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:vi_telex&language=vi&passwordLayout=us-ltr&name=keyboard_vietnamese_telex"
-    },
-    {
-      "name": "__MSG_keyboard_vietnamese_viqr__",
-      "type": "ime",
-      "id": "vkd_vi_viqr",
-      "description": "",
-      "language": [
-        "vi"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:vi_viqr&language=vi&passwordLayout=us-ltr&name=keyboard_vietnamese_viqr"
-    },
-    {
-      "name": "__MSG_keyboard_vietnamese_vni__",
-      "type": "ime",
-      "id": "vkd_vi_vni",
-      "description": "",
-      "language": [
-        "vi"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:vi_vni&language=vi&passwordLayout=us-ltr&name=keyboard_vietnamese_vni"
-    },
-    {
-      "name": "__MSG_keyboard_arabic__",
-      "type": "ime",
-      "id": "vkd_ar",
-      "description": "",
-      "language": [
-        "ar"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ar&language=ar&passwordLayout=us-rtl&name=keyboard_arabic"
-    },
-    {
-      "name": "__MSG_keyboard_lao__",
-      "type": "ime",
-      "id": "vkd_lo",
-      "description": "",
-      "language": [
-        "lo"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:lo&language=lo&passwordLayout=us-ltr&name=keyboard_laothian"
-    },
-    {
-      "name": "__MSG_keyboard_nepali_inscript__",
-      "type": "ime",
-      "id": "vkd_ne_inscript",
-      "description": "",
-      "language": [
-        "ne"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ne_inscript&language=ne&passwordLayout=us-ltr&name=keyboard_nepali_inscript"
-    },
-    {
-      "name": "__MSG_keyboard_nepali_phonetic__",
-      "type": "ime",
-      "id": "vkd_ne_phone",
-      "description": "",
-      "language": [
-        "ne"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ne_phone&language=ne&passwordLayout=us-ltr&name=keyboard_nepali_phonetic"
-    },
-    {
-      "name": "__MSG_keyboard_khmer__",
-      "type": "ime",
-      "id": "vkd_km",
-      "description": "",
-      "language": [
-        "km"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:km&language=km&passwordLayout=us-ltr&name=keyboard_khmer"
-    },
-    {
-      "name": "__MSG_keyboard_myanmar__",
-      "type": "ime",
-      "id": "vkd_my",
-      "description": "",
-      "language": [
-        "my"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:my&language=my&passwordLayout=us-ltr&name=keyboard_myanmar"
-    },
-    {
-      "name": "__MSG_keyboard_sinhala__",
-      "type": "ime",
-      "id": "vkd_si",
-      "description": "",
-      "language": [
-        "si"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:si&language=si&passwordLayout=us-ltr&name=keyboard_sinhala"
-    },
-    {
-      "name": "__MSG_keyboard_soranikurdish_en__",
-      "type": "ime",
-      "id": "vkd_ckb_en",
-      "description": "Sorani Kurdish - English-based",
-      "language": [
-        "ckb"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ckb_en&language=ckb&passwordLayout=us-rtl&name=keyboard_soranikurdish_en"
-    },
-    {
-      "name": "__MSG_keyboard_soranikurdish_ar__",
-      "type": "ime",
-      "id": "vkd_ckb_ar",
-      "description": "Sorani Kurdish - Arabic-based",
-      "language": [
-        "ckb"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ckb_ar&language=ckb&passwordLayout=us-rtl&name=keyboard_soranikurdish_ar"
-    },
-    {
-      "name": "__MSG_keyboard_myanmar_myansan__",
-      "type": "ime",
-      "id": "vkd_my_myansan",
-      "description": "",
-      "language": [
-        "my"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:my_myansan&language=my&passwordLayout=us-ltr&name=keyboard_myanmar_myansan"
-    },
-    {
-      "name": "__MSG_keyboard_russian_phonetic_aatseel__",
-      "type": "ime",
-      "id": "vkd_ru_phone_aatseel",
-      "description": "",
-      "language": [
-        "ru"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ru_phone_aatseel&language=ru&passwordLayout=us-ltr&name=keyboard_russian_phonetic_aatseel"
-    },
-    {
-      "name": "__MSG_keyboard_russian_phonetic_yazhert__",
-      "type": "ime",
-      "id": "vkd_ru_phone_yazhert",
-      "description": "",
-      "language": [
-        "ru"
-      ],
-      "layouts": [
-        "us"
-      ],
-      "input_view": "inputview.html#id=m17n:ru_phone_yazhert&language=ru&passwordLayout=us-ltr&name=keyboard_russian_phonetic_yazhert"
-    }
-  ],
-  "manifest_version": 2
-}
diff --git a/chromium/chrome/browser/resources/chromeos/input_method/google_xkb_manifest.json b/chromium/chrome/browser/resources/chromeos/input_method/google_xkb_manifest.json
index c9c720fef41..6034ed5d6dc 100644
--- a/chromium/chrome/browser/resources/chromeos/input_method/google_xkb_manifest.json
+++ b/chromium/chrome/browser/resources/chromeos/input_method/google_xkb_manifest.json
@@ -25,7 +25,8 @@
   ],
   "background": {
     "page": "background.html",
-    "persistent": false
+    // TODO(yhanada): Change to false after fixing crbug.com/761714.
+    "persistent": true
   },
   "content_scripts": [
     {
@@ -115,6 +116,22 @@
       "options_page": "hmm_options.html?code=xkb:us:intl:eng"
     },
     {
+      "name": "__MSG_keyboard_us_international_pc__",
+      "type": "ime",
+      "id": "xkb:us:intl_pc:eng",
+      "indicator": "INTL",
+      "description": "",
+      "language": [
+        "en",
+        "en-US"
+      ],
+      "layouts": [
+        "us(intl_pc)"
+      ],
+      "input_view": "inputview.html#id=us-intl&language=en-US&passwordLayout=us-intl&name=keyboard_us_international_pc",
+      "options_page": "hmm_options.html?code=xkb:us:intl_pc:eng"
+    },
+    {
       "name": "__MSG_keyboard_netherlands__",
       "type": "ime",
       "id": "xkb:us:intl:nld",
@@ -130,6 +147,21 @@
       "options_page": "hmm_options.html?code=xkb:us:intl:nld"
     },
     {
+      "name": "__MSG_keyboard_us_international_pc__",
+      "type": "ime",
+      "id": "xkb:us:intl_pc:nld",
+      "indicator": "NLD",
+      "description": "",
+      "language": [
+        "nl"
+      ],
+      "layouts": [
+        "us(intl_pc)"
+      ],
+      "input_view": "inputview.html#id=us-intl&language=nl&passwordLayout=us-intl&name=keyboard_us_international_pc",
+      "options_page": "hmm_options.html?code=xkb:us:intl_pc:nld"
+    },
+    {
       "name": "__MSG_keyboard_us_international__",
       "type": "ime",
       "id": "xkb:us:intl:por",
@@ -145,6 +177,21 @@
       "options_page": "hmm_options.html?code=xkb:us:intl:por"
     },
     {
+      "name": "__MSG_keyboard_us_international_pc__",
+      "type": "ime",
+      "id": "xkb:us:intl_pc:por",
+      "indicator": "INTL",
+      "description": "",
+      "language": [
+        "pt-BR"
+      ],
+      "layouts": [
+        "us(intl_pc)"
+      ],
+      "input_view": "inputview.html#id=us-intl&language=pt-BR&passwordLayout=us-intl&name=keyboard_us_international_pc",
+      "options_page": "hmm_options.html?code=xkb:us:intl_pc:por"
+    },
+    {
       "name": "__MSG_keyboard_us_extended__",
       "type": "ime",
       "id": "xkb:us:altgr-intl:eng",
diff --git a/chromium/chrome/browser/resources/chromeos/login/compiled_resources2.gyp b/chromium/chrome/browser/resources/chromeos/login/compiled_resources2.gyp
index 506018a2cb8..de8e38ce6b7 100644
--- a/chromium/chrome/browser/resources/chromeos/login/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/chromeos/login/compiled_resources2.gyp
@@ -10,5 +10,18 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'oobe_change_picture',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_list',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_pane',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_types',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }
diff --git a/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources2.gyp b/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources2.gyp
index 2f02c48d669..b43625b1eaf 100644
--- a/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources2.gyp
@@ -6,8 +6,8 @@
     {
       'target_name': 'network_ui',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_network_icon_externs',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_network_icon_externs',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(EXTERNS_GYP):networking_private',
diff --git a/chromium/chrome/browser/resources/chromeos/quick_unlock/compiled_resources2.gyp b/chromium/chrome/browser/resources/chromeos/quick_unlock/compiled_resources2.gyp
index 427e9c5308f..a953cb9433b 100644
--- a/chromium/chrome/browser/resources/chromeos/quick_unlock/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/chromeos/quick_unlock/compiled_resources2.gyp
@@ -4,6 +4,15 @@
 {
   'targets': [
     {
+      'target_name': 'md_pin_keyboard',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-button/compiled_resources2.gyp:paper-button-extracted',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
+       ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'pin_keyboard',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
diff --git a/chromium/chrome/browser/resources/chromeos/switch_access/BUILD.gn b/chromium/chrome/browser/resources/chromeos/switch_access/BUILD.gn
index 047671b9a46..4c9be8a3c6b 100644
--- a/chromium/chrome/browser/resources/chromeos/switch_access/BUILD.gn
+++ b/chromium/chrome/browser/resources/chromeos/switch_access/BUILD.gn
@@ -29,6 +29,7 @@ run_jsbundler("switch_access_copied_files") {
     "automation_manager.js",
     "automation_predicate.js",
     "background.js",
+    "commands.js",
     "keyboard_handler.js",
     "options.css",
     "options.html",
diff --git a/chromium/chrome/browser/resources/chromeos/switch_access/compiled_resources2.gyp b/chromium/chrome/browser/resources/chromeos/switch_access/compiled_resources2.gyp
index 1846c418881..a77a2a2545d 100644
--- a/chromium/chrome/browser/resources/chromeos/switch_access/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/chromeos/switch_access/compiled_resources2.gyp
@@ -8,7 +8,6 @@
       'target_name': 'auto_scan_manager',
       'dependencies': [
         'switch_access_interface',
-        'prefs',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -38,8 +37,16 @@
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'commands',
+      'dependencies': [
+        'switch_access_interface',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'keyboard_handler',
       'dependencies': [
+        '<(EXTERNS_GYP):accessibility_private',
         'switch_access_interface',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
@@ -48,7 +55,6 @@
       'target_name': 'options',
       'dependencies': [
         '<(EXTERNS_GYP):chrome_extensions',
-        'prefs',
         'switch_access',
         'background',
       ],
@@ -58,6 +64,7 @@
       'target_name': 'prefs',
       'dependencies': [
         '<(EXTERNS_GYP):chrome_extensions',
+        'switch_access_interface',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -66,18 +73,17 @@
       'dependencies': [
         '<(EXTERNS_GYP):automation',
         '<(EXTERNS_GYP):chrome_extensions',
-        'prefs',
         'auto_scan_manager',
         'automation_manager',
+        'commands',
         'keyboard_handler',
+        'prefs',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'switch_access_interface',
-      'dependencies': [
-        'prefs',
-      ],
+      'dependencies': [],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/BUILD.gn b/chromium/chrome/browser/resources/chromeos/zip_archiver/BUILD.gn
new file mode 100644
index 00000000000..68fc2b9ee76
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/BUILD.gn
@@ -0,0 +1,93 @@
+# Copyright 2017 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.
+
+group("zip_archiver") {
+  deps = [
+    ":zip_archiver_css",
+    ":zip_archiver_html",
+    ":zip_archiver_icons",
+    ":zip_archiver_js",
+    ":zip_archiver_root",
+  ]
+}
+
+zip_archiver_dir = "$root_out_dir/resources/chromeos/zip_archiver"
+
+copy("zip_archiver_css") {
+  sources = [
+    "css/passphrase-dialog.css",
+    "css/passphrase.css",
+  ]
+
+  outputs = [
+    "$zip_archiver_dir/css/{{source_file_part}}",
+  ]
+}
+
+copy("zip_archiver_html") {
+  sources = [
+    "html/compressor.html",
+    "html/passphrase-dialog.html",
+    "html/passphrase.html",
+  ]
+
+  outputs = [
+    "$zip_archiver_dir/html/{{source_file_part}}",
+  ]
+}
+
+copy("zip_archiver_icons") {
+  sources = [
+    "icons/icon128.png",
+    "icons/icon16.png",
+    "icons/icon32.png",
+    "icons/icon64.png",
+    "icons/icon96.png",
+  ]
+
+  outputs = [
+    "$zip_archiver_dir/icons/{{source_file_part}}",
+  ]
+}
+
+copy("zip_archiver_js") {
+  sources = [
+    "js/app.js",
+    "js/background.js",
+    "js/build-config.js",
+    "js/compressor-foreground.js",
+    "js/compressor.js",
+    "js/decompressor.js",
+    "js/passphrase-dialog.js",
+    "js/passphrase-manager.js",
+    "js/request.js",
+    "js/types.js",
+    "js/unpacker.js",
+    "js/volume.js",
+  ]
+
+  outputs = [
+    "$zip_archiver_dir/js/{{source_file_part}}",
+  ]
+}
+
+copy("zip_archiver_root") {
+  pexe_dir = get_label_info(
+          "//chrome/browser/resources/chromeos/zip_archiver/cpp:zip_archiver_pnacl(//build/toolchain/nacl:newlib_pnacl)",
+          "root_out_dir")
+
+  deps = [
+    "//chrome/browser/resources/chromeos/zip_archiver/cpp:zip_archiver_pnacl(//build/toolchain/nacl:newlib_pnacl)",
+  ]
+
+  sources = [
+    "$pexe_dir/zip_archiver_pnacl.pexe",
+    "manifest.json",
+    "module.nmf",
+  ]
+
+  outputs = [
+    "$zip_archiver_dir/{{source_file_part}}",
+  ]
+}
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ar/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ar/messages.json
new file mode 100644
index 00000000000..78454c10907
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ar/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "أداة فتح ملفات ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "فتح ملفات ZIP في تطبيق \"الملفات\".",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "أخفق فتح الأرشيف.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "تم تحميل الأرشيف فعلاً.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "تنسيق الأرشيف غير متوافق، أو الملف تالف.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "الرجاء الانتظار، جارٍ فحص الأرشيف...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "هذا الملف محمي بكلمة المرور",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "كلمة المرور",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "قبول",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "إلغاء",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "تذكر",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/bg/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/bg/messages.json
new file mode 100644
index 00000000000..fbebba08e62
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/bg/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Разширение за разпакетиране на ZIP файлове",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Отваряне на ZIP файлове в приложението Файлове.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Отварянето на архив не бе успешно.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Архивът вече е свързан.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Форматът на архива не се поддържа или файлът е невалиден.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Моля, изчакайте. Архивът се сканира...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Този файл е защитен с парола",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Парола",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Приемам",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Отказ",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Запомняне",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ca/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ca/messages.json
new file mode 100644
index 00000000000..672e463f249
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ca/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Descompressor ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Obriu els fitxers ZIP a l'aplicació Fitxers.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "S'ha produït un error en obrir un arxiu.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "L'arxiu ja està activat.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "El format de l'arxiu no s'admet, o bé el fitxer està malmès.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Espereu, s'està analitzant l'arxiu...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "El fitxer està protegit amb contrasenya",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Contrasenya",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Accepta",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancel·la",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Recorda",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/cs/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/cs/messages.json
new file mode 100644
index 00000000000..b3de9697653
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/cs/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Rozbalování souborů ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Otevírejte soubory ZIP v aplikaci Soubory.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Archiv se nepodařilo otevřít.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Archiv je již připojen.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Formát archivu není podporován nebo je soubor poškozen.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Čekejte prosím, probíhá prohledávání archivu...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Soubor je chráněn heslem",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Heslo",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Přijmout",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Zrušit",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Zapamatovat",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/da/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/da/messages.json
new file mode 100644
index 00000000000..0a067817c28
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/da/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-åbning",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Åbn ZIP-filer i appen Filer.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Et arkiv kunne ikke åbnes.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arkivet er allerede tilsluttet.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Arkivformatet understøttes ikke, eller filen er beskadiget.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Et øjeblik, arkivet scannes…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Denne fil er beskyttet med adgangskode",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Adgangskode",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Acceptér",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Annuller",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Husk",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/de/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/de/messages.json
new file mode 100644
index 00000000000..fbd1100b8e6
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/de/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-Datei-Entpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "ZIP-Dateien in App \"Dateien\" öffnen",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Ein Archiv konnte nicht geöffnet werden.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Das Archiv ist schon bereitgestellt.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Das Archivformat wird nicht unterstützt oder die Datei ist fehlerhaft.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Das Archiv wird geprüft. Bitte warten...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Diese Datei ist passwortgeschützt.",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Passwort",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Akzeptieren",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Abbrechen",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Merken",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/el/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/el/messages.json
new file mode 100644
index 00000000000..6d0a376b013
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/el/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Αποσυμπιεστής ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Άνοιγμα αρχείων ZIP στην εφαρμογή \"Αρχεία\".",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Απέτυχε το άνοιγμα ενός αρχείου.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Το αρχείο προσαρτήθηκε ήδη.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Η μορφή του αρχείου δεν υποστηρίζεται ή το αρχείο είναι κατεστραμμένο.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Περιμένετε, γίνεται σάρωση του αρχείου…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Αυτό το αρχείο προστατεύεται με κωδικό πρόσβασης",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Κωδικός πρόσβασης",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Αποδοχή",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Άκυρο",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Απομνημόνευση",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/en/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/en/messages.json
new file mode 100644
index 00000000000..d59b942b395
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/en/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+     "message": "Open ZIP files in Files app.",
+     "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Failed to open an archive.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "The archive is already mounted.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "The archive format is not supported, or the file is broken.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Please wait, the archive is being scanned...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "This file is password protected",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Password",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Accept",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancel",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Remember",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/en_GB/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/en_GB/messages.json
new file mode 100644
index 00000000000..5d2c37199b3
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/en_GB/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Open ZIP files in Files app.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Failed to open an archive.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "The archive is already mounted.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "The archive format is not supported, or the file is broken.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Please wait, the archive is being scanned...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "This file is password protected",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Password",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Accept",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancel",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Remember",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/es/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/es/messages.json
new file mode 100644
index 00000000000..f8f85fd9c31
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/es/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Descompresor ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Abre archivos ZIP en la aplicación Archivos.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Error al abrir el archivo.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "El archivo ya está activado.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "El formato del archivo no es compatible o el archivo está dañado.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Espera, se está analizando el archivo...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Este archivo está protegido por contraseña",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Contraseña",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Aceptar",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancelar",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Recordar",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/es_419/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/es_419/messages.json
new file mode 100644
index 00000000000..c86051e12b1
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/es_419/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Abre archivos ZIP en la aplicación Archivos.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Error al abrir un archivo",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Ya se montó el archivo.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "El formato de archivo no es compatible o el archivo está dañado.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Espera, se está analizando el archivo…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Este archivo está protegido por contraseña",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Contraseña",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Aceptar",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancelar",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Recordar",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/et/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/et/messages.json
new file mode 100644
index 00000000000..4239a246148
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/et/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-lahtipakkija",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "ZIP-failide avamine rakenduses Failid.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Arhiivi avamine ebaõnnestus.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arhiiv on juba ühendatud.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Arhiivi formaati ei toetata või on fail katki.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Oodake, arhiivi skannitakse ...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "See fail on parooliga kaitstud",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Parool",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Nõustu",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Tühista",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Pea meeles",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fa/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fa/messages.json
new file mode 100644
index 00000000000..a353dde68c3
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fa/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "بازکننده ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "فایل‌های ZIP را در برنامه Files باز کنید.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "بایگانی باز نشد.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "بایگانی قبلاً نشانده شده است.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "قالب بایگانی پشتیبانی نمی‌شود یا فایل خراب است.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "لطفاً صبر کنید، بایگانی در حال اسکن شدن است...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "این فایل با گذرواژه محافظت می‌شود",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "گذرواژه",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "پذیرش",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "لغو",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "به خاطر سپردن",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fi/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fi/messages.json
new file mode 100644
index 00000000000..cd7f2413ee8
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fi/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-purkaja",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Avaa ZIP-tiedostot Tiedostot-sovelluksessa.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Arkiston avaaminen epäonnistui.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arkisto on jo otettu käyttöön.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Tätä arkistomuotoa ei tueta tai tiedosto ei toimi.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Odota hetki, arkistoa tarkistetaan…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Tämä tiedosto on suojattu salasanalla.",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Salasana",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Hyväksy",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Peruuta",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Muista",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fil/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fil/messages.json
new file mode 100644
index 00000000000..4fc2c70b781
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fil/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Magbukas ng mga ZIP file sa Files app.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Hindi nakapagbukas ng isang archive.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Na-mount na ang archive.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Hindi sinusuportahan ang format ng archive o sira ang file.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Mangyaring maghintay, ini-scan ang archive...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Pinoprotektahan ng password ang file na ito",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Password",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Tanggapin",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Kanselahin",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Tandaan",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fr/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fr/messages.json
new file mode 100644
index 00000000000..b39038e5296
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/fr/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Ouvrir les fichiers ZIP dans l'application Fichiers",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Échec de l'ouverture d'une archive",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "L'archive est déjà installée.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Le format de l'archive n'est pas compatible, ou le fichier est endommagé.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Veuillez patienter, l'archive est en cours d'analyse…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Ce fichier est protégé par un mot de passe",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Mot de passe",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Accepter",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Annuler",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Mémoriser",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/he/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/he/messages.json
new file mode 100644
index 00000000000..0e805e163a6
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/he/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "פתח קובצי ZIP ביישום 'קבצים'.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "פתיחת ארכיון נכשלה.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "הארכיון כבר נטען.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "פורמט הארכיון אינו נתמך, או שהקובץ פגום.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "המתן בזמן שהארכיון נסרק...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "הקובץ הזה מוגן באמצעות סיסמה",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "סיסמה",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "קבל",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "בטל",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "זכור",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hi/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hi/messages.json
new file mode 100644
index 00000000000..c1d6330bcb8
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hi/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ज़िप अनपैकर",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "फ़ाइलें ऐप में ज़िप फ़ाइलें खोलें",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "संग्रह को खोलने में विफल रहा.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "संग्रह पहले से माउंट किया हुआ है.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "संग्रह का प्रारूप समर्थित नहीं है या फ़ाइल त्रुटिपूर्ण है.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "कृपया प्रतीक्षा करें, संग्रह स्‍कैन किया जा रहा है...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "यह फ़ाइल पासवर्ड द्वारा सुरक्षित है",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "पासवर्ड",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "स्वीकार करें",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "रहने दें",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "याद रखें",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hr/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hr/messages.json
new file mode 100644
index 00000000000..1f8bc04bee7
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hr/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Alat za otvaranje ZIP datoteka",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Otvaranje ZIP datoteka u aplikaciji Datoteke.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Otvaranje arhive nije uspjelo.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arhiva je već učitana.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Oblik arhive nije podržan ili je datoteka oštećena.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Pričekajte, arhiva se skenira...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Datoteka je zaštićena zaporkom",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Zaporka",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Prihvaćam",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Odustani",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Zapamti",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hu/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hu/messages.json
new file mode 100644
index 00000000000..225066cb7e7
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/hu/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-kicsomagoló",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "ZIP-fájlok megnyitása a Fájlok alkalmazásban.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Nem sikerült megnyitni egy archív elemet.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Az archív elem már be van töltve.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Az archív elem formátuma nem támogatott, vagy hibás a fájl.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Kérjük, várjon. Az archívum beolvasása folyamatban van…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "A fájl jelszóval védett",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Jelszó",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Elfogadás",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Mégse",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Jegyezze meg",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/id/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/id/messages.json
new file mode 100644
index 00000000000..6604927e781
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/id/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Membuka file ZIP di aplikasi File.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Gagal membuka arsip.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arsip telah terpasang.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Format arsip tidak didukung atau file rusak.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Tunggu, arsip sedang dipindai...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "File ini dilindungi sandi",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Sandi",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Terima",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Batal",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Ingat",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/it/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/it/messages.json
new file mode 100644
index 00000000000..da83efcc6b2
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/it/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Apri file ZIP nell'app File.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Apertura di un archivio non riuscita.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "L'archivio è già stato montato.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Il formato dell'archivio non è supportato oppure il file è danneggiato.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Attendi, è in corso la scansione dell'archivio...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Il file è protetto da password",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Password",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Accetta",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Annulla",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Ricorda",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ja/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ja/messages.json
new file mode 100644
index 00000000000..551e0baf1e8
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ja/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP 解凍",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "ZIP ファイルをファイルアプリで開きます。",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "アーカイブを開けませんでした。",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "アーカイブはマウント済みです。",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "アーカイブ形式がサポートされていないか、ファイルが破損しています。",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "アーカイブをスキャンしています。しばらくお待ちください...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "パスワードで保護されたファイル",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "パスワード",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "承認",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "キャンセル",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "パスワードを保存",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ko/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ko/messages.json
new file mode 100644
index 00000000000..51417dfed39
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ko/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP 압축 해제 프로그램",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "파일 앱에서 ZIP 파일 열기",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "보관 파일을 열지 못했습니다.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "보관 파일이 이미 마운트되어 있습니다.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "보관 파일이 지원되지 않는 형식이거나 파일이 손상되었습니다.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "잠시 기다려 주세요. 보관 파일을 검사하는 중입니다.",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "파일이 비밀번호로 보호되어 있습니다.",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "비밀번호",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "수락",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "취소",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "저장",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/lt/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/lt/messages.json
new file mode 100644
index 00000000000..b4b9c161bd2
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/lt/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP išpakavimo programa",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Atidarykite ZIP failus naudodami programą „Failai“.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Nepavyko atidaryti archyvo.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Archyvas jau įdėtas.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Archyvo formatas nepalaikomas arba failas yra sugadintas.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Palaukite, archyvas nuskaitomas...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Šis failas apsaugotas slaptažodžiu",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Slaptažodis",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Sutikti",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Atšaukti",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Prisiminti",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/lv/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/lv/messages.json
new file mode 100644
index 00000000000..0882e86bc88
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/lv/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP izguvējs",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Atveriet ZIP failus lietotnē Faili.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Neizdevās atvērt arhīvu.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arhīvs jau ir iekļauts.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Arhīva formāts netiek atbalstīts, vai fails ir bojāts.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Lūdzu, uzgaidiet, kamēr notiek arhīva pārbaude...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Šis fails ir aizsargāts ar paroli",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Parole",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Pieņemt",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Atcelt",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Atcerēties",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ms/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ms/messages.json
new file mode 100644
index 00000000000..8537a84f3cd
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ms/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Penyahpadat ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Buka fail ZIP dalam apl Fail.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Gagal membuka arkib.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arkib sudah dilekapkan.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Format arkib tidak disokong atau fail rosak.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Sila tunggu, arkib sedang diimbas…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Fail ini dilindungi kata laluan",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Kata laluan",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Terima",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Batal",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Ingat",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/nl/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/nl/messages.json
new file mode 100644
index 00000000000..dd970539829
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/nl/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-uitpakker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Open zipbestanden in de app Bestanden.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Kan een archief niet openen.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Het archief is al gekoppeld.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "De archiefindeling wordt niet ondersteund of het bestand is beschadigd.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Het archief wordt gescand. Een ogenblik geduld…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Dit bestand is beveiligd met een wachtwoord",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Wachtwoord",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Accepteren",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Annuleren",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Onthouden",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/no/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/no/messages.json
new file mode 100644
index 00000000000..cd5f57bc19d
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/no/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP-utpakker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Åpne ZIP-filer i Filer-appen.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Et arkiv kunne ikke åpnes.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arkivet er allerede åpnet.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Arkivformatet støttes ikke, eller filen er ødelagt.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Vent litt – arkivet skannes …",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Denne filen er passordbeskyttet.",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Passord",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Godta",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Avbryt",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Husk",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pl/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pl/messages.json
new file mode 100644
index 00000000000..ae8556eca7a
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pl/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Program do rozpakowywania plików ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Otwieraj pliki ZIP w aplikacji Pliki.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Nie udało się otworzyć archiwum.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Archiwum zostało już podłączone.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Format archiwum nie jest obsługiwany albo plik jest uszkodzony.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Zaczekaj, trwa skanowanie archiwum...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Ten plik jest chroniony hasłem",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Hasło",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Zaakceptuj",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Anuluj",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Pamiętaj",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pt_BR/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pt_BR/messages.json
new file mode 100644
index 00000000000..01dbfe87349
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pt_BR/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Abra arquivos ZIP no app \"Arquivos\".",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Falha ao abrir um arquivo.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "O arquivo já está ativado.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "O formato do arquivo não é compatível ou o arquivo está corrompido.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Aguarde. O arquivo está sendo verificado...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Este arquivo é protegido por senha",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Senha",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Aceitar",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancelar",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Lembrar",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pt_PT/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pt_PT/messages.json
new file mode 100644
index 00000000000..dc86b5aac07
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/pt_PT/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP unpacker",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Abre ficheiros ZIP na aplicação Ficheiros.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Falha ao abrir um arquivo.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "O arquivo já está montado.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "O formato do arquivo não é suportado ou o ficheiro está danificado.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Aguarde enquanto o arquivo está a ser analisado...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Este ficheiro está protegido por palavra-passe",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Palavra-passe",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Aceitar",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Cancelar",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Memorizar",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ro/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ro/messages.json
new file mode 100644
index 00000000000..3f7ec88107a
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ro/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Dezarhivator ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Deschideți fișiere ZIP în aplicația Fișiere.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Arhiva nu a putut fi deschisă.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arhiva este deja montată.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Formatul arhivei nu este acceptat sau fișierul este deteriorat.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Așteptați, se scanează arhiva...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Fișierul este protejat prin parolă",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Parolă",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Acceptați",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Anulați",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Reține",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ru/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ru/messages.json
new file mode 100644
index 00000000000..5bba0e0fff7
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/ru/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Распаковщик ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Открывает ZIP-архивы в приложении \"Файлы\".",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Не удалось открыть архив",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Архив уже существует.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Архив поврежден, или его формат не поддерживается.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Сканирование архива...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Файл защищен паролем",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Пароль",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "ОК",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Отмена",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Запомнить",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sk/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sk/messages.json
new file mode 100644
index 00000000000..18b16d80cd3
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sk/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Rozbaľovanie priečinkov ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Otvárajte súbory ZIP v aplikácii Súbory.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Archív sa nepodarilo otvoriť",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Archív je už pripojený",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Formát archívu nie je podporovaný alebo je súbor poškodený",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Čakajte, prehľadáva sa archív...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Súbor je chránený heslom",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Heslo",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Prijať",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Zrušiť",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Zapamätať",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sl/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sl/messages.json
new file mode 100644
index 00000000000..9ba38b9dc06
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sl/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Razširitev za odpiranje arhivov ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Odpiranje datotek ZIP v aplikaciji Datoteke.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Arhiva ni bilo mogoče odpreti.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arhiv je že vpet.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Oblika zapisa arhiva ni podprta ali pa je datoteka poškodovana.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Počakajte, poteka preverjanje arhiva ...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Ta datoteka je zaščitena z geslom",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Geslo",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Sprejmi",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Prekliči",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Shrani",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sr/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sr/messages.json
new file mode 100644
index 00000000000..58711406c26
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sr/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP отпакивач",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Отварајте ZIP датотеке у апликацији Датотеке.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Отварање архиве није успело.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Архива је већ учитана",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Формат архиве није подржан или је датотека оштећена.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Сачекајте, архива се скенира...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Ова датотека је заштићена лозинком",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Лозинка",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Прихвати",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Откажи",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Запамти",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sv/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sv/messages.json
new file mode 100644
index 00000000000..7264c317aa0
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/sv/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Uppackningsverktyg för zip-filer",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Öppna zip-filer i appen Filer.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Det gick inte att öppna arkivet.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arkivet har redan monterats.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Arkivformatet stöds inte, eller så är filen trasig.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Arkivet läses in. Vänta ...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Filen är lösenordsskyddad",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Lösenord",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Tacka ja",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Avbryt",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Kom ihåg",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/th/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/th/messages.json
new file mode 100644
index 00000000000..05af54ecce1
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/th/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "โปรแกรมเปิดไฟล์ ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "เปิดไฟล์ ZIP ในแอป Files",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "ไม่สามารถเปิดไฟล์",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "ไฟล์นี้เปิดอยู่แล้ว",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "ไม่สนับสนุนไฟล์รูปแบบนี้ หรือไฟล์เสียหาย",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "โปรดรอสักครู่ ระบบกำลังสแกนไฟล์...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "ไฟล์นี้มีการป้องกันด้วยรหัสผ่าน",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "รหัสผ่าน",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "ยอมรับ",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "ยกเลิก",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "จำ",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/tr/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/tr/messages.json
new file mode 100644
index 00000000000..010aca4e4e1
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/tr/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP paket açıcı",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Zip dosyalarını Dosyalar uygulamasında açın.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Arşiv açılamadı.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Arşiv zaten eklenmiş.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Arşiv biçimi desteklenmiyor veya dosya bozuk.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Arşiv taranırken lütfen bekleyin...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Bu dosya şifre korumalı",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Şifre",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Kabul et",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "İptal",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Hatırla",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/uk/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/uk/messages.json
new file mode 100644
index 00000000000..e5abb4144c0
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/uk/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Розпакувальник ZIP-архівів",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Відкривання ZIP-архівів у додатку Файли.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Не вдалося відкрити архів.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Архів уже підключено.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Формат архіву не підтримується або файл пошкоджено.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Сканування архіву. Зачекайте…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Цей файл захищено паролем",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Пароль",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Прийняти",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Скасувати",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Запам’ятати",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/vi/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/vi/messages.json
new file mode 100644
index 00000000000..d75cd0b9080
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/vi/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "Trình giải nén ZIP",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "Mở tệp ZIP trong ứng dụng Tệp.",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "Không mở được tệp lưu trữ.",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "Tệp lưu trữ đã được kết nối.",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "Định dạng lưu trữ không được hỗ trợ hoặc tệp bị hỏng.",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "Vui lòng đợi, tệp lưu trữ đang được quét...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "Tệp này được bảo vệ bằng mật khẩu",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "Mật khẩu",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "Chấp nhận",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "Hủy",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "Nhớ",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/zh_CN/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/zh_CN/messages.json
new file mode 100644
index 00000000000..f4dfb2f4697
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/zh_CN/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP 解压缩程序",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "在“文件”应用中打开 ZIP 文件。",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "未能打开某个归档文件。",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "该归档文件已打开。",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "该归档文件的格式不受支持，或该文件已损坏。",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "请稍候，正在扫描该归档文件…",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "该文件受密码保护",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "密码",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "接受",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "取消",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "记住密码",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/zh_TW/messages.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/zh_TW/messages.json
new file mode 100644
index 00000000000..ef4d3ad0f95
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/_locales/zh_TW/messages.json
@@ -0,0 +1,46 @@
+{
+  "name": {
+    "message": "ZIP 解壓縮工具",
+    "description": "Name of the ZIP unpacker app."
+  },
+  "description": {
+    "message": "可讓您在「檔案」應用程式中開啟 ZIP 檔案。",
+    "description": "Short description of the ZIP unpacker app."
+  },
+  "mountErrorTitle": {
+    "message": "無法開啟封存檔案。",
+    "description": "Title of a notification with a mounting error message."
+  },
+  "existsErrorMessage": {
+    "message": "這個封存檔案已掛接。",
+    "description": "Error message when the archive is already mounted."
+  },
+  "otherErrorMessage": {
+    "message": "您使用了不支援的封存格式，或者檔案已毀損。",
+    "description": "Error message when opening an archive fails because of an unknown reason."
+  },
+  "mountingMessage": {
+    "message": "系統正在掃描封存檔案，請稍候...",
+    "description": "Message shown when opening an archive takes long time."
+  },
+  "passphraseTitle": {
+    "message": "這個檔案受到密碼保護",
+    "description": "Title of the password input dialog."
+  },
+  "passphraseInputLabel": {
+    "message": "密碼",
+    "description": "Label of the password input field."
+  },
+  "passphraseAccept": {
+    "message": "接受",
+    "description": "Short name of the password accept button."
+  },
+  "passphraseCancel": {
+    "message": "取消",
+    "description": "Short name of the password cancel button."
+  },
+  "passphraseRemember": {
+    "message": "記住密碼",
+    "description": "Title for of a checkbox whether the password should be remembered. Please keep it as short."
+  }
+}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/cpp/BUILD.gn b/chromium/chrome/browser/resources/chromeos/zip_archiver/cpp/BUILD.gn
new file mode 100644
index 00000000000..c7294e3ca84
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/cpp/BUILD.gn
@@ -0,0 +1,40 @@
+# Copyright 2017 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.
+
+assert(is_nacl, "This file should only be built in NaCl")
+
+executable("zip_archiver_pnacl") {
+  sources = [
+    "compressor.cc",
+    "compressor.h",
+    "compressor_archive.h",
+    "compressor_archive_minizip.cc",
+    "compressor_archive_minizip.h",
+    "compressor_io_javascript_stream.cc",
+    "compressor_io_javascript_stream.h",
+    "compressor_stream.h",
+    "javascript_compressor_requestor_interface.h",
+    "javascript_message_sender_interface.h",
+    "javascript_requestor_interface.h",
+    "module.cc",
+    "request.cc",
+    "request.h",
+    "volume.cc",
+    "volume.h",
+    "volume_archive.h",
+    "volume_archive_minizip.cc",
+    "volume_archive_minizip.h",
+    "volume_reader.h",
+    "volume_reader_javascript_stream.cc",
+    "volume_reader_javascript_stream.h",
+  ]
+
+  deps = [
+    "//base:base",
+    "//build/config:exe_and_shlib_deps",
+    "//ppapi/cpp",
+    "//ppapi/native_client:ppapi_lib",
+    "//third_party/minizip:minizip",
+  ]
+}
diff --git a/chromium/chrome/browser/resources/chromeos/zip_archiver/manifest.json b/chromium/chrome/browser/resources/chromeos/zip_archiver/manifest.json
new file mode 100644
index 00000000000..49ef7c0a16d
--- /dev/null
+++ b/chromium/chrome/browser/resources/chromeos/zip_archiver/manifest.json
@@ -0,0 +1,60 @@
+{
+  // chrome-extension://dmboannefpncccogfdikhmhpmdnddgoe
+  "key": "MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCxGxJCOLUzHIYc812NFoBC1eV8PhOTuF6he3gSuqzxckUyrDLdl5++DAd1AkQkv6i8SSMWFvDKLg2b+zfCOwk6P7uu3tqNavXXy61Okaq5HKF3xhciNDl4zF6ZlegvE9AhJOTo2eCHVIMS0+YuK5hyno/+xMwN4byvsrOYXQnhcJeOHxkFb9TfVUb3SOBgl4pBZ7+EIMNntEvzY7mxjBzOgnCjBePvwnoMRyAqljCJarz2WSbUOLP3yoCuH9vPKj+0D6hF1woXmd6qBr0ln/7tHdbr1cYmkosfFuJO2y6d00FAJY/G5L6o8JAEBbWG5D0qELt+aBjkG0uos5gcR4ZPAgMBAAECggEBAK3aIjFJU25J6MjQiRvvY5a4O56bnUIb8SDZgAP6pbwZ7R2R9hiaN6AqVMOiptvgHDZAISYU/OerD4b3s0OCCkvYtlcxwh6iSZQ9BvIighFWrpZRqPHVjDktfQuNIS/dZiiy+9Yr0oFmD4jS45idCPgy+K0h6CEUX9GlPTEq24ElECDwQHVyB9LHdenleCdvldIEDxf6/D+zkc/PmCPlZPfwdppK6wgH2GvgqbxV+OoSnNp0XhNinjCN37P5yAo4xEi0UGOxOwkNGkJn0V5bYjH6/JHzmdVH74D40N4/Fcy0bC79oFGeiP0ZzW8AAArfIxbxStodWlBOCsTVtvi4RMECgYEA2pyZRThGx4OH8uXCC94LkdpVjKvLvbUlIVd2zk3UEFpWujgmAI+erkAaE1JSlcJpFNSlfonTX1vQuMgTOfnK7soy4677P1CMQH++GxjMWRIAQsMyx7vLtKOISr5/vQQKAyuFmxzt9xbMOmPzqWxwkuuiF74GtPgE5VXslhvsoyECgYEAz2U7L6YS4u2aMRK4DMDxcf/hZ3BxwHmUl5euknRNcaFJSdv6392y8w3t9Lz7sp8CK56GADXL1bmLrDgg2tlL82f60rtPd6IOoJk10uMmCnyjbZh7aJzuw1CTSs+dwi6qpGUB4YbJn8R2AN79SHxUb4dwVOh4lHeNa415Wka+a28CgYA3Vf5iDB22cO/fpxLYSCtrjvWqtu3KpmiwqOAU1pSAUy2y03WjHLeQ6f7vtx3adKx+rlj5z89mSuppa5OaUEVy7lG1WlyUqUHnLa6kU0GepjTUsW5QKpQktGRSbygMY1JZfRHDsq31ppqpiRVrZFyWg/iyw9IUytcKahaJ5KWgoQKBgFbgY/ugyNaQi3+1BK4rALktZAGNo8jp5SnfWzx0RaCs3GN5J80xNG4GTsCvjYwUebdF74IVBu7fi7e3x2OFlQBAdVxjJHXLx+7UXyyZBG1uKpOVRVTcMFRW42x6Le6S196HhVMwwDMR/BB/WIBNvJz/kjmvLBudPPtpxwTfD5M3AoGBALrrXX4QwqBiq4q09SPKoeOwlV35QETUhQaAKKag9aSrNMONcf77TXUBZ0d9Z+tabHLTGGa6E7q2BL82NdZSZvVeVWA+KaE4ezW2t5KyZqg14Cc0uY9Xys9VkFcVgMqsvtkUzDvAVJcmNAgcrMIEiapUR6LPrneLLXH1ikOt+hM8",
+  // TODO(takise): translation
+  "name": "ZIP archiver",
+  "version": "0.76",
+  "manifest_version": 2,
+  "minimum_chrome_version": "44.0.2400.0",
+  // TODO(takise): translation
+  "description": "ZIP archiver",
+  "default_locale": "en",
+  "display_in_launcher": false,
+  "permissions": [
+    "alwaysOnTopWindows",
+    "chrome://resources/",
+    "fileSystemProvider",
+    {"fileSystem": ["retainEntries", "write", "directory"]},
+    "notifications",
+    "storage"
+  ],
+  "file_system_provider_capabilities": {
+    "multipleMounts": true,
+    "source": "file"
+  },
+  "file_handlers": {
+    "open": {
+      "types":["application/zip"],
+      "extensions": ["zip"],
+      "verb": "open_with"
+    },
+    "pack": {
+      "types": ["*"],
+      "include_directories": true,
+      "verb": "pack_with"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "64": "icons/icon64.png",
+    "96": "icons/icon96.png",
+    "128": "icons/icon128.png"
+  },
+  "app": {
+    "background": {
+      "scripts": [
+        "js/unpacker.js",
+        "js/app.js",
+        "js/background.js",
+        "js/compressor.js",
+        "js/decompressor.js",
+        "js/passphrase-manager.js",
+        "js/request.js",
+        "js/types.js",
+        "js/volume.js"
+      ]
+    },
+    "content_security_policy": "default-src 'none'; script-src chrome://resources; style-src 'unsafe-inline' chrome://resources;"
+  }
+}
diff --git a/chromium/chrome/browser/resources/cleanup_tool/cleanup.html b/chromium/chrome/browser/resources/cleanup_tool/cleanup.html
deleted file mode 100644
index 52eabe8adac..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/cleanup.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!doctype html>
-<html dir="$i18n{textdirection}" lang="$i18n{language}">
-<head>
-  <meta name="google" value="notranslate">
-  <meta charset="utf-8">
-  <title>$i18n{title}</title>
-  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
-  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
-
-  <style>
-    html {
-      --cleanup-card-margin: 25px;
-      --cleanup-card-width: 800px;
-      background: var(--md-background-color);
-    }
-
-    body {
-      margin: 0;
-    }
-  </style>
-</head>
-
-<body>
-  <cleanup-tool-toolbar></cleanup-tool-toolbar>
-  <cleanup-manager></cleanup-manager>
-  <link rel="import" href="chrome://resources/html/cr.html">
-  <link rel="import" href="chrome://resources/html/load_time_data.html">
-  <link rel="import" href="chrome://resources/html/polymer.html">
-  <link rel="import" href="chrome://cleanup/cleanup_browser_proxy.html">
-  <link rel="import" href="chrome://cleanup/icons.html">
-  <link rel="import" href="chrome://cleanup/manager.html">
-  <link rel="import" href="chrome://cleanup/toolbar.html">
-  <script src="strings.js"></script>
-</body>
-
-</html>
diff --git a/chromium/chrome/browser/resources/cleanup_tool/cleanup_browser_proxy.js b/chromium/chrome/browser/resources/cleanup_tool/cleanup_browser_proxy.js
deleted file mode 100644
index ef22211d416..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/cleanup_browser_proxy.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// Copyright 2017 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 Helper object and related behavior that encapsulate messaging
- * between JS and C++ for interacting with the Chrome Cleanup Tool.
- */
-
-/**
- * @typedef {{
- *   hasScanResults: boolean,
- *   isInfected: boolean,
- *   detectionStatusText: string,
- *   detectionTimeText: string,
- * }}
- */
-var LastScanResult;
-
-/**
- * @typedef {{
- *   wasCancelled: boolean,
- *   uwsRemoved: Array<string>,
- *   requiresReboot: boolean,
- * }}
- */
-var CleanupResult;
-
-cr.define('cleanup', function() {
-  /** @interface */
-  function CleanupBrowserProxy() {}
-
-  CleanupBrowserProxy.prototype = {
-    /**
-     * Fetch the result of the latest Chrome Cleanup Tool scanning task.
-     * @return {!Promise<LastScanResult>}
-     */
-    requestLastScanResult: function() {},
-    /**
-     * Attempts to run the Chrome Cleanup Tool in scanning mode.
-     * @return {!Promise<LastScanResult>}
-     */
-    startScan: function() {},
-
-    /**
-     * Opens the prompt to run the Chrome Cleanup Tool.
-     * @return {!Promise<CleanupResult>}
-     */
-    startCleanup: function() {},
-  };
-
-  /**
-   * @constructor
-   * @implements {cleanup.CleanupBrowserProxy}
-   */
-  function CleanupBrowserProxyImpl() {}
-  cr.addSingletonGetter(CleanupBrowserProxyImpl);
-
-  CleanupBrowserProxyImpl.prototype = {
-    /** @override */
-    requestLastScanResult: function() {
-      return cr.sendWithPromise('requestLastScanResult');
-    },
-    /** @override */
-    startScan: function() {
-      return cr.sendWithPromise('startScan');
-    },
-    /** @override */
-    startCleanup: function() {
-      return cr.sendWithPromise('startCleanup');
-    },
-  };
-
-  return {
-    CleanupBrowserProxy: CleanupBrowserProxy,
-    CleanupBrowserProxyImpl: CleanupBrowserProxyImpl,
-  }
-});
diff --git a/chromium/chrome/browser/resources/cleanup_tool/icons.html b/chromium/chrome/browser/resources/cleanup_tool/icons.html
deleted file mode 100644
index cbf91f1cd77..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/icons.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
-
-<iron-iconset-svg size="24" name="cleanup">
-  <svg>
-    <defs>
-      <!--
-      This icon is not from Polymer's iron-icons; it was manually edited to put
-      an exclamation mark inside of a shield.
-      -->
-      <g id="infected-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm1 12h-2V6h2v6zm0 4h-2v-2h2v2z"></path></g>
-      <!--
-      These icons are copied from Polymer's iron-icons and kept in sorted order.
-      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-      -->
-      <g id="verified-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
diff --git a/chromium/chrome/browser/resources/cleanup_tool/manager.html b/chromium/chrome/browser/resources/cleanup_tool/manager.html
deleted file mode 100644
index 769e5cb9ba0..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/manager.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
-<link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/icon.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
-
-<dom-module id="cleanup-manager">
-  <template>
-    <style>
-      #content {
-        margin: 6px auto;
-        max-width: var(--cleanup-card-width);
-      }
-
-      :host {
-        -webkit-margin-start: 3px;
-        display: block;
-      }
-
-      #cleanup-tool-title {
-        margin: 24px auto 10px;
-      }
-
-      .section-title {
-        color: var(--paper-grey-600);
-        font-size: 13px;
-        font-weight: 500;
-      }
-
-      #card {
-        @apply(--shadow-elevation-2dp);
-        background: white;
-        border-radius: 2px;
-        font-size: 16px;
-        font-weight: 500;
-      }
-
-      .card-section {
-        align-items: center;
-        border-top: 1px solid var(--paper-grey-400);
-        display: flex;
-        min-height: 103px;
-      }
-
-      .card-section:first-child {
-        border-top: none;
-      }
-
-      .icon-wrapper {
-        margin: 0 24px;
-      }
-
-      .clean-icon {
-        color: var(--paper-blue-700);
-      }
-
-      .infected-icon {
-        color: var(--paper-red-700);
-      }
-
-      #status-icon {
-        height: 32px;
-        width: 32px;
-      }
-
-      .scan-details {
-        flex: 1;
-        min-width: 200px;
-      }
-
-      .under-text {
-        color: var(--paper-grey-500);
-      }
-
-      #spinner-container {
-        min-width: 28px;
-      }
-
-      #tool-action-container {
-        color: var(--paper-grey-700);
-        font-size: 18px;
-        padding: 24px;
-      }
-
-      .scan-or-cleanup-action {
-        @apply(--cr-actionable);
-        text-transform: uppercase;
-      }
-
-      #about-link {
-        color: var(--paper-blue-700);
-        padding: 24px;
-        text-decoration: none;
-      }
-    </style>
-
-    <div id="content">
-      <h3 id="cleanup-tool-title" class="section-title">
-        $i18n{sectionHeader}
-      </h3>
-      <div id="card">
-        <div class="card-section">
-          <div id="status-icon-wrapper" class="icon-wrapper">
-            <iron-icon icon="[[getStatusIcon_(hasScanResults, isInfected)]]"
-                class$="[[getIconClassName_(hasScanResults, isInfected)]]"
-                id="status-icon">
-            </iron-icon>
-          </div>
-          <div class="scan-details">
-            <div id="scan-detections">
-              [[detectionStatusText]]
-            </div>
-            <div class="under-text">
-              [[detectionTimeText]]
-            </div>
-          </div>
-          <div id="spinner-container" hidden="[[!isRunning]]">
-            <paper-spinner active></paper-spinner>
-          </div>
-          <div id="tool-action-container">
-            <div class="scan-or-cleanup-action"
-                hidden="[[!shouldShowScan_(hasScanResults, isRunning)]]"
-                on-tap="onScanTap_">$i18n{scanAction}</div>
-            <div hidden="[[!shouldShowScanning_(hasScanResults, isRunning)]]">
-                $i18n{scanning}</div>
-            <div hidden="[[!shouldShowCleaning_(hasScanResults, isRunning)]]">
-                $i18n{cleaning}</div>
-            <div class="scan-or-cleanup-action"
-                hidden="[[!shouldShowClean_(hasScanResults, isRunning)]]"
-                on-tap="onCleanupTap_">$i18n{cleanAction}</div>
-          </div>
-        </div>
-        <div class="card-section">
-          <!-- TODO(proberge): Replace answer ID with a P-link as per
-               crbug.com/679462 -->
-          <a id="about-link"
-              href="https://support.google.com/chrome/answer/6086368">
-            $i18n{about}
-          </a>
-        </div>
-      </div>
-    </div>
-
-  </template>
-  <script src="chrome://cleanup/manager.js"></script>
-</dom-module>
diff --git a/chromium/chrome/browser/resources/cleanup_tool/manager.js b/chromium/chrome/browser/resources/cleanup_tool/manager.js
deleted file mode 100644
index ce921d61d9f..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/manager.js
+++ /dev/null
@@ -1,170 +0,0 @@
-// Copyright 2017 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({
-  is: 'cleanup-manager',
-
-  properties: {
-    hasScanResults: {
-      type: Boolean,
-      value: false,
-    },
-
-    isInfected: {
-      type: Boolean,
-      value: false,
-    },
-
-    isRunning: {
-      type: Boolean,
-      value: false,
-    },
-
-    detectionStatusText: {
-      type: String,
-      value: ""
-    },
-
-    detectionTimeText: {
-      type: String,
-      value: ""
-    },
-
-    /** @private {!cleanup.CleanupBrowserProxy} */
-    browserProxy_: Object,
-  },
-
-  /** @override */
-  attached: function() {
-    // Fetch data to have it displayed as soon as possible.
-    this.requestLastScanResult_();
-  },
-
-  /** @override */
-  created: function() {
-    this.browserProxy_ = cleanup.CleanupBrowserProxyImpl.getInstance();
-  },
-
-  /**
-   * Sends a request for Chrome to start the Cleanup Tool's scanning process.
-   * @private
-   */
-  onScanTap_: function() {
-    this.isRunningScanner = true;
-    this.browserProxy_.startScan().then(this.onScanComplete_.bind(this));
-  },
-
-  /**
-   * @param {LastScanResult} lastScanResults
-   */
-  onScanComplete_: function(lastScanResults) {
-    this.isRunningScanner = false;
-    this.updateLastScanState_(lastScanResults);
-  },
-
-  /**
-   * Sends a request for Chrome to open the Cleanup Tool's cleanup prompt.
-   * @private
-   */
-  onCleanupTap_: function() {
-    this.isRunning = true;
-    this.browserProxy_.startCleanup().then(this.onCleanupResult_.bind(this));
-  },
-
-  /**
-   * @param {CleanupResult} cleanupResults
-   */
-  onCleanupResult_: function(cleanupResults) {
-    this.isRunning = false;
-
-    if (!cleanupResults.wasCancelled)
-      // Assume cleanup was completed and clear infected status.
-      this.isInfected = false;
-
-    // TODO(proberge): Do something about cleanupResults.uwsRemoved.
-  },
-
-  /**
-   * @param {boolean} hasScanResults
-   * @param {boolean} isInfected
-   * @return {string} A class name for icon-specific styling.
-   * @private
-   */
-  getIconClassName_: function(hasScanResults, isInfected) {
-    return hasScanResults && isInfected ? "infected-icon" : "clean-icon";
-  },
-
-  /**
-   * @param {boolean} hasScanResults
-   * @param {boolean} isInfected
-   * @return {string} An icon id. See icons.html.
-   * @private
-   */
-  getStatusIcon_: function(hasScanResults, isInfected) {
-    return hasScanResults && isInfected ?
-        "cleanup:infected-user" :
-        "cleanup:verified-user";
-  },
-
-  /**
-   * @param {boolean} hasScanResults
-   * @param {boolean} isRunning
-   * @return {boolean} Whether the "Scan" button should be displayed.
-   * @private
-   */
-  shouldShowScan_: function(hasScanResults, isRunning) {
-    return !hasScanResults && !isRunning;
-  },
-
-  /**
-   * @param {boolean} hasScanResults
-   * @param {boolean} isRunning
-   * @return {boolean} Whether the "Run Chrome Cleanup" button should be
-   *     displayed.
-   * @private
-   */
-  shouldShowClean_: function(hasScanResults, isRunning) {
-    return hasScanResults && !isRunning;
-  },
-
-  /**
-   * @param {boolean} hasScanResults
-   * @param {boolean} isRunning
-   * @return {boolean} True Whether the "Scanning" label should be displayed.
-   * @private
-   */
-  shouldShowScanning_: function(hasScanResults, isRunning) {
-    return !hasScanResults && isRunning;
-  },
-
-  /**
-   * @param {boolean} hasScanResults
-   * @param {boolean} isRunning
-   * @return {boolean} True Whether the "Cleaning" label should be displayed.
-   * @private
-   */
-  shouldShowCleaning_: function(hasScanResults, isRunning) {
-    return hasScanResults && isRunning;
-  },
-
-  /**
-   * Requests the latest Chrome Cleanup Tool scan results from Chrome, then
-   * updates the local state with the new information.
-   * @private
-   */
-  requestLastScanResult_: function() {
-    this.browserProxy_.requestLastScanResult().then(
-        this.updateLastScanState_.bind(this));
-  },
-
-  /**
-   @param {LastScanResult} lastScanResults
-  */
-  updateLastScanState_: function(lastScanResults) {
-    this.hasScanResults = lastScanResults.hasScanResults;
-    this.isInfected = lastScanResults.hasScanResults;
-    this.detectionStatusText = lastScanResults.detectionStatusText;
-    this.detectionTimeText = lastScanResults.detectionTimeText;
-  }
-});
diff --git a/chromium/chrome/browser/resources/cleanup_tool/toolbar.html b/chromium/chrome/browser/resources/cleanup_tool/toolbar.html
deleted file mode 100644
index 7180a88bb17..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/toolbar.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<link rel="import" href="chrome://resources/html/assert.html">
-<link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<dom-module id="cleanup-tool-toolbar">
-  <template>
-    <style>
-      :host {
-        align-items: center;
-        background: var(--md-toolbar-color);
-        color: white;
-        display: flex;
-        min-height: 56px;
-      }
-
-      #page-title {
-        -webkit-padding-start: 18px;
-        font-size: 123%;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    </style>
-    <div id="page-title">$i18n{title}</div>
-  </template>
-  <script src="chrome://cleanup/toolbar.js"></script>
-</dom-module>
diff --git a/chromium/chrome/browser/resources/cleanup_tool/toolbar.js b/chromium/chrome/browser/resources/cleanup_tool/toolbar.js
deleted file mode 100644
index e12d720ed8d..00000000000
--- a/chromium/chrome/browser/resources/cleanup_tool/toolbar.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2017 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.
-
-cr.define('cleanup', function() {
-  var Toolbar = Polymer({
-    is: 'cleanup-tool-toolbar',
-  });
-
-  return {Toolbar: Toolbar};
-});
diff --git a/chromium/chrome/browser/resources/component_extension_resources.grd b/chromium/chrome/browser/resources/component_extension_resources.grd
index aa82ed23449..790e53cb609 100644
--- a/chromium/chrome/browser/resources/component_extension_resources.grd
+++ b/chromium/chrome/browser/resources/component_extension_resources.grd
@@ -136,9 +136,12 @@
         <include name="IDR_ARC_SUPPORT_PLAYSTORE_CSS" file="chromeos/arc_support/playstore.css" type="BINDATA" />
         <include name="IDR_ARC_SUPPORT_PLAYSTORE_JS" file="chromeos/arc_support/playstore.js" type="BINDATA" />
         <include name="IDR_ARC_SUPPORT_PLAYSTORE_LOGO" file="chromeos/arc_support/icon/playstore.svg" type="BINDATA" />
+        <include name="IDR_ARC_SUPPORT_PROGRESSBAR_CSS" file="chromeos/arc_support/progressbar.css" type="BINDATA" />
+        <include name="IDR_ARC_SUPPORT_PROGRESSBAR_JS" file="chromeos/arc_support/progressbar.js" type="BINDATA" />
         <include name="IDR_ARC_SUPPORT_MAIN" file="chromeos/arc_support/main.html" allowexternalscript="true" type="BINDATA" />
         <include name="IDR_ARC_SUPPORT_ICON_48" file="chromeos/arc_support/icon/48.png" type="BINDATA" />
         <include name="IDR_ARC_SUPPORT_ICON_96" file="chromeos/arc_support/icon/96.png" type="BINDATA" />
+        <include name="IDR_ARC_SUPPORT_ICON_ERROER_IMAGE" file="chromeos/arc_support/images/error_image.png" type="BINDATA" />
         <include name="IDR_ARC_SUPPORT_ICON_HEADER" file="chromeos/arc_support/images/header.png" type="BINDATA" />
       </if>
       <if expr="enable_plugins">
diff --git a/chromium/chrome/browser/resources/connection_manager.js b/chromium/chrome/browser/resources/connection_manager.js
index baa3737584a..12cb0487bef 100644
--- a/chromium/chrome/browser/resources/connection_manager.js
+++ b/chromium/chrome/browser/resources/connection_manager.js
@@ -3,11 +3,9 @@
 // found in the LICENSE file.
 
 
-function chromeos() {
-}
+function chromeos() {}
 
-chromeos.connectionManager = function() {
-};
+chromeos.connectionManager = function() {};
 
 chromeos.connectionManager.transaction_status_callback_ = null;
 chromeos.connectionManager.parent_page_url_ = 'chrome://mobilesetup';
@@ -25,4 +23,3 @@ chromeos.connectionManager.reportTransactionStatus_ = function(status) {
   };
   window.parent.postMessage(msg, chromeos.connectionManager.parent_page_url_);
 };
-
diff --git a/chromium/chrome/browser/resources/cryptotoken/appid.js b/chromium/chrome/browser/resources/cryptotoken/appid.js
index 5e2cb7d0fb3..4b05cbced36 100644
--- a/chromium/chrome/browser/resources/cryptotoken/appid.js
+++ b/chromium/chrome/browser/resources/cryptotoken/appid.js
@@ -20,8 +20,7 @@ function getOriginsFromJson(text) {
     if (trustedFacets) {
       var versionBlock;
       for (i = 0; versionBlock = trustedFacets[i]; i++) {
-        if (versionBlock['version'] &&
-            versionBlock['version']['major'] == 1 &&
+        if (versionBlock['version'] && versionBlock['version']['major'] == 1 &&
             versionBlock['version']['minor'] == 0) {
           urls = versionBlock['ids'];
           break;
@@ -80,8 +79,8 @@ function AppIdChecker() {}
  * @param {string=} opt_logMsgUrl A log message URL.
  * @return {Promise<boolean>} A promise for the result of the check
  */
-AppIdChecker.prototype.checkAppIds =
-    function(timer, origin, appIds, allowHttp, opt_logMsgUrl) {};
+AppIdChecker.prototype.checkAppIds = function(
+    timer, origin, appIds, allowHttp, opt_logMsgUrl) {};
 
 /**
  * An interface to create an AppIdChecker.
@@ -114,8 +113,8 @@ function XhrAppIdChecker(fetcher) {
  * @param {string=} opt_logMsgUrl A log message URL.
  * @return {Promise<boolean>} A promise for the result of the check
  */
-XhrAppIdChecker.prototype.checkAppIds =
-    function(timer, origin, appIds, allowHttp, opt_logMsgUrl) {
+XhrAppIdChecker.prototype.checkAppIds = function(
+    timer, origin, appIds, allowHttp, opt_logMsgUrl) {
   if (this.timer_) {
     // Can't use the same object to check appIds more than once.
     return Promise.resolve(false);
@@ -170,8 +169,8 @@ XhrAppIdChecker.prototype.checkAppId_ = function(appId) {
   var self = this;
   return p.then(function(allowedOrigins) {
     if (allowedOrigins.indexOf(self.origin_) == -1) {
-      console.warn(UTIL_fmt('Origin ' + self.origin_ +
-            ' not allowed by app id ' + appId));
+      console.warn(UTIL_fmt(
+          'Origin ' + self.origin_ + ' not allowed by app id ' + appId));
       return false;
     }
     return true;
@@ -215,7 +214,7 @@ XhrAppIdChecker.prototype.fetchAllowedOriginsForAppId_ = function(appId) {
   var p = this.fetcher_.fetch(appId);
   var self = this;
   return p.then(getOriginsFromJson, function(rc_) {
-    var rc = /** @type {number} */(rc_);
+    var rc = /** @type {number} */ (rc_);
     console.log(UTIL_fmt('fetching ' + appId + ' failed: ' + rc));
     if (!(rc >= 400 && rc < 500) && !self.timer_.expired()) {
       // Retry
diff --git a/chromium/chrome/browser/resources/cryptotoken/b64.js b/chromium/chrome/browser/resources/cryptotoken/b64.js
index d3c1e805102..e4a26f5b2d7 100644
--- a/chromium/chrome/browser/resources/cryptotoken/b64.js
+++ b/chromium/chrome/browser/resources/cryptotoken/b64.js
@@ -4,7 +4,8 @@
 
 // WebSafeBase64Escape and Unescape.
 function B64_encode(bytes, opt_length) {
-  if (!opt_length) opt_length = bytes.length;
+  if (!opt_length)
+    opt_length = bytes.length;
   var b64out =
       'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
   var result = '';
@@ -32,7 +33,8 @@ function B64_encode(bytes, opt_length) {
 
 // Normal base64 encode; not websafe, including padding.
 function base64_encode(bytes, opt_length) {
-  if (!opt_length) opt_length = bytes.length;
+  if (!opt_length)
+    opt_length = bytes.length;
   var b64out =
       'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
   var result = '';
@@ -55,18 +57,18 @@ function base64_encode(bytes, opt_length) {
     var i = (accu >> (shift - 6)) & 63;
     result += b64out.charAt(i);
   }
-  while (result.length % 4) result += '=';
+  while (result.length % 4)
+    result += '=';
   return result;
 }
 
-var B64_inmap =
-[
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 63, 0, 0,
- 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 0, 0, 0, 0, 0, 0,
-  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
- 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 0, 0, 0, 0, 64,
-  0, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
- 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 0, 0, 0, 0, 0
+var B64_inmap = [
+  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  63, 0,  0,
+  53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 0,  0,  0,  0,  0,  0,
+  0,  1,  2,  3,  4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15,
+  16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 0,  0,  0,  0,  64,
+  0,  27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
+  42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 0,  0,  0,  0,  0
 ];
 
 function B64_decode(string) {
@@ -75,7 +77,8 @@ function B64_decode(string) {
   var shift = 0;
   for (var i = 0; i < string.length; ++i) {
     var c = string.charCodeAt(i);
-    if (c < 32 || c > 127 || !B64_inmap[c - 32]) return [];
+    if (c < 32 || c > 127 || !B64_inmap[c - 32])
+      return [];
     accu <<= 6;
     accu |= (B64_inmap[c - 32] - 1);
     shift += 6;
diff --git a/chromium/chrome/browser/resources/cryptotoken/countdowntimer.js b/chromium/chrome/browser/resources/cryptotoken/countdowntimer.js
index 4e07ddbc24d..63175c14cfe 100644
--- a/chromium/chrome/browser/resources/cryptotoken/countdowntimer.js
+++ b/chromium/chrome/browser/resources/cryptotoken/countdowntimer.js
@@ -43,14 +43,12 @@ CountdownTimer.prototype.setTimeout = function(timeoutMillis, cb) {
   this.remainingMillis = timeoutMillis;
   this.cb = cb;
   if (this.remainingMillis > CountdownTimer.TIMER_INTERVAL_MILLIS) {
-    this.timeoutId =
-        this.sysTimer_.setInterval(this.timerTick.bind(this),
-            CountdownTimer.TIMER_INTERVAL_MILLIS);
+    this.timeoutId = this.sysTimer_.setInterval(
+        this.timerTick.bind(this), CountdownTimer.TIMER_INTERVAL_MILLIS);
   } else {
     // Set a one-shot timer for the last interval.
-    this.timeoutId =
-        this.sysTimer_.setTimeout(
-            this.timerTick.bind(this), this.remainingMillis);
+    this.timeoutId = this.sysTimer_.setTimeout(
+        this.timerTick.bind(this), this.remainingMillis);
   }
   return true;
 };
@@ -114,8 +112,7 @@ function CountdownTimerFactory(sysTimer) {
  * @param {function()=} opt_cb Called back when the countdown expires.
  * @return {!Countdown} The timer.
  */
-CountdownTimerFactory.prototype.createTimer =
-    function(timeoutMillis, opt_cb) {
+CountdownTimerFactory.prototype.createTimer = function(timeoutMillis, opt_cb) {
   return new CountdownTimer(this.sysTimer_, timeoutMillis, opt_cb);
 };
 
@@ -177,9 +174,9 @@ function getTimeoutValueFromRequest(request, opt_defaultTimeoutSeconds) {
  * @param {number=} opt_attenuationSeconds Attenuation value in seconds.
  * @return {!Countdown} A countdown timer.
  */
-function createAttenuatedTimer(timerFactory, timeoutValueSeconds,
-    opt_attenuationSeconds) {
-  timeoutValueSeconds = attenuateTimeoutInSeconds(timeoutValueSeconds,
-      opt_attenuationSeconds);
+function createAttenuatedTimer(
+    timerFactory, timeoutValueSeconds, opt_attenuationSeconds) {
+  timeoutValueSeconds =
+      attenuateTimeoutInSeconds(timeoutValueSeconds, opt_attenuationSeconds);
   return timerFactory.createTimer(timeoutValueSeconds * 1000);
 }
diff --git a/chromium/chrome/browser/resources/cryptotoken/cryptotokenapprovedorigins.js b/chromium/chrome/browser/resources/cryptotoken/cryptotokenapprovedorigins.js
index 8b4f838c047..9b3bc106583 100644
--- a/chromium/chrome/browser/resources/cryptotoken/cryptotokenapprovedorigins.js
+++ b/chromium/chrome/browser/resources/cryptotoken/cryptotokenapprovedorigins.js
@@ -27,31 +27,31 @@ function CryptoTokenApprovedOrigin() {}
  *     the type allows undefined.
  * @return {Promise<boolean>} A promise for the result of the check.
  */
-CryptoTokenApprovedOrigin.prototype.isApprovedOrigin =
-    function(origin, opt_tabId) {
+CryptoTokenApprovedOrigin.prototype.isApprovedOrigin = function(
+    origin, opt_tabId) {
   return new Promise(function(resolve, reject) {
-      if (opt_tabId === undefined) {
+    if (opt_tabId === undefined) {
+      resolve(false);
+      return;
+    }
+    var tabId = /** @type {number} */ (opt_tabId);
+    tabInForeground(tabId).then(function(result) {
+      if (!result) {
         resolve(false);
         return;
       }
-      var tabId = /** @type {number} */ (opt_tabId);
-      tabInForeground(tabId).then(function(result) {
-        if (!result) {
+      if (!chrome.tabs || !chrome.tabs.get) {
+        reject();
+        return;
+      }
+      chrome.tabs.get(tabId, function(tab) {
+        if (chrome.runtime.lastError) {
           resolve(false);
           return;
         }
-        if (!chrome.tabs || !chrome.tabs.get) {
-          reject();
-          return;
-        }
-        chrome.tabs.get(tabId, function(tab) {
-          if (chrome.runtime.lastError) {
-            resolve(false);
-            return;
-          }
-          var tabOrigin = getOriginFromUrl(tab.url);
-          resolve(tabOrigin == origin);
-        });
+        var tabOrigin = getOriginFromUrl(tab.url);
+        resolve(tabOrigin == origin);
       });
+    });
   });
 };
diff --git a/chromium/chrome/browser/resources/cryptotoken/cryptotokenbackground.js b/chromium/chrome/browser/resources/cryptotoken/cryptotokenbackground.js
index 4b8c3004bba..610f3dc65c4 100644
--- a/chromium/chrome/browser/resources/cryptotoken/cryptotokenbackground.js
+++ b/chromium/chrome/browser/resources/cryptotoken/cryptotokenbackground.js
@@ -27,17 +27,13 @@ var FACTORY_REGISTRY = (function() {
   var xhrTextFetcher = new XhrTextFetcher();
   return new FactoryRegistry(
       new XhrAppIdCheckerFactory(xhrTextFetcher),
-      new CryptoTokenApprovedOrigin(),
-      new CountdownTimerFactory(windowTimer),
-      new CryptoTokenOriginChecker(),
-      new UsbHelper(),
-      windowTimer,
+      new CryptoTokenApprovedOrigin(), new CountdownTimerFactory(windowTimer),
+      new CryptoTokenOriginChecker(), new UsbHelper(), windowTimer,
       xhrTextFetcher);
 })();
 
 var DEVICE_FACTORY_REGISTRY = new DeviceFactoryRegistry(
-    new UsbGnubbyFactory(gnubbies),
-    FACTORY_REGISTRY.getCountdownFactory(),
+    new UsbGnubbyFactory(gnubbies), FACTORY_REGISTRY.getCountdownFactory(),
     new GoogleCorpIndividualAttestation());
 
 /**
@@ -107,8 +103,8 @@ function messageHandler(request, sender, sendResponse) {
     responseCallback =
         defaultResponseCallback.bind(null, request, sendResponse);
   }
-  var closeable = handleWebPageRequest(/** @type {Object} */(request),
-      sender, responseCallback);
+  var closeable = handleWebPageRequest(
+      /** @type {Object} */ (request), sender, responseCallback);
   return closeable;
 }
 
diff --git a/chromium/chrome/browser/resources/cryptotoken/cryptotokenorigincheck.js b/chromium/chrome/browser/resources/cryptotoken/cryptotokenorigincheck.js
index 3e4ac5e0559..8f41de094a4 100644
--- a/chromium/chrome/browser/resources/cryptotoken/cryptotokenorigincheck.js
+++ b/chromium/chrome/browser/resources/cryptotoken/cryptotokenorigincheck.js
@@ -16,8 +16,7 @@
  * @implements OriginChecker
  * @constructor
  */
-function CryptoTokenOriginChecker() {
-}
+function CryptoTokenOriginChecker() {}
 
 /**
  * Checks whether the origin is allowed to claim the app ids.
@@ -41,8 +40,7 @@ CryptoTokenOriginChecker.prototype.canClaimAppIds = function(origin, appIds) {
  * @return {Promise<boolean>} A promise for the result of the check
  * @private
  */
-CryptoTokenOriginChecker.prototype.checkAppId_ =
-    function(origin, appId) {
+CryptoTokenOriginChecker.prototype.checkAppId_ = function(origin, appId) {
   return new Promise(function(resolve, reject) {
     if (!chrome.cryptotokenPrivate) {
       reject();
diff --git a/chromium/chrome/browser/resources/cryptotoken/devicefactoryregistry.js b/chromium/chrome/browser/resources/cryptotoken/devicefactoryregistry.js
index c1f4bee5282..9919598a73a 100644
--- a/chromium/chrome/browser/resources/cryptotoken/devicefactoryregistry.js
+++ b/chromium/chrome/browser/resources/cryptotoken/devicefactoryregistry.js
@@ -15,8 +15,8 @@
  *     attestation implementation.
  * @constructor
  */
-function DeviceFactoryRegistry(gnubbyFactory, countdownFactory,
-    individualAttestation) {
+function DeviceFactoryRegistry(
+    gnubbyFactory, countdownFactory, individualAttestation) {
   /** @private {!GnubbyFactory} */
   this.gnubbyFactory_ = gnubbyFactory;
   /** @private {!CountdownFactory} */
diff --git a/chromium/chrome/browser/resources/cryptotoken/enroller.js b/chromium/chrome/browser/resources/cryptotoken/enroller.js
index 42b7c205deb..94ae1d42ca4 100644
--- a/chromium/chrome/browser/resources/cryptotoken/enroller.js
+++ b/chromium/chrome/browser/resources/cryptotoken/enroller.js
@@ -21,8 +21,8 @@ function handleU2fEnrollRequest(messageSender, request, sendResponse) {
   var closeable = null;
 
   function sendErrorResponse(error) {
-    var response = makeU2fErrorResponse(request, error.errorCode,
-        error.errorMessage);
+    var response =
+        makeU2fErrorResponse(request, error.errorCode, error.errorMessage);
     sendResponseOnce(sentResponse, closeable, response, sendResponse);
   }
 
@@ -65,16 +65,16 @@ function handleU2fEnrollRequest(messageSender, request, sendResponse) {
   // not before.
   var watchdogTimeoutValueSeconds = attenuateTimeoutInSeconds(
       timeoutValueSeconds, MINIMUM_TIMEOUT_ATTENUATION_SECONDS / 2);
-  var watchdog = new WatchdogRequestHandler(watchdogTimeoutValueSeconds,
-      timeout);
+  var watchdog =
+      new WatchdogRequestHandler(watchdogTimeoutValueSeconds, timeout);
   var wrappedErrorCb = watchdog.wrapCallback(sendErrorResponse);
   var wrappedSuccessCb = watchdog.wrapCallback(sendSuccessResponse);
 
   var timer = createAttenuatedTimer(
       FACTORY_REGISTRY.getCountdownFactory(), timeoutValueSeconds);
   var logMsgUrl = request['logMsgUrl'];
-  var enroller = new Enroller(timer, sender, sendErrorResponse,
-      sendSuccessResponse, logMsgUrl);
+  var enroller = new Enroller(
+      timer, sender, sendErrorResponse, sendSuccessResponse, logMsgUrl);
   watchdog.setCloseable(/** @type {!Closeable} */ (enroller));
   closeable = watchdog;
 
@@ -182,8 +182,8 @@ function findEnrollChallengeOfVersion(enrollChallenges, version) {
  * @param {string=} opt_clientData The client data, if available.
  * @return {Object} The responseData object.
  */
-function makeEnrollResponseData(enrollChallenge, u2fVersion, registrationData,
-    opt_clientData) {
+function makeEnrollResponseData(
+    enrollChallenge, u2fVersion, registrationData, opt_clientData) {
   var responseData = {};
   responseData['registrationData'] = registrationData;
   // Echo the used challenge back in the reply.
@@ -278,8 +278,8 @@ Enroller.DEFAULT_TIMEOUT_MILLIS = 30 * 1000;
  *     existing enrollments for this user and appId.
  * @param {string=} opt_appId The app id for the entire request.
  */
-Enroller.prototype.doEnroll = function(enrollChallenges, signChallenges,
-    opt_appId) {
+Enroller.prototype.doEnroll = function(
+    enrollChallenges, signChallenges, opt_appId) {
   /** @private {Array<EnrollChallenge>} */
   this.enrollChallenges_ = enrollChallenges;
   /** @private {Array<SignChallenge>} */
@@ -287,13 +287,17 @@ Enroller.prototype.doEnroll = function(enrollChallenges, signChallenges,
   /** @private {(string|undefined)} */
   this.appId_ = opt_appId;
   var self = this;
-  getTabIdWhenPossible(this.sender_).then(function() {
-    if (self.done_) return;
-    self.approveOrigin_();
-  }, function() {
-    self.close();
-    self.notifyError_({errorCode: ErrorCodes.BAD_REQUEST});
-  });
+  getTabIdWhenPossible(this.sender_)
+      .then(
+          function() {
+            if (self.done_)
+              return;
+            self.approveOrigin_();
+          },
+          function() {
+            self.close();
+            self.notifyError_({errorCode: ErrorCodes.BAD_REQUEST});
+          });
 };
 
 /**
@@ -306,7 +310,8 @@ Enroller.prototype.approveOrigin_ = function() {
   FACTORY_REGISTRY.getApprovedOrigins()
       .isApprovedOrigin(this.sender_.origin, this.sender_.tabId)
       .then(function(result) {
-        if (self.done_) return;
+        if (self.done_)
+          return;
         if (!result) {
           // Origin not approved: rather than give an explicit indication to
           // the web page, let a timeout occur.
@@ -346,9 +351,8 @@ Enroller.prototype.sendEnrollRequestToHelper_ = function() {
   // If the request didn't contain a sign challenge, provide one. The value
   // doesn't matter.
   var defaultSignChallenge = '';
-  var encodedSignChallenges =
-      encodeSignChallenges(this.signChallenges_, defaultSignChallenge,
-          this.appId_);
+  var encodedSignChallenges = encodeSignChallenges(
+      this.signChallenges_, defaultSignChallenge, this.appId_);
   var request = {
     type: 'enroll_helper_request',
     enrollChallenges: encodedEnrollChallenges,
@@ -378,7 +382,8 @@ Enroller.prototype.sendEnrollRequestToHelper_ = function() {
   }
   var self = this;
   this.checkAppIds_(enrollAppIds, function(result) {
-    if (self.done_) return;
+    if (self.done_)
+      return;
     if (result) {
       self.handler_ = FACTORY_REGISTRY.getRequestHelper().getHandler(request);
       if (self.handler_) {
@@ -434,8 +439,8 @@ Enroller.encodeEnrollChallenge_ = function(enrollChallenge, opt_appId) {
  * @return {!Array<EnrollHelperChallenge>} The encoded enroll challenges.
  * @private
  */
-Enroller.prototype.encodeEnrollChallenges_ = function(enrollChallenges,
-    opt_appId) {
+Enroller.prototype.encodeEnrollChallenges_ = function(
+    enrollChallenges, opt_appId) {
   var challenges = [];
   for (var i = 0; i < enrollChallenges.length; i++) {
     var enrollChallenge = enrollChallenges[i];
@@ -459,8 +464,7 @@ Enroller.prototype.encodeEnrollChallenges_ = function(enrollChallenges,
       // Replace the challenge with the hash of the browser data.
       modifiedChallenge['challenge'] =
           B64_encode(sha256HashOfString(browserData));
-      this.browserData_[version] =
-          B64_encode(UTIL_StringToBytes(browserData));
+      this.browserData_[version] = B64_encode(UTIL_StringToBytes(browserData));
       challenges.push(Enroller.encodeEnrollChallenge_(
           /** @type {EnrollChallenge} */ (modifiedChallenge), opt_appId));
     } else {
@@ -502,8 +506,8 @@ Enroller.prototype.originChecked_ = function(appIds, cb, result) {
     return;
   }
   var appIdChecker = FACTORY_REGISTRY.getAppIdCheckerFactory().create();
-  appIdChecker.
-      checkAppIds(
+  appIdChecker
+      .checkAppIds(
           this.timer_.clone(), this.sender_.origin, appIds, this.allowHttp_,
           this.logMsgUrl_)
       .then(cb);
@@ -538,8 +542,8 @@ Enroller.prototype.notifyError_ = function(error) {
  * @param {string|undefined} opt_browserData Browser data used
  * @private
  */
-Enroller.prototype.notifySuccess_ =
-    function(u2fVersion, info, opt_browserData) {
+Enroller.prototype.notifySuccess_ = function(
+    u2fVersion, info, opt_browserData) {
   if (this.done_)
     return;
   this.close();
@@ -555,8 +559,9 @@ Enroller.prototype.notifySuccess_ =
 Enroller.prototype.helperComplete_ = function(reply) {
   if (reply.code) {
     var reportedError = mapDeviceStatusCodeToU2fError(reply.code);
-    console.log(UTIL_fmt('helper reported ' + reply.code.toString(16) +
-        ', returning ' + reportedError.errorCode));
+    console.log(UTIL_fmt(
+        'helper reported ' + reply.code.toString(16) + ', returning ' +
+        reportedError.errorCode));
     this.notifyError_(reportedError);
   } else {
     console.log(UTIL_fmt('Gnubby enrollment succeeded!!!!!'));
@@ -568,8 +573,8 @@ Enroller.prototype.helperComplete_ = function(reply) {
       browserData = this.browserData_[reply.version];
     }
 
-    this.notifySuccess_(/** @type {string} */ (reply.version),
-                        /** @type {string} */ (reply.enrollData),
-                        browserData);
+    this.notifySuccess_(
+        /** @type {string} */ (reply.version),
+        /** @type {string} */ (reply.enrollData), browserData);
   }
 };
diff --git a/chromium/chrome/browser/resources/cryptotoken/factoryregistry.js b/chromium/chrome/browser/resources/cryptotoken/factoryregistry.js
index e0f5d297e04..d5866e8dee6 100644
--- a/chromium/chrome/browser/resources/cryptotoken/factoryregistry.js
+++ b/chromium/chrome/browser/resources/cryptotoken/factoryregistry.js
@@ -18,8 +18,9 @@
  * @param {!TextFetcher} textFetcher A text fetcher.
  * @constructor
  */
-function FactoryRegistry(appIdCheckerFactory, approvedOrigins, countdownFactory,
-    originChecker, requestHelper, sysTimer, textFetcher) {
+function FactoryRegistry(
+    appIdCheckerFactory, approvedOrigins, countdownFactory, originChecker,
+    requestHelper, sysTimer, textFetcher) {
   /** @private {!AppIdCheckerFactory} */
   this.appIdCheckerFactory_ = appIdCheckerFactory;
   /** @private {!ApprovedOrigins} */
diff --git a/chromium/chrome/browser/resources/cryptotoken/generichelper.js b/chromium/chrome/browser/resources/cryptotoken/generichelper.js
index 29446105f2f..ea56f5abdbb 100644
--- a/chromium/chrome/browser/resources/cryptotoken/generichelper.js
+++ b/chromium/chrome/browser/resources/cryptotoken/generichelper.js
@@ -42,7 +42,7 @@ GenericRequestHelper.prototype.getHandler = function(request) {
  * @param {RequestHandlerFactory} factory A factory that can produce a handler
  *     for a request of a given type.
  */
-GenericRequestHelper.prototype.registerHandlerFactory =
-    function(type, factory) {
+GenericRequestHelper.prototype.registerHandlerFactory = function(
+    type, factory) {
   this.handlerFactories_[type] = factory;
 };
diff --git a/chromium/chrome/browser/resources/cryptotoken/gnubbies.js b/chromium/chrome/browser/resources/cryptotoken/gnubbies.js
index 8424b393a8a..d6c10791f2a 100644
--- a/chromium/chrome/browser/resources/cryptotoken/gnubbies.js
+++ b/chromium/chrome/browser/resources/cryptotoken/gnubbies.js
@@ -30,11 +30,7 @@ var GnubbyDeviceId;
  * @const
  * @enum {number}
  */
-var GnubbyEnumerationTypes = {
-  ANY: 0,
-  VID_PID: 1,
-  FIDO_U2F: 2
-};
+var GnubbyEnumerationTypes = {ANY: 0, VID_PID: 1, FIDO_U2F: 2};
 
 /**
  * @typedef {{
@@ -87,7 +83,8 @@ Gnubbies.prototype.registerNamespace = function(namespace, impl) {
  * @return {boolean} Whether the device is a shared access device.
  */
 Gnubbies.prototype.isSharedAccess = function(id) {
-  if (!this.impl_.hasOwnProperty(id.namespace)) return false;
+  if (!this.impl_.hasOwnProperty(id.namespace))
+    return false;
   return this.impl_[id.namespace].isSharedAccess;
 };
 
@@ -213,7 +210,7 @@ Gnubbies.prototype.enumerate = function(cb, opt_type) {
   function makeEnumerateCb(namespace) {
     return function(devs) {
       enumerated(namespace, deviceIds, devs);
-    }
+    };
   }
 
   this.pendingEnumerate.push(cb);
@@ -247,9 +244,8 @@ Gnubbies.prototype.resetInactivityTimer = function(opt_timeoutMillis) {
       opt_timeoutMillis + Gnubbies.INACTIVITY_TIMEOUT_MARGIN_MILLIS :
       Gnubbies.INACTIVITY_TIMEOUT_MARGIN_MILLIS;
   if (!this.inactivityTimer) {
-    this.inactivityTimer =
-        new CountdownTimer(
-            Gnubbies.SYS_TIMER_, millis, this.inactivityTimeout_.bind(this));
+    this.inactivityTimer = new CountdownTimer(
+        Gnubbies.SYS_TIMER_, millis, this.inactivityTimeout_.bind(this));
   } else if (millis > this.inactivityTimer.millisecondsUntilExpired()) {
     this.inactivityTimer.clearTimeout();
     this.inactivityTimer.setTimeout(millis, this.inactivityTimeout_.bind(this));
@@ -265,7 +261,8 @@ Gnubbies.prototype.inactivityTimeout_ = function() {
   for (var namespace in this.openDevs_) {
     for (var dev in this.openDevs_[namespace]) {
       var deviceId = Number(dev);
-      console.warn(namespace + ' device ' + deviceId +
+      console.warn(
+          namespace + ' device ' + deviceId +
           ' still open after inactivity, closing');
       this.openDevs_[namespace][deviceId].destroy();
     }
@@ -288,10 +285,14 @@ Gnubbies.prototype.addClient = function(which, who, cb) {
     if (gnubby.closing) {
       // Device is closing or already closed.
       self.removeClient(gnubby, who);
-      if (cb) { cb(-GnubbyDevice.NODEVICE); }
+      if (cb) {
+        cb(-GnubbyDevice.NODEVICE);
+      }
     } else {
       gnubby.registerClient(who);
-      if (cb) { cb(-GnubbyDevice.OK, gnubby); }
+      if (cb) {
+        cb(-GnubbyDevice.OK, gnubby);
+      }
     }
   }
 
@@ -319,7 +320,9 @@ Gnubbies.prototype.addClient = function(which, who, cb) {
   if (!dev) {
     // Index out of bounds. Device does not exist in current enumeration.
     this.removeClient(null, who);
-    if (cb) { cb(-GnubbyDevice.NODEVICE); }
+    if (cb) {
+      cb(-GnubbyDevice.NODEVICE);
+    }
     return;
   }
 
diff --git a/chromium/chrome/browser/resources/cryptotoken/gnubby-u2f.js b/chromium/chrome/browser/resources/cryptotoken/gnubby-u2f.js
index 47ac6f652be..d0335ec9ddf 100644
--- a/chromium/chrome/browser/resources/cryptotoken/gnubby-u2f.js
+++ b/chromium/chrome/browser/resources/cryptotoken/gnubby-u2f.js
@@ -42,23 +42,22 @@ Gnubby.U2F_V2 = 'U2F_V2';
  * @param {boolean=} opt_individualAttestation Request the individual
  *     attestation cert rather than the batch one.
  */
-Gnubby.prototype.enroll = function(challenge, appIdHash, cb,
-    opt_individualAttestation) {
+Gnubby.prototype.enroll = function(
+    challenge, appIdHash, cb, opt_individualAttestation) {
   var p1 = Gnubby.P1_TUP_REQUIRED | Gnubby.P1_TUP_CONSUME;
   if (opt_individualAttestation) {
     p1 |= Gnubby.P1_INDIVIDUAL_KEY;
   }
-  var apdu = new Uint8Array(
-      [0x00,
-       Gnubby.U2F_ENROLL,
-       p1,
-       0x00, 0x00, 0x00,
-       challenge.length + appIdHash.length]);
-  var u8 = new Uint8Array(apdu.length + challenge.length +
-      appIdHash.length + 2);
-  for (var i = 0; i < apdu.length; ++i) u8[i] = apdu[i];
-  for (var i = 0; i < challenge.length; ++i) u8[i + apdu.length] =
-    challenge[i];
+  var apdu = new Uint8Array([
+    0x00, Gnubby.U2F_ENROLL, p1, 0x00, 0x00, 0x00,
+    challenge.length + appIdHash.length
+  ]);
+  var u8 =
+      new Uint8Array(apdu.length + challenge.length + appIdHash.length + 2);
+  for (var i = 0; i < apdu.length; ++i)
+    u8[i] = apdu[i];
+  for (var i = 0; i < challenge.length; ++i)
+    u8[i + apdu.length] = challenge[i];
   for (var i = 0; i < appIdHash.length; ++i) {
     u8[i + apdu.length + challenge.length] = appIdHash[i];
   }
@@ -75,8 +74,8 @@ Gnubby.prototype.enroll = function(challenge, appIdHash, cb,
  * @param {boolean=} opt_nowink Request signature without winking
  *     (e.g. during enroll)
  */
-Gnubby.prototype.sign = function(challengeHash, appIdHash, keyHandle, cb,
-                                    opt_nowink) {
+Gnubby.prototype.sign = function(
+    challengeHash, appIdHash, keyHandle, cb, opt_nowink) {
   var self = this;
   // The sign command's format is ever-so-slightly different between V1 and V2,
   // so get this gnubby's version prior to sending it.
@@ -87,17 +86,15 @@ Gnubby.prototype.sign = function(challengeHash, appIdHash, keyHandle, cb,
     }
     var version = UTIL_BytesToString(new Uint8Array(opt_data || []));
     var apduDataLen =
-      challengeHash.length + appIdHash.length + keyHandle.length;
+        challengeHash.length + appIdHash.length + keyHandle.length;
     if (version != Gnubby.U2F_V1) {
       // The V2 sign command includes a length byte for the key handle.
       apduDataLen++;
     }
-    var apdu = new Uint8Array(
-        [0x00,
-         Gnubby.U2F_SIGN,
-         Gnubby.P1_TUP_REQUIRED | Gnubby.P1_TUP_CONSUME,
-         0x00, 0x00, 0x00,
-         apduDataLen]);
+    var apdu = new Uint8Array([
+      0x00, Gnubby.U2F_SIGN, Gnubby.P1_TUP_REQUIRED | Gnubby.P1_TUP_CONSUME,
+      0x00, 0x00, 0x00, apduDataLen
+    ]);
     if (opt_nowink) {
       // A signature request that does not want winking.
       // These are used during enroll to figure out whether a gnubby was already
@@ -107,9 +104,10 @@ Gnubby.prototype.sign = function(challengeHash, appIdHash, keyHandle, cb,
       apdu[2] |= Gnubby.P1_TUP_TESTONLY;
     }
     var u8 = new Uint8Array(apdu.length + apduDataLen + 2);
-    for (var i = 0; i < apdu.length; ++i) u8[i] = apdu[i];
-    for (var i = 0; i < challengeHash.length; ++i) u8[i + apdu.length] =
-      challengeHash[i];
+    for (var i = 0; i < apdu.length; ++i)
+      u8[i] = apdu[i];
+    for (var i = 0; i < challengeHash.length; ++i)
+      u8[i + apdu.length] = challengeHash[i];
     for (var i = 0; i < appIdHash.length; ++i) {
       u8[i + apdu.length + challengeHash.length] = appIdHash[i];
     }
@@ -128,7 +126,8 @@ Gnubby.prototype.sign = function(challengeHash, appIdHash, keyHandle, cb,
  * @param {function(...)} cb Callback
  */
 Gnubby.prototype.version = function(cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   if (this.version_) {
     cb(-GnubbyDevice.OK, this.version_);
     return;
@@ -142,8 +141,8 @@ Gnubby.prototype.version = function(cb) {
     cb(rc, data);
   }
 
-  var apdu = new Uint8Array([0x00, Gnubby.U2F_VERSION, 0x00, 0x00, 0x00,
-      0x00, 0x00]);
+  var apdu =
+      new Uint8Array([0x00, Gnubby.U2F_VERSION, 0x00, 0x00, 0x00, 0x00, 0x00]);
   this.apduReply(apdu.buffer, function(rc, data) {
     if (rc == 0x6d00) {
       // Command not implemented. Pretend this is v1.
@@ -155,8 +154,8 @@ Gnubby.prototype.version = function(cb) {
     if (rc == 0x6700) {
       // Wrong length. Try with non-ISO 7816-4-conforming layout defined in
       // earlier U2F drafts.
-      apdu = new Uint8Array([0x00, Gnubby.U2F_VERSION, 0x00, 0x00, 0x00,
-          0x00, 0x00, 0x00, 0x00]);
+      apdu = new Uint8Array(
+          [0x00, Gnubby.U2F_VERSION, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00]);
       self.apduReply(apdu.buffer, gotResponse);
       return;
     }
diff --git a/chromium/chrome/browser/resources/cryptotoken/gnubby.js b/chromium/chrome/browser/resources/cryptotoken/gnubby.js
index 410ec291218..28910ce98a6 100644
--- a/chromium/chrome/browser/resources/cryptotoken/gnubby.js
+++ b/chromium/chrome/browser/resources/cryptotoken/gnubby.js
@@ -49,10 +49,9 @@ Gnubby.setGnubbies = function(gnubbies) {
  * @return {string} hexadecimal string.
  */
 Gnubby.hexCid = function(cid) {
-  var tmp = [(cid >>> 24) & 255,
-             (cid >>> 16) & 255,
-             (cid >>> 8) & 255,
-             (cid >>> 0) & 255];
+  var tmp = [
+    (cid >>> 24) & 255, (cid >>> 16) & 255, (cid >>> 8) & 255, (cid >>> 0) & 255
+  ];
   return UTIL_BytesToHex(tmp);
 };
 
@@ -172,10 +171,9 @@ Gnubby.prototype.close = function() {
     // Wait a bit in case simpleton client tries open next gnubby.
     // Without delay, gnubbies would drop all idle devices, before client
     // gets to the next one.
-    window.setTimeout(
-        function() {
-          Gnubby.gnubbies_.removeClient(dev, self);
-        }, 300);
+    window.setTimeout(function() {
+      Gnubby.gnubbies_.removeClient(dev, self);
+    }, 300);
   }
 };
 
@@ -186,11 +184,13 @@ Gnubby.prototype.close = function() {
 Gnubby.prototype.closeWhenIdle = function(cb) {
   if (!this.inUse_()) {
     this.close();
-    if (cb) cb();
+    if (cb)
+      cb();
     return;
   }
   this.closingWhenIdle = true;
-  if (cb) this.notifyOnClose.push(cb);
+  if (cb)
+    this.notifyOnClose.push(cb);
 };
 
 /**
@@ -222,7 +222,8 @@ Gnubby.prototype.idleClose_ = function() {
 Gnubby.prototype.notifyFrame_ = function(cb) {
   if (this.rxframes.length != 0) {
     // Already have frames; continue.
-    if (cb) window.setTimeout(cb, 0);
+    if (cb)
+      window.setTimeout(cb, 0);
   } else {
     this.rxcb = cb;
   }
@@ -235,7 +236,8 @@ Gnubby.prototype.notifyFrame_ = function(cb) {
  *     frames from its device.
  */
 Gnubby.prototype.receivedFrame = function(frame) {
-  if (this.closed) return false;  // No longer interested.
+  if (this.closed)
+    return false;  // No longer interested.
 
   if (!this.checkCID_(frame)) {
     // Not for me, ignore.
@@ -247,7 +249,8 @@ Gnubby.prototype.receivedFrame = function(frame) {
   // Callback self in case we were waiting. Once.
   var cb = this.rxcb;
   this.rxcb = null;
-  if (cb) window.setTimeout(cb, 0);
+  if (cb)
+    window.setTimeout(cb, 0);
 
   return true;
 };
@@ -264,7 +267,8 @@ Gnubby.prototype.getLastReadError = function() {
  * @private
  */
 Gnubby.prototype.readFrame_ = function() {
-  if (this.rxframes.length == 0) throw 'rxframes empty!';
+  if (this.rxframes.length == 0)
+    throw 'rxframes empty!';
 
   var frame = this.rxframes.shift();
   return frame;
@@ -277,8 +281,14 @@ Gnubby.prototype.readFrame_ = function() {
  * @private
  */
 Gnubby.prototype.read_ = function(cmd, timeout, cb) {
-  if (this.closed) { cb(-GnubbyDevice.GONE); return; }
-  if (!this.dev) { cb(-GnubbyDevice.GONE); return; }
+  if (this.closed) {
+    cb(-GnubbyDevice.GONE);
+    return;
+  }
+  if (!this.dev) {
+    cb(-GnubbyDevice.GONE);
+    return;
+  }
 
   var tid = null;  // timeout timer id.
   var callback = cb;
@@ -304,16 +314,19 @@ Gnubby.prototype.read_ = function(cmd, timeout, cb) {
     var c = callback;
     if (c) {
       callback = null;
-      window.setTimeout(function() { c(a, b); }, 0);
+      window.setTimeout(function() {
+        c(a, b);
+      }, 0);
     }
-    if (self.closingWhenIdle) self.idleClose_();
+    if (self.closingWhenIdle)
+      self.idleClose_();
   }
 
   function read_timeout() {
-    if (!callback || !tid) return;  // Already done.
+    if (!callback || !tid)
+      return;  // Already done.
 
-    console.error(UTIL_fmt(
-        '[' + Gnubby.hexCid(self.cid) + '] timeout!'));
+    console.error(UTIL_fmt('[' + Gnubby.hexCid(self.cid) + '] timeout!'));
 
     if (self.dev) {
       self.dev.destroy();  // Stop pretending this thing works.
@@ -325,7 +338,8 @@ Gnubby.prototype.read_ = function(cmd, timeout, cb) {
   }
 
   function cont_frame() {
-    if (!callback || !tid) return;  // Already done.
+    if (!callback || !tid)
+      return;  // Already done.
 
     var f = new Uint8Array(self.readFrame_());
     var rcmd = f[4];
@@ -376,7 +390,8 @@ Gnubby.prototype.read_ = function(cmd, timeout, cb) {
   }
 
   function init_frame() {
-    if (!callback || !tid) return;  // Already done.
+    if (!callback || !tid)
+      return;  // Already done.
 
     var f = new Uint8Array(self.readFrame_());
 
@@ -439,13 +454,13 @@ Gnubby.prototype.read_ = function(cmd, timeout, cb) {
 };
 
 /**
-  * @const
-  */
+ * @const
+ */
 Gnubby.NOTIFICATION_CID = 0;
 
 /**
-  * @const
-  */
+ * @const
+ */
 Gnubby.BROADCAST_CID = (0xff << 24) | (0xff << 16) | (0xff << 8) | 0xff;
 
 /**
@@ -455,12 +470,8 @@ Gnubby.BROADCAST_CID = (0xff << 24) | (0xff << 16) | (0xff << 8) | 0xff;
  */
 Gnubby.prototype.checkCID_ = function(frame) {
   var f = new Uint8Array(frame);
-  var c = (f[0] << 24) |
-          (f[1] << 16) |
-          (f[2] << 8) |
-          (f[3]);
-  return c === this.cid ||
-         c === Gnubby.NOTIFICATION_CID;
+  var c = (f[0] << 24) | (f[1] << 16) | (f[2] << 8) | (f[3]);
+  return c === this.cid || c === Gnubby.NOTIFICATION_CID;
 };
 
 /**
@@ -470,8 +481,10 @@ Gnubby.prototype.checkCID_ = function(frame) {
  * @private
  */
 Gnubby.prototype.write_ = function(cmd, data) {
-  if (this.closed) return;
-  if (!this.dev) return;
+  if (this.closed)
+    return;
+  if (!this.dev)
+    return;
 
   this.commandPending = true;
 
@@ -520,8 +533,10 @@ Gnubby.SYS_TIMER_ = new WindowTimer();
 Gnubby.defaultCallback = function(rc, data) {
   var msg = 'defaultCallback(' + rc;
   if (data) {
-    if (typeof data == 'string') msg += ', ' + data;
-    else msg += ', ' + UTIL_BytesToHex(new Uint8Array(data));
+    if (typeof data == 'string')
+      msg += ', ' + data;
+    else
+      msg += ', ' + UTIL_BytesToHex(new Uint8Array(data));
   }
   msg += ')';
   console.log(UTIL_fmt(msg));
@@ -535,7 +550,8 @@ Gnubby.defaultCallback = function(rc, data) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.sync = function(cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   if (this.closed) {
     cb(-GnubbyDevice.GONE);
     return;
@@ -549,7 +565,8 @@ Gnubby.prototype.sync = function(cb) {
   function returnValue(rc) {
     done = true;
     window.setTimeout(cb.bind(null, rc), 0);
-    if (self.closingWhenIdle) self.idleClose_();
+    if (self.closingWhenIdle)
+      self.idleClose_();
   }
 
   function callback(rc, opt_frame) {
@@ -569,13 +586,15 @@ Gnubby.prototype.sync = function(cb) {
   }
 
   function syncSentinelEquals(f) {
-    return (f[4] == GnubbyDevice.CMD_SYNC &&
+    return (
+        f[4] == GnubbyDevice.CMD_SYNC &&
         (f.length == 7 || /* fw pre-0.2.1 bug: does not echo sentinel */
          f[7] == self.synccnt));
   }
 
   function syncCompletionAction(rc, opt_frame) {
-    if (rc) console.warn(UTIL_fmt('sync failed: ' + rc));
+    if (rc)
+      console.warn(UTIL_fmt('sync failed: ' + rc));
     returnValue(rc);
   }
 
@@ -591,16 +610,15 @@ Gnubby.prototype.sync = function(cb) {
   }
 
   function initSentinelEquals(f) {
-    return (f[4] == GnubbyDevice.CMD_INIT &&
-        f.length >= nonce.length + 7 &&
+    return (
+        f[4] == GnubbyDevice.CMD_INIT && f.length >= nonce.length + 7 &&
         UTIL_equalArrays(f.subarray(7, nonce.length + 7), nonce));
   }
 
   function initCmdUnsupported(rc) {
     // Different firmwares fail differently on different inputs, so treat any
     // of the following errors as indicating the INIT command isn't supported.
-    return rc == -GnubbyDevice.INVALID_CMD ||
-        rc == -GnubbyDevice.INVALID_PAR ||
+    return rc == -GnubbyDevice.INVALID_CMD || rc == -GnubbyDevice.INVALID_PAR ||
         rc == -GnubbyDevice.INVALID_LEN;
   }
 
@@ -626,10 +644,8 @@ Gnubby.prototype.sync = function(cb) {
     }
     // Accept the provided cid.
     var offs = HEADER_LENGTH + nonce.length;
-    self.cid = (opt_frame[offs] << 24) |
-               (opt_frame[offs + 1] << 16) |
-               (opt_frame[offs + 2] << 8) |
-               opt_frame[offs + 3];
+    self.cid = (opt_frame[offs] << 24) | (opt_frame[offs + 1] << 16) |
+        (opt_frame[offs + 2] << 8) | opt_frame[offs + 3];
     returnValue(rc);
   }
 
@@ -637,8 +653,7 @@ Gnubby.prototype.sync = function(cb) {
     var f = new Uint8Array(self.readFrame_());
 
     // Stop on errors and return them.
-    if (f[4] == GnubbyDevice.CMD_ERROR &&
-        f[5] == 0 && f[6] == 1) {
+    if (f[4] == GnubbyDevice.CMD_ERROR && f[5] == 0 && f[6] == 1) {
       if (f[7] == GnubbyDevice.BUSY) {
         // Not spec but some devices do this; retry.
         sendSentinel();
@@ -665,7 +680,8 @@ Gnubby.prototype.sync = function(cb) {
   }
 
   function timeoutLoop() {
-    if (done) return;
+    if (done)
+      return;
 
     if (trycount == 0) {
       // Failed.
@@ -720,7 +736,8 @@ Gnubby.MAX_TIMEOUT = 31;
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.blink = function(data, cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   if (typeof data == 'number') {
     var d = new Uint8Array([data]);
     data = d.buffer;
@@ -733,7 +750,8 @@ Gnubby.prototype.blink = function(data, cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.lock = function(data, cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   if (typeof data == 'number') {
     var d = new Uint8Array([data]);
     data = d.buffer;
@@ -745,28 +763,30 @@ Gnubby.prototype.lock = function(data, cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.unlock = function(cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   var data = new Uint8Array([0]);
-  this.exchange_(GnubbyDevice.CMD_LOCK, data.buffer,
-      Gnubby.NORMAL_TIMEOUT, cb);
+  this.exchange_(GnubbyDevice.CMD_LOCK, data.buffer, Gnubby.NORMAL_TIMEOUT, cb);
 };
 
 /** Request system information data.
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.sysinfo = function(cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
-  this.exchange_(GnubbyDevice.CMD_SYSINFO, new ArrayBuffer(0),
-      Gnubby.NORMAL_TIMEOUT, cb);
+  if (!cb)
+    cb = Gnubby.defaultCallback;
+  this.exchange_(
+      GnubbyDevice.CMD_SYSINFO, new ArrayBuffer(0), Gnubby.NORMAL_TIMEOUT, cb);
 };
 
 /** Send wink command
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.wink = function(cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
-  this.exchange_(GnubbyDevice.CMD_WINK, new ArrayBuffer(0),
-      Gnubby.NORMAL_TIMEOUT, cb);
+  if (!cb)
+    cb = Gnubby.defaultCallback;
+  this.exchange_(
+      GnubbyDevice.CMD_WINK, new ArrayBuffer(0), Gnubby.NORMAL_TIMEOUT, cb);
 };
 
 /** Send DFU (Device firmware upgrade) command
@@ -774,7 +794,8 @@ Gnubby.prototype.wink = function(cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.dfu = function(data, cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   this.exchange_(GnubbyDevice.CMD_DFU, data, Gnubby.NORMAL_TIMEOUT, cb);
 };
 
@@ -783,7 +804,8 @@ Gnubby.prototype.dfu = function(data, cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.ping = function(data, cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   if (typeof data == 'number') {
     var d = new Uint8Array(data);
     window.crypto.getRandomValues(d);
@@ -797,7 +819,8 @@ Gnubby.prototype.ping = function(data, cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.apdu = function(data, cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   this.exchange_(GnubbyDevice.CMD_APDU, data, Gnubby.MAX_TIMEOUT, cb);
 };
 
@@ -805,9 +828,10 @@ Gnubby.prototype.apdu = function(data, cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.reset = function(cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
-  this.exchange_(GnubbyDevice.CMD_ATR, new ArrayBuffer(0),
-      Gnubby.MAX_TIMEOUT, cb);
+  if (!cb)
+    cb = Gnubby.defaultCallback;
+  this.exchange_(
+      GnubbyDevice.CMD_ATR, new ArrayBuffer(0), Gnubby.MAX_TIMEOUT, cb);
 };
 
 // byte args[3] = [delay-in-ms before disabling interrupts,
@@ -818,10 +842,11 @@ Gnubby.prototype.reset = function(cb) {
  * @param {?function(...)} cb Callback
  */
 Gnubby.prototype.usb_test = function(args, cb) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   var u8 = new Uint8Array(args);
-  this.exchange_(GnubbyDevice.CMD_USB_TEST, u8.buffer,
-      Gnubby.NORMAL_TIMEOUT, cb);
+  this.exchange_(
+      GnubbyDevice.CMD_USB_TEST, u8.buffer, Gnubby.NORMAL_TIMEOUT, cb);
 };
 
 /** APDU command with reply
@@ -830,7 +855,8 @@ Gnubby.prototype.usb_test = function(args, cb) {
  * @param {boolean=} opt_nowink Do not wink
  */
 Gnubby.prototype.apduReply = function(request, cb, opt_nowink) {
-  if (!cb) cb = Gnubby.defaultCallback;
+  if (!cb)
+    cb = Gnubby.defaultCallback;
   var self = this;
 
   this.apdu(request, function(rc, data) {
@@ -846,7 +872,9 @@ Gnubby.prototype.apduReply = function(request, cb, opt_nowink) {
         rc = r8[r8.length - 2] * 256 + r8[r8.length - 1];
         // wink gnubby at hand if it needs touching.
         if (rc == 0x6985 && !opt_nowink) {
-          self.wink(function() { cb(rc); });
+          self.wink(function() {
+            cb(rc);
+          });
           return;
         }
       }
diff --git a/chromium/chrome/browser/resources/cryptotoken/gnubbyfactory.js b/chromium/chrome/browser/resources/cryptotoken/gnubbyfactory.js
index 5be99d6765c..aca6c6d47ea 100644
--- a/chromium/chrome/browser/resources/cryptotoken/gnubbyfactory.js
+++ b/chromium/chrome/browser/resources/cryptotoken/gnubbyfactory.js
@@ -17,8 +17,7 @@ function GnubbyFactory() {}
  * Enumerates gnubbies.
  * @param {function(number, Array<GnubbyDeviceId>)} cb Enumerate callback
  */
-GnubbyFactory.prototype.enumerate = function(cb) {
-};
+GnubbyFactory.prototype.enumerate = function(cb) {};
 
 /** @typedef {function(number, Gnubby=)} */
 var FactoryOpenCallback;
@@ -36,9 +35,8 @@ var FactoryOpenCallback;
  *     that can be used to cancel this pending open operation. Opening device
  *     might take long time or be resource-hungry.
  */
-GnubbyFactory.prototype.openGnubby =
-    function(which, forEnroll, cb, opt_appIdHash, opt_logMsgUrl, opt_caller) {
-};
+GnubbyFactory.prototype.openGnubby = function(
+    which, forEnroll, cb, opt_appIdHash, opt_logMsgUrl, opt_caller) {};
 
 /**
  * Called during enrollment to check whether a gnubby known not to be enrolled
@@ -50,6 +48,5 @@ GnubbyFactory.prototype.openGnubby =
  * @param {FactoryOpenCallback} cb Called with the result of the prerequisite
  *     check. (A non-zero status indicates failure.)
  */
-GnubbyFactory.prototype.notEnrolledPrerequisiteCheck =
-    function(gnubby, appIdHash, cb) {
-};
+GnubbyFactory.prototype.notEnrolledPrerequisiteCheck = function(
+    gnubby, appIdHash, cb) {};
diff --git a/chromium/chrome/browser/resources/cryptotoken/googlecorpindividualattest.js b/chromium/chrome/browser/resources/cryptotoken/googlecorpindividualattest.js
index 57732fc04fe..43420b4928f 100644
--- a/chromium/chrome/browser/resources/cryptotoken/googlecorpindividualattest.js
+++ b/chromium/chrome/browser/resources/cryptotoken/googlecorpindividualattest.js
@@ -36,6 +36,5 @@ GoogleCorpIndividualAttestation.GOOGLE_CORP_APP_ID =
  * Hash of the app ID used by Google employee accounts.
  * @const
  */
-GoogleCorpIndividualAttestation.GOOGLE_CORP_APP_ID_HASH =
-    B64_encode(sha256HashOfString(
-        GoogleCorpIndividualAttestation.GOOGLE_CORP_APP_ID));
+GoogleCorpIndividualAttestation.GOOGLE_CORP_APP_ID_HASH = B64_encode(
+    sha256HashOfString(GoogleCorpIndividualAttestation.GOOGLE_CORP_APP_ID));
diff --git a/chromium/chrome/browser/resources/cryptotoken/hidgnubbydevice.js b/chromium/chrome/browser/resources/cryptotoken/hidgnubbydevice.js
index 55a449ed7d9..7fdca9e98de 100644
--- a/chromium/chrome/browser/resources/cryptotoken/hidgnubbydevice.js
+++ b/chromium/chrome/browser/resources/cryptotoken/hidgnubbydevice.js
@@ -23,10 +23,10 @@ function HidGnubbyDevice(gnubbies, dev, id) {
   this.id = id;
   this.txqueue = [];
   this.clients = [];
-  this.lockCID = 0;     // channel ID of client holding a lock, if != 0.
-  this.lockMillis = 0;  // current lock period.
-  this.lockTID = null;  // timer id of lock timeout.
-  this.closing = false;  // device to be closed by receive loop.
+  this.lockCID = 0;       // channel ID of client holding a lock, if != 0.
+  this.lockMillis = 0;    // current lock period.
+  this.lockTID = null;    // timer id of lock timeout.
+  this.closing = false;   // device to be closed by receive loop.
   this.updating = false;  // device firmware is in final stage of updating.
 }
 
@@ -38,13 +38,14 @@ HidGnubbyDevice.NAMESPACE = 'hid';
 
 /** Destroys this low-level device instance. */
 HidGnubbyDevice.prototype.destroy = function() {
-  if (!this.dev) return;  // Already dead.
+  if (!this.dev)
+    return;  // Already dead.
 
   function closeLowLevelDevice(dev) {
     chrome.hid.disconnect(dev.connectionId, function() {
       if (chrome.runtime.lastError) {
-        console.warn(UTIL_fmt('Device ' + dev.connectionId +
-            ' couldn\'t be disconnected:'));
+        console.warn(UTIL_fmt(
+            'Device ' + dev.connectionId + ' couldn\'t be disconnected:'));
         console.warn(UTIL_fmt(chrome.runtime.lastError.message));
         return;
       }
@@ -63,15 +64,16 @@ HidGnubbyDevice.prototype.destroy = function() {
   //
   // Use magic CID 0 to address all.
   this.publishFrame_(new Uint8Array([
-        0, 0, 0, 0,  // broadcast CID
-        GnubbyDevice.CMD_ERROR,
-        0, 1,  // length
-        GnubbyDevice.GONE]).buffer);
+                       0, 0, 0, 0,                    // broadcast CID
+                       GnubbyDevice.CMD_ERROR, 0, 1,  // length
+                       GnubbyDevice.GONE
+                     ]).buffer);
 
   // Set all clients to closed status and remove them.
   while (this.clients.length != 0) {
     var client = this.clients.shift();
-    if (client) client.closed = true;
+    if (client)
+      client.closed = true;
   }
 
   if (this.lockTID) {
@@ -123,11 +125,11 @@ HidGnubbyDevice.prototype.publishFrame_ = function(f) {
       remaining.push(client);
     } else {
       changes = true;
-      console.log(UTIL_fmt(
-          '[' + Gnubby.hexCid(client.cid) + '] left?'));
+      console.log(UTIL_fmt('[' + Gnubby.hexCid(client.cid) + '] left?'));
     }
   }
-  if (changes) this.clients = remaining;
+  if (changes)
+    this.clients = remaining;
 };
 
 /**
@@ -136,7 +138,8 @@ HidGnubbyDevice.prototype.publishFrame_ = function(f) {
  */
 HidGnubbyDevice.prototype.registerClient = function(who) {
   for (var i = 0; i < this.clients.length; ++i) {
-    if (this.clients[i] === who) return;  // Already registered.
+    if (this.clients[i] === who)
+      return;  // Already registered.
   }
   this.clients.push(who);
   if (this.clients.length == 1) {
@@ -154,11 +157,13 @@ HidGnubbyDevice.prototype.registerClient = function(who) {
  */
 HidGnubbyDevice.prototype.deregisterClient = function(who) {
   var current = this.clients;
-  if (current.length == 0) return -1;
+  if (current.length == 0)
+    return -1;
   this.clients = [];
   for (var i = 0; i < current.length; ++i) {
     var client = current[i];
-    if (client !== who) this.clients.push(client);
+    if (client !== who)
+      this.clients.push(client);
   }
   return this.clients.length;
 };
@@ -168,7 +173,8 @@ HidGnubbyDevice.prototype.deregisterClient = function(who) {
  * @return {boolean} Whether this device has who as a client.
  */
 HidGnubbyDevice.prototype.hasClient = function(who) {
-  if (this.clients.length == 0) return false;
+  if (this.clients.length == 0)
+    return false;
   for (var i = 0; i < this.clients.length; ++i) {
     if (who === this.clients[i])
       return true;
@@ -181,8 +187,9 @@ HidGnubbyDevice.prototype.hasClient = function(who) {
  * @private
  */
 HidGnubbyDevice.prototype.readLoop_ = function() {
-  //console.log(UTIL_fmt('entering readLoop'));
-  if (!this.dev) return;
+  // console.log(UTIL_fmt('entering readLoop'));
+  if (!this.dev)
+    return;
 
   if (this.closing) {
     this.destroy();
@@ -211,24 +218,25 @@ HidGnubbyDevice.prototype.readLoop_ = function() {
   }
 
   var self = this;
-  chrome.hid.receive(
-    this.dev.connectionId,
-    function(report_id, data) {
-      if (chrome.runtime.lastError || !data) {
-        console.log(UTIL_fmt('receive got lastError:'));
-        console.log(UTIL_fmt(chrome.runtime.lastError.message));
-        window.setTimeout(function() { self.destroy(); }, 0);
-        return;
-      }
-      var u8 = new Uint8Array(data);
-      console.log(UTIL_fmt('<' + UTIL_BytesToHex(u8)));
+  chrome.hid.receive(this.dev.connectionId, function(report_id, data) {
+    if (chrome.runtime.lastError || !data) {
+      console.log(UTIL_fmt('receive got lastError:'));
+      console.log(UTIL_fmt(chrome.runtime.lastError.message));
+      window.setTimeout(function() {
+        self.destroy();
+      }, 0);
+      return;
+    }
+    var u8 = new Uint8Array(data);
+    console.log(UTIL_fmt('<' + UTIL_BytesToHex(u8)));
 
-      self.publishFrame_(data);
+    self.publishFrame_(data);
 
-      // Read more.
-      window.setTimeout(function() { self.readLoop_(); }, 0);
-    }
-  );
+    // Read more.
+    window.setTimeout(function() {
+      self.readLoop_();
+    }, 0);
+  });
 };
 
 /**
@@ -244,17 +252,13 @@ HidGnubbyDevice.prototype.checkLock_ = function(cid, cmd) {
     if (this.lockCID != cid) {
       // Some other channel has active lock.
 
-      if (cmd != GnubbyDevice.CMD_SYNC &&
-          cmd != GnubbyDevice.CMD_INIT) {
+      if (cmd != GnubbyDevice.CMD_SYNC && cmd != GnubbyDevice.CMD_INIT) {
         // Anything but SYNC|INIT gets an immediate busy.
-        var busy = new Uint8Array(
-            [(cid >> 24) & 255,
-             (cid >> 16) & 255,
-             (cid >> 8) & 255,
-             cid & 255,
-             GnubbyDevice.CMD_ERROR,
-             0, 1,  // length
-             GnubbyDevice.BUSY]);
+        var busy = new Uint8Array([
+          (cid >> 24) & 255, (cid >> 16) & 255, (cid >> 8) & 255, cid & 255,
+          GnubbyDevice.CMD_ERROR, 0, 1,  // length
+          GnubbyDevice.BUSY
+        ]);
         // Log the synthetic busy too.
         console.log(UTIL_fmt('<' + UTIL_BytesToHex(busy)));
         this.publishFrame_(busy.buffer);
@@ -299,14 +303,12 @@ HidGnubbyDevice.prototype.updateLock_ = function(cid, cmd, arg) {
     // (re)set the lock timeout if we still hold it.
     if (this.lockCID) {
       var self = this;
-      this.lockTID = window.setTimeout(
-          function() {
-            console.warn(UTIL_fmt(
-                'lock for CID ' + Gnubby.hexCid(cid) + ' expired!'));
-            self.lockTID = null;
-            self.lockCID = 0;
-          },
-          this.lockMillis);
+      this.lockTID = window.setTimeout(function() {
+        console.warn(
+            UTIL_fmt('lock for CID ' + Gnubby.hexCid(cid) + ' expired!'));
+        self.lockTID = null;
+        self.lockCID = 0;
+      }, this.lockMillis);
     }
   }
 };
@@ -319,8 +321,10 @@ HidGnubbyDevice.prototype.updateLock_ = function(cid, cmd, arg) {
  * @param {ArrayBuffer|Uint8Array} data Command arguments
  */
 HidGnubbyDevice.prototype.queueCommand = function(cid, cmd, data) {
-  if (!this.dev) return;
-  if (!this.checkLock_(cid, cmd)) return;
+  if (!this.dev)
+    return;
+  if (!this.checkLock_(cid, cmd))
+    return;
 
   var u8 = new Uint8Array(data);
   var f = new Uint8Array(64);
@@ -377,7 +381,8 @@ HidGnubbyDevice.prototype.queueFrame_ = function(frame, cid, cmd, arg) {
   this.updateLock_(cid, cmd, arg);
   var wasEmpty = (this.txqueue.length == 0);
   this.txqueue.push(frame);
-  if (wasEmpty) this.writePump_();
+  if (wasEmpty)
+    this.writePump_();
 };
 
 /**
@@ -385,9 +390,11 @@ HidGnubbyDevice.prototype.queueFrame_ = function(frame, cid, cmd, arg) {
  * @private
  */
 HidGnubbyDevice.prototype.writePump_ = function() {
-  if (!this.dev) return;  // Ignore.
+  if (!this.dev)
+    return;  // Ignore.
 
-  if (this.txqueue.length == 0) return;  // Done with current queue.
+  if (this.txqueue.length == 0)
+    return;  // Done with current queue.
 
   var frame = this.txqueue[0];
 
@@ -396,12 +403,16 @@ HidGnubbyDevice.prototype.writePump_ = function() {
     if (chrome.runtime.lastError) {
       console.log(UTIL_fmt('send got lastError:'));
       console.log(UTIL_fmt(chrome.runtime.lastError.message));
-      window.setTimeout(function() { self.destroy(); }, 0);
+      window.setTimeout(function() {
+        self.destroy();
+      }, 0);
       return;
     }
     self.txqueue.shift();  // drop sent frame from queue.
     if (self.txqueue.length != 0) {
-      window.setTimeout(function() { self.writePump_(); }, 0);
+      window.setTimeout(function() {
+        self.writePump_();
+      }, 0);
     }
   }
 
@@ -409,7 +420,7 @@ HidGnubbyDevice.prototype.writePump_ = function() {
 
   // See whether this requires scrubbing before logging.
   var alternateLog = Gnubby.hasOwnProperty('redactRequestLog') &&
-                     Gnubby['redactRequestLog'](u8);
+      Gnubby['redactRequestLog'](u8);
   if (alternateLog) {
     console.log(UTIL_fmt('>' + alternateLog));
   } else {
@@ -424,9 +435,7 @@ HidGnubbyDevice.prototype.writePump_ = function() {
   chrome.hid.send(
       this.dev.connectionId,
       0,  // report Id. Must be 0 for our use.
-      u8f.buffer,
-      transferComplete
-  );
+      u8f.buffer, transferComplete);
 };
 
 /**
@@ -436,7 +445,7 @@ HidGnubbyDevice.prototype.writePump_ = function() {
  * @const
  */
 HidGnubbyDevice.HID_VID_PIDS = [
-  {'vendorId': 4176, 'productId': 512}    // Google-specific Yubico HID
+  {'vendorId': 4176, 'productId': 512}  // Google-specific Yubico HID
 ];
 
 /**
@@ -485,8 +494,8 @@ HidGnubbyDevice.enumerate = function(cb, opt_type) {
   if (opt_type == GnubbyEnumerationTypes.VID_PID) {
     enumerated(f1d0Filter, []);
   } else {
-    chrome.hid.getDevices({filters: [f1d0Filter]},
-        enumerated.bind(null, f1d0Filter));
+    chrome.hid.getDevices(
+        {filters: [f1d0Filter]}, enumerated.bind(null, f1d0Filter));
   }
   // Pass 2: vid/pid-based enumeration, for legacy devices. If FIDO devices
   // are asked for, "implement" this pass by providing it the empty list.
diff --git a/chromium/chrome/browser/resources/cryptotoken/individualattest.js b/chromium/chrome/browser/resources/cryptotoken/individualattest.js
index ed6ea9171a7..2fd77d2f7ce 100644
--- a/chromium/chrome/browser/resources/cryptotoken/individualattest.js
+++ b/chromium/chrome/browser/resources/cryptotoken/individualattest.js
@@ -20,5 +20,5 @@ function IndividualAttestation() {}
  * @return {boolean} Whether to request the individual attestation certificate
  *     for this app id.
  */
-IndividualAttestation.prototype.requestIndividualAttestation =
-    function(appIdHash) {};
+IndividualAttestation.prototype.requestIndividualAttestation = function(
+    appIdHash) {};
diff --git a/chromium/chrome/browser/resources/cryptotoken/inherits.js b/chromium/chrome/browser/resources/cryptotoken/inherits.js
index 5fafea418e1..299058cc88b 100644
--- a/chromium/chrome/browser/resources/cryptotoken/inherits.js
+++ b/chromium/chrome/browser/resources/cryptotoken/inherits.js
@@ -12,8 +12,7 @@
 // Closure.
 function inherits(childCtor, parentCtor) {
   /** @constructor */
-  function tempCtor() {
-  }
+  function tempCtor() {}
   tempCtor.prototype = parentCtor.prototype;
   childCtor.prototype = new tempCtor;
   childCtor.prototype.constructor = childCtor;
diff --git a/chromium/chrome/browser/resources/cryptotoken/multiplesigner.js b/chromium/chrome/browser/resources/cryptotoken/multiplesigner.js
index 1c4ffc29b18..1fa99036697 100644
--- a/chromium/chrome/browser/resources/cryptotoken/multiplesigner.js
+++ b/chromium/chrome/browser/resources/cryptotoken/multiplesigner.js
@@ -41,8 +41,8 @@ var MultipleSignerResult;
  * @param {string=} opt_logMsgUrl A URL to post log messages to.
  * @constructor
  */
-function MultipleGnubbySigner(forEnroll, allCompleteCb, gnubbyCompleteCb,
-    timeoutMillis, opt_logMsgUrl) {
+function MultipleGnubbySigner(
+    forEnroll, allCompleteCb, gnubbyCompleteCb, timeoutMillis, opt_logMsgUrl) {
   /** @private {boolean} */
   this.forEnroll_ = forEnroll;
   /** @private {function(boolean)} */
@@ -63,11 +63,11 @@ function MultipleGnubbySigner(forEnroll, allCompleteCb, gnubbyCompleteCb,
   /** @private {!Object<string, GnubbyTracker>} */
   this.gnubbies_ = {};
   /** @private {Countdown} */
-  this.timer_ = DEVICE_FACTORY_REGISTRY.getCountdownFactory()
-      .createTimer(timeoutMillis);
+  this.timer_ =
+      DEVICE_FACTORY_REGISTRY.getCountdownFactory().createTimer(timeoutMillis);
   /** @private {Countdown} */
-  this.reenumerateTimer_ = DEVICE_FACTORY_REGISTRY.getCountdownFactory()
-      .createTimer(timeoutMillis);
+  this.reenumerateTimer_ =
+      DEVICE_FACTORY_REGISTRY.getCountdownFactory().createTimer(timeoutMillis);
 }
 
 /**
@@ -183,8 +183,8 @@ MultipleGnubbySigner.PASSIVE_REENUMERATE_INTERVAL_MILLIS = 3000;
  *     there are no devices present.
  * @private
  */
-MultipleGnubbySigner.prototype.maybeReEnumerateGnubbies_ =
-    function(activeScan) {
+MultipleGnubbySigner.prototype.maybeReEnumerateGnubbies_ = function(
+    activeScan) {
   if (this.reenumerateTimer_.expired()) {
     // If the timer is expired, call timeout_ if there aren't any still-running
     // gnubbies. (If there are some still running, the last will call timeout_
@@ -231,21 +231,13 @@ MultipleGnubbySigner.prototype.addGnubby_ = function(gnubbyId) {
     // Can't add the same gnubby twice.
     return false;
   }
-  var tracker = {
-      index: index,
-      errorStatus: 0,
-      stillGoing: false,
-      signer: null
-  };
+  var tracker = {index: index, errorStatus: 0, stillGoing: false, signer: null};
   tracker.signer = new SingleGnubbySigner(
-      gnubbyId,
-      this.forEnroll_,
-      this.signCompletedCallback_.bind(this, tracker),
-      this.timer_.clone(),
+      gnubbyId, this.forEnroll_,
+      this.signCompletedCallback_.bind(this, tracker), this.timer_.clone(),
       this.logMsgUrl_);
   this.gnubbies_[index] = tracker;
-  this.gnubbies_[index].stillGoing =
-      tracker.signer.doSign(this.challenges_);
+  this.gnubbies_[index].stillGoing = tracker.signer.doSign(this.challenges_);
   if (!this.gnubbies_[index].errorStatus) {
     this.gnubbies_[index].errorStatus = 0;
   }
@@ -259,12 +251,11 @@ MultipleGnubbySigner.prototype.addGnubby_ = function(gnubbyId) {
  * @param {SingleSignerResult} result The result of the sign operation.
  * @private
  */
-MultipleGnubbySigner.prototype.signCompletedCallback_ =
-    function(tracker, result) {
-  console.log(
-      UTIL_fmt((result.code ? 'failure.' : 'success!') +
-          ' gnubby ' + tracker.index +
-          ' got code ' + result.code.toString(16)));
+MultipleGnubbySigner.prototype.signCompletedCallback_ = function(
+    tracker, result) {
+  console.log(UTIL_fmt(
+      (result.code ? 'failure.' : 'success!') + ' gnubby ' + tracker.index +
+      ' got code ' + result.code.toString(16)));
   if (!tracker.stillGoing) {
     console.log(UTIL_fmt('gnubby ' + tracker.index + ' no longer running!'));
     // Shouldn't ever happen? Disregard.
@@ -317,7 +308,8 @@ MultipleGnubbySigner.prototype.anyPending_ = function() {
  * @private
  */
 MultipleGnubbySigner.prototype.timeout_ = function(anyPending) {
-  if (this.complete_) return;
+  if (this.complete_)
+    return;
   this.complete_ = true;
   // Defer notifying the caller that all are complete, in case the caller is
   // doing work in response to a gnubbyFound callback and has an inconsistent
@@ -336,10 +328,11 @@ MultipleGnubbySigner.prototype.timeout_ = function(anyPending) {
  *     outcome.
  * @private
  */
-MultipleGnubbySigner.prototype.notifyGnubbyComplete_ =
-    function(tracker, result, moreExpected) {
-  console.log(UTIL_fmt('gnubby ' + tracker.index + ' complete (' +
-      result.code.toString(16) + ')'));
+MultipleGnubbySigner.prototype.notifyGnubbyComplete_ = function(
+    tracker, result, moreExpected) {
+  console.log(UTIL_fmt(
+      'gnubby ' + tracker.index + ' complete (' + result.code.toString(16) +
+      ')'));
   var signResult = {
     'code': result.code,
     'gnubby': result.gnubby,
diff --git a/chromium/chrome/browser/resources/cryptotoken/requesthelper.js b/chromium/chrome/browser/resources/cryptotoken/requesthelper.js
index 2c8052f1b99..410fc02b3fd 100644
--- a/chromium/chrome/browser/resources/cryptotoken/requesthelper.js
+++ b/chromium/chrome/browser/resources/cryptotoken/requesthelper.js
@@ -73,9 +73,6 @@ function makeHelperErrorResponse(request, code, opt_defaultType) {
   } else {
     type = opt_defaultType || 'unknown_type_reply';
   }
-  var reply = {
-    'type': type,
-    'code': /** @type {number} */ (code)
-  };
+  var reply = {'type': type, 'code': /** @type {number} */ (code)};
   return reply;
 }
diff --git a/chromium/chrome/browser/resources/cryptotoken/requestqueue.js b/chromium/chrome/browser/resources/cryptotoken/requestqueue.js
index a787e59f40d..356a777afca 100644
--- a/chromium/chrome/browser/resources/cryptotoken/requestqueue.js
+++ b/chromium/chrome/browser/resources/cryptotoken/requestqueue.js
@@ -85,7 +85,8 @@ RequestQueue.prototype.insertToken_ = function(token) {
     this.head_ = token;
     this.tail_ = token;
   } else {
-    if (!this.tail_) throw 'Non-empty list missing tail';
+    if (!this.tail_)
+      throw 'Non-empty list missing tail';
     this.tail_.next = token;
     token.prev = this.tail_;
     this.tail_ = token;
@@ -182,8 +183,8 @@ function OriginKeyedRequestQueue(sysTimer) {
  * @param {Countdown} timer Countdown timer
  * @return {QueuedRequestToken} A token for the request.
  */
-OriginKeyedRequestQueue.prototype.queueRequest =
-    function(appId, origin, beginCb, timer) {
+OriginKeyedRequestQueue.prototype.queueRequest = function(
+    appId, origin, beginCb, timer) {
   var key = appId + ' ' + origin;
   if (!this.requests_.hasOwnProperty(key)) {
     this.requests_[key] = new RequestQueue(this.sysTimer_);
diff --git a/chromium/chrome/browser/resources/cryptotoken/sha256.js b/chromium/chrome/browser/resources/cryptotoken/sha256.js
index ac9dbde4c25..9a0aded4a3b 100644
--- a/chromium/chrome/browser/resources/cryptotoken/sha256.js
+++ b/chromium/chrome/browser/resources/cryptotoken/sha256.js
@@ -17,25 +17,22 @@ function SHA256() {
   this._W = new Array(64);
   this._pad = new Array(64);
   this._k = [
-   0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5,
-   0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
-   0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3,
-   0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
-   0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc,
-   0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
-   0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7,
-   0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
-   0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
-   0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
-   0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3,
-   0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
-   0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5,
-   0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
-   0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208,
-   0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2];
+    0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1,
+    0x923f82a4, 0xab1c5ed5, 0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3,
+    0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174, 0xe49b69c1, 0xefbe4786,
+    0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
+    0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147,
+    0x06ca6351, 0x14292967, 0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
+    0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85, 0xa2bfe8a1, 0xa81a664b,
+    0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
+    0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a,
+    0x5b9cca4f, 0x682e6ff3, 0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208,
+    0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2
+  ];
 
   this._pad[0] = 0x80;
-  for (var i = 1; i < 64; ++i) this._pad[i] = 0;
+  for (var i = 1; i < 64; ++i)
+    this._pad[i] = 0;
 
   this.reset();
 }
@@ -43,8 +40,9 @@ function SHA256() {
 /** Reset the hasher */
 SHA256.prototype.reset = function() {
   this._chain = [
-    0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a,
-    0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19];
+    0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c,
+    0x1f83d9ab, 0x5be0cd19
+  ];
 
   this._inbuf = 0;
   this._total = 0;
@@ -57,14 +55,14 @@ SHA256.prototype._compress = function(buf) {
   var W = this._W;
   var k = this._k;
 
-  function _rotr(w, r) { return ((w << (32 - r)) | (w >>> r)); }
+  function _rotr(w, r) {
+    return ((w << (32 - r)) | (w >>> r));
+  }
 
   // get 16 big endian words
   for (var i = 0; i < 64; i += 4) {
-    var w = (buf[i] << 24) |
-            (buf[i + 1] << 16) |
-            (buf[i + 2] << 8) |
-            (buf[i + 3]);
+    var w =
+        (buf[i] << 24) | (buf[i + 1] << 16) | (buf[i + 2] << 8) | (buf[i + 3]);
     W[i / 4] = w;
   }
 
@@ -116,7 +114,8 @@ SHA256.prototype._compress = function(buf) {
  * @param {Array<number>|Uint8Array} bytes The data
  * @param {number=} opt_length How many bytes to hash, if not all */
 SHA256.prototype.update = function(bytes, opt_length) {
-  if (!opt_length) opt_length = bytes.length;
+  if (!opt_length)
+    opt_length = bytes.length;
 
   this._total += opt_length;
   for (var n = 0; n < opt_length; ++n) {
diff --git a/chromium/chrome/browser/resources/cryptotoken/signer.js b/chromium/chrome/browser/resources/cryptotoken/signer.js
index 6a0fe53c09b..5a887719466 100644
--- a/chromium/chrome/browser/resources/cryptotoken/signer.js
+++ b/chromium/chrome/browser/resources/cryptotoken/signer.js
@@ -12,8 +12,8 @@
 var gnubbySignRequestQueue;
 
 function initRequestQueue() {
-  gnubbySignRequestQueue = new OriginKeyedRequestQueue(
-      FACTORY_REGISTRY.getSystemTimer());
+  gnubbySignRequestQueue =
+      new OriginKeyedRequestQueue(FACTORY_REGISTRY.getSystemTimer());
 }
 
 /**
@@ -29,15 +29,16 @@ function handleU2fSignRequest(messageSender, request, sendResponse) {
   var queuedSignRequest;
 
   function sendErrorResponse(error) {
-    sendResponseOnce(sentResponse, queuedSignRequest,
+    sendResponseOnce(
+        sentResponse, queuedSignRequest,
         makeU2fErrorResponse(request, error.errorCode, error.errorMessage),
         sendResponse);
   }
 
   function sendSuccessResponse(challenge, info, browserData) {
     var responseData = makeU2fSignResponseDataFromChallenge(challenge);
-    addSignatureAndBrowserDataToResponseData(responseData, info, browserData,
-        'clientData');
+    addSignatureAndBrowserDataToResponseData(
+        responseData, info, browserData, 'clientData');
     var response = makeU2fSuccessResponse(request, responseData);
     sendResponseOnce(sentResponse, queuedSignRequest, response, sendResponse);
   }
@@ -52,9 +53,8 @@ function handleU2fSignRequest(messageSender, request, sendResponse) {
     return null;
   }
 
-  queuedSignRequest =
-      validateAndEnqueueSignRequest(
-          sender, request, sendErrorResponse, sendSuccessResponse);
+  queuedSignRequest = validateAndEnqueueSignRequest(
+      sender, request, sendErrorResponse, sendSuccessResponse);
   return queuedSignRequest;
 }
 
@@ -64,9 +64,7 @@ function handleU2fSignRequest(messageSender, request, sendResponse) {
  * @return {Object} The responseData object.
  */
 function makeU2fSignResponseDataFromChallenge(challenge) {
-  var responseData = {
-    'keyHandle': challenge['keyHandle']
-  };
+  var responseData = {'keyHandle': challenge['keyHandle']};
   return responseData;
 }
 
@@ -78,8 +76,8 @@ function makeU2fSignResponseDataFromChallenge(challenge) {
  * @param {string} browserDataName The name of the browser data key in the
  *     responseData object.
  */
-function addSignatureAndBrowserDataToResponseData(responseData, signatureData,
-    browserData, browserDataName) {
+function addSignatureAndBrowserDataToResponseData(
+    responseData, signatureData, browserData, browserDataName) {
   responseData[browserDataName] = B64_encode(UTIL_StringToBytes(browserData));
   responseData['signatureData'] = signatureData;
 }
@@ -107,8 +105,8 @@ function validateAndEnqueueSignRequest(sender, request, errorCb, successCb) {
   // The typecast is necessary because getSignChallenges can return undefined.
   // On the other hand, a valid sign request can't contain an undefined sign
   // challenge list, so the typecast is safe.
-  var signChallenges = /** @type {!Array<SignChallenge>} */ (
-      getSignChallenges(request));
+  var signChallenges =
+      /** @type {!Array<SignChallenge>} */ (getSignChallenges(request));
   var appId;
   if (request['appId']) {
     appId = request['appId'];
@@ -125,8 +123,8 @@ function validateAndEnqueueSignRequest(sender, request, errorCb, successCb) {
   // Attenuate watchdog timeout value less than the signer's timeout, so the
   // watchdog only fires after the signer could reasonably have called back,
   // not before.
-  timeoutValueSeconds = attenuateTimeoutInSeconds(timeoutValueSeconds,
-      MINIMUM_TIMEOUT_ATTENUATION_SECONDS / 2);
+  timeoutValueSeconds = attenuateTimeoutInSeconds(
+      timeoutValueSeconds, MINIMUM_TIMEOUT_ATTENUATION_SECONDS / 2);
   var watchdog = new WatchdogRequestHandler(timeoutValueSeconds, timeout);
   var wrappedErrorCb = watchdog.wrapCallback(errorCb);
   var wrappedSuccessCb = watchdog.wrapCallback(successCb);
@@ -137,14 +135,15 @@ function validateAndEnqueueSignRequest(sender, request, errorCb, successCb) {
 
   // Queue sign requests from the same origin, to protect against simultaneous
   // sign-out on many tabs resulting in repeated sign-in requests.
-  var queuedSignRequest = new QueuedSignRequest(signChallenges,
-      timer, sender, wrappedErrorCb, wrappedSuccessCb, request['challenge'],
-      appId, logMsgUrl);
+  var queuedSignRequest = new QueuedSignRequest(
+      signChallenges, timer, sender, wrappedErrorCb, wrappedSuccessCb,
+      request['challenge'], appId, logMsgUrl);
   if (!gnubbySignRequestQueue) {
     initRequestQueue();
   }
-  var requestToken = gnubbySignRequestQueue.queueRequest(appId, sender.origin,
-      queuedSignRequest.begin.bind(queuedSignRequest), timer);
+  var requestToken = gnubbySignRequestQueue.queueRequest(
+      appId, sender.origin, queuedSignRequest.begin.bind(queuedSignRequest),
+      timer);
   queuedSignRequest.setToken(requestToken);
 
   watchdog.setCloseable(queuedSignRequest);
@@ -167,8 +166,8 @@ function isValidSignRequest(request) {
   if (!hasAppId && (!signChallenges || !signChallenges.length)) {
     return false;
   }
-  return isValidSignChallengeArray(signChallenges, !hasDefaultChallenge,
-      !hasAppId);
+  return isValidSignChallengeArray(
+      signChallenges, !hasDefaultChallenge, !hasAppId);
 }
 
 /**
@@ -185,8 +184,9 @@ function isValidSignRequest(request) {
  * @constructor
  * @implements {Closeable}
  */
-function QueuedSignRequest(signChallenges, timer, sender, errorCb,
-    successCb, opt_defaultChallenge, opt_appId, opt_logMsgUrl) {
+function QueuedSignRequest(
+    signChallenges, timer, sender, errorCb, successCb, opt_defaultChallenge,
+    opt_appId, opt_logMsgUrl) {
   /** @private {!Array<SignChallenge>} */
   this.signChallenges_ = signChallenges;
   /** @private {Countdown} */
@@ -211,7 +211,8 @@ function QueuedSignRequest(signChallenges, timer, sender, errorCb,
 
 /** Closes this sign request. */
 QueuedSignRequest.prototype.close = function() {
-  if (this.closed_) return;
+  if (this.closed_)
+    return;
   var hadBegunSigning = false;
   if (this.begun_ && this.signer_) {
     this.signer_.close();
@@ -249,11 +250,11 @@ QueuedSignRequest.prototype.begin = function(token) {
   }
   this.begun_ = true;
   this.setToken(token);
-  this.signer_ = new Signer(this.timer_, this.sender_,
-      this.signerFailed_.bind(this), this.signerSucceeded_.bind(this),
-      this.logMsgUrl_);
-  if (!this.signer_.setChallenges(this.signChallenges_, this.defaultChallenge_,
-      this.appId_)) {
+  this.signer_ = new Signer(
+      this.timer_, this.sender_, this.signerFailed_.bind(this),
+      this.signerSucceeded_.bind(this), this.logMsgUrl_);
+  if (!this.signer_.setChallenges(
+          this.signChallenges_, this.defaultChallenge_, this.appId_)) {
     token.complete();
     this.errorCb_({errorCode: ErrorCodes.BAD_REQUEST});
   }
@@ -278,8 +279,8 @@ QueuedSignRequest.prototype.signerFailed_ = function(error) {
  * @param {string} browserData Browser data JSON
  * @private
  */
-QueuedSignRequest.prototype.signerSucceeded_ =
-    function(challenge, info, browserData) {
+QueuedSignRequest.prototype.signerSucceeded_ = function(
+    challenge, info, browserData) {
   this.token_.complete();
   this.successCb_(challenge, info, browserData);
 };
@@ -318,8 +319,8 @@ function Signer(timer, sender, errorCb, successCb, opt_logMsgUrl) {
   // Allow http appIds for http origins. (Broken, but the caller deserves
   // what they get.)
   /** @private {boolean} */
-  this.allowHttp_ = this.sender_.origin ?
-      this.sender_.origin.indexOf('http://') == 0 : false;
+  this.allowHttp_ =
+      this.sender_.origin ? this.sender_.origin.indexOf('http://') == 0 : false;
   /** @private {Closeable} */
   this.handler_ = null;
 }
@@ -332,8 +333,8 @@ function Signer(timer, sender, errorCb, successCb, opt_logMsgUrl) {
  * @param {string=} opt_appId The app id for the entire request.
  * @return {boolean} Whether the challenges could be set.
  */
-Signer.prototype.setChallenges = function(signChallenges, opt_defaultChallenge,
-    opt_appId) {
+Signer.prototype.setChallenges = function(
+    signChallenges, opt_defaultChallenge, opt_appId) {
   if (this.challengesSet_ || this.done_)
     return false;
   if (this.timer_.expired()) {
@@ -385,16 +386,13 @@ Signer.prototype.checkAppIds_ = function() {
  */
 Signer.prototype.originChecked_ = function(appIds, result) {
   if (!result) {
-    var error = {
-      errorCode: ErrorCodes.BAD_REQUEST,
-      errorMessage: 'bad appId'
-    };
+    var error = {errorCode: ErrorCodes.BAD_REQUEST, errorMessage: 'bad appId'};
     this.notifyError_(error);
     return;
   }
   var appIdChecker = FACTORY_REGISTRY.getAppIdCheckerFactory().create();
-  appIdChecker.
-      checkAppIds(
+  appIdChecker
+      .checkAppIds(
           this.timer_.clone(), this.sender_.origin,
           /** @type {!Array<string>} */ (appIds), this.allowHttp_,
           this.logMsgUrl_)
@@ -409,10 +407,7 @@ Signer.prototype.originChecked_ = function(appIds, result) {
  */
 Signer.prototype.appIdChecked_ = function(result) {
   if (!result) {
-    var error = {
-      errorCode: ErrorCodes.BAD_REQUEST,
-      errorMessage: 'bad appId'
-    };
+    var error = {errorCode: ErrorCodes.BAD_REQUEST, errorMessage: 'bad appId'};
     this.notifyError_(error);
     return;
   }
@@ -443,22 +438,21 @@ Signer.prototype.doSign_ = function() {
     }
     var keyHandle = challenge['keyHandle'];
 
-    var browserData =
-        makeSignBrowserData(serverChallenge, this.sender_.origin,
-            this.sender_.tlsChannelId);
+    var browserData = makeSignBrowserData(
+        serverChallenge, this.sender_.origin, this.sender_.tlsChannelId);
     this.browserData_[keyHandle] = browserData;
     this.serverChallenges_[keyHandle] = challenge;
   }
 
-  var encodedChallenges = encodeSignChallenges(this.signChallenges_,
-      this.defaultChallenge_, this.appId_, this.getChallengeHash_.bind(this));
+  var encodedChallenges = encodeSignChallenges(
+      this.signChallenges_, this.defaultChallenge_, this.appId_,
+      this.getChallengeHash_.bind(this));
 
   var timeoutSeconds = this.timer_.millisecondsUntilExpired() / 1000.0;
-  var request = makeSignHelperRequest(encodedChallenges, timeoutSeconds,
-      this.logMsgUrl_);
-  this.handler_ =
-      FACTORY_REGISTRY.getRequestHelper()
-          .getHandler(/** @type {HelperRequest} */ (request));
+  var request =
+      makeSignHelperRequest(encodedChallenges, timeoutSeconds, this.logMsgUrl_);
+  this.handler_ = FACTORY_REGISTRY.getRequestHelper().getHandler(
+      /** @type {HelperRequest} */ (request));
   if (!this.handler_)
     return false;
   return this.handler_.run(this.helperComplete_.bind(this));
@@ -541,8 +535,9 @@ Signer.prototype.helperComplete_ = function(helperReply, opt_source) {
 
   if (reply.code) {
     var reportedError = mapDeviceStatusCodeToU2fError(reply.code);
-    console.log(UTIL_fmt('helper reported ' + reply.code.toString(16) +
-        ', returning ' + reportedError.errorCode));
+    console.log(UTIL_fmt(
+        'helper reported ' + reply.code.toString(16) + ', returning ' +
+        reportedError.errorCode));
     this.notifyError_(reportedError);
   } else {
     if (this.logMsgUrl_ && opt_source) {
@@ -555,7 +550,7 @@ Signer.prototype.helperComplete_ = function(helperReply, opt_source) {
     // Notify with server-provided challenge, not the encoded one: the
     // server-provided challenge contains additional fields it relies on.
     var serverChallenge = this.serverChallenges_[key];
-    this.notifySuccess_(serverChallenge, reply.responseData.signatureData,
-        browserData);
+    this.notifySuccess_(
+        serverChallenge, reply.responseData.signatureData, browserData);
   }
 };
diff --git a/chromium/chrome/browser/resources/cryptotoken/singlesigner.js b/chromium/chrome/browser/resources/cryptotoken/singlesigner.js
index 9d535058620..f9e46f01fe7 100644
--- a/chromium/chrome/browser/resources/cryptotoken/singlesigner.js
+++ b/chromium/chrome/browser/resources/cryptotoken/singlesigner.js
@@ -50,8 +50,8 @@ var SingleSignerResult;
  * @param {string=} opt_logMsgUrl A URL to post log messages to.
  * @constructor
  */
-function SingleGnubbySigner(gnubbyId, forEnroll, completeCb, timer,
-    opt_logMsgUrl) {
+function SingleGnubbySigner(
+    gnubbyId, forEnroll, completeCb, timer, opt_logMsgUrl) {
   /** @private {GnubbyDeviceId} */
   this.gnubbyId_ = gnubbyId;
   /** @private {SingleGnubbySigner.State} */
@@ -115,7 +115,8 @@ SingleGnubbySigner.prototype.close = function() {
       this.openCanceller_();
   }
 
-  if (!this.gnubby_) return;
+  if (!this.gnubby_)
+    return;
   this.state_ = SingleGnubbySigner.State.CLOSING;
   this.gnubby_.closeWhenIdle(this.closed_.bind(this));
 };
@@ -194,11 +195,8 @@ SingleGnubbySigner.prototype.open_ = function() {
   if (this.state_ == SingleGnubbySigner.State.INIT) {
     this.state_ = SingleGnubbySigner.State.OPENING;
     this.openCanceller_ = DEVICE_FACTORY_REGISTRY.getGnubbyFactory().openGnubby(
-        this.gnubbyId_,
-        this.forEnroll_,
-        this.openCallback_.bind(this),
-        appIdHash,
-        this.logMsgUrl_,
+        this.gnubbyId_, this.forEnroll_, this.openCallback_.bind(this),
+        appIdHash, this.logMsgUrl_,
         'singlesigner.js:SingleGnubbySigner.prototype.open_');
   }
 };
@@ -242,13 +240,11 @@ SingleGnubbySigner.prototype.openCallback_ = function(rc, gnubby) {
         var self = this;
         window.setTimeout(function() {
           if (self.gnubby_) {
-            this.openCanceller_ = DEVICE_FACTORY_REGISTRY
-              .getGnubbyFactory().openGnubby(
-                self.gnubbyId_,
-                self.forEnroll_,
-                self.openCallback_.bind(self),
-                self.logMsgUrl_,
-                'singlesigner.js:SingleGnubbySigner.prototype.openCallback_');
+            this.openCanceller_ =
+                DEVICE_FACTORY_REGISTRY.getGnubbyFactory().openGnubby(
+                    self.gnubbyId_, self.forEnroll_,
+                    self.openCallback_.bind(self), self.logMsgUrl_,
+                    'singlesigner.js:SingleGnubbySigner.prototype.openCallback_');
           }
         }, SingleGnubbySigner.OPEN_DELAY_MILLIS);
       } else {
@@ -336,9 +332,9 @@ SingleGnubbySigner.prototype.doSign_ = function(challengeIndex) {
     this.signCallback_(challengeIndex, DeviceStatusCodes.WRONG_DATA_STATUS);
   } else {
     var nowink = false;
-    this.gnubby_.sign(challengeHash, appIdHash, keyHandle,
-        this.signCallback_.bind(this, challengeIndex),
-        nowink);
+    this.gnubby_.sign(
+        challengeHash, appIdHash, keyHandle,
+        this.signCallback_.bind(this, challengeIndex), nowink);
   }
 };
 
@@ -348,7 +344,8 @@ SingleGnubbySigner.prototype.doSign_ = function(challengeIndex) {
  *     for this gnubby.
  */
 SingleGnubbySigner.signErrorIndicatesInvalidKeyHandle = function(code) {
-  return (code == DeviceStatusCodes.WRONG_DATA_STATUS ||
+  return (
+      code == DeviceStatusCodes.WRONG_DATA_STATUS ||
       code == DeviceStatusCodes.WRONG_LENGTH_STATUS ||
       code == DeviceStatusCodes.INVALID_DATA_STATUS);
 };
@@ -360,10 +357,11 @@ SingleGnubbySigner.signErrorIndicatesInvalidKeyHandle = function(code) {
  * @param {ArrayBuffer=} opt_info Optional result data
  * @private
  */
-SingleGnubbySigner.prototype.signCallback_ =
-    function(challengeIndex, code, opt_info) {
-  console.log(UTIL_fmt('gnubby ' + JSON.stringify(this.gnubbyId_) +
-      ', challenge ' + challengeIndex + ' yielded ' + code.toString(16)));
+SingleGnubbySigner.prototype.signCallback_ = function(
+    challengeIndex, code, opt_info) {
+  console.log(UTIL_fmt(
+      'gnubby ' + JSON.stringify(this.gnubbyId_) + ', challenge ' +
+      challengeIndex + ' yielded ' + code.toString(16)));
   if (this.state_ != SingleGnubbySigner.State.SIGNING) {
     console.log(UTIL_fmt('already done!'));
     // We're done, the caller's no longer interested.
@@ -399,7 +397,8 @@ SingleGnubbySigner.prototype.signCallback_ =
       // Lower bound on the minimum length, signature length can vary.
       var MIN_SIGNATURE_LENGTH = 7;
       if (!opt_info || opt_info.byteLength < MIN_SIGNATURE_LENGTH) {
-        console.error(UTIL_fmt('Got short response to sign request (' +
+        console.error(UTIL_fmt(
+            'Got short response to sign request (' +
             (opt_info ? opt_info.byteLength : 0) + ' bytes), WTF?'));
       }
       if (this.forEnroll_) {
@@ -462,7 +461,7 @@ SingleGnubbySigner.prototype.goToError_ = function(code, opt_warn) {
   this.state_ = SingleGnubbySigner.State.COMPLETE;
   var logFn = opt_warn ? console.warn.bind(console) : console.log.bind(console);
   logFn(UTIL_fmt('failed (' + code.toString(16) + ')'));
-  var result = { code: code };
+  var result = {code: code};
   if (!this.forEnroll_ &&
       SingleGnubbySigner.signErrorIndicatesInvalidKeyHandle(code)) {
     // When a device yields an idempotent bad key handle error to all sign
@@ -486,11 +485,11 @@ SingleGnubbySigner.prototype.goToError_ = function(code, opt_warn) {
  * @param {ArrayBuffer=} opt_info Optional result data
  * @private
  */
-SingleGnubbySigner.prototype.goToSuccess_ =
-    function(code, opt_challenge, opt_info) {
+SingleGnubbySigner.prototype.goToSuccess_ = function(
+    code, opt_challenge, opt_info) {
   this.state_ = SingleGnubbySigner.State.COMPLETE;
   console.log(UTIL_fmt('success (' + code.toString(16) + ')'));
-  var result = { code: code, gnubby: this.gnubby_ };
+  var result = {code: code, gnubby: this.gnubby_};
   if (opt_challenge || opt_info) {
     if (opt_challenge) {
       result['challenge'] = opt_challenge;
diff --git a/chromium/chrome/browser/resources/cryptotoken/textfetcher.js b/chromium/chrome/browser/resources/cryptotoken/textfetcher.js
index d6e18844acb..103fa8b9a90 100644
--- a/chromium/chrome/browser/resources/cryptotoken/textfetcher.js
+++ b/chromium/chrome/browser/resources/cryptotoken/textfetcher.js
@@ -28,8 +28,7 @@ TextFetcher.prototype.fetch = function(url, opt_method, opt_body) {};
  * @constructor
  * @implements {TextFetcher}
  */
-function XhrTextFetcher() {
-}
+function XhrTextFetcher() {}
 
 /**
  * @param {string} url The URL to fetch.
diff --git a/chromium/chrome/browser/resources/cryptotoken/usbenrollhandler.js b/chromium/chrome/browser/resources/cryptotoken/usbenrollhandler.js
index cf113d2ae22..e9bdcc11385 100644
--- a/chromium/chrome/browser/resources/cryptotoken/usbenrollhandler.js
+++ b/chromium/chrome/browser/resources/cryptotoken/usbenrollhandler.js
@@ -37,21 +37,18 @@ UsbEnrollHandler.DEFAULT_TIMEOUT_MILLIS = 30 * 1000;
  * @return {boolean} Whether this handler could be run.
  */
 UsbEnrollHandler.prototype.run = function(cb) {
-  var timeoutMillis =
-      this.request_.timeoutSeconds ?
+  var timeoutMillis = this.request_.timeoutSeconds ?
       this.request_.timeoutSeconds * 1000 :
       UsbEnrollHandler.DEFAULT_TIMEOUT_MILLIS;
   /** @private {Countdown} */
-  this.timer_ = DEVICE_FACTORY_REGISTRY.getCountdownFactory().createTimer(
-      timeoutMillis);
+  this.timer_ =
+      DEVICE_FACTORY_REGISTRY.getCountdownFactory().createTimer(timeoutMillis);
   this.enrollChallenges = this.request_.enrollChallenges;
   /** @private {RequestHandlerCallback} */
   this.cb_ = cb;
   this.signer_ = new MultipleGnubbySigner(
-      true /* forEnroll */,
-      this.signerCompleted_.bind(this),
-      this.signerFoundGnubby_.bind(this),
-      timeoutMillis,
+      true /* forEnroll */, this.signerCompleted_.bind(this),
+      this.signerFoundGnubby_.bind(this), timeoutMillis,
       this.request_.logMsgUrl);
   return this.signer_.doSign(this.request_.signData);
 };
@@ -91,15 +88,15 @@ UsbEnrollHandler.prototype.signerCompleted_ = function(anyPending) {
  *     results from more gnubbies.
  * @private
  */
-UsbEnrollHandler.prototype.signerFoundGnubby_ =
-    function(signResult, moreExpected) {
+UsbEnrollHandler.prototype.signerFoundGnubby_ = function(
+    signResult, moreExpected) {
   if (!signResult.code) {
     // If the signer reports a gnubby can sign, report this immediately to the
     // caller, as the gnubby is already enrolled. Map ok to WRONG_DATA, so the
     // caller knows what to do.
     this.notifyError_(DeviceStatusCodes.WRONG_DATA_STATUS);
   } else if (SingleGnubbySigner.signErrorIndicatesInvalidKeyHandle(
-      signResult.code)) {
+                 signResult.code)) {
     var gnubby = signResult['gnubby'];
     // A valid helper request contains at least one enroll challenge, so use
     // the app id hash from the first challenge.
@@ -118,8 +115,8 @@ UsbEnrollHandler.prototype.signerFoundGnubby_ =
  * @param {Gnubby=} opt_gnubby The gnubby whose prerequisites were checked.
  * @private
  */
-UsbEnrollHandler.prototype.gnubbyPrerequisitesChecked_ =
-    function(rc, opt_gnubby) {
+UsbEnrollHandler.prototype.gnubbyPrerequisitesChecked_ = function(
+    rc, opt_gnubby) {
   if (rc || this.timer_.expired()) {
     // Do nothing:
     // If the timer is expired, the signerCompleted_ callback will indicate
@@ -212,10 +209,10 @@ UsbEnrollHandler.prototype.tryEnroll_ = function(gnubby, version) {
   }
   var challengeValue = B64_decode(challenge['challengeHash']);
   var appIdHash = challenge['appIdHash'];
-  var individualAttest =
-      DEVICE_FACTORY_REGISTRY.getIndividualAttestation().
-          requestIndividualAttestation(appIdHash);
-  gnubby.enroll(challengeValue, B64_decode(appIdHash),
+  var individualAttest = DEVICE_FACTORY_REGISTRY.getIndividualAttestation()
+                             .requestIndividualAttestation(appIdHash);
+  gnubby.enroll(
+      challengeValue, B64_decode(appIdHash),
       this.enrollCallback_.bind(this, gnubby, version), individualAttest);
 };
 
@@ -242,25 +239,25 @@ UsbEnrollHandler.prototype.getChallengeOfVersion_ = function(version) {
  * @param {ArrayBuffer=} infoArray Returned data
  * @private
  */
-UsbEnrollHandler.prototype.enrollCallback_ =
-    function(gnubby, version, code, infoArray) {
+UsbEnrollHandler.prototype.enrollCallback_ = function(
+    gnubby, version, code, infoArray) {
   if (this.notified_) {
     // Enroll completed after previous success or failure. Disregard.
     return;
   }
   switch (code) {
     case -GnubbyDevice.GONE:
-        // Close this gnubby.
-        this.removeWaitingGnubby_(gnubby);
-        if (!this.waitingForTouchGnubbies_.length) {
-          // Last enroll attempt is complete and last gnubby is gone.
-          this.anyGnubbiesFound_ = false;
-          if (this.timer_.expired()) {
-            this.notifyError_(DeviceStatusCodes.TIMEOUT_STATUS);
-          } else if (this.signer_) {
-            this.signer_.reScanDevices();
-          }
+      // Close this gnubby.
+      this.removeWaitingGnubby_(gnubby);
+      if (!this.waitingForTouchGnubbies_.length) {
+        // Last enroll attempt is complete and last gnubby is gone.
+        this.anyGnubbiesFound_ = false;
+        if (this.timer_.expired()) {
+          this.notifyError_(DeviceStatusCodes.TIMEOUT_STATUS);
+        } else if (this.signer_) {
+          this.signer_.reScanDevices();
         }
+      }
       break;
 
     case DeviceStatusCodes.WAIT_TOUCH_STATUS:
@@ -275,8 +272,8 @@ UsbEnrollHandler.prototype.enrollCallback_ =
         this.removeWaitingGnubby_(gnubby);
         if (!this.waitingForTouchGnubbies_.length) {
           // Last enroll attempt is complete: return this error.
-          console.log(UTIL_fmt('timeout (' + code.toString(16) +
-              ') enrolling'));
+          console.log(
+              UTIL_fmt('timeout (' + code.toString(16) + ') enrolling'));
           this.notifyError_(DeviceStatusCodes.TIMEOUT_STATUS);
         }
       } else {
@@ -314,10 +311,7 @@ UsbEnrollHandler.prototype.notifyError_ = function(code) {
     return;
   this.notified_ = true;
   this.close();
-  var reply = {
-    'type': 'enroll_helper_reply',
-    'code': code
-  };
+  var reply = {'type': 'enroll_helper_reply', 'code': code};
   this.cb_(reply);
 };
 
diff --git a/chromium/chrome/browser/resources/cryptotoken/usbgnubbydevice.js b/chromium/chrome/browser/resources/cryptotoken/usbgnubbydevice.js
index b97cf9bbc37..aeaaf85d6b6 100644
--- a/chromium/chrome/browser/resources/cryptotoken/usbgnubbydevice.js
+++ b/chromium/chrome/browser/resources/cryptotoken/usbgnubbydevice.js
@@ -27,10 +27,10 @@ function UsbGnubbyDevice(gnubbies, dev, id, inEndpoint, outEndpoint) {
   this.outEndpoint = outEndpoint;
   this.txqueue = [];
   this.clients = [];
-  this.lockCID = 0;     // channel ID of client holding a lock, if != 0.
-  this.lockMillis = 0;  // current lock period.
-  this.lockTID = null;  // timer id of lock timeout.
-  this.closing = false;  // device to be closed by receive loop.
+  this.lockCID = 0;       // channel ID of client holding a lock, if != 0.
+  this.lockMillis = 0;    // current lock period.
+  this.lockTID = null;    // timer id of lock timeout.
+  this.closing = false;   // device to be closed by receive loop.
   this.updating = false;  // device firmware is in final stage of updating.
   this.inTransferPending = false;
   this.outTransferPending = false;
@@ -47,16 +47,16 @@ UsbGnubbyDevice.prototype.destroy = function() {
   function closeLowLevelDevice(dev) {
     chrome.usb.releaseInterface(dev, 0, function() {
       if (chrome.runtime.lastError) {
-        console.warn(UTIL_fmt('Device ' + dev.handle +
-            ' couldn\'t be released:'));
+        console.warn(
+            UTIL_fmt('Device ' + dev.handle + ' couldn\'t be released:'));
         console.warn(UTIL_fmt(chrome.runtime.lastError.message));
         return;
       }
       console.log(UTIL_fmt('Device ' + dev.handle + ' released'));
       chrome.usb.closeDevice(dev, function() {
         if (chrome.runtime.lastError) {
-          console.warn(UTIL_fmt('Device ' + dev.handle +
-              ' couldn\'t be closed:'));
+          console.warn(
+              UTIL_fmt('Device ' + dev.handle + ' couldn\'t be closed:'));
           console.warn(UTIL_fmt(chrome.runtime.lastError.message));
           return;
         }
@@ -65,7 +65,8 @@ UsbGnubbyDevice.prototype.destroy = function() {
     });
   }
 
-  if (!this.dev) return;  // Already dead.
+  if (!this.dev)
+    return;  // Already dead.
 
   this.gnubbies_.removeOpenDevice(
       {namespace: UsbGnubbyDevice.NAMESPACE, device: this.id});
@@ -78,15 +79,16 @@ UsbGnubbyDevice.prototype.destroy = function() {
   //
   // Use magic CID 0 to address all.
   this.publishFrame_(new Uint8Array([
-        0, 0, 0, 0,  // broadcast CID
-        GnubbyDevice.CMD_ERROR,
-        0, 1,  // length
-        GnubbyDevice.GONE]).buffer);
+                       0, 0, 0, 0,                    // broadcast CID
+                       GnubbyDevice.CMD_ERROR, 0, 1,  // length
+                       GnubbyDevice.GONE
+                     ]).buffer);
 
   // Set all clients to closed status and remove them.
   while (this.clients.length != 0) {
     var client = this.clients.shift();
-    if (client) client.closed = true;
+    if (client)
+      client.closed = true;
   }
 
   if (this.lockTID) {
@@ -136,11 +138,11 @@ UsbGnubbyDevice.prototype.publishFrame_ = function(f) {
       remaining.push(client);
     } else {
       changes = true;
-      console.log(UTIL_fmt(
-          '[' + Gnubby.hexCid(client.cid) + '] left?'));
+      console.log(UTIL_fmt('[' + Gnubby.hexCid(client.cid) + '] left?'));
     }
   }
-  if (changes) this.clients = remaining;
+  if (changes)
+    this.clients = remaining;
 };
 
 /**
@@ -148,8 +150,10 @@ UsbGnubbyDevice.prototype.publishFrame_ = function(f) {
  * @private
  */
 UsbGnubbyDevice.prototype.readyToUse_ = function() {
-  if (this.closing) return false;
-  if (!this.dev) return false;
+  if (this.closing)
+    return false;
+  if (!this.dev)
+    return false;
 
   return true;
 };
@@ -159,20 +163,25 @@ UsbGnubbyDevice.prototype.readyToUse_ = function() {
  * @private
  */
 UsbGnubbyDevice.prototype.readOneReply_ = function() {
-  if (!this.readyToUse_()) return;  // No point in continuing.
-  if (this.updating) return;  // Do not bother waiting for final update reply.
+  if (!this.readyToUse_())
+    return;  // No point in continuing.
+  if (this.updating)
+    return;  // Do not bother waiting for final update reply.
 
   var self = this;
 
   function inTransferComplete(x) {
     self.inTransferPending = false;
 
-    if (!self.readyToUse_()) return;  // No point in continuing.
+    if (!self.readyToUse_())
+      return;  // No point in continuing.
 
     if (chrome.runtime.lastError) {
       console.warn(UTIL_fmt('in bulkTransfer got lastError: '));
       console.warn(UTIL_fmt(chrome.runtime.lastError.message));
-      window.setTimeout(function() { self.destroy(); }, 0);
+      window.setTimeout(function() {
+        self.destroy();
+      }, 0);
       return;
     }
 
@@ -183,25 +192,25 @@ UsbGnubbyDevice.prototype.readOneReply_ = function() {
       self.publishFrame_(x.data);
 
       // Write another pending request, if any.
-      window.setTimeout(
-          function() {
-            self.txqueue.shift();  // Drop sent frame from queue.
-            self.writeOneRequest_();
-          },
-          0);
+      window.setTimeout(function() {
+        self.txqueue.shift();  // Drop sent frame from queue.
+        self.writeOneRequest_();
+      }, 0);
     } else {
       console.log(UTIL_fmt('no x.data!'));
       console.log(x);
-      window.setTimeout(function() { self.destroy(); }, 0);
+      window.setTimeout(function() {
+        self.destroy();
+      }, 0);
     }
   }
 
   if (this.inTransferPending == false) {
     this.inTransferPending = true;
     chrome.usb.bulkTransfer(
-      /** @type {!chrome.usb.ConnectionHandle} */(this.dev),
-      { direction: 'in', endpoint: this.inEndpoint, length: 2048 },
-      inTransferComplete);
+        /** @type {!chrome.usb.ConnectionHandle} */ (this.dev),
+        {direction: 'in', endpoint: this.inEndpoint, length: 2048},
+        inTransferComplete);
   } else {
     throw 'inTransferPending!';
   }
@@ -213,7 +222,8 @@ UsbGnubbyDevice.prototype.readOneReply_ = function() {
  */
 UsbGnubbyDevice.prototype.registerClient = function(who) {
   for (var i = 0; i < this.clients.length; ++i) {
-    if (this.clients[i] === who) return;  // Already registered.
+    if (this.clients[i] === who)
+      return;  // Already registered.
   }
   this.clients.push(who);
 };
@@ -227,11 +237,13 @@ UsbGnubbyDevice.prototype.registerClient = function(who) {
  */
 UsbGnubbyDevice.prototype.deregisterClient = function(who) {
   var current = this.clients;
-  if (current.length == 0) return -1;
+  if (current.length == 0)
+    return -1;
   this.clients = [];
   for (var i = 0; i < current.length; ++i) {
     var client = current[i];
-    if (client !== who) this.clients.push(client);
+    if (client !== who)
+      this.clients.push(client);
   }
   return this.clients.length;
 };
@@ -241,7 +253,8 @@ UsbGnubbyDevice.prototype.deregisterClient = function(who) {
  * @return {boolean} Whether this device has who as a client.
  */
 UsbGnubbyDevice.prototype.hasClient = function(who) {
-  if (this.clients.length == 0) return false;
+  if (this.clients.length == 0)
+    return false;
   for (var i = 0; i < this.clients.length; ++i) {
     if (who === this.clients[i])
       return true;
@@ -254,9 +267,11 @@ UsbGnubbyDevice.prototype.hasClient = function(who) {
  * @private
  */
 UsbGnubbyDevice.prototype.writeOneRequest_ = function() {
-  if (!this.readyToUse_()) return;  // No point in continuing.
+  if (!this.readyToUse_())
+    return;  // No point in continuing.
 
-  if (this.txqueue.length == 0) return;  // Nothing to send.
+  if (this.txqueue.length == 0)
+    return;  // Nothing to send.
 
   var frame = this.txqueue[0];
 
@@ -264,23 +279,28 @@ UsbGnubbyDevice.prototype.writeOneRequest_ = function() {
   function OutTransferComplete(x) {
     self.outTransferPending = false;
 
-    if (!self.readyToUse_()) return;  // No point in continuing.
+    if (!self.readyToUse_())
+      return;  // No point in continuing.
 
     if (chrome.runtime.lastError) {
       console.warn(UTIL_fmt('out bulkTransfer lastError: '));
       console.warn(UTIL_fmt(chrome.runtime.lastError.message));
-      window.setTimeout(function() { self.destroy(); }, 0);
+      window.setTimeout(function() {
+        self.destroy();
+      }, 0);
       return;
     }
 
-    window.setTimeout(function() { self.readOneReply_(); }, 0);
+    window.setTimeout(function() {
+      self.readOneReply_();
+    }, 0);
   }
 
   var u8 = new Uint8Array(frame);
 
   // See whether this requires scrubbing before logging.
   var alternateLog = Gnubby.hasOwnProperty('redactRequestLog') &&
-                     Gnubby['redactRequestLog'](u8);
+      Gnubby['redactRequestLog'](u8);
   if (alternateLog) {
     console.log(UTIL_fmt('>' + alternateLog));
   } else {
@@ -290,8 +310,8 @@ UsbGnubbyDevice.prototype.writeOneRequest_ = function() {
   if (this.outTransferPending == false) {
     this.outTransferPending = true;
     chrome.usb.bulkTransfer(
-        /** @type {!chrome.usb.ConnectionHandle} */(this.dev),
-        { direction: 'out', endpoint: this.outEndpoint, data: frame },
+        /** @type {!chrome.usb.ConnectionHandle} */ (this.dev),
+        {direction: 'out', endpoint: this.outEndpoint, data: frame},
         OutTransferComplete);
   } else {
     throw 'outTransferPending!';
@@ -311,17 +331,13 @@ UsbGnubbyDevice.prototype.checkLock_ = function(cid, cmd) {
     if (this.lockCID != cid) {
       // Some other channel has active lock.
 
-      if (cmd != GnubbyDevice.CMD_SYNC &&
-          cmd != GnubbyDevice.CMD_INIT) {
+      if (cmd != GnubbyDevice.CMD_SYNC && cmd != GnubbyDevice.CMD_INIT) {
         // Anything but SYNC|INIT gets an immediate busy.
-        var busy = new Uint8Array(
-            [(cid >> 24) & 255,
-             (cid >> 16) & 255,
-             (cid >> 8) & 255,
-             cid & 255,
-             GnubbyDevice.CMD_ERROR,
-             0, 1,  // length
-             GnubbyDevice.BUSY]);
+        var busy = new Uint8Array([
+          (cid >> 24) & 255, (cid >> 16) & 255, (cid >> 8) & 255, cid & 255,
+          GnubbyDevice.CMD_ERROR, 0, 1,  // length
+          GnubbyDevice.BUSY
+        ]);
         // Log the synthetic busy too.
         console.log(UTIL_fmt('<' + UTIL_BytesToHex(busy)));
         this.publishFrame_(busy.buffer);
@@ -366,14 +382,12 @@ UsbGnubbyDevice.prototype.updateLock_ = function(cid, cmd, arg) {
     // (re)set the lock timeout if we still hold it.
     if (this.lockCID) {
       var self = this;
-      this.lockTID = window.setTimeout(
-          function() {
-            console.warn(UTIL_fmt(
-                'lock for CID ' + Gnubby.hexCid(cid) + ' expired!'));
-            self.lockTID = null;
-            self.lockCID = 0;
-          },
-          this.lockMillis);
+      this.lockTID = window.setTimeout(function() {
+        console.warn(
+            UTIL_fmt('lock for CID ' + Gnubby.hexCid(cid) + ' expired!'));
+        self.lockTID = null;
+        self.lockCID = 0;
+      }, this.lockMillis);
     }
   }
 };
@@ -386,8 +400,10 @@ UsbGnubbyDevice.prototype.updateLock_ = function(cid, cmd, arg) {
  * @param {ArrayBuffer|Uint8Array} data Command argument data
  */
 UsbGnubbyDevice.prototype.queueCommand = function(cid, cmd, data) {
-  if (!this.dev) return;
-  if (!this.checkLock_(cid, cmd)) return;
+  if (!this.dev)
+    return;
+  if (!this.checkLock_(cid, cmd))
+    return;
 
   var u8 = new Uint8Array(data);
   var frame = new Uint8Array(u8.length + 7);
@@ -407,14 +423,15 @@ UsbGnubbyDevice.prototype.queueCommand = function(cid, cmd, data) {
 
   var wasEmpty = (this.txqueue.length == 0);
   this.txqueue.push(frame.buffer);
-  if (wasEmpty) this.writeOneRequest_();
+  if (wasEmpty)
+    this.writeOneRequest_();
 };
 
 /**
  * @const
  */
 UsbGnubbyDevice.WINUSB_VID_PIDS = [
-  {'vendorId': 4176, 'productId': 529}   // Yubico WinUSB
+  {'vendorId': 4176, 'productId': 529}  // Yubico WinUSB
 ];
 
 /**
@@ -538,8 +555,8 @@ UsbGnubbyDevice.open = function(gnubbies, which, dev, cb) {
         if (enumeratedBy) {
           dev.enumeratedBy = enumeratedBy;
         }
-        var gnubby = new UsbGnubbyDevice(gnubbies, nonNullHandle, which,
-            inEndpoint, outEndpoint);
+        var gnubby = new UsbGnubbyDevice(
+            gnubbies, nonNullHandle, which, inEndpoint, outEndpoint);
         cb(-GnubbyDevice.OK, gnubby);
       });
     });
diff --git a/chromium/chrome/browser/resources/cryptotoken/usbgnubbyfactory.js b/chromium/chrome/browser/resources/cryptotoken/usbgnubbyfactory.js
index 20c6410e5fd..dd353954074 100644
--- a/chromium/chrome/browser/resources/cryptotoken/usbgnubbyfactory.js
+++ b/chromium/chrome/browser/resources/cryptotoken/usbgnubbyfactory.js
@@ -31,8 +31,8 @@ function UsbGnubbyFactory(gnubbies) {
  * @return {undefined} no open canceller needed for this type of gnubby
  * @override
  */
-UsbGnubbyFactory.prototype.openGnubby =
-    function(which, forEnroll, cb, opt_appIdHash, opt_logMsgUrl, opt_caller) {
+UsbGnubbyFactory.prototype.openGnubby = function(
+    which, forEnroll, cb, opt_appIdHash, opt_logMsgUrl, opt_caller) {
   var gnubby = new Gnubby();
   gnubby.open(which, GnubbyEnumerationTypes.ANY, function(rc) {
     if (rc) {
@@ -61,7 +61,7 @@ UsbGnubbyFactory.prototype.enumerate = function(cb) {
  * @param {FactoryOpenCallback} cb Called with the result of the prerequisite
  *     check. (A non-zero status indicates failure.)
  */
-UsbGnubbyFactory.prototype.notEnrolledPrerequisiteCheck =
-    function(gnubby, appIdHash, cb) {
+UsbGnubbyFactory.prototype.notEnrolledPrerequisiteCheck = function(
+    gnubby, appIdHash, cb) {
   cb(DeviceStatusCodes.OK_STATUS, gnubby);
 };
diff --git a/chromium/chrome/browser/resources/cryptotoken/usbsignhandler.js b/chromium/chrome/browser/resources/cryptotoken/usbsignhandler.js
index 57d23583043..7493cede4f6 100644
--- a/chromium/chrome/browser/resources/cryptotoken/usbsignhandler.js
+++ b/chromium/chrome/browser/resources/cryptotoken/usbsignhandler.js
@@ -49,16 +49,13 @@ UsbSignHandler.prototype.run = function(cb) {
     // Fail a sign request with an empty set of challenges.
     return false;
   }
-  var timeoutMillis =
-      this.request_.timeoutSeconds ?
+  var timeoutMillis = this.request_.timeoutSeconds ?
       this.request_.timeoutSeconds * 1000 :
       UsbSignHandler.DEFAULT_TIMEOUT_MILLIS;
   /** @private {MultipleGnubbySigner} */
   this.signer_ = new MultipleGnubbySigner(
-      false /* forEnroll */,
-      this.signerCompleted_.bind(this),
-      this.signerFoundGnubby_.bind(this),
-      timeoutMillis,
+      false /* forEnroll */, this.signerCompleted_.bind(this),
+      this.signerFoundGnubby_.bind(this), timeoutMillis,
       this.request_.logMsgUrl);
   return this.signer_.doSign(this.request_.signData);
 };
@@ -88,8 +85,8 @@ UsbSignHandler.prototype.signerCompleted_ = function(anyPending) {
  *     results.
  * @private
  */
-UsbSignHandler.prototype.signerFoundGnubby_ =
-    function(signResult, moreExpected) {
+UsbSignHandler.prototype.signerFoundGnubby_ = function(
+    signResult, moreExpected) {
   this.anyGnubbiesFound_ = true;
   if (!signResult.code) {
     var gnubby = signResult['gnubby'];
@@ -97,7 +94,7 @@ UsbSignHandler.prototype.signerFoundGnubby_ =
     var info = new Uint8Array(signResult['info']);
     this.notifySuccess_(gnubby, challenge, info);
   } else if (SingleGnubbySigner.signErrorIndicatesInvalidKeyHandle(
-      signResult.code)) {
+                 signResult.code)) {
     var gnubby = signResult['gnubby'];
     this.notEnrolledGnubbies_.push(gnubby);
     this.sendBogusEnroll_(gnubby);
@@ -115,31 +112,25 @@ UsbSignHandler.prototype.signerFoundGnubby_ =
 
 /** @const */
 UsbSignHandler.BOGUS_APP_ID_HASH = [
-    0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41,
-    0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41,
-    0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41,
-    0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41
+  0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41,
+  0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41,
+  0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41, 0x41
 ];
 
 /** @const */
 UsbSignHandler.BOGUS_CHALLENGE_V1 = [
-    0x04, 0xA2, 0x24, 0x7D, 0x5C, 0x0B, 0x76, 0xF1,
-    0xDC, 0xCD, 0x44, 0xAF, 0x91, 0x9A, 0xA2, 0x3F,
-    0x3F, 0xBA, 0x65, 0x9F, 0x06, 0x78, 0x82, 0xFB,
-    0x93, 0x4B, 0xBF, 0x86, 0x55, 0x95, 0x66, 0x46,
-    0x76, 0x90, 0xDC, 0xE1, 0xE8, 0x6C, 0x86, 0x86,
-    0xC3, 0x03, 0x4E, 0x65, 0x52, 0x4C, 0x32, 0x6F,
-    0xB6, 0x44, 0x0D, 0x50, 0xF9, 0x16, 0xC0, 0xA3,
-    0xDA, 0x31, 0x4B, 0xD3, 0x3F, 0x94, 0xA5, 0xF1,
-    0xD3
+  0x04, 0xA2, 0x24, 0x7D, 0x5C, 0x0B, 0x76, 0xF1, 0xDC, 0xCD, 0x44, 0xAF, 0x91,
+  0x9A, 0xA2, 0x3F, 0x3F, 0xBA, 0x65, 0x9F, 0x06, 0x78, 0x82, 0xFB, 0x93, 0x4B,
+  0xBF, 0x86, 0x55, 0x95, 0x66, 0x46, 0x76, 0x90, 0xDC, 0xE1, 0xE8, 0x6C, 0x86,
+  0x86, 0xC3, 0x03, 0x4E, 0x65, 0x52, 0x4C, 0x32, 0x6F, 0xB6, 0x44, 0x0D, 0x50,
+  0xF9, 0x16, 0xC0, 0xA3, 0xDA, 0x31, 0x4B, 0xD3, 0x3F, 0x94, 0xA5, 0xF1, 0xD3
 ];
 
 /** @const */
 UsbSignHandler.BOGUS_CHALLENGE_V2 = [
-    0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42,
-    0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42,
-    0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42,
-    0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42
+  0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42,
+  0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42,
+  0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x42
 ];
 
 /**
@@ -241,10 +232,7 @@ UsbSignHandler.prototype.notifyError_ = function(code) {
     return;
   this.notified_ = true;
   this.close();
-  var reply = {
-    'type': 'sign_helper_reply',
-    'code': code
-  };
+  var reply = {'type': 'sign_helper_reply', 'code': code};
   this.cb_(reply);
 };
 
diff --git a/chromium/chrome/browser/resources/cryptotoken/util.js b/chromium/chrome/browser/resources/cryptotoken/util.js
index e5c6233c329..73ede9508f9 100644
--- a/chromium/chrome/browser/resources/cryptotoken/util.js
+++ b/chromium/chrome/browser/resources/cryptotoken/util.js
@@ -34,7 +34,8 @@ function UTIL_BytesToString(b) {
  * @return {string} result.
  */
 function UTIL_BytesToHex(b) {
-  if (!b) return '(null)';
+  if (!b)
+    return '(null)';
   var hexchars = '0123456789ABCDEF';
   var hexrep = new Array(b.length * 2);
 
@@ -51,7 +52,8 @@ function UTIL_BytesToHexWithSeparator(b, sep) {
   var hexrep = new Array(b.length * stride);
 
   for (var i = 0; i < b.length; ++i) {
-    if (sep) hexrep[i * stride + 0] = sep;
+    if (sep)
+      hexrep[i * stride + 0] = sep;
     hexrep[i * stride + stride - 2] = hexchars.charAt((b[i] >> 4) & 15);
     hexrep[i * stride + stride - 1] = hexchars.charAt(b[i] & 15);
   }
@@ -62,7 +64,8 @@ function UTIL_HexToBytes(h) {
   var hexchars = '0123456789ABCDEFabcdef';
   var res = new Uint8Array(h.length / 2);
   for (var i = 0; i < h.length; i += 2) {
-    if (hexchars.indexOf(h.substring(i, i + 1)) == -1) break;
+    if (hexchars.indexOf(h.substring(i, i + 1)) == -1)
+      break;
     res[i / 2] = parseInt(h.substring(i, i + 2), 16);
   }
   return res;
@@ -72,15 +75,18 @@ function UTIL_HexToArray(h) {
   var hexchars = '0123456789ABCDEFabcdef';
   var res = new Array(h.length / 2);
   for (var i = 0; i < h.length; i += 2) {
-    if (hexchars.indexOf(h.substring(i, i + 1)) == -1) break;
+    if (hexchars.indexOf(h.substring(i, i + 1)) == -1)
+      break;
     res[i / 2] = parseInt(h.substring(i, i + 2), 16);
   }
   return res;
 }
 
 function UTIL_equalArrays(a, b) {
-  if (!a || !b) return false;
-  if (a.length != b.length) return false;
+  if (!a || !b)
+    return false;
+  if (a.length != b.length)
+    return false;
   var accu = 0;
   for (var i = 0; i < a.length; ++i)
     accu |= a[i] ^ b[i];
@@ -88,11 +94,15 @@ function UTIL_equalArrays(a, b) {
 }
 
 function UTIL_ltArrays(a, b) {
-  if (a.length < b.length) return true;
-  if (a.length > b.length) return false;
+  if (a.length < b.length)
+    return true;
+  if (a.length > b.length)
+    return false;
   for (var i = 0; i < a.length; ++i) {
-    if (a[i] < b[i]) return true;
-    if (a[i] > b[i]) return false;
+    if (a[i] < b[i])
+      return true;
+    if (a[i] > b[i])
+      return false;
   }
   return false;
 }
@@ -124,7 +134,8 @@ function UTIL_getRandom(a) {
   var tmp = new Array(a);
   var rnd = new Uint8Array(a);
   window.crypto.getRandomValues(rnd);  // Yay!
-  for (var i = 0; i < a; ++i) tmp[i] = rnd[i] & 255;
+  for (var i = 0; i < a; ++i)
+    tmp[i] = rnd[i] & 255;
   return tmp;
 }
 
@@ -169,25 +180,34 @@ var UTIL_ASN_SEQUENCE = 0x30;
  * @return {{'r': !Array<number>, 's': !Array<number>}|null}
  */
 function UTIL_Asn1SignatureToJson(a) {
-  if (a.length < 6) return null;  // Too small to be valid
-  if (a[0] != UTIL_ASN_SEQUENCE) return null;
+  if (a.length < 6)
+    return null;  // Too small to be valid
+  if (a[0] != UTIL_ASN_SEQUENCE)
+    return null;
   var l = a[1] & 255;
-  if (l & 0x80) return null;  // SEQ.size too large
-  if (a.length != 2 + l) return null;  // SEQ size does not match input
+  if (l & 0x80)
+    return null;  // SEQ.size too large
+  if (a.length != 2 + l)
+    return null;  // SEQ size does not match input
 
   function parseInt(off) {
-    if (a[off] != UTIL_ASN_INT) return null;
+    if (a[off] != UTIL_ASN_INT)
+      return null;
     var l = a[off + 1] & 255;
-    if (l & 0x80) return null;  // INT.size too large
-    if (off + 2 + l > a.length) return null;  // Out of bounds
+    if (l & 0x80)
+      return null;  // INT.size too large
+    if (off + 2 + l > a.length)
+      return null;  // Out of bounds
     return a.slice(off + 2, off + 2 + l);
   }
 
   var r = parseInt(2);
-  if (!r) return null;
+  if (!r)
+    return null;
 
   var s = parseInt(2 + 2 + r.length);
-  if (!s) return null;
+  if (!s)
+    return null;
 
   return {'r': r, 's': s};
 }
@@ -228,7 +248,8 @@ function UTIL_JsonSignatureToAsn1(sig) {
 }
 
 function UTIL_prepend_zero(s, n) {
-  if (s.length == n) return s;
+  if (s.length == n)
+    return s;
   var l = s.length;
   for (var i = 0; i < n - l; ++i) {
     s = '0' + s;
diff --git a/chromium/chrome/browser/resources/cryptotoken/webrequest.js b/chromium/chrome/browser/resources/cryptotoken/webrequest.js
index 6c77e3f3b7d..dc8f7a639fe 100644
--- a/chromium/chrome/browser/resources/cryptotoken/webrequest.js
+++ b/chromium/chrome/browser/resources/cryptotoken/webrequest.js
@@ -22,7 +22,8 @@ var JS_API_VERSION = 1.1;
 function getOriginFromUrl(url) {
   var re = new RegExp('^(https?://)[^/]*/?');
   var originarray = re.exec(url);
-  if (originarray == null) return originarray;
+  if (originarray == null)
+    return originarray;
   var origin = originarray[0];
   while (origin.charAt(origin.length - 1) == '/') {
     origin = origin.substring(0, origin.length - 1);
@@ -95,8 +96,8 @@ function getSignChallenges(request) {
  *     each challenge.
  * @return {boolean} Whether the array appears valid.
  */
-function isValidSignChallengeArray(signChallenges, challengeValueRequired,
-    appIdRequired) {
+function isValidSignChallengeArray(
+    signChallenges, challengeValueRequired, appIdRequired) {
   for (var i = 0; i < signChallenges.length; i++) {
     var incomingChallenge = signChallenges[i];
     if (challengeValueRequired &&
@@ -125,15 +126,14 @@ function handleWebPageRequest(request, sender, sendResponse) {
       return handleU2fSignRequest(sender, request, sendResponse);
 
     case MessageTypes.U2F_GET_API_VERSION_REQUEST:
-      sendResponse(
-          makeU2fGetApiVersionResponse(request, JS_API_VERSION,
-              MessageTypes.U2F_GET_API_VERSION_RESPONSE));
+      sendResponse(makeU2fGetApiVersionResponse(
+          request, JS_API_VERSION, MessageTypes.U2F_GET_API_VERSION_RESPONSE));
       return null;
 
     default:
-      sendResponse(
-          makeU2fErrorResponse(request, ErrorCodes.BAD_REQUEST, undefined,
-              MessageTypes.U2F_REGISTER_RESPONSE));
+      sendResponse(makeU2fErrorResponse(
+          request, ErrorCodes.BAD_REQUEST, undefined,
+          MessageTypes.U2F_REGISTER_RESPONSE));
       return null;
   }
 }
@@ -153,7 +153,7 @@ function makeResponseForRequest(request, responseSuffix, opt_defaultType) {
   } else {
     type = opt_defaultType;
   }
-  var reply = { 'type': type };
+  var reply = {'type': type};
   if (request && request.requestId) {
     reply.requestId = request.requestId;
   }
@@ -299,9 +299,9 @@ function tlsChannelIdValue(opt_tlsChannelId) {
  */
 function makeBrowserData(type, serverChallenge, origin, opt_tlsChannelId) {
   var browserData = {
-    'typ' : type,
-    'challenge' : serverChallenge,
-    'origin' : origin
+    'typ': type,
+    'challenge': serverChallenge,
+    'origin': origin
   };
   if (BROWSER_SUPPORTS_TLS_CHANNEL_ID) {
     browserData['cid_pubkey'] = tlsChannelIdValue(opt_tlsChannelId);
@@ -364,8 +364,9 @@ function makeU2fGetApiVersionResponse(request, version, opt_defaultType) {
  *     used.
  * @return {!Array<SignHelperChallenge>} The sign challenges, encoded.
  */
-function encodeSignChallenges(signChallenges, opt_defaultChallenge,
-    opt_defaultAppId, opt_challengeHashFunction) {
+function encodeSignChallenges(
+    signChallenges, opt_defaultChallenge, opt_defaultAppId,
+    opt_challengeHashFunction) {
   function encodedSha256(keyHandle, challenge) {
     return B64_encode(sha256HashOfString(challenge));
   }
diff --git a/chromium/chrome/browser/resources/cryptotoken/webrequestsender.js b/chromium/chrome/browser/resources/cryptotoken/webrequestsender.js
index 329a6ab4074..69767762822 100644
--- a/chromium/chrome/browser/resources/cryptotoken/webrequestsender.js
+++ b/chromium/chrome/browser/resources/cryptotoken/webrequestsender.js
@@ -29,9 +29,7 @@ function createSenderFromMessageSender(messageSender) {
   if (!origin) {
     return null;
   }
-  var sender = {
-    origin: origin
-  };
+  var sender = {origin: origin};
   if (messageSender.tlsChannelId) {
     sender.tlsChannelId = messageSender.tlsChannelId;
   }
@@ -75,45 +73,52 @@ function getTabIdWhenPossible(sender) {
     return Promise.resolve(true);
   } else {
     return new Promise(function(resolve, reject) {
-      chrome.tabs.query({active: true, lastFocusedWindow: true},
-          function(tabs) {
+      chrome.tabs.query(
+          {active: true, lastFocusedWindow: true}, function(tabs) {
             if (!tabs.length) {
               // Safety check.
               reject(false);
               return;
             }
             var tab = tabs[0];
-            tabMatchesOrigin(tab, sender.origin).then(function(tabId) {
-              sender.tabId = tabId;
-              resolve(true);
-            }, function() {
-              // Didn't match? Check if the debugger is open.
-              if (tab.url.indexOf('chrome-devtools://') != 0) {
-                reject(false);
-                return;
-              }
-              // Debugger active: find first tab with the sender's origin.
-              chrome.tabs.query({active: true}, function(tabs) {
-                if (!tabs.length) {
-                  // Safety check.
-                  reject(false);
-                  return;
-                }
-                var numRejected = 0;
-                for (var i = 0; i < tabs.length; i++) {
-                  tab = tabs[i];
-                  tabMatchesOrigin(tab, sender.origin).then(function(tabId) {
-                    sender.tabId = tabId;
-                    resolve(true);
-                  }, function() {
-                    if (++numRejected >= tabs.length) {
-                      // None matches: reject.
-                      reject(false);
-                    }
-                  });
-                }
-              });
-            });
+            tabMatchesOrigin(tab, sender.origin)
+                .then(
+                    function(tabId) {
+                      sender.tabId = tabId;
+                      resolve(true);
+                    },
+                    function() {
+                      // Didn't match? Check if the debugger is open.
+                      if (tab.url.indexOf('chrome-devtools://') != 0) {
+                        reject(false);
+                        return;
+                      }
+                      // Debugger active: find first tab with the sender's
+                      // origin.
+                      chrome.tabs.query({active: true}, function(tabs) {
+                        if (!tabs.length) {
+                          // Safety check.
+                          reject(false);
+                          return;
+                        }
+                        var numRejected = 0;
+                        for (var i = 0; i < tabs.length; i++) {
+                          tab = tabs[i];
+                          tabMatchesOrigin(tab, sender.origin)
+                              .then(
+                                  function(tabId) {
+                                    sender.tabId = tabId;
+                                    resolve(true);
+                                  },
+                                  function() {
+                                    if (++numRejected >= tabs.length) {
+                                      // None matches: reject.
+                                      reject(false);
+                                    }
+                                  });
+                        }
+                      });
+                    });
           });
     });
   }
@@ -127,26 +132,26 @@ function getTabIdWhenPossible(sender) {
  */
 function tabInForeground(tabId) {
   return new Promise(function(resolve, reject) {
-      if (!chrome.tabs || !chrome.tabs.get) {
-        reject();
+    if (!chrome.tabs || !chrome.tabs.get) {
+      reject();
+      return;
+    }
+    if (!chrome.windows || !chrome.windows.get) {
+      reject();
+      return;
+    }
+    chrome.tabs.get(tabId, function(tab) {
+      if (chrome.runtime.lastError) {
+        resolve(false);
         return;
       }
-      if (!chrome.windows || !chrome.windows.get) {
-        reject();
+      if (!tab.active) {
+        resolve(false);
         return;
       }
-      chrome.tabs.get(tabId, function(tab) {
-            if (chrome.runtime.lastError) {
-              resolve(false);
-              return;
-            }
-            if (!tab.active) {
-              resolve(false);
-              return;
-            }
-            chrome.windows.get(tab.windowId, function(aWindow) {
-                  resolve(aWindow && aWindow.focused);
-                });
-          });
+      chrome.windows.get(tab.windowId, function(aWindow) {
+        resolve(aWindow && aWindow.focused);
+      });
+    });
   });
 }
diff --git a/chromium/chrome/browser/resources/cryptotoken/window-timer.js b/chromium/chrome/browser/resources/cryptotoken/window-timer.js
index 4f99d678967..b5ad2a6f525 100644
--- a/chromium/chrome/browser/resources/cryptotoken/window-timer.js
+++ b/chromium/chrome/browser/resources/cryptotoken/window-timer.js
@@ -14,8 +14,7 @@
  * @constructor
  * @implements {SystemTimer}
  */
-function WindowTimer() {
-}
+function WindowTimer() {}
 
 /**
  * Sets a single-shot timer.
diff --git a/chromium/chrome/browser/resources/device_log_ui/device_log_ui.html b/chromium/chrome/browser/resources/device_log_ui/device_log_ui.html
index 17635afc445..50963fe6472 100644
--- a/chromium/chrome/browser/resources/device_log_ui/device_log_ui.html
+++ b/chromium/chrome/browser/resources/device_log_ui/device_log_ui.html
@@ -1,69 +1,68 @@
 <!DOCTYPE html>
-<html i18n-values="dir:textdirection;lang:language">
+<html dir="$i18n{textdirection}" lang="$i18n{language}">
 <head>
   <meta charset="utf-8">
-  <title id="device-log-title" i18n-content="titleText"></title>
+  <title id="device-log-title">$i18n{titleText}</title>
   <link rel="stylesheet" href="chrome://device-log/device_log_ui.css">
   <script src="chrome://resources/js/load_time_data.js"></script>
   <script src="chrome://resources/js/util.js"></script>
   <script src="chrome://device-log/strings.js"></script>
   <script src="chrome://device-log/device_log_ui.js"></script>
 </head>
-<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+<body style="font-family: $i18n{fontfamily}; font-size: $i18n{fontsize};">
   <div id="header">
-    <p i18n-content="autoRefreshText"></p>
+    <p>$i18n{autoRefreshText}</p>
   </div>
   <div id="log-checkbox-container">
-    <button id="log-refresh" i18n-content="logRefreshText"></button>
-    <label id="log-checkbox-show" i18n-content="logLevelShowText"></label>
-
+    <button id="log-refresh">$i18n{logRefreshText}</button>
+    <label id="log-checkbox-show">$i18n{logLevelShowText}</label>
     <label>
       <input id="log-level-error" type="checkbox">
-      <span i18n-content="logLevelErrorText"></span>
+      <span>$i18n{logLevelErrorText}</span>
     </label>
     <label>
       <input id="log-level-user" type="checkbox">
-      <span i18n-content="logLevelUserText"></span>
+      <span>$i18n{logLevelUserText}</span>
     </label>
     <label>
       <input id="log-level-event" type="checkbox">
-      <span i18n-content="logLevelEventText"></span>
+      <span>$i18n{logLevelEventText}</span>
     </label>
     <label>
       <input id="log-level-debug" type="checkbox">
-      <span i18n-content="logLevelDebugText"></span>
+      <span>$i18n{logLevelDebugText}</span>
     </label>
     <label>
       <input id="log-type-login" type="checkbox">
-      <span i18n-content="logTypeLoginText"></span>
+      <span>$i18n{logTypeLoginText}</span>
     </label>
     <label>
       <input id="log-type-network" type="checkbox">
-      <span i18n-content="logTypeNetworkText"></span>
+      <span>$i18n{logTypeNetworkText}</span>
     </label>
     <label>
       <input id="log-type-power" type="checkbox">
-      <span i18n-content="logTypePowerText"></span>
+      <span>$i18n{logTypePowerText}</span>
     </label>
     <label>
       <input id="log-type-bluetooth" type="checkbox">
-      <span i18n-content="logTypeBluetoothText"></span>
+      <span>$i18n{logTypeBluetoothText}</span>
     </label>
     <label>
       <input id="log-type-usb" type="checkbox">
-      <span i18n-content="logTypeUsbText"></span>
+      <span>$i18n{logTypeUsbText}</span>
     </label>
     <label>
       <input id="log-type-hid" type="checkbox">
-      <span i18n-content="logTypeHidText"></span>
+      <span>$i18n{logTypeHidText}</span>
     </label>
     <label>
       <input id="log-fileinfo" type="checkbox">
-      <span i18n-content="logLevelFileinfoText"></span>
+      <span>$i18n{logLevelFileinfoText}</span>
     </label>
     <label>
       <input id="log-timedetail" type="checkbox">
-      <span i18n-content="logLevelTimeDetailText"></span>
+      <span>$i18n{logLevelTimeDetailText}</span>
     </label>
   </div>
   <div id="log-container"></div>
diff --git a/chromium/chrome/browser/resources/device_log_ui/device_log_ui.js b/chromium/chrome/browser/resources/device_log_ui/device_log_ui.js
index acee79aa41d..7472d8e6f30 100644
--- a/chromium/chrome/browser/resources/device_log_ui/device_log_ui.js
+++ b/chromium/chrome/browser/resources/device_log_ui/device_log_ui.js
@@ -63,10 +63,7 @@ var DeviceLogUI = (function() {
     else
       timestamp = logEntry['timestampshort'];
     textWrapper.textContent = loadTimeData.getStringF(
-      'logEntryFormat',
-      timestamp,
-      fileinfo,
-      logEntry['event']);
+        'logEntryFormat', timestamp, fileinfo, logEntry['event']);
     res.appendChild(createTypeTag(type));
     res.appendChild(createLevelTag(level));
     res.appendChild(textWrapper);
@@ -97,7 +94,7 @@ var DeviceLogUI = (function() {
   var getLogCallback = function(data) {
     try {
       createEventLog(JSON.parse(data));
-    } catch(e) {
+    } catch (e) {
       var container = $('log-container');
       container.textContent = 'No log entries';
     }
@@ -148,7 +145,5 @@ var DeviceLogUI = (function() {
     requestLog();
   });
 
-  return {
-    getLogCallback: getLogCallback
-  };
+  return {getLogCallback: getLogCallback};
 })();
diff --git a/chromium/chrome/browser/resources/domain_reliability_internals.html b/chromium/chrome/browser/resources/domain_reliability_internals.html
index 00d273ef9e9..f23349b71d8 100644
--- a/chromium/chrome/browser/resources/domain_reliability_internals.html
+++ b/chromium/chrome/browser/resources/domain_reliability_internals.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html i18n-values="dir:textdirection;lang:language">
+<html dir="$i18n{textdirection}" lang="$i18n{language}">
 <head>
   <meta charset="utf-8">
   <title i18n-content="title"></title>
@@ -12,7 +12,6 @@
   <script src="domain_reliability_internals.js"></script>
 </head>
 <body>
-  <h1 i18n-content="title"></h1>
   <script src="chrome://resources/js/i18n_template.js"></script>
   <div id="template">
     <div jsdisplay="error">
diff --git a/chromium/chrome/browser/resources/domain_reliability_internals.js b/chromium/chrome/browser/resources/domain_reliability_internals.js
index aecd47245cf..8d475fb4ce4 100644
--- a/chromium/chrome/browser/resources/domain_reliability_internals.js
+++ b/chromium/chrome/browser/resources/domain_reliability_internals.js
@@ -20,5 +20,5 @@ cr.define('DomainReliabilityInternals', function() {
   };
 });
 
-document.addEventListener('DOMContentLoaded',
-    DomainReliabilityInternals.initialize);
+document.addEventListener(
+    'DOMContentLoaded', DomainReliabilityInternals.initialize);
diff --git a/chromium/chrome/browser/resources/engagement/site_engagement.js b/chromium/chrome/browser/resources/engagement/site_engagement.js
index ae922dfe4df..c70ff186eec 100644
--- a/chromium/chrome/browser/resources/engagement/site_engagement.js
+++ b/chromium/chrome/browser/resources/engagement/site_engagement.js
@@ -15,201 +15,209 @@ function whenPageIsPopulatedForTest() {
   return pageIsPopulatedPromise;
 }
 
-define('main', [
-    'chrome/browser/engagement/site_engagement_details.mojom',
-    'content/public/renderer/frame_interfaces',
-], (siteEngagementMojom, frameInterfaces) => {
-  return () => {
-    var uiHandler = new siteEngagementMojom.SiteEngagementDetailsProviderPtr(
-        frameInterfaces.getInterface(
-            siteEngagementMojom.SiteEngagementDetailsProvider.name));
-
-    var engagementTableBody = $('engagement-table-body');
-    var updateInterval = null;
-    var info = null;
-    var sortKey = 'total_score';
-    var sortReverse = true;
-
-    // Set table header sort handlers.
-    var engagementTableHeader = $('engagement-table-header');
-    var headers = engagementTableHeader.children;
-    for (var i = 0; i < headers.length; i++) {
-      headers[i].addEventListener('click', (e) => {
-        var newSortKey = e.target.getAttribute('sort-key');
-        if (sortKey == newSortKey) {
-          sortReverse = !sortReverse;
-        } else {
-          sortKey = newSortKey;
-          sortReverse = false;
+define(
+    'main',
+    [
+      'chrome/browser/engagement/site_engagement_details.mojom',
+      'content/public/renderer/frame_interfaces',
+    ],
+    (siteEngagementMojom, frameInterfaces) => {
+      return () => {
+        var uiHandler =
+            new siteEngagementMojom.SiteEngagementDetailsProviderPtr(
+                frameInterfaces.getInterface(
+                    siteEngagementMojom.SiteEngagementDetailsProvider.name));
+
+        var engagementTableBody = $('engagement-table-body');
+        var updateInterval = null;
+        var info = null;
+        var sortKey = 'total_score';
+        var sortReverse = true;
+
+        // Set table header sort handlers.
+        var engagementTableHeader = $('engagement-table-header');
+        var headers = engagementTableHeader.children;
+        for (var i = 0; i < headers.length; i++) {
+          headers[i].addEventListener('click', (e) => {
+            var newSortKey = e.target.getAttribute('sort-key');
+            if (sortKey == newSortKey) {
+              sortReverse = !sortReverse;
+            } else {
+              sortKey = newSortKey;
+              sortReverse = false;
+            }
+            var oldSortColumn = document.querySelector('.sort-column');
+            oldSortColumn.classList.remove('sort-column');
+            e.target.classList.add('sort-column');
+            if (sortReverse)
+              e.target.setAttribute('sort-reverse', '');
+            else
+              e.target.removeAttribute('sort-reverse');
+            renderTable();
+          });
         }
-        var oldSortColumn = document.querySelector('.sort-column');
-        oldSortColumn.classList.remove('sort-column');
-        e.target.classList.add('sort-column');
-        if (sortReverse)
-          e.target.setAttribute('sort-reverse', '');
-        else
-          e.target.removeAttribute('sort-reverse');
-        renderTable();
-      });
-    }
-
-    /**
-     * Creates a single row in the engagement table.
-     * @param {SiteEngagementDetails} info The info to create the row from.
-     * @return {HTMLElement}
-     */
-    function createRow(info) {
-      var originCell = createElementWithClassName('td', 'origin-cell');
-      originCell.textContent = info.origin.url;
-
-      var baseScoreInput = createElementWithClassName('input',
-                                                      'base-score-input');
-      baseScoreInput.addEventListener(
-          'change', handleBaseScoreChange.bind(undefined, info.origin));
-      baseScoreInput.addEventListener('focus', disableAutoupdate);
-      baseScoreInput.addEventListener('blur', enableAutoupdate);
-      baseScoreInput.value = info.base_score;
-
-      var baseScoreCell = createElementWithClassName('td', 'base-score-cell');
-      baseScoreCell.appendChild(baseScoreInput);
-
-      var bonusScoreCell = createElementWithClassName('td', 'bonus-score-cell');
-      bonusScoreCell.textContent = info.bonus_score;
-
-      var totalScoreCell = createElementWithClassName('td', 'total-score-cell');
-      totalScoreCell.textContent = info.total_score;
-
-      var engagementBar = createElementWithClassName('div', 'engagement-bar');
-      engagementBar.style.width = (info.total_score * 4) + 'px';
-
-      var engagementBarCell =
-          createElementWithClassName('td', 'engagement-bar-cell');
-      engagementBarCell.appendChild(engagementBar);
-
-      var row = document.createElement('tr');
-      row.appendChild(originCell);
-      row.appendChild(baseScoreCell);
-      row.appendChild(bonusScoreCell);
-      row.appendChild(totalScoreCell);
-      row.appendChild(engagementBarCell);
-
-      // Stores correspondent engagementBarCell to change it's length on
-      // scoreChange event.
-      baseScoreInput.barCellRef = engagementBar;
-      return row;
-    }
-
-    function disableAutoupdate() {
-      if (updateInterval)
-        clearInterval(updateInterval);
-      updateInterval = null;
-    }
-
-    function enableAutoupdate() {
-      if (updateInterval)
-        clearInterval(updateInterval);
-      updateInterval = setInterval(updateEngagementTable, 5000);
-    }
-
-    /**
-     * Sets the base engagement score when a score input is changed.
-     * Resets the length of engagement-bar-cell to match the new score.
-     * Also resets the update interval.
-     * @param {string} origin The origin of the engagement score to set.
-     * @param {Event} e
-     */
-    function handleBaseScoreChange(origin, e) {
-      var baseScoreInput = e.target;
-      uiHandler.setSiteEngagementBaseScoreForUrl(origin, baseScoreInput.value);
-      baseScoreInput.barCellRef.style.width = (baseScoreInput.value * 4) + 'px';
-      baseScoreInput.blur();
-      enableAutoupdate();
-    }
-
-    /**
-     * Remove all rows from the engagement table.
-     */
-    function clearTable() {
-      engagementTableBody.innerHTML = '';
-    }
-
-    /**
-     * Sort the engagement info based on |sortKey| and |sortReverse|.
-     */
-    function sortInfo() {
-      info.sort((a, b) => {
-        return (sortReverse ? -1 : 1) *
-               compareTableItem(sortKey, a, b);
-      });
-    }
-
-    /**
-     * Compares two SiteEngagementDetails objects based on |sortKey|.
-     * @param {string} sortKey The name of the property to sort by.
-     * @return {number} A negative number if |a| should be ordered before |b|, a
-     * positive number otherwise.
-     */
-    function compareTableItem(sortKey, a, b) {
-      var val1 = a[sortKey];
-      var val2 = b[sortKey];
-
-      // Compare the hosts of the origin ignoring schemes.
-      if (sortKey == 'origin')
-        return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1;
-
-      if (sortKey == 'base_score' ||
-          sortKey == 'bonus_score' ||
-          sortKey == 'total_score') {
-        return val1 - val2;
-      }
-
-      assertNotReached('Unsupported sort key: ' + sortKey);
-      return 0;
-    }
-
-    /**
-     * Rounds the supplied value to two decimal places of accuracy.
-     * @param {number} score
-     * @return {number}
-     */
-    function roundScore(score) {
-      return Number(Math.round(score * 100) / 100);
-    }
-
-    /**
-     * Regenerates the engagement table from |info|.
-     */
-    function renderTable() {
-      clearTable();
-      sortInfo();
-
-      info.forEach((info) => {
-        // Round all scores to 2 decimal places.
-        info.base_score = roundScore(info.base_score);
-        info.installed_bonus = roundScore(info.installed_bonus);
-        info.notifications_bonus = roundScore(info.notifications_bonus);
-        info.total_score = roundScore(info.total_score);
-
-        // Collate the bonuses into a value for the bonus_score column.
-        info.bonus_score = info.installed_bonus + info.notifications_bonus;
-
-        engagementTableBody.appendChild(createRow(info));
-      });
-    }
-
-    /**
-     * Retrieve site engagement info and render the engagement table.
-     */
-    function updateEngagementTable() {
-      // Populate engagement table.
-      uiHandler.getSiteEngagementDetails().then((response) => {
-        info = response.info;
-        renderTable(info);
-        resolvePageIsPopulated();
-      });
-    }
-
-    updateEngagementTable();
-    enableAutoupdate();
-  };
-});
+
+        /**
+         * Creates a single row in the engagement table.
+         * @param {SiteEngagementDetails} info The info to create the row from.
+         * @return {HTMLElement}
+         */
+        function createRow(info) {
+          var originCell = createElementWithClassName('td', 'origin-cell');
+          originCell.textContent = info.origin.url;
+
+          var baseScoreInput =
+              createElementWithClassName('input', 'base-score-input');
+          baseScoreInput.addEventListener(
+              'change', handleBaseScoreChange.bind(undefined, info.origin));
+          baseScoreInput.addEventListener('focus', disableAutoupdate);
+          baseScoreInput.addEventListener('blur', enableAutoupdate);
+          baseScoreInput.value = info.base_score;
+
+          var baseScoreCell =
+              createElementWithClassName('td', 'base-score-cell');
+          baseScoreCell.appendChild(baseScoreInput);
+
+          var bonusScoreCell =
+              createElementWithClassName('td', 'bonus-score-cell');
+          bonusScoreCell.textContent = info.bonus_score;
+
+          var totalScoreCell =
+              createElementWithClassName('td', 'total-score-cell');
+          totalScoreCell.textContent = info.total_score;
+
+          var engagementBar =
+              createElementWithClassName('div', 'engagement-bar');
+          engagementBar.style.width = (info.total_score * 4) + 'px';
+
+          var engagementBarCell =
+              createElementWithClassName('td', 'engagement-bar-cell');
+          engagementBarCell.appendChild(engagementBar);
+
+          var row = document.createElement('tr');
+          row.appendChild(originCell);
+          row.appendChild(baseScoreCell);
+          row.appendChild(bonusScoreCell);
+          row.appendChild(totalScoreCell);
+          row.appendChild(engagementBarCell);
+
+          // Stores correspondent engagementBarCell to change it's length on
+          // scoreChange event.
+          baseScoreInput.barCellRef = engagementBar;
+          return row;
+        }
+
+        function disableAutoupdate() {
+          if (updateInterval)
+            clearInterval(updateInterval);
+          updateInterval = null;
+        }
+
+        function enableAutoupdate() {
+          if (updateInterval)
+            clearInterval(updateInterval);
+          updateInterval = setInterval(updateEngagementTable, 5000);
+        }
+
+        /**
+         * Sets the base engagement score when a score input is changed.
+         * Resets the length of engagement-bar-cell to match the new score.
+         * Also resets the update interval.
+         * @param {string} origin The origin of the engagement score to set.
+         * @param {Event} e
+         */
+        function handleBaseScoreChange(origin, e) {
+          var baseScoreInput = e.target;
+          uiHandler.setSiteEngagementBaseScoreForUrl(
+              origin, baseScoreInput.value);
+          baseScoreInput.barCellRef.style.width =
+              (baseScoreInput.value * 4) + 'px';
+          baseScoreInput.blur();
+          enableAutoupdate();
+        }
+
+        /**
+         * Remove all rows from the engagement table.
+         */
+        function clearTable() {
+          engagementTableBody.innerHTML = '';
+        }
+
+        /**
+         * Sort the engagement info based on |sortKey| and |sortReverse|.
+         */
+        function sortInfo() {
+          info.sort((a, b) => {
+            return (sortReverse ? -1 : 1) * compareTableItem(sortKey, a, b);
+          });
+        }
+
+        /**
+         * Compares two SiteEngagementDetails objects based on |sortKey|.
+         * @param {string} sortKey The name of the property to sort by.
+         * @return {number} A negative number if |a| should be ordered before |b|, a
+         * positive number otherwise.
+         */
+        function compareTableItem(sortKey, a, b) {
+          var val1 = a[sortKey];
+          var val2 = b[sortKey];
+
+          // Compare the hosts of the origin ignoring schemes.
+          if (sortKey == 'origin')
+            return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1;
+
+          if (sortKey == 'base_score' || sortKey == 'bonus_score' ||
+              sortKey == 'total_score') {
+            return val1 - val2;
+          }
+
+          assertNotReached('Unsupported sort key: ' + sortKey);
+          return 0;
+        }
+
+        /**
+         * Rounds the supplied value to two decimal places of accuracy.
+         * @param {number} score
+         * @return {number}
+         */
+        function roundScore(score) {
+          return Number(Math.round(score * 100) / 100);
+        }
+
+        /**
+         * Regenerates the engagement table from |info|.
+         */
+        function renderTable() {
+          clearTable();
+          sortInfo();
+
+          info.forEach((info) => {
+            // Round all scores to 2 decimal places.
+            info.base_score = roundScore(info.base_score);
+            info.installed_bonus = roundScore(info.installed_bonus);
+            info.notifications_bonus = roundScore(info.notifications_bonus);
+            info.total_score = roundScore(info.total_score);
+
+            // Collate the bonuses into a value for the bonus_score column.
+            info.bonus_score = info.installed_bonus + info.notifications_bonus;
+
+            engagementTableBody.appendChild(createRow(info));
+          });
+        }
+
+        /**
+         * Retrieve site engagement info and render the engagement table.
+         */
+        function updateEngagementTable() {
+          // Populate engagement table.
+          uiHandler.getSiteEngagementDetails().then((response) => {
+            info = response.info;
+            renderTable(info);
+            resolvePageIsPopulated();
+          });
+        }
+
+        updateEngagementTable();
+        enableAutoupdate();
+      };
+    });
diff --git a/chromium/chrome/browser/resources/extensions/compiled_resources2.gyp b/chromium/chrome/browser/resources/extensions/compiled_resources2.gyp
index 173955e4794..86bdc2d6130 100644
--- a/chromium/chrome/browser/resources/extensions/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/extensions/compiled_resources2.gyp
@@ -63,7 +63,6 @@
           '<(DEPTH)/third_party/jstemplate/jsevalcontext.js',
           'extension_command_list.js',
           '<(DEPTH)/ui/webui/resources/js/cr/ui/controlled_indicator.js',
-          '<(DEPTH)/chrome/browser/resources/uber/uber_utils.js',
           'extension_error_overlay.js',
           'drag_and_drop_handler.js',
           '<(DEPTH)/ui/webui/resources/js/cr/ui/list_selection_model.js',
diff --git a/chromium/chrome/browser/resources/extensions/extension_list.js b/chromium/chrome/browser/resources/extensions/extension_list.js
index df40e770919..5582d587065 100644
--- a/chromium/chrome/browser/resources/extensions/extension_list.js
+++ b/chromium/chrome/browser/resources/extensions/extension_list.js
@@ -481,14 +481,6 @@ cr.define('extensions', function() {
         e.preventDefault();
       });
 
-      // The 'Show Browser Action' button.
-      wrapper.setupColumn('showButton', '.show-button', 'click', function(e) {
-        chrome.developerPrivate.updateExtensionConfiguration({
-          extensionId: extension.id,
-          showActionButton: true
-        });
-      });
-
       // The 'allow in incognito' checkbox.
       wrapper.setupColumn('incognito', '.incognito-control input', 'change',
                           function(e) {
@@ -631,10 +623,6 @@ cr.define('extensions', function() {
       this.setText_(wrapper, '.blacklist-text', extension.blacklistText || '');
       this.setText_(wrapper, '.extension-description', extension.description);
 
-      // The 'Show Browser Action' button.
-      this.updateVisibility_(wrapper, '.show-button',
-                             isActive && extension.actionButtonHidden);
-
       // The 'allow in incognito' checkbox.
       this.updateVisibility_(wrapper, '.incognito-control',
                              isActive && this.incognitoAvailable_,
@@ -996,7 +984,7 @@ cr.define('extensions', function() {
       // Add the options query string. Corner case: the 'options' query string
       // will clobber the 'id' query string if the options link is clicked when
       // 'id' is in the URL, or if both query strings are in the URL.
-      uber.replaceState({}, '?options=' + extensionId);
+      window.history.replaceState({}, '', '/?options=' + extensionId);
 
       var overlay = extensions.ExtensionOptionsOverlay.getInstance();
       var shownCallback = function() {
@@ -1015,7 +1003,7 @@ cr.define('extensions', function() {
         $('overlay').removeEventListener('cancelOverlay', f);
 
         // Remove the options query string.
-        uber.replaceState({}, '');
+        window.history.replaceState({}, '', '/');
       });
 
       // TODO(dbeam): why do we need to focus <extensionoptions> before and
diff --git a/chromium/chrome/browser/resources/extensions/extensions.css b/chromium/chrome/browser/resources/extensions/extensions.css
index 011d0f7d3d8..a18931e2bbf 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.css
+++ b/chromium/chrome/browser/resources/extensions/extensions.css
@@ -98,6 +98,15 @@ html:not(.focus-outline-visible)
   line-height: 150%;
 }
 
+#page-header {
+  -webkit-padding-start: 23px;
+  left: 0;
+}
+
+[dir='rtl'] #page-header {
+  right: 0;
+}
+
 #page-header > .page-banner > .page-banner-gradient {
   -webkit-margin-end: 0;
 }
diff --git a/chromium/chrome/browser/resources/extensions/extensions.html b/chromium/chrome/browser/resources/extensions/extensions.html
index 0f4be9a3d1e..7ed15c83bb5 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.html
+++ b/chromium/chrome/browser/resources/extensions/extensions.html
@@ -1,7 +1,8 @@
 <!doctype html>
-<html i18n-values="dir:textdirection;lang:language">
+<html dir="$i18n{textdirection}" lang="$i18n{language}">
 <head>
 <meta charset="utf-8">
+<title>$i18n{extensionSettings}</title>
 
 <link rel="stylesheet" href="extensions.css">
 <link rel="stylesheet" href="extension_commands_overlay.css">
@@ -49,10 +50,10 @@
 <script src="chrome://resources/js/cr/ui/list.js"></script>
 </if>
 
-<script src="chrome://extensions-frame/extensions.js"></script>
+<script src="chrome://extensions/extensions.js"></script>
 </head>
 
-<body class="uber-frame">
+<body>
 
 <div id="overlay" class="overlay" hidden>
   <include src="extension_commands_overlay.html">
@@ -207,8 +208,6 @@
           </div>
         </div>
         <div class="optional-controls">
-          <button class="show-button"
-              hidden>$i18n{extensionSettingsShowButton}</button>
           <div class="checkbox">
             <label class="incognito-control">
               <input type="checkbox">
@@ -275,7 +274,7 @@
 
 </div>
 
-<script src="chrome://extensions-frame/strings.js"></script>
+<script src="chrome://extensions/strings.js"></script>
 <script src="chrome://resources/js/i18n_template.js"></script>
 
 </body>
diff --git a/chromium/chrome/browser/resources/extensions/extensions.js b/chromium/chrome/browser/resources/extensions/extensions.js
index d0dfdd493d0..e6b511b28f1 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.js
+++ b/chromium/chrome/browser/resources/extensions/extensions.js
@@ -4,7 +4,6 @@
 
 // <include src="../../../../ui/webui/resources/js/cr/ui/focus_row.js">
 // <include src="../../../../ui/webui/resources/js/cr/ui/focus_grid.js">
-// <include src="../uber/uber_utils.js">
 // <include src="drag_and_drop_handler.js">
 // <include src="extension_code.js">
 // <include src="extension_commands_overlay.js">
@@ -65,13 +64,9 @@ cr.define('extensions', function() {
      */
     initialize: function() {
       this.setLoading_(true);
-      uber.onContentFrameLoaded();
       cr.ui.FocusOutlineManager.forDocument(document);
       measureCheckboxStrings();
 
-      // Set the title.
-      uber.setTitle(loadTimeData.getString('extensionSettings'));
-
       var extensionList = new ExtensionList(this);
       extensionList.id = 'extension-settings-list';
       var wrapper = $('extension-list-wrapper');
@@ -385,7 +380,7 @@ cr.define('extensions', function() {
           lastFocused.focus();
 
         $('overlay').removeEventListener('cancelOverlay', f);
-        uber.replaceState({}, '');
+        window.history.replaceState({}, '', '/');
       });
       node.classList.add('showing');
     }
@@ -409,9 +404,6 @@ cr.define('extensions', function() {
       assert(settings.dragWrapperHandler_).dragEnabled =
           !node || node == $('drop-target-overlay');
     }
-
-    uber.invokeMethodOnParent(node ? 'beginInterceptingEvents' :
-                                     'stopInterceptingEvents');
   };
 
   ExtensionSettings.focusOverlay = function() {
diff --git a/chromium/chrome/browser/resources/feedback/js/data.js b/chromium/chrome/browser/resources/feedback/js/data.js
index b1cf0e9cc74..98a801e1a35 100644
--- a/chromium/chrome/browser/resources/feedback/js/data.js
+++ b/chromium/chrome/browser/resources/feedback/js/data.js
@@ -12,7 +12,4 @@ var FEEDBACK_LANDING_PAGE =
  * The status of sending the feedback report as defined in feedback_private.idl.
  * @enum {string}
  */
-var ReportStatus = {
-  SUCCESS: 'success',
-  DELAYED: 'delayed'
-};
+var ReportStatus = {SUCCESS: 'success', DELAYED: 'delayed'};
diff --git a/chromium/chrome/browser/resources/feedback/js/event_handler.js b/chromium/chrome/browser/resources/feedback/js/event_handler.js
index 534f66b6d6a..ec5de87b43c 100644
--- a/chromium/chrome/browser/resources/feedback/js/event_handler.js
+++ b/chromium/chrome/browser/resources/feedback/js/event_handler.js
@@ -26,58 +26,59 @@ var FEEDBACK_DEFAULT_WINDOW_ID = 'default_window';
 //   echo -n 'abcdefghijklmnopqrstuvwxyzabcdef' | sha1sum | \
 //       awk '{print toupper($1)}'
 var whitelistedExtensionIds = [
-  '12E618C3C6E97495AAECF2AC12DEB082353241C6', // QuickOffice
-  '3727DD3E564B6055387425027AD74C58784ACC15', // QuickOffice
-  '2FC374607C2DF285634B67C64A2E356C607091C3', // QuickOffice
-  '2843C1E82A9B6C6FB49308FDDF4E157B6B44BC2B', // G+ Photos
-  '5B5DA6D054D10DB917AF7D9EAE3C56044D1B0B03', // G+ Photos
-  '986913085E3E3C3AFDE9B7A943149C4D3F4C937B', // Feedback Extension
-  '7AE714FFD394E073F0294CFA134C9F91DB5FBAA4', // Connectivity Diagnostics
-  'C7DA3A55C2355F994D3FDDAD120B426A0DF63843', // Connectivity Diagnostics
-  '75E3CFFFC530582C583E4690EF97C70B9C8423B7', // Connectivity Diagnostics
-  '32A1BA997F8AB8DE29ED1BA94AAF00CF2A3FEFA7', // Connectivity Diagnostics
-  'A291B26E088FA6BA53FFD72F0916F06EBA7C585A', // Chrome OS Recovery Tool
-  'D7986543275120831B39EF28D1327552FC343960', // Chrome OS Recovery Tool
-  '8EBDF73405D0B84CEABB8C7513C9B9FA9F1DC2CE', // GetHelp app.
-  '97B23E01B2AA064E8332EE43A7A85C628AADC3F2', // Chrome Remote Desktop Dev
-  '9E527CDA9D7C50844E8A5DB964A54A640AE48F98', // Chrome Remote Desktop Stable
-  'DF52618D0B040D8A054D8348D2E84DDEEE5974E7', // Chrome Remote Desktop QA
-  '269D721F163E587BC53C6F83553BF9CE2BB143CD', // Chrome Remote Desktop QA backup
-  'C449A798C495E6CF7D6AF10162113D564E67AD12', // Chrome Remote Desktop Apps V2
-  '981974CD1832B87BE6B21BE78F7249BB501E0DE6', // Play Movies Dev
-  '32FD7A816E47392C92D447707A89EB07EEDE6FF7', // Play Movies Nightly
-  '3F3CEC4B9B2B5DC2F820CE917AABDF97DB2F5B49', // Play Movies Beta
-  'F92FAC70AB68E1778BF62D9194C25979596AA0E6', // Play Movies Stable
-  '0F585FB1D0FDFBEBCE1FEB5E9DFFB6DA476B8C9B', // Hangouts Extension
-  '2D22CDB6583FD0A13758AEBE8B15E45208B4E9A7', // Hangouts Extension
-  '49DA0B9CCEEA299186C6E7226FD66922D57543DC', // Hangouts Extension
-  'E7E2461CE072DF036CF9592740196159E2D7C089', // Hangouts Extension
-  'A74A4D44C7CFCD8844830E6140C8D763E12DD8F3', // Hangouts Extension
-  '312745D9BF916161191143F6490085EEA0434997', // Hangouts Extension
-  '53041A2FA309EECED01FFC751E7399186E860B2C', // Hangouts Extension
-  '0F42756099D914A026DADFA182871C015735DD95', // Hangouts Extension
-  '1B7734733E207CCE5C33BFAA544CA89634BF881F', // GLS nightly
-  'E2ACA3D943A3C96310523BCDFD8C3AF68387E6B7', // GLS stable
-  'BA007D8D52CC0E2632EFCA03ACD003B0F613FD71', // http://crbug.com/470411
-  '5260FA31DE2007A837B7F7B0EB4A47CE477018C8', // http://crbug.com/470411
-  '4F4A25F31413D9B9F80E61D096DEB09082515267', // http://crbug.com/470411
-  'FBA0DE4D3EFB5485FC03760F01F821466907A743', // http://crbug.com/470411
-  'E216473E4D15C5FB14522D32C5F8DEAAB2CECDC6', // http://crbug.com/470411
-  '676A08383D875E51CE4C2308D875AE77199F1413', // http://crbug.com/473845
-  '869A23E11B308AF45A68CC386C36AADA4BE44A01', // http://crbug.com/473845
-  'E9CE07C7EDEFE70B9857B312E88F94EC49FCC30F', // http://crbug.com/473845
-  'A4577D8C2AF4CF26F40CBCA83FFA4251D6F6C8F8', // http://crbug.com/478929
-  'A8208CCC87F8261AFAEB6B85D5E8D47372DDEA6B', // http://crbug.com/478929
+  '12E618C3C6E97495AAECF2AC12DEB082353241C6',  // QuickOffice
+  '3727DD3E564B6055387425027AD74C58784ACC15',  // QuickOffice
+  '2FC374607C2DF285634B67C64A2E356C607091C3',  // QuickOffice
+  '2843C1E82A9B6C6FB49308FDDF4E157B6B44BC2B',  // G+ Photos
+  '5B5DA6D054D10DB917AF7D9EAE3C56044D1B0B03',  // G+ Photos
+  '986913085E3E3C3AFDE9B7A943149C4D3F4C937B',  // Feedback Extension
+  '7AE714FFD394E073F0294CFA134C9F91DB5FBAA4',  // Connectivity Diagnostics
+  'C7DA3A55C2355F994D3FDDAD120B426A0DF63843',  // Connectivity Diagnostics
+  '75E3CFFFC530582C583E4690EF97C70B9C8423B7',  // Connectivity Diagnostics
+  '32A1BA997F8AB8DE29ED1BA94AAF00CF2A3FEFA7',  // Connectivity Diagnostics
+  'A291B26E088FA6BA53FFD72F0916F06EBA7C585A',  // Chrome OS Recovery Tool
+  'D7986543275120831B39EF28D1327552FC343960',  // Chrome OS Recovery Tool
+  '8EBDF73405D0B84CEABB8C7513C9B9FA9F1DC2CE',  // GetHelp app.
+  '97B23E01B2AA064E8332EE43A7A85C628AADC3F2',  // Chrome Remote Desktop Dev
+  '9E527CDA9D7C50844E8A5DB964A54A640AE48F98',  // Chrome Remote Desktop Stable
+  'DF52618D0B040D8A054D8348D2E84DDEEE5974E7',  // Chrome Remote Desktop QA
+  '269D721F163E587BC53C6F83553BF9CE2BB143CD',  // Chrome Remote Desktop QA
+                                               // backup
+  'C449A798C495E6CF7D6AF10162113D564E67AD12',  // Chrome Remote Desktop Apps V2
+  '981974CD1832B87BE6B21BE78F7249BB501E0DE6',  // Play Movies Dev
+  '32FD7A816E47392C92D447707A89EB07EEDE6FF7',  // Play Movies Nightly
+  '3F3CEC4B9B2B5DC2F820CE917AABDF97DB2F5B49',  // Play Movies Beta
+  'F92FAC70AB68E1778BF62D9194C25979596AA0E6',  // Play Movies Stable
+  '0F585FB1D0FDFBEBCE1FEB5E9DFFB6DA476B8C9B',  // Hangouts Extension
+  '2D22CDB6583FD0A13758AEBE8B15E45208B4E9A7',  // Hangouts Extension
+  '49DA0B9CCEEA299186C6E7226FD66922D57543DC',  // Hangouts Extension
+  'E7E2461CE072DF036CF9592740196159E2D7C089',  // Hangouts Extension
+  'A74A4D44C7CFCD8844830E6140C8D763E12DD8F3',  // Hangouts Extension
+  '312745D9BF916161191143F6490085EEA0434997',  // Hangouts Extension
+  '53041A2FA309EECED01FFC751E7399186E860B2C',  // Hangouts Extension
+  '0F42756099D914A026DADFA182871C015735DD95',  // Hangouts Extension
+  '1B7734733E207CCE5C33BFAA544CA89634BF881F',  // GLS nightly
+  'E2ACA3D943A3C96310523BCDFD8C3AF68387E6B7',  // GLS stable
+  'BA007D8D52CC0E2632EFCA03ACD003B0F613FD71',  // http://crbug.com/470411
+  '5260FA31DE2007A837B7F7B0EB4A47CE477018C8',  // http://crbug.com/470411
+  '4F4A25F31413D9B9F80E61D096DEB09082515267',  // http://crbug.com/470411
+  'FBA0DE4D3EFB5485FC03760F01F821466907A743',  // http://crbug.com/470411
+  'E216473E4D15C5FB14522D32C5F8DEAAB2CECDC6',  // http://crbug.com/470411
+  '676A08383D875E51CE4C2308D875AE77199F1413',  // http://crbug.com/473845
+  '869A23E11B308AF45A68CC386C36AADA4BE44A01',  // http://crbug.com/473845
+  'E9CE07C7EDEFE70B9857B312E88F94EC49FCC30F',  // http://crbug.com/473845
+  'A4577D8C2AF4CF26F40CBCA83FFA4251D6F6C8F8',  // http://crbug.com/478929
+  'A8208CCC87F8261AFAEB6B85D5E8D47372DDEA6B',  // http://crbug.com/478929
   // TODO (ntang) Remove the following 2 hashes by 12/31/2017.
-  'B620CF4203315F9F2E046EDED22C7571A935958D', // http://crbug.com/510270
-  'B206D8716769728278D2D300349C6CB7D7DE2EF9', // http://crbug.com/510270
-  'EFCF5358672FEE04789FD2EC3638A67ADEDB6C8C', // http://crbug.com/514696
-  'FAD85BC419FE00995D196312F53448265EFA86F1', // http://crbug.com/516527
-  'F33B037DEDA65F226B7409C2ADB0CF3F8565AB03', // http://crbug.com/541769
-  '969C788BCBC82FBBE04A17360CA165C23A419257', // http://crbug.com/541769
-  '3BC3740BFC58F06088B300274B4CFBEA20136342', // http://crbug.com/541769
-  '2B6C6A4A5940017146F3E58B7F90116206E84685', // http://crbug.com/642141
-  '96FF2FFA5C9173C76D47184B3E86D267B37781DE', // http://crbug.com/642141
+  'B620CF4203315F9F2E046EDED22C7571A935958D',  // http://crbug.com/510270
+  'B206D8716769728278D2D300349C6CB7D7DE2EF9',  // http://crbug.com/510270
+  'EFCF5358672FEE04789FD2EC3638A67ADEDB6C8C',  // http://crbug.com/514696
+  'FAD85BC419FE00995D196312F53448265EFA86F1',  // http://crbug.com/516527
+  'F33B037DEDA65F226B7409C2ADB0CF3F8565AB03',  // http://crbug.com/541769
+  '969C788BCBC82FBBE04A17360CA165C23A419257',  // http://crbug.com/541769
+  '3BC3740BFC58F06088B300274B4CFBEA20136342',  // http://crbug.com/541769
+  '2B6C6A4A5940017146F3E58B7F90116206E84685',  // http://crbug.com/642141
+  '96FF2FFA5C9173C76D47184B3E86D267B37781DE',  // http://crbug.com/642141
 ];
 
 /**
@@ -177,17 +178,17 @@ class FeedbackRequest {
 
     /** @const */ var ID = this.id_;
     /** @const */ var FLOW = this.feedbackInfo_.flow;
-    chrome.feedbackPrivate.sendFeedback(this.feedbackInfo_,
-        function(result) {
-          if (result == ReportStatus.SUCCESS) {
-            console.log('Feedback: Report sent for request with ID ' + ID);
-            if (FLOW != chrome.feedbackPrivate.FeedbackFlow.LOGIN)
-              window.open(FEEDBACK_LANDING_PAGE, '_blank');
-          } else {
-            console.log('Feedback: Report for request with ID ' + ID +
-                ' will be sent later.');
-          }
-        });
+    chrome.feedbackPrivate.sendFeedback(this.feedbackInfo_, function(result) {
+      if (result == ReportStatus.SUCCESS) {
+        console.log('Feedback: Report sent for request with ID ' + ID);
+        if (FLOW != chrome.feedbackPrivate.FeedbackFlow.LOGIN)
+          window.open(FEEDBACK_LANDING_PAGE, '_blank');
+      } else {
+        console.log(
+            'Feedback: Report for request with ID ' + ID +
+            ' will be sent later.');
+      }
+    });
   }
 
   /**
@@ -211,18 +212,18 @@ class FeedbackRequest {
  *     start feedback UI callback.
  */
 function senderWhitelisted(id, startFeedbackCallback, feedbackInfo) {
-  crypto.subtle.digest('SHA-1', new TextEncoder().encode(id)).then(
-      function(hashBuffer) {
-    var hashString = '';
-    var hashView = new Uint8Array(hashBuffer);
-    for (var i = 0; i < hashView.length; ++i) {
-      var n = hashView[i];
-      hashString += n < 0x10 ? '0' : '';
-      hashString += n.toString(16);
-    }
-    if (whitelistedExtensionIds.indexOf(hashString.toUpperCase()) != -1)
-      startFeedbackCallback(feedbackInfo);
-  });
+  crypto.subtle.digest('SHA-1', new TextEncoder().encode(id))
+      .then(function(hashBuffer) {
+        var hashString = '';
+        var hashView = new Uint8Array(hashBuffer);
+        for (var i = 0; i < hashView.length; ++i) {
+          var n = hashView[i];
+          hashString += n < 0x10 ? '0' : '';
+          hashString += n.toString(16);
+        }
+        if (whitelistedExtensionIds.indexOf(hashString.toUpperCase()) != -1)
+          startFeedbackCallback(feedbackInfo);
+      });
 }
 
 /**
@@ -258,15 +259,17 @@ function startFeedbackUI(feedbackInfo) {
     win.show();
     return;
   }
-  chrome.app.window.create('html/default.html', {
-      frame: feedbackInfo.useSystemWindowFrame ? 'chrome' : 'none',
-      id: FEEDBACK_DEFAULT_WINDOW_ID,
-      innerBounds: {
-        minWidth: FEEDBACK_WIDTH,
-        minHeight: FEEDBACK_HEIGHT,
+  chrome.app.window.create(
+      'html/default.html', {
+        frame: feedbackInfo.useSystemWindowFrame ? 'chrome' : 'none',
+        id: FEEDBACK_DEFAULT_WINDOW_ID,
+        innerBounds: {
+          minWidth: FEEDBACK_WIDTH,
+          minHeight: FEEDBACK_HEIGHT,
+        },
+        hidden: true,
+        resizable: false
       },
-      hidden: true,
-      resizable: false },
       function(appWindow) {
         var request = new FeedbackRequest(feedbackInfo);
 
diff --git a/chromium/chrome/browser/resources/feedback/js/feedback.js b/chromium/chrome/browser/resources/feedback/js/feedback.js
index fa861c8462a..76f6e26ab49 100644
--- a/chromium/chrome/browser/resources/feedback/js/feedback.js
+++ b/chromium/chrome/browser/resources/feedback/js/feedback.js
@@ -160,8 +160,10 @@ function sendReport() {
   $('send-report-button').disabled = true;
   console.log('Feedback: Sending report');
   if (!feedbackInfo.attachedFile && attachedFileBlob) {
-    feedbackInfo.attachedFile = { name: $('attach-file').value,
-                                  data: attachedFileBlob };
+    feedbackInfo.attachedFile = {
+      name: $('attach-file').value,
+      data: attachedFileBlob
+    };
   }
 
   feedbackInfo.description = $('description-text').value;
@@ -170,17 +172,16 @@ function sendReport() {
 
   var useSystemInfo = false;
   var useHistograms = false;
-  if ($('sys-info-checkbox') != null &&
-      $('sys-info-checkbox').checked) {
+  if ($('sys-info-checkbox') != null && $('sys-info-checkbox').checked) {
     // Send histograms along with system info.
     useSystemInfo = useHistograms = true;
   }
-// <if expr="chromeos">
+  // <if expr="chromeos">
   if ($('performance-info-checkbox') == null ||
       !($('performance-info-checkbox').checked)) {
     feedbackInfo.traceId = null;
   }
-// </if>
+  // </if>
 
   feedbackInfo.sendHistograms = useHistograms;
 
@@ -256,8 +257,8 @@ function resizeAppWindow() {
   // We get the height by adding the titlebar height and the content height +
   // margins. We can't get the margins for the content-pane here by using
   // style.margin - the variable seems to not exist.
-  var height = $('title-bar').scrollHeight +
-      $('content-pane').scrollHeight + CONTENT_MARGIN_HEIGHT;
+  var height = $('title-bar').scrollHeight + $('content-pane').scrollHeight +
+      CONTENT_MARGIN_HEIGHT;
 
   var minHeight = FEEDBACK_MIN_HEIGHT;
   if (feedbackInfo.flow == chrome.feedbackPrivate.FeedbackFlow.LOGIN)
@@ -284,7 +285,9 @@ function onSystemInformation() {
  * Close the window after 100ms delay.
  */
 function scheduleWindowClose() {
-  setTimeout(function() { window.close();}, 100);
+  setTimeout(function() {
+    window.close();
+  }, 100);
 }
 
 /**
@@ -346,8 +349,10 @@ function initialize() {
 
         var screenshotDataUrl = screenshotCanvas.toDataURL('image/png');
         $('screenshot-image').src = screenshotDataUrl;
-        $('screenshot-image').classList.toggle('wide-screen',
-            $('screenshot-image').width > MAX_SCREENSHOT_WIDTH);
+        $('screenshot-image')
+            .classList.toggle(
+                'wide-screen',
+                $('screenshot-image').width > MAX_SCREENSHOT_WIDTH);
         feedbackInfo.screenshot = dataUrlToBlob(screenshotDataUrl);
       });
 
@@ -360,8 +365,8 @@ function initialize() {
         optionElement.text = email;
         optionElement.selected = true;
         // Make sure the "Report anonymously" option comes last.
-        $('user-email-drop-down').insertBefore(optionElement,
-            $('anonymous-user-option'));
+        $('user-email-drop-down')
+            .insertBefore(optionElement, $('anonymous-user-option'));
 
         // Now we can unhide the user email section:
         $('user-email').hidden = false;
@@ -387,14 +392,14 @@ function initialize() {
         $('attach-file-note').hidden = true;
       }
 
-// <if expr="chromeos">
+      // <if expr="chromeos">
       if (feedbackInfo.traceId && ($('performance-info-area'))) {
         $('performance-info-area').hidden = false;
         $('performance-info-checkbox').checked = true;
         performanceFeedbackChanged();
         $('performance-info-link').onclick = openSlowTraceWindow;
       }
-// </if>
+      // </if>
       chrome.feedbackPrivate.getStrings(feedbackInfo.flow, function(strings) {
         loadTimeData.data = strings;
         i18nTemplate.process(document, loadTimeData);
@@ -409,32 +414,33 @@ function initialize() {
               return;
             }
             chrome.app.window.create(
-              '/html/sys_info.html', {
-                frame: 'chrome',
-                id: SYSINFO_WINDOW_ID,
-                width: 640,
-                height: 400,
-                hidden: false,
-                resizable: true
-              }, function(appWindow) {
-                // Define functions for the newly created window.
-
-                // Gets the full system information for the new window.
-                appWindow.contentWindow.getFullSystemInfo =
-                    function(callback) {
-                      if (isSystemInfoReady) {
-                        callback(feedbackInfo.systemInformation);
-                        return;
-                      }
-
-                      sysInfoPageOnSysInfoReadyCallback = callback;
-                    };
-
-                // Returns the loadTimeData for the new window.
-                appWindow.contentWindow.getLoadTimeData = function() {
-                  return loadTimeData;
-                };
-            });
+                '/html/sys_info.html', {
+                  frame: 'chrome',
+                  id: SYSINFO_WINDOW_ID,
+                  width: 640,
+                  height: 400,
+                  hidden: false,
+                  resizable: true
+                },
+                function(appWindow) {
+                  // Define functions for the newly created window.
+
+                  // Gets the full system information for the new window.
+                  appWindow.contentWindow.getFullSystemInfo = function(
+                      callback) {
+                    if (isSystemInfoReady) {
+                      callback(feedbackInfo.systemInformation);
+                      return;
+                    }
+
+                    sysInfoPageOnSysInfoReadyCallback = callback;
+                  };
+
+                  // Returns the loadTimeData for the new window.
+                  appWindow.contentWindow.getLoadTimeData = function() {
+                    return loadTimeData;
+                  };
+                });
           };
         }
         if ($('histograms-url')) {
@@ -457,10 +463,10 @@ function initialize() {
     $('send-report-button').onclick = sendReport;
     $('cancel-button').onclick = cancel;
     $('remove-attached-file').onclick = clearAttachedFile;
-// <if expr="chromeos">
-    $('performance-info-checkbox').addEventListener(
-        'change', performanceFeedbackChanged);
-// </if>
+    // <if expr="chromeos">
+    $('performance-info-checkbox')
+        .addEventListener('change', performanceFeedbackChanged);
+    // </if>
   });
 }
 
diff --git a/chromium/chrome/browser/resources/feedback/js/take_screenshot.js b/chromium/chrome/browser/resources/feedback/js/take_screenshot.js
index 53e417065f3..3f099724440 100644
--- a/chromium/chrome/browser/resources/feedback/js/take_screenshot.js
+++ b/chromium/chrome/browser/resources/feedback/js/take_screenshot.js
@@ -30,25 +30,22 @@ function takeScreenshot(callback) {
   }, false);
 
   navigator.webkitGetUserMedia(
-    {
-      video: {
-        mandatory: {
-          chromeMediaSource: 'screen',
-          maxWidth: 4096,
-          maxHeight: 2560
+      {
+        video: {
+          mandatory:
+              {chromeMediaSource: 'screen', maxWidth: 4096, maxHeight: 2560}
         }
-      }
-    },
-    function(stream) {
-      if (stream) {
-        screenshotStream = stream;
-        video.src = window.URL.createObjectURL(screenshotStream);
-        video.play();
-      }
-    },
-    function(err) {
-      console.error('takeScreenshot failed: ' +
-          err.name + '; ' + err.message + '; ' + err.constraintName);
-    }
-  );
+      },
+      function(stream) {
+        if (stream) {
+          screenshotStream = stream;
+          video.src = window.URL.createObjectURL(screenshotStream);
+          video.play();
+        }
+      },
+      function(err) {
+        console.error(
+            'takeScreenshot failed: ' + err.name + '; ' + err.message + '; ' +
+            err.constraintName);
+      });
 }
diff --git a/chromium/chrome/browser/resources/gaia_auth_host/authenticator.js b/chromium/chrome/browser/resources/gaia_auth_host/authenticator.js
index 381a7df1565..2c3f836f88e 100644
--- a/chromium/chrome/browser/resources/gaia_auth_host/authenticator.js
+++ b/chromium/chrome/browser/resources/gaia_auth_host/authenticator.js
@@ -10,6 +10,8 @@
  * authentication events should pass a listener object of type
  * cr.login.GaiaAuthHost.Listener as defined in this file. After initialization,
  * call {@code load} to start the authentication flow.
+ *
+ * See go/cros-auth-design for details on Google API.
  */
 
 cr.define('cr.login', function() {
@@ -31,6 +33,7 @@ cr.define('cr.login', function() {
   var GAPS_COOKIE = 'GAPS';
   var SERVICE_ID = 'chromeoslogin';
   var EMBEDDED_SETUP_CHROMEOS_ENDPOINT = 'embedded/setup/chromeos';
+  var EMBEDDED_SETUP_CHROMEOS_ENDPOINT_V2 = 'embedded/setup/v2/chromeos';
   var SAML_REDIRECTION_PATH = 'samlredirect';
   var BLANK_PAGE_URL = 'about:blank';
 
@@ -44,20 +47,13 @@ cr.define('cr.login', function() {
    * chrome/browser/ui/webui/inline_login_ui.cc.
    * @enum {number}
    */
-  var AuthMode = {
-    DEFAULT: 0,
-    OFFLINE: 1,
-    DESKTOP: 2
-  };
+  var AuthMode = {DEFAULT: 0, OFFLINE: 1, DESKTOP: 2};
 
   /**
    * Enum for the authorization type.
    * @enum {number}
    */
-  var AuthFlow = {
-    DEFAULT: 0,
-    SAML: 1
-  };
+  var AuthFlow = {DEFAULT: 0, SAML: 1};
 
   /**
    * Supported Authenticator params.
@@ -83,15 +79,19 @@ cr.define('cr.login', function() {
                      // not called before dispatching |authCopleted|.
                      // Default is |true|.
     'flow',          // One of 'default', 'enterprise', or 'theftprotection'.
-    'enterpriseDomain',    // Domain in which hosting device is (or should be)
-                           // enrolled.
-    'emailDomain',         // Value used to prefill domain for email.
-    'chromeType',          // Type of Chrome OS device, e.g. "chromebox".
-    'clientVersion',       // Version of the Chrome build.
-    'platformVersion',     // Version of the OS build.
-    'releaseChannel',      // Installation channel.
-    'endpointGen',         // Current endpoint generation.
-    'gapsCookie',          // GAPS cookie
+    'enterpriseEnrollmentDomain',  // Domain in which hosting device is (or
+                                   // should be) enrolled.
+    'emailDomain',                 // Value used to prefill domain for email.
+    'chromeType',                // Type of Chrome OS device, e.g. "chromebox".
+    'clientVersion',             // Version of the Chrome build.
+    'platformVersion',           // Version of the OS build.
+    'releaseChannel',            // Installation channel.
+    'endpointGen',               // Current endpoint generation.
+    'gapsCookie',                // GAPS cookie
+    'chromeOSApiVersion',        // GAIA Chrome OS API version
+    'menuGuestMode',             // Enables "Guest mode" menu item
+    'menuKeyboardOptions',       // Enables "Keyboard options" menu item
+    'menuEnterpriseEnrollment',  // Enables "Enterprise enrollment" menu item.
 
     // The email fields allow for the following possibilities:
     //
@@ -126,8 +126,7 @@ cr.define('cr.login', function() {
     this.isLoaded_ = false;
     this.email_ = null;
     this.password_ = null;
-    this.gaiaId_ = null,
-    this.sessionIndex_ = null;
+    this.gaiaId_ = null, this.sessionIndex_ = null;
     this.chooseWhatToSync_ = false;
     this.skipForNow_ = false;
     this.authFlow = AuthFlow.DEFAULT;
@@ -156,43 +155,32 @@ cr.define('cr.login', function() {
     this.missingGaiaInfoCallback = null;
     this.needPassword = true;
     this.samlHandler_.addEventListener(
-        'insecureContentBlocked',
-        this.onInsecureContentBlocked_.bind(this));
+        'insecureContentBlocked', this.onInsecureContentBlocked_.bind(this));
     this.samlHandler_.addEventListener(
-        'authPageLoaded',
-        this.onAuthPageLoaded_.bind(this));
+        'authPageLoaded', this.onAuthPageLoaded_.bind(this));
     this.samlHandler_.addEventListener(
-        'videoEnabled',
-        this.onVideoEnabled_.bind(this));
+        'videoEnabled', this.onVideoEnabled_.bind(this));
     this.samlHandler_.addEventListener(
-        'apiPasswordAdded',
-        this.onSamlApiPasswordAdded_.bind(this));
+        'apiPasswordAdded', this.onSamlApiPasswordAdded_.bind(this));
 
     this.webview_.addEventListener('droplink', this.onDropLink_.bind(this));
-    this.webview_.addEventListener(
-        'newwindow', this.onNewWindow_.bind(this));
+    this.webview_.addEventListener('newwindow', this.onNewWindow_.bind(this));
     this.webview_.addEventListener(
         'contentload', this.onContentLoad_.bind(this));
-    this.webview_.addEventListener(
-        'loadabort', this.onLoadAbort_.bind(this));
-    this.webview_.addEventListener(
-        'loadstop', this.onLoadStop_.bind(this));
-    this.webview_.addEventListener(
-        'loadcommit', this.onLoadCommit_.bind(this));
+    this.webview_.addEventListener('loadabort', this.onLoadAbort_.bind(this));
+    this.webview_.addEventListener('loadstop', this.onLoadStop_.bind(this));
+    this.webview_.addEventListener('loadcommit', this.onLoadCommit_.bind(this));
     this.webview_.request.onCompleted.addListener(
         this.onRequestCompleted_.bind(this),
-        {urls: ['<all_urls>'], types: ['main_frame']},
-        ['responseHeaders']);
+        {urls: ['<all_urls>'], types: ['main_frame']}, ['responseHeaders']);
     this.webview_.request.onHeadersReceived.addListener(
         this.onHeadersReceived_.bind(this),
         {urls: ['<all_urls>'], types: ['main_frame', 'xmlhttprequest']},
         ['responseHeaders']);
     window.addEventListener(
         'message', this.onMessageFromWebview_.bind(this), false);
-    window.addEventListener(
-        'focus', this.onFocus_.bind(this), false);
-    window.addEventListener(
-        'popstate', this.onPopState_.bind(this), false);
+    window.addEventListener('focus', this.onFocus_.bind(this), false);
+    window.addEventListener('popstate', this.onPopState_.bind(this), false);
   }
 
   Authenticator.prototype = Object.create(cr.EventTarget.prototype);
@@ -250,13 +238,14 @@ cr.define('cr.login', function() {
     this.gapsCookieSent_ = false;
     this.newGapsCookie_ = null;
     this.dontResizeNonEmbeddedPages = data.dontResizeNonEmbeddedPages;
+    this.chromeOSApiVersion_ = data.chromeOSApiVersion;
 
     this.initialFrameUrl_ = this.constructInitialFrameUrl_(data);
     this.reloadUrl_ = data.frameUrl || this.initialFrameUrl_;
     // Don't block insecure content for desktop flow because it lands on
     // http. Otherwise, block insecure content as long as gaia is https.
-    this.samlHandler_.blockInsecureContent = authMode != AuthMode.DESKTOP &&
-        this.idpOrigin_.startsWith('https://');
+    this.samlHandler_.blockInsecureContent =
+        authMode != AuthMode.DESKTOP && this.idpOrigin_.startsWith('https://');
     this.needPassword = !('needPassword' in data) || data.needPassword;
 
     if (this.isNewGaiaFlow) {
@@ -266,7 +255,7 @@ cr.define('cr.login', function() {
 
       if (!this.onBeforeSetHeadersSet_) {
         this.onBeforeSetHeadersSet_ = true;
-        var filterPrefix = this.idpOrigin_ + EMBEDDED_SETUP_CHROMEOS_ENDPOINT;
+        var filterPrefix = this.constructChromeOSAPIUrl_();
         // This depends on gaiaUrl parameter, that is why it is here.
         this.webview_.request.onBeforeSendHeaders.addListener(
             this.onBeforeSendHeaders_.bind(this),
@@ -279,6 +268,13 @@ cr.define('cr.login', function() {
     this.isLoaded_ = true;
   };
 
+  Authenticator.prototype.constructChromeOSAPIUrl_ = function() {
+    if (this.chromeOSApiVersion_ && this.chromeOSApiVersion_ == 2)
+      return this.idpOrigin_ + EMBEDDED_SETUP_CHROMEOS_ENDPOINT_V2;
+
+    return this.idpOrigin_ + EMBEDDED_SETUP_CHROMEOS_ENDPOINT;
+  };
+
   /**
    * Reloads the authenticator component.
    */
@@ -291,30 +287,33 @@ cr.define('cr.login', function() {
   Authenticator.prototype.constructInitialFrameUrl_ = function(data) {
     if (data.doSamlRedirect) {
       var url = this.idpOrigin_ + SAML_REDIRECTION_PATH;
-      url = appendParam(url, 'domain', data.enterpriseDomain);
-      url = appendParam(url, 'continue', data.gaiaUrl +
-          'o/oauth2/programmatic_auth?hl=' + data.hl +
-          '&scope=https%3A%2F%2Fwww.google.com%2Faccounts%2FOAuthLogin&' +
-          'client_id=' + encodeURIComponent(data.clientId) +
-          '&access_type=offline');
+      url = appendParam(url, 'domain', data.enterpriseEnrollmentDomain);
+      url = appendParam(
+          url, 'continue',
+          data.gaiaUrl + 'o/oauth2/programmatic_auth?hl=' + data.hl +
+              '&scope=https%3A%2F%2Fwww.google.com%2Faccounts%2FOAuthLogin&' +
+              'client_id=' + encodeURIComponent(data.clientId) +
+              '&access_type=offline');
 
       return url;
     }
 
-    var path = data.gaiaPath;
-    if (!path && this.isNewGaiaFlow)
-      path = EMBEDDED_SETUP_CHROMEOS_ENDPOINT;
-    if (!path)
-      path = IDP_PATH;
-    var url = this.idpOrigin_ + path;
+    var url;
+    if (data.gaiaPath)
+      url = this.idpOrigin_ + data.gaiaPath;
+    else if (this.isNewGaiaFlow)
+      url = this.constructChromeOSAPIUrl_();
+    else
+      url = this.idpOrigin_ + IDP_PATH;
 
     if (this.isNewGaiaFlow) {
       if (data.chromeType)
         url = appendParam(url, 'chrometype', data.chromeType);
       if (data.clientId)
         url = appendParam(url, 'client_id', data.clientId);
-      if (data.enterpriseDomain)
-        url = appendParam(url, 'manageddomain', data.enterpriseDomain);
+      if (data.enterpriseEnrollmentDomain)
+        url =
+            appendParam(url, 'manageddomain', data.enterpriseEnrollmentDomain);
       if (data.clientVersion)
         url = appendParam(url, 'client_version', data.clientVersion);
       if (data.platformVersion)
@@ -323,6 +322,17 @@ cr.define('cr.login', function() {
         url = appendParam(url, 'release_channel', data.releaseChannel);
       if (data.endpointGen)
         url = appendParam(url, 'endpoint_gen', data.endpointGen);
+      if (data.chromeOSApiVersion == 2) {
+        var mi = '';
+        if (data.menuGuestMode)
+          mi += 'gm,';
+        if (data.menuKeyboardOptions)
+          mi += 'ko,';
+        if (data.menuEnterpriseEnrollment)
+          mi += 'ee,';
+        if (mi.length)
+          url = appendParam(url, 'mi', mi);
+      }
     } else {
       url = appendParam(url, 'continue', this.continueUrl_);
       url = appendParam(url, 'service', data.service || SERVICE_ID);
@@ -404,11 +414,11 @@ cr.define('cr.login', function() {
   };
 
   /**
-    * Manually updates the history. Invoked upon completion of a webview
-    * navigation.
-    * @param {string} url Request URL.
-    * @private
-    */
+   * Manually updates the history. Invoked upon completion of a webview
+   * navigation.
+   * @param {string} url Request URL.
+   * @private
+   */
   Authenticator.prototype.updateHistoryState_ = function(url) {
     if (history.state && history.state.url != url)
       history.pushState({url: url}, '');
@@ -469,8 +479,7 @@ cr.define('cr.login', function() {
         // URL will contain a source=3 field.
         var location = decodeURIComponent(header.value);
         this.chooseWhatToSync_ = !!location.match(/(\?|&)source=3($|&)/);
-      } else if (
-          this.isNewGaiaFlow && headerName == SET_COOKIE_HEADER) {
+      } else if (this.isNewGaiaFlow && headerName == SET_COOKIE_HEADER) {
         var headerValue = header.value;
         if (headerValue.startsWith(OAUTH_CODE_COOKIE + '=')) {
           this.oauthCode_ =
@@ -525,8 +534,8 @@ cr.define('cr.login', function() {
 
       for (var i = 0, l = headers.length; i < l; ++i) {
         if (headers[i].name == COOKIE_HEADER) {
-          headers[i].value = this.updateCookieValue_(headers[i].value,
-                                                     GAPS_COOKIE, gapsCookie);
+          headers[i].value = this.updateCookieValue_(
+              headers[i].value, GAPS_COOKIE, gapsCookie);
           found = true;
           break;
         }
@@ -537,9 +546,7 @@ cr.define('cr.login', function() {
       }
       this.gapsCookieSent_ = true;
     }
-    return {
-      requestHeaders: details.requestHeaders
-    };
+    return {requestHeaders: details.requestHeaders};
   };
 
   /**
@@ -556,19 +563,13 @@ cr.define('cr.login', function() {
     }
 
     // EAFE passes back auth code via message.
-    if (this.useEafe_ &&
-        typeof e.data == 'object' &&
+    if (this.useEafe_ && typeof e.data == 'object' &&
         e.data.hasOwnProperty('authorizationCode')) {
       assert(!this.oauthCode_);
       this.oauthCode_ = e.data.authorizationCode;
-      this.dispatchEvent(
-          new CustomEvent('authCompleted',
-                          {
-                            detail: {
-                              authCodeOnly: true,
-                              authCode: this.oauthCode_
-                            }
-                          }));
+      this.dispatchEvent(new CustomEvent(
+          'authCompleted',
+          {detail: {authCodeOnly: true, authCode: this.oauthCode_}}));
       return;
     }
 
@@ -596,8 +597,7 @@ cr.define('cr.login', function() {
 
       this.chooseWhatToSync_ = msg.chooseWhatToSync;
       // We need to dispatch only first event, before user enters password.
-      this.dispatchEvent(
-          new CustomEvent('attemptLogin', {detail: msg.email}));
+      this.dispatchEvent(new CustomEvent('attemptLogin', {detail: msg.email}));
     } else if (msg.method == 'dialogShown') {
       this.dispatchEvent(new Event('dialogShown'));
     } else if (msg.method == 'dialogHidden') {
@@ -606,6 +606,9 @@ cr.define('cr.login', function() {
       this.dispatchEvent(new CustomEvent('backButton', {detail: msg.show}));
     } else if (msg.method == 'showView') {
       this.dispatchEvent(new Event('showView'));
+    } else if (msg.method == 'menuItemClicked') {
+      this.dispatchEvent(
+          new CustomEvent('menuItemClicked', {detail: msg.item}));
     } else if (msg.method == 'identifierEntered') {
       this.dispatchEvent(new CustomEvent(
           'identifierEntered',
@@ -625,10 +628,11 @@ cr.define('cr.login', function() {
       // does not expect it to be called immediately.
       // TODO(xiyuan): Change to synchronous call when iframe based code
       // is removed.
-      var invokeConfirmPassword = (function() {
-        this.confirmPasswordCallback(this.email_,
-                                     this.samlHandler_.scrapedPasswordCount);
-      }).bind(this);
+      var invokeConfirmPassword =
+          (function() {
+            this.confirmPasswordCallback(
+                this.email_, this.samlHandler_.scrapedPasswordCount);
+          }).bind(this);
       window.setTimeout(invokeConfirmPassword, 0);
       return;
     }
@@ -683,8 +687,8 @@ cr.define('cr.login', function() {
       if (this.confirmPasswordCallback) {
         // Confirm scraped password. The flow follows in
         // verifyConfirmedPassword.
-        this.confirmPasswordCallback(this.email_,
-                                     this.samlHandler_.scrapedPasswordCount);
+        this.confirmPasswordCallback(
+            this.email_, this.samlHandler_.scrapedPasswordCount);
         return;
       }
     }
@@ -707,8 +711,9 @@ cr.define('cr.login', function() {
    * @private
    */
   Authenticator.prototype.onAuthCompleted_ = function() {
-    assert(this.skipForNow_ ||
-           (this.email_ && this.gaiaId_ && this.sessionIndex_));
+    assert(
+        this.skipForNow_ ||
+        (this.email_ && this.gaiaId_ && this.sessionIndex_));
     this.dispatchEvent(new CustomEvent(
         'authCompleted',
         // TODO(rsorokin): get rid of the stub values.
@@ -831,8 +836,8 @@ cr.define('cr.login', function() {
    * @private
    */
   Authenticator.prototype.onLoadAbort_ = function(e) {
-    this.dispatchEvent(new CustomEvent('loadAbort',
-        {detail: {error: e.reason, src: e.url}}));
+    this.dispatchEvent(
+        new CustomEvent('loadAbort', {detail: {error: e.reason, src: e.url}}));
   };
 
   /**
@@ -847,12 +852,12 @@ cr.define('cr.login', function() {
     if (this.useEafe_) {
       // An arbitrary small timeout for delivering the initial message.
       var EAFE_INITIAL_MESSAGE_DELAY_IN_MS = 500;
-      window.setTimeout((function() {
-        var msg = {
-          'clientId': this.clientId_
-        };
-        this.webview_.contentWindow.postMessage(msg, this.idpOrigin_);
-      }).bind(this), EAFE_INITIAL_MESSAGE_DELAY_IN_MS);
+      window.setTimeout(
+          (function() {
+            var msg = {'clientId': this.clientId_};
+            this.webview_.contentWindow.postMessage(msg, this.idpOrigin_);
+          }).bind(this),
+          EAFE_INITIAL_MESSAGE_DELAY_IN_MS);
     }
   };
 
diff --git a/chromium/chrome/browser/resources/gaia_auth_host/post_message_channel.js b/chromium/chrome/browser/resources/gaia_auth_host/post_message_channel.js
index b20300dccaa..1239a89cbe1 100644
--- a/chromium/chrome/browser/resources/gaia_auth_host/post_message_channel.js
+++ b/chromium/chrome/browser/resources/gaia_auth_host/post_message_channel.js
@@ -16,10 +16,7 @@ var PostMessageChannel = (function() {
    * Allowed origins of the hosting page.
    * @type {Array<string>}
    */
-  var ALLOWED_ORIGINS = [
-    'chrome://oobe',
-    'chrome://chrome-signin'
-  ];
+  var ALLOWED_ORIGINS = ['chrome://oobe', 'chrome://chrome-signin'];
 
   /** @const */
   var PORT_MESSAGE = 'post-message-port-message';
@@ -149,7 +146,9 @@ var PostMessageChannel = (function() {
      * @private
      */
     getProxyPortForwardHandler_: function(proxyPort) {
-      return function(msg) { proxyPort.postMessage(msg); };
+      return function(msg) {
+        proxyPort.postMessage(msg);
+      };
     },
 
     /**
@@ -161,8 +160,8 @@ var PostMessageChannel = (function() {
      */
     createProxyPort: function(
         channelId, channelName, targetWindow, targetOrigin) {
-      var port = this.createPort(
-          channelId, channelName, targetWindow, targetOrigin);
+      var port =
+          this.createPort(channelId, channelName, targetWindow, targetOrigin);
       port.onMessage.addListener(this.getProxyPortForwardHandler_(port));
       return port;
     },
@@ -213,8 +212,7 @@ var PostMessageChannel = (function() {
      * Window 'message' handler.
      */
     onMessage_: function(e) {
-      if (typeof e.data != 'object' ||
-          !e.data.hasOwnProperty('type')) {
+      if (typeof e.data != 'object' || !e.data.hasOwnProperty('type')) {
         return;
       }
 
@@ -233,8 +231,8 @@ var PostMessageChannel = (function() {
         var channelName = e.data.channelName;
 
         if (this.isDaemon) {
-          var port = this.createPort(
-              channelId, channelName, e.source, e.origin);
+          var port =
+              this.createPort(channelId, channelName, e.source, e.origin);
           this.onConnect.dispatch(port);
         } else {
           this.createProxyPort(channelId, channelName, e.source, e.origin);
@@ -248,14 +246,14 @@ var PostMessageChannel = (function() {
         this.upperOrigin = e.origin;
 
         for (var i = 0; i < this.deferredUpperWindowMessages_.length; ++i) {
-          this.upperWindow.postMessage(this.deferredUpperWindowMessages_[i],
-                                       this.upperOrigin);
+          this.upperWindow.postMessage(
+              this.deferredUpperWindowMessages_[i], this.upperOrigin);
         }
         this.deferredUpperWindowMessages_ = [];
 
         for (var i = 0; i < this.deferredUpperWindowPorts_.length; ++i) {
-          this.deferredUpperWindowPorts_[i].setTarget(this.upperWindow,
-                                                      this.upperOrigin);
+          this.deferredUpperWindowPorts_[i].setTarget(
+              this.upperWindow, this.upperOrigin);
         }
         this.deferredUpperWindowPorts_ = [];
       }
@@ -306,11 +304,9 @@ var PostMessageChannel = (function() {
         return;
       }
 
-      this.targetWindow.postMessage({
-        type: PORT_MESSAGE,
-        channelId: this.channelId,
-        payload: msg
-      }, this.targetOrigin);
+      this.targetWindow.postMessage(
+          {type: PORT_MESSAGE, channelId: this.channelId, payload: msg},
+          this.targetOrigin);
     },
 
     handleWindowMessage: function(e) {
@@ -342,9 +338,7 @@ var PostMessageChannel = (function() {
    * @param {DOMWindow} webViewContentWindow Content window of the webview.
    */
   PostMessageChannel.init = function(webViewContentWindow) {
-    webViewContentWindow.postMessage({
-      type: CHANNEL_INIT_MESSAGE
-    }, '*');
+    webViewContentWindow.postMessage({type: CHANNEL_INIT_MESSAGE}, '*');
   };
 
   /**
diff --git a/chromium/chrome/browser/resources/gaia_auth_host/saml_handler.js b/chromium/chrome/browser/resources/gaia_auth_host/saml_handler.js
index 48b195b410a..9212e584129 100644
--- a/chromium/chrome/browser/resources/gaia_auth_host/saml_handler.js
+++ b/chromium/chrome/browser/resources/gaia_auth_host/saml_handler.js
@@ -143,17 +143,14 @@ cr.define('cr.login', function() {
 
     this.webview_.addEventListener(
         'contentload', this.onContentLoad_.bind(this));
-    this.webview_.addEventListener(
-        'loadabort', this.onLoadAbort_.bind(this));
-    this.webview_.addEventListener(
-        'loadcommit', this.onLoadCommit_.bind(this));
+    this.webview_.addEventListener('loadabort', this.onLoadAbort_.bind(this));
+    this.webview_.addEventListener('loadcommit', this.onLoadCommit_.bind(this));
     this.webview_.addEventListener(
         'permissionrequest', this.onPermissionRequest_.bind(this));
 
     this.webview_.request.onBeforeRequest.addListener(
         this.onInsecureRequest.bind(this),
-        {urls: ['http://*/*', 'file://*/*', 'ftp://*/*']},
-        ['blocking']);
+        {urls: ['http://*/*', 'file://*/*', 'ftp://*/*']}, ['blocking']);
     this.webview_.request.onHeadersReceived.addListener(
         this.onHeadersReceived_.bind(this),
         {urls: ['<all_urls>'], types: ['main_frame', 'xmlhttprequest']},
@@ -162,9 +159,7 @@ cr.define('cr.login', function() {
     this.webview_.addContentScripts([{
       name: 'samlInjected',
       matches: ['http://*/*', 'https://*/*'],
-      js: {
-        code: injectedJs
-      },
+      js: {code: injectedJs},
       all_frames: true,
       run_at: 'document_start'
     }]);
@@ -290,8 +285,8 @@ cr.define('cr.login', function() {
       if (!this.blockInsecureContent)
         return {};
       var strippedUrl = stripParams(details.url);
-      this.dispatchEvent(new CustomEvent('insecureContentBlocked',
-                                         {detail: {url: strippedUrl}}));
+      this.dispatchEvent(new CustomEvent(
+          'insecureContentBlocked', {detail: {url: strippedUrl}}));
       return {cancel: true};
     },
 
@@ -318,8 +313,8 @@ cr.define('cr.login', function() {
             // requests will be coming from the IdP. Append a cookie to the
             // current |headers| that marks the point at which the redirect
             // occurred.
-            headers.push({name: 'Set-Cookie',
-                          value: 'google-accounts-saml-start=now'});
+            headers.push(
+                {name: 'Set-Cookie', value: 'google-accounts-saml-start=now'});
             return {responseHeaders: headers};
           } else if (action == 'end') {
             this.pendingIsSamlPage_ = false;
@@ -344,8 +339,8 @@ cr.define('cr.login', function() {
             // ignored by Chrome in cookie headers, causing the modified headers
             // to actually set the original cookies.
             var otherHeaders = [];
-            var cookies = [{name: 'Set-Cookie',
-                            value: 'google-accounts-saml-end=now'}];
+            var cookies =
+                [{name: 'Set-Cookie', value: 'google-accounts-saml-end=now'}];
             for (var j = 0; j < headers.length; ++j) {
               if (headers[j].name.toLowerCase().startsWith('set-cookie')) {
                 var header = headers[j];
@@ -373,8 +368,7 @@ cr.define('cr.login', function() {
       var channel = Channel.create();
       channel.init(port);
 
-      channel.registerMessage(
-          'apiCall', this.onAPICall_.bind(this, channel));
+      channel.registerMessage('apiCall', this.onAPICall_.bind(this, channel));
       channel.registerMessage(
           'updatePassword', this.onUpdatePassword_.bind(this, channel));
       channel.registerMessage(
@@ -384,20 +378,21 @@ cr.define('cr.login', function() {
     },
 
     sendInitializationSuccess_: function(channel) {
-      channel.send({name: 'apiResponse', response: {
-        result: 'initialized',
-        version: this.apiVersion_,
-        keyTypes: API_KEY_TYPES
-      }});
-    },
-
-    sendInitializationFailure_: function(channel) {
       channel.send({
         name: 'apiResponse',
-        response: {result: 'initialization_failed'}
+        response: {
+          result: 'initialized',
+          version: this.apiVersion_,
+          keyTypes: API_KEY_TYPES
+        }
       });
     },
 
+    sendInitializationFailure_: function(channel) {
+      channel.send(
+          {name: 'apiResponse', response: {result: 'initialization_failed'}});
+    },
+
     /**
      * Handlers for channel messages.
      * @param {Channel} channel A channel to send back response.
@@ -413,8 +408,8 @@ cr.define('cr.login', function() {
           return;
         }
 
-        this.apiVersion_ = Math.min(call.requestedVersion,
-                                    MAX_API_VERSION_VERSION);
+        this.apiVersion_ =
+            Math.min(call.requestedVersion, MAX_API_VERSION_VERSION);
         this.apiInitialized_ = true;
         this.sendInitializationSuccess_(channel);
         return;
@@ -446,11 +441,13 @@ cr.define('cr.login', function() {
 
     onPageLoaded_: function(channel, msg) {
       this.authDomain = extractDomain(msg.url);
-      this.dispatchEvent(new CustomEvent(
-          'authPageLoaded',
-          {detail: {url: url,
-                    isSAMLPage: this.isSamlPage_,
-                    domain: this.authDomain}}));
+      this.dispatchEvent(new CustomEvent('authPageLoaded', {
+        detail: {
+          url: url,
+          isSAMLPage: this.isSamlPage_,
+          domain: this.authDomain
+        }
+      }));
     },
 
     onPermissionRequest_: function(permissionEvent) {
@@ -467,7 +464,5 @@ cr.define('cr.login', function() {
     },
   };
 
-  return {
-    SamlHandler: SamlHandler
-  };
+  return {SamlHandler: SamlHandler};
 });
diff --git a/chromium/chrome/browser/resources/gaia_auth_host/saml_injected.js b/chromium/chrome/browser/resources/gaia_auth_host/saml_injected.js
index f79c6264929..ed1468e66a7 100644
--- a/chromium/chrome/browser/resources/gaia_auth_host/saml_injected.js
+++ b/chromium/chrome/browser/resources/gaia_auth_host/saml_injected.js
@@ -15,204 +15,196 @@
  */
 
 (function() {
-  function APICallForwarder() {
-  }
+function APICallForwarder() {}
+
+/**
+ * The credential passing API is used by sending messages to the SAML page's
+ * |window| object. This class forwards API calls from the SAML page to a
+ * background script and API responses from the background script to the SAML
+ * page. Communication with the background script occurs via a |Channel|.
+ */
+APICallForwarder.prototype = {
+  // Channel to which API calls are forwarded.
+  channel_: null,
 
   /**
-   * The credential passing API is used by sending messages to the SAML page's
-   * |window| object. This class forwards API calls from the SAML page to a
-   * background script and API responses from the background script to the SAML
-   * page. Communication with the background script occurs via a |Channel|.
+   * Initialize the API call forwarder.
+   * @param {!Object} channel Channel to which API calls should be forwarded.
    */
-  APICallForwarder.prototype = {
-    // Channel to which API calls are forwarded.
-    channel_: null,
-
-    /**
-     * Initialize the API call forwarder.
-     * @param {!Object} channel Channel to which API calls should be forwarded.
-     */
-    init: function(channel) {
-      this.channel_ = channel;
-      this.channel_.registerMessage('apiResponse',
-                                    this.onAPIResponse_.bind(this));
-
-      window.addEventListener('message', this.onMessage_.bind(this));
-    },
-
-    onMessage_: function(event) {
-      if (event.source != window ||
-          typeof event.data != 'object' ||
-          !event.data.hasOwnProperty('type') ||
-          event.data.type != 'gaia_saml_api') {
-        return;
-      }
-      // Forward API calls to the background script.
-      this.channel_.send({name: 'apiCall', call: event.data.call});
-    },
-
-    onAPIResponse_: function(msg) {
-      // Forward API responses to the SAML page.
-      window.postMessage({type: 'gaia_saml_api_reply', response: msg.response},
-                         '/');
+  init: function(channel) {
+    this.channel_ = channel;
+    this.channel_.registerMessage(
+        'apiResponse', this.onAPIResponse_.bind(this));
+
+    window.addEventListener('message', this.onMessage_.bind(this));
+  },
+
+  onMessage_: function(event) {
+    if (event.source != window || typeof event.data != 'object' ||
+        !event.data.hasOwnProperty('type') ||
+        event.data.type != 'gaia_saml_api') {
+      return;
     }
-  };
+    // Forward API calls to the background script.
+    this.channel_.send({name: 'apiCall', call: event.data.call});
+  },
+
+  onAPIResponse_: function(msg) {
+    // Forward API responses to the SAML page.
+    window.postMessage(
+        {type: 'gaia_saml_api_reply', response: msg.response}, '/');
+  }
+};
+
+/**
+ * A class to scrape password from type=password input elements under a given
+ * docRoot and send them back via a Channel.
+ */
+function PasswordInputScraper() {}
+
+PasswordInputScraper.prototype = {
+  // URL of the page.
+  pageURL_: null,
+
+  // Channel to send back changed password.
+  channel_: null,
+
+  // An array to hold password fields.
+  passwordFields_: null,
+
+  // An array to hold cached password values.
+  passwordValues_: null,
+
+  // A MutationObserver to watch for dynamic password field creation.
+  passwordFieldsObserver: null,
 
   /**
-   * A class to scrape password from type=password input elements under a given
-   * docRoot and send them back via a Channel.
+   * Initialize the scraper with given channel and docRoot. Note that the
+   * scanning for password fields happens inside the function and does not
+   * handle DOM tree changes after the call returns.
+   * @param {!Object} channel The channel to send back password.
+   * @param {!string} pageURL URL of the page.
+   * @param {!HTMLElement} docRoot The root element of the DOM tree that
+   *     contains the password fields of interest.
    */
-  function PasswordInputScraper() {
-  }
-
-  PasswordInputScraper.prototype = {
-    // URL of the page.
-    pageURL_: null,
-
-    // Channel to send back changed password.
-    channel_: null,
-
-    // An array to hold password fields.
-    passwordFields_: null,
-
-    // An array to hold cached password values.
-    passwordValues_: null,
-
-    // A MutationObserver to watch for dynamic password field creation.
-    passwordFieldsObserver: null,
-
-    /**
-     * Initialize the scraper with given channel and docRoot. Note that the
-     * scanning for password fields happens inside the function and does not
-     * handle DOM tree changes after the call returns.
-     * @param {!Object} channel The channel to send back password.
-     * @param {!string} pageURL URL of the page.
-     * @param {!HTMLElement} docRoot The root element of the DOM tree that
-     *     contains the password fields of interest.
-     */
-    init: function(channel, pageURL, docRoot) {
-      this.pageURL_ = pageURL;
-      this.channel_ = channel;
-
-      this.passwordFields_ = [];
-      this.passwordValues_ = [];
-
-      this.findAndTrackChildren(docRoot);
-
-      this.passwordFieldsObserver = new MutationObserver(function(mutations) {
-        mutations.forEach(function(mutation) {
-          Array.prototype.forEach.call(
-            mutation.addedNodes,
-            function(addedNode) {
-              if (addedNode.nodeType != Node.ELEMENT_NODE)
-                return;
-
-              if (addedNode.matches('input[type=password]')) {
-                this.trackPasswordField(addedNode);
-              } else {
-                this.findAndTrackChildren(addedNode);
-              }
-            }.bind(this));
+  init: function(channel, pageURL, docRoot) {
+    this.pageURL_ = pageURL;
+    this.channel_ = channel;
+
+    this.passwordFields_ = [];
+    this.passwordValues_ = [];
+
+    this.findAndTrackChildren(docRoot);
+
+    this.passwordFieldsObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        Array.prototype.forEach.call(mutation.addedNodes, function(addedNode) {
+          if (addedNode.nodeType != Node.ELEMENT_NODE)
+            return;
+
+          if (addedNode.matches('input[type=password]')) {
+            this.trackPasswordField(addedNode);
+          } else {
+            this.findAndTrackChildren(addedNode);
+          }
         }.bind(this));
       }.bind(this));
-      this.passwordFieldsObserver.observe(docRoot,
-                                          {subtree: true, childList: true});
-    },
-
-    /**
-     * Find and track password fields that are descendants of the given element.
-     * @param {!HTMLElement} element The parent element to search from.
-     */
-    findAndTrackChildren: function(element) {
-      Array.prototype.forEach.call(
-          element.querySelectorAll('input[type=password]'), function(field) {
-            this.trackPasswordField(field);
-          }.bind(this));
-    },
-
-    /**
-     * Start tracking value changes of the given password field if it is
-     * not being tracked yet.
-     * @param {!HTMLInputElement} passworField The password field to track.
-     */
-    trackPasswordField: function(passwordField) {
-      var existing = this.passwordFields_.filter(function(element) {
-        return element === passwordField;
-      });
-      if (existing.length != 0)
-        return;
+    }.bind(this));
+    this.passwordFieldsObserver.observe(
+        docRoot, {subtree: true, childList: true});
+  },
 
-      var index = this.passwordFields_.length;
-      var fieldId = passwordField.id || passwordField.name || '';
-      passwordField.addEventListener(
-          'input', this.onPasswordChanged_.bind(this, index, fieldId));
-      this.passwordFields_.push(passwordField);
-      this.passwordValues_.push(passwordField.value);
-    },
-
-    /**
-     * Check if the password field at |index| has changed. If so, sends back
-     * the updated value.
-     */
-    maybeSendUpdatedPassword: function(index, fieldId) {
-      var newValue = this.passwordFields_[index].value;
-      if (newValue == this.passwordValues_[index])
-        return;
+  /**
+   * Find and track password fields that are descendants of the given element.
+   * @param {!HTMLElement} element The parent element to search from.
+   */
+  findAndTrackChildren: function(element) {
+    Array.prototype.forEach.call(
+        element.querySelectorAll('input[type=password]'), function(field) {
+          this.trackPasswordField(field);
+        }.bind(this));
+  },
 
-      this.passwordValues_[index] = newValue;
-
-      // Use an invalid char for URL as delimiter to concatenate page url,
-      // password field index and id to construct a unique ID for the password
-      // field.
-      var passwordId = this.pageURL_.split('#')[0].split('?')[0] +
-          '|' + index + '|' + fieldId;
-      this.channel_.send({
-        name: 'updatePassword',
-        id: passwordId,
-        password: newValue
-      });
-    },
-
-    /**
-     * Handles 'change' event in the scraped password fields.
-     * @param {number} index The index of the password fields in
-     *     |passwordFields_|.
-     * @param {string} fieldId The id or name of the password field or blank.
-     */
-    onPasswordChanged_: function(index, fieldId) {
-      this.maybeSendUpdatedPassword(index, fieldId);
-    }
-  };
+  /**
+   * Start tracking value changes of the given password field if it is
+   * not being tracked yet.
+   * @param {!HTMLInputElement} passworField The password field to track.
+   */
+  trackPasswordField: function(passwordField) {
+    var existing = this.passwordFields_.filter(function(element) {
+      return element === passwordField;
+    });
+    if (existing.length != 0)
+      return;
 
-  function onGetSAMLFlag(channel, isSAMLPage) {
-    if (!isSAMLPage)
+    var index = this.passwordFields_.length;
+    var fieldId = passwordField.id || passwordField.name || '';
+    passwordField.addEventListener(
+        'input', this.onPasswordChanged_.bind(this, index, fieldId));
+    this.passwordFields_.push(passwordField);
+    this.passwordValues_.push(passwordField.value);
+  },
+
+  /**
+   * Check if the password field at |index| has changed. If so, sends back
+   * the updated value.
+   */
+  maybeSendUpdatedPassword: function(index, fieldId) {
+    var newValue = this.passwordFields_[index].value;
+    if (newValue == this.passwordValues_[index])
       return;
-    var pageURL = window.location.href;
-
-    channel.send({name: 'pageLoaded', url: pageURL});
-
-    var initPasswordScraper = function() {
-      var passwordScraper = new PasswordInputScraper();
-      passwordScraper.init(channel, pageURL, document.documentElement);
-    };
-
-    if (document.readyState == 'loading') {
-      window.addEventListener('readystatechange', function listener(event) {
-        if (document.readyState == 'loading')
-          return;
-        initPasswordScraper();
-        window.removeEventListener(event.type, listener, true);
-      }, true);
-    } else {
+
+    this.passwordValues_[index] = newValue;
+
+    // Use an invalid char for URL as delimiter to concatenate page url,
+    // password field index and id to construct a unique ID for the password
+    // field.
+    var passwordId =
+        this.pageURL_.split('#')[0].split('?')[0] + '|' + index + '|' + fieldId;
+    this.channel_.send(
+        {name: 'updatePassword', id: passwordId, password: newValue});
+  },
+
+  /**
+   * Handles 'change' event in the scraped password fields.
+   * @param {number} index The index of the password fields in
+   *     |passwordFields_|.
+   * @param {string} fieldId The id or name of the password field or blank.
+   */
+  onPasswordChanged_: function(index, fieldId) {
+    this.maybeSendUpdatedPassword(index, fieldId);
+  }
+};
+
+function onGetSAMLFlag(channel, isSAMLPage) {
+  if (!isSAMLPage)
+    return;
+  var pageURL = window.location.href;
+
+  channel.send({name: 'pageLoaded', url: pageURL});
+
+  var initPasswordScraper = function() {
+    var passwordScraper = new PasswordInputScraper();
+    passwordScraper.init(channel, pageURL, document.documentElement);
+  };
+
+  if (document.readyState == 'loading') {
+    window.addEventListener('readystatechange', function listener(event) {
+      if (document.readyState == 'loading')
+        return;
       initPasswordScraper();
-    }
+      window.removeEventListener(event.type, listener, true);
+    }, true);
+  } else {
+    initPasswordScraper();
   }
+}
 
-  var channel = Channel.create();
-  channel.connect('injected');
-  channel.sendWithCallback({name: 'getSAMLFlag'},
-                           onGetSAMLFlag.bind(undefined, channel));
+var channel = Channel.create();
+channel.connect('injected');
+channel.sendWithCallback(
+    {name: 'getSAMLFlag'}, onGetSAMLFlag.bind(undefined, channel));
 
-  var apiCallForwarder = new APICallForwarder();
-  apiCallForwarder.init(channel);
+var apiCallForwarder = new APICallForwarder();
+apiCallForwarder.init(channel);
 })();
diff --git a/chromium/chrome/browser/resources/hangout_services/thunk.js b/chromium/chrome/browser/resources/hangout_services/thunk.js
index e2a966d5735..43f12df8135 100644
--- a/chromium/chrome/browser/resources/hangout_services/thunk.js
+++ b/chromium/chrome/browser/resources/hangout_services/thunk.js
@@ -2,211 +2,205 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-chrome.runtime.onMessageExternal.addListener(
-    function(message, sender, sendResponse) {
-      function doSendResponse(value, errorString) {
-        var error = null;
-        if (errorString) {
-          error = {};
-          error['name'] = 'ComponentExtensionError';
-          error['message'] = errorString;
-        }
+chrome.runtime.onMessageExternal.addListener(function(
+    message, sender, sendResponse) {
+  function doSendResponse(value, errorString) {
+    var error = null;
+    if (errorString) {
+      error = {};
+      error['name'] = 'ComponentExtensionError';
+      error['message'] = errorString;
+    }
 
-        var errorMessage = error || chrome.extension.lastError;
-        sendResponse({'value': value, 'error': errorMessage});
-      }
+    var errorMessage = error || chrome.extension.lastError;
+    sendResponse({'value': value, 'error': errorMessage});
+  }
 
-      function getHost(url) {
-        if (!url)
-          return '';
-        // Use the DOM to parse the URL. Since we don't add the anchor to
-        // the page, this is the only reference to it and it will be
-        // deleted once it's gone out of scope.
-        var a = document.createElement('a');
-        a.href = url;
-        var origin = a.protocol + '//' + a.hostname;
-        if (a.port != '')
-          origin = origin + ':' + a.port;
-        origin = origin + '/';
-        return origin;
-      }
+  function getHost(url) {
+    if (!url)
+      return '';
+    // Use the DOM to parse the URL. Since we don't add the anchor to
+    // the page, this is the only reference to it and it will be
+    // deleted once it's gone out of scope.
+    var a = document.createElement('a');
+    a.href = url;
+    var origin = a.protocol + '//' + a.hostname;
+    if (a.port != '')
+      origin = origin + ':' + a.port;
+    origin = origin + '/';
+    return origin;
+  }
 
-      try {
-        var requestInfo = {};
+  try {
+    var requestInfo = {};
 
-        // Set the tab ID. If it's passed in the message, use that.
-        // Otherwise use the sender information.
-        if (message['tabId']) {
-          requestInfo['tabId'] = +message['tabId'];
-          if (isNaN(requestInfo['tabId'])) {
-            throw new Error('Cannot convert tab ID string to integer: ' +
-                            message['tabId']);
-          }
-        } else if (sender.tab) {
-          requestInfo['tabId'] = sender.tab.id;
-        }
+    // Set the tab ID. If it's passed in the message, use that.
+    // Otherwise use the sender information.
+    if (message['tabId']) {
+      requestInfo['tabId'] = +message['tabId'];
+      if (isNaN(requestInfo['tabId'])) {
+        throw new Error(
+            'Cannot convert tab ID string to integer: ' + message['tabId']);
+      }
+    } else if (sender.tab) {
+      requestInfo['tabId'] = sender.tab.id;
+    }
 
-        if (sender.guestProcessId) {
-          requestInfo['guestProcessId'] = sender.guestProcessId;
-        }
+    if (sender.guestProcessId) {
+      requestInfo['guestProcessId'] = sender.guestProcessId;
+    }
 
-        var method = message['method'];
+    var method = message['method'];
 
-        // Set the origin. If a URL is passed in the message, use that.
-        // Otherwise use the sender information.
-        var origin;
-        if (message['winUrl']) {
-          origin = getHost(message['winUrl']);
-        } else {
-          origin = getHost(sender.url);
-        }
+    // Set the origin. If a URL is passed in the message, use that.
+    // Otherwise use the sender information.
+    var origin;
+    if (message['winUrl']) {
+      origin = getHost(message['winUrl']);
+    } else {
+      origin = getHost(sender.url);
+    }
 
-        if (method == 'cpu.getInfo') {
-          chrome.system.cpu.getInfo(doSendResponse);
-          return true;
-        } else if (method == 'logging.setMetadata') {
-          var metaData = message['metaData'];
-          chrome.webrtcLoggingPrivate.setMetaData(
-              requestInfo, origin, metaData, doSendResponse);
-          return true;
-        } else if (method == 'logging.start') {
-          chrome.webrtcLoggingPrivate.start(
-              requestInfo, origin, doSendResponse);
-          return true;
-        } else if (method == 'logging.uploadOnRenderClose') {
-          chrome.webrtcLoggingPrivate.setUploadOnRenderClose(
-              requestInfo, origin, true);
-          doSendResponse();
-          return false;
-        } else if (method == 'logging.noUploadOnRenderClose') {
-          chrome.webrtcLoggingPrivate.setUploadOnRenderClose(
-              requestInfo, origin, false);
-          doSendResponse();
-          return false;
-        } else if (method == 'logging.stop') {
-          chrome.webrtcLoggingPrivate.stop(
-              requestInfo, origin, doSendResponse);
-          return true;
-        } else if (method == 'logging.upload') {
-          chrome.webrtcLoggingPrivate.upload(
-              requestInfo, origin, doSendResponse);
-          return true;
-        } else if (method == 'logging.uploadStored') {
-          var logId = message['logId'];
-          chrome.webrtcLoggingPrivate.uploadStored(
-              requestInfo, origin, logId, doSendResponse);
-          return true;
-        } else if (method == 'logging.stopAndUpload') {
-          // Stop everything and upload. This is allowed to be called even if
-          // logs have already been stopped or not started. Therefore, ignore
-          // any errors along the way, but store them, so that if upload fails
-          // they are all reported back.
-          // Stop incoming and outgoing RTP dumps separately, otherwise
-          // stopRtpDump will fail and not stop anything if either type has not
-          // been started.
-          var errors = [];
-          chrome.webrtcLoggingPrivate.stopRtpDump(
-              requestInfo, origin, true /* incoming */, false /* outgoing */,
-              function() {
+    if (method == 'cpu.getInfo') {
+      chrome.system.cpu.getInfo(doSendResponse);
+      return true;
+    } else if (method == 'logging.setMetadata') {
+      var metaData = message['metaData'];
+      chrome.webrtcLoggingPrivate.setMetaData(
+          requestInfo, origin, metaData, doSendResponse);
+      return true;
+    } else if (method == 'logging.start') {
+      chrome.webrtcLoggingPrivate.start(requestInfo, origin, doSendResponse);
+      return true;
+    } else if (method == 'logging.uploadOnRenderClose') {
+      chrome.webrtcLoggingPrivate.setUploadOnRenderClose(
+          requestInfo, origin, true);
+      doSendResponse();
+      return false;
+    } else if (method == 'logging.noUploadOnRenderClose') {
+      chrome.webrtcLoggingPrivate.setUploadOnRenderClose(
+          requestInfo, origin, false);
+      doSendResponse();
+      return false;
+    } else if (method == 'logging.stop') {
+      chrome.webrtcLoggingPrivate.stop(requestInfo, origin, doSendResponse);
+      return true;
+    } else if (method == 'logging.upload') {
+      chrome.webrtcLoggingPrivate.upload(requestInfo, origin, doSendResponse);
+      return true;
+    } else if (method == 'logging.uploadStored') {
+      var logId = message['logId'];
+      chrome.webrtcLoggingPrivate.uploadStored(
+          requestInfo, origin, logId, doSendResponse);
+      return true;
+    } else if (method == 'logging.stopAndUpload') {
+      // Stop everything and upload. This is allowed to be called even if
+      // logs have already been stopped or not started. Therefore, ignore
+      // any errors along the way, but store them, so that if upload fails
+      // they are all reported back.
+      // Stop incoming and outgoing RTP dumps separately, otherwise
+      // stopRtpDump will fail and not stop anything if either type has not
+      // been started.
+      var errors = [];
+      chrome.webrtcLoggingPrivate.stopRtpDump(
+          requestInfo, origin, true /* incoming */, false /* outgoing */,
+          function() {
             appendLastErrorMessage(errors);
             chrome.webrtcLoggingPrivate.stopRtpDump(
                 requestInfo, origin, false /* incoming */, true /* outgoing */,
                 function() {
-              appendLastErrorMessage(errors);
-              chrome.webrtcLoggingPrivate.stop(
-                  requestInfo, origin, function() {
-                appendLastErrorMessage(errors);
-                chrome.webrtcLoggingPrivate.upload(
-                    requestInfo, origin,
-                    function(uploadValue) {
-                  var errorMessage = null;
-                  // If upload fails, report all previous errors. Otherwise,
-                  // throw them away.
-                  if (chrome.extension.lastError !== undefined) {
-                    appendLastErrorMessage(errors);
-                    errorMessage = errors.join('; ');
-                  }
-                  doSendResponse(uploadValue, errorMessage);
+                  appendLastErrorMessage(errors);
+                  chrome.webrtcLoggingPrivate.stop(
+                      requestInfo, origin, function() {
+                        appendLastErrorMessage(errors);
+                        chrome.webrtcLoggingPrivate.upload(
+                            requestInfo, origin, function(uploadValue) {
+                              var errorMessage = null;
+                              // If upload fails, report all previous errors.
+                              // Otherwise, throw them away.
+                              if (chrome.extension.lastError !== undefined) {
+                                appendLastErrorMessage(errors);
+                                errorMessage = errors.join('; ');
+                              }
+                              doSendResponse(uploadValue, errorMessage);
+                            });
+                      });
                 });
-              });
-            });
-          });
-          return true;
-        } else if (method == 'logging.store') {
-          var logId = message['logId'];
-          chrome.webrtcLoggingPrivate.store(
-              requestInfo, origin, logId, doSendResponse);
-          return true;
-        } else if (method == 'logging.discard') {
-          chrome.webrtcLoggingPrivate.discard(
-              requestInfo, origin, doSendResponse);
-          return true;
-        } else if (method == 'getSinks') {
-          chrome.webrtcAudioPrivate.getSinks(doSendResponse);
-          return true;
-        } else if (method == 'getAssociatedSink') {
-          var sourceId = message['sourceId'];
-          chrome.webrtcAudioPrivate.getAssociatedSink(
-              origin, sourceId, doSendResponse);
-          return true;
-        } else if (method == 'isExtensionEnabled') {
-          // This method is necessary because there may be more than one
-          // version of this extension, under different extension IDs. By
-          // first calling this method on the extension ID, the client can
-          // check if it's loaded; if it's not, the extension system will
-          // call the callback with no arguments and set
-          // chrome.runtime.lastError.
-          doSendResponse();
-          return false;
-        } else if (method == 'getNaclArchitecture') {
-          chrome.runtime.getPlatformInfo(function(obj) {
-            doSendResponse(obj.nacl_arch);
           });
-          return true;
-        } else if (method == 'logging.startRtpDump') {
-          var incoming = message['incoming'] || false;
-          var outgoing = message['outgoing'] || false;
-          chrome.webrtcLoggingPrivate.startRtpDump(
-              requestInfo, origin, incoming, outgoing, doSendResponse);
-          return true;
-        } else if (method == 'logging.stopRtpDump') {
-          var incoming = message['incoming'] || false;
-          var outgoing = message['outgoing'] || false;
-          chrome.webrtcLoggingPrivate.stopRtpDump(
-              requestInfo, origin, incoming, outgoing, doSendResponse);
-          return true;
-        } else if (method == 'logging.startAudioDebugRecordings') {
-          var seconds = message['seconds'] || 0;
-          chrome.webrtcLoggingPrivate.startAudioDebugRecordings(
-              requestInfo, origin, seconds, doSendResponse);
-          return true;
-        } else if (method == 'logging.stopAudioDebugRecordings') {
-          chrome.webrtcLoggingPrivate.stopAudioDebugRecordings(
-              requestInfo, origin, doSendResponse);
-          return true;
-        } else if (method == 'logging.startWebRtcEventLogging') {
-          var seconds = message['seconds'] || 0;
-          chrome.webrtcLoggingPrivate.startWebRtcEventLogging(
-              requestInfo, origin, seconds, doSendResponse);
-          return true;
-        } else if (method == 'logging.stopWebRtcEventLogging') {
-          chrome.webrtcLoggingPrivate.stopWebRtcEventLogging(
-              requestInfo, origin, doSendResponse);
-          return true;
-        } else if (method == 'setAudioExperiments') {
-          var experiments = message['experiments'];
-          chrome.webrtcAudioPrivate.setAudioExperiments(
-              requestInfo, origin, experiments);
-          doSendResponse();
-          return false;
-        }
-
-        throw new Error('Unknown method: ' + method);
-      } catch (e) {
-        doSendResponse(null, e.name + ': ' + e.message);
-      }
+      return true;
+    } else if (method == 'logging.store') {
+      var logId = message['logId'];
+      chrome.webrtcLoggingPrivate.store(
+          requestInfo, origin, logId, doSendResponse);
+      return true;
+    } else if (method == 'logging.discard') {
+      chrome.webrtcLoggingPrivate.discard(requestInfo, origin, doSendResponse);
+      return true;
+    } else if (method == 'getSinks') {
+      chrome.webrtcAudioPrivate.getSinks(doSendResponse);
+      return true;
+    } else if (method == 'getAssociatedSink') {
+      var sourceId = message['sourceId'];
+      chrome.webrtcAudioPrivate.getAssociatedSink(
+          origin, sourceId, doSendResponse);
+      return true;
+    } else if (method == 'isExtensionEnabled') {
+      // This method is necessary because there may be more than one
+      // version of this extension, under different extension IDs. By
+      // first calling this method on the extension ID, the client can
+      // check if it's loaded; if it's not, the extension system will
+      // call the callback with no arguments and set
+      // chrome.runtime.lastError.
+      doSendResponse();
+      return false;
+    } else if (method == 'getNaclArchitecture') {
+      chrome.runtime.getPlatformInfo(function(obj) {
+        doSendResponse(obj.nacl_arch);
+      });
+      return true;
+    } else if (method == 'logging.startRtpDump') {
+      var incoming = message['incoming'] || false;
+      var outgoing = message['outgoing'] || false;
+      chrome.webrtcLoggingPrivate.startRtpDump(
+          requestInfo, origin, incoming, outgoing, doSendResponse);
+      return true;
+    } else if (method == 'logging.stopRtpDump') {
+      var incoming = message['incoming'] || false;
+      var outgoing = message['outgoing'] || false;
+      chrome.webrtcLoggingPrivate.stopRtpDump(
+          requestInfo, origin, incoming, outgoing, doSendResponse);
+      return true;
+    } else if (method == 'logging.startAudioDebugRecordings') {
+      var seconds = message['seconds'] || 0;
+      chrome.webrtcLoggingPrivate.startAudioDebugRecordings(
+          requestInfo, origin, seconds, doSendResponse);
+      return true;
+    } else if (method == 'logging.stopAudioDebugRecordings') {
+      chrome.webrtcLoggingPrivate.stopAudioDebugRecordings(
+          requestInfo, origin, doSendResponse);
+      return true;
+    } else if (method == 'logging.startWebRtcEventLogging') {
+      var seconds = message['seconds'] || 0;
+      chrome.webrtcLoggingPrivate.startWebRtcEventLogging(
+          requestInfo, origin, seconds, doSendResponse);
+      return true;
+    } else if (method == 'logging.stopWebRtcEventLogging') {
+      chrome.webrtcLoggingPrivate.stopWebRtcEventLogging(
+          requestInfo, origin, doSendResponse);
+      return true;
+    } else if (method == 'setAudioExperiments') {
+      var experiments = message['experiments'];
+      chrome.webrtcAudioPrivate.setAudioExperiments(
+          requestInfo, origin, experiments);
+      doSendResponse();
+      return false;
     }
-);
+
+    throw new Error('Unknown method: ' + method);
+  } catch (e) {
+    doSendResponse(null, e.name + ': ' + e.message);
+  }
+});
 
 // If Hangouts connects with a port named 'onSinksChangedListener', we
 // will register a listener and send it a message {'eventName':
@@ -218,8 +212,7 @@ function onSinksChangedPort(port) {
   chrome.webrtcAudioPrivate.onSinksChanged.addListener(clientListener);
 
   port.onDisconnect.addListener(function() {
-    chrome.webrtcAudioPrivate.onSinksChanged.removeListener(
-        clientListener);
+    chrome.webrtcAudioPrivate.onSinksChanged.removeListener(clientListener);
   });
 }
 
@@ -287,8 +280,9 @@ function onProcessCpu(port) {
         browserProcessCpu = process.cpu;
       } else if (process.type == 'gpu') {
         gpuProcessCpu = process.cpu;
-      } else if ((process.type == 'plugin' || process.type == 'nacl') &&
-                 process.title.toLowerCase().indexOf('hangouts') > 0) {
+      } else if (
+          (process.type == 'plugin' || process.type == 'nacl') &&
+          process.title.toLowerCase().indexOf('hangouts') > 0) {
         pluginProcessCpu = process.cpu;
       }
     }
diff --git a/chromium/chrome/browser/resources/help/compiled_resources2.gyp b/chromium/chrome/browser/resources/help/compiled_resources2.gyp
index 6ce08ca6c2d..c0ae4e74deb 100644
--- a/chromium/chrome/browser/resources/help/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/help/compiled_resources2.gyp
@@ -14,7 +14,7 @@
           '<(DEPTH)/third_party/jstemplate/util.js',
           '<(DEPTH)/third_party/jstemplate/jsevalcontext.js',
           '<(DEPTH)/third_party/jstemplate/jstemplate.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_onc_types.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js',
           '<(DEPTH)/ui/webui/resources/js/action_link.js',
           '<(DEPTH)/ui/webui/resources/js/cr.js',
           '<(DEPTH)/ui/webui/resources/js/cr/event_target.js',
@@ -53,6 +53,7 @@
           '../chromeos/keyboard/keyboard_utils.js',
           '<(DEPTH)/ui/webui/resources/js/i18n_behavior.js',
           '<(DEPTH)/ui/webui/resources/js/web_ui_listener_behavior.js',
+          '../settings/page_visibility.js',
           '../settings/route.js',
           '../settings/people_page/easy_unlock_browser_proxy.js',
           '../settings/people_page/fingerprint_browser_proxy.js',
@@ -86,7 +87,7 @@
           '<(DEPTH)/third_party/closure_compiler/externs/networking_private.js',
           '<(DEPTH)/third_party/closure_compiler/externs/chrome_send.js',
           '<(DEPTH)/third_party/closure_compiler/externs/web_animations.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_network_icon_externs.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon_externs.js',
           '../options/options_bundle.js',
           # Note: ^ this is just a copy of
           # ../options/compiled_resources2.gyp:options_bundle#source_files. Most
diff --git a/chromium/chrome/browser/resources/help_app/manifest.json b/chromium/chrome/browser/resources/help_app/manifest.json
index 6707e030a27..0a5a98f1876 100644
--- a/chromium/chrome/browser/resources/help_app/manifest.json
+++ b/chromium/chrome/browser/resources/help_app/manifest.json
@@ -6,5 +6,8 @@
   "default_locale": "en",
   "manifest_version": 2,
   "content_security_policy": "default-src 'self' blob: filesystem:; img-src 'self' blob: filesystem: data:;",
-  "incognito": "split"
+  "incognito": "split",
+  "permissions": [
+    "storage"
+  ]
 }
diff --git a/chromium/chrome/browser/resources/hotword/audio_client.js b/chromium/chrome/browser/resources/hotword/audio_client.js
index b3343b43aa9..552dd49cdaf 100644
--- a/chromium/chrome/browser/resources/hotword/audio_client.js
+++ b/chromium/chrome/browser/resources/hotword/audio_client.js
@@ -4,6 +4,8 @@
 
 'use strict';
 
+/* eslint-disable no-restricted-properties */
+
 /**
  * @fileoverview This is the audio client content script injected into eligible
  *  Google.com and New tab pages for interaction between the Webpage and the
@@ -11,364 +13,363 @@
  */
 
 (function() {
-  /**
-   * @constructor
-   */
-  var AudioClient = function() {
-    /** @private {Element} */
-    this.speechOverlay_ = null;
-
-    /** @private {number} */
-    this.checkSpeechUiRetries_ = 0;
+/**
+ * @constructor
+ */
+var AudioClient = function() {
+  /** @private {Element} */
+  this.speechOverlay_ = null;
 
-    /**
-     * Port used to communicate with the audio manager.
-     * @private {?Port}
-     */
-    this.port_ = null;
-
-    /**
-     * Keeps track of the effects of different commands. Used to verify that
-     * proper UIs are shown to the user.
-     * @private {Object<AudioClient.CommandToPage, Object>}
-     */
-    this.uiStatus_ = null;
-
-    /**
-     * Bound function used to handle commands sent from the page to this script.
-     * @private {Function}
-     */
-    this.handleCommandFromPageFunc_ = null;
-  };
+  /** @private {number} */
+  this.checkSpeechUiRetries_ = 0;
 
   /**
-   * Messages sent to the page to control the voice search UI.
-   * @enum {string}
+   * Port used to communicate with the audio manager.
+   * @private {?Port}
    */
-  AudioClient.CommandToPage = {
-    HOTWORD_VOICE_TRIGGER: 'vt',
-    HOTWORD_STARTED: 'hs',
-    HOTWORD_ENDED: 'hd',
-    HOTWORD_TIMEOUT: 'ht',
-    HOTWORD_ERROR: 'he'
-  };
+  this.port_ = null;
 
   /**
-   * Messages received from the page used to indicate voice search state.
-   * @enum {string}
+   * Keeps track of the effects of different commands. Used to verify that
+   * proper UIs are shown to the user.
+   * @private {Object<AudioClient.CommandToPage, Object>}
    */
-  AudioClient.CommandFromPage = {
-    SPEECH_START: 'ss',
-    SPEECH_END: 'se',
-    SPEECH_RESET: 'sr',
-    SHOWING_HOTWORD_START: 'shs',
-    SHOWING_ERROR_MESSAGE: 'sem',
-    SHOWING_TIMEOUT_MESSAGE: 'stm',
-    CLICKED_RESUME: 'hcc',
-    CLICKED_RESTART: 'hcr',
-    CLICKED_DEBUG: 'hcd'
-  };
+  this.uiStatus_ = null;
 
   /**
-   * Errors that are sent to the hotword extension.
-   * @enum {string}
+   * Bound function used to handle commands sent from the page to this script.
+   * @private {Function}
    */
-  AudioClient.Error = {
-    NO_SPEECH_UI: 'ac1',
-    NO_HOTWORD_STARTED_UI: 'ac2',
-    NO_HOTWORD_TIMEOUT_UI: 'ac3',
-    NO_HOTWORD_ERROR_UI: 'ac4'
-  };
+  this.handleCommandFromPageFunc_ = null;
+};
 
-  /**
-   * @const {string}
-   * @private
-   */
-  AudioClient.HOTWORD_EXTENSION_ID_ = 'nbpagnldghgfoolbancepceaanlmhfmd';
+/**
+ * Messages sent to the page to control the voice search UI.
+ * @enum {string}
+ */
+AudioClient.CommandToPage = {
+  HOTWORD_VOICE_TRIGGER: 'vt',
+  HOTWORD_STARTED: 'hs',
+  HOTWORD_ENDED: 'hd',
+  HOTWORD_TIMEOUT: 'ht',
+  HOTWORD_ERROR: 'he'
+};
 
-  /**
-   * Number of times to retry checking a transient error.
-   * @const {number}
-   * @private
-   */
-  AudioClient.MAX_RETRIES = 3;
+/**
+ * Messages received from the page used to indicate voice search state.
+ * @enum {string}
+ */
+AudioClient.CommandFromPage = {
+  SPEECH_START: 'ss',
+  SPEECH_END: 'se',
+  SPEECH_RESET: 'sr',
+  SHOWING_HOTWORD_START: 'shs',
+  SHOWING_ERROR_MESSAGE: 'sem',
+  SHOWING_TIMEOUT_MESSAGE: 'stm',
+  CLICKED_RESUME: 'hcc',
+  CLICKED_RESTART: 'hcr',
+  CLICKED_DEBUG: 'hcd'
+};
 
-  /**
-   * Delay to wait in milliseconds before rechecking for any transient errors.
-   * @const {number}
-   * @private
-   */
-  AudioClient.RETRY_TIME_MS_ = 2000;
+/**
+ * Errors that are sent to the hotword extension.
+ * @enum {string}
+ */
+AudioClient.Error = {
+  NO_SPEECH_UI: 'ac1',
+  NO_HOTWORD_STARTED_UI: 'ac2',
+  NO_HOTWORD_TIMEOUT_UI: 'ac3',
+  NO_HOTWORD_ERROR_UI: 'ac4'
+};
 
-  /**
-   * DOM ID for the speech UI overlay.
-   * @const {string}
-   * @private
-   */
-  AudioClient.SPEECH_UI_OVERLAY_ID_ = 'spch';
+/**
+ * @const {string}
+ * @private
+ */
+AudioClient.HOTWORD_EXTENSION_ID_ = 'nbpagnldghgfoolbancepceaanlmhfmd';
 
-  /**
-   * @const {string}
-   * @private
-   */
-  AudioClient.HELP_CENTER_URL_ =
-      'https://support.google.com/chrome/?p=ui_hotword_search';
+/**
+ * Number of times to retry checking a transient error.
+ * @const {number}
+ * @private
+ */
+AudioClient.MAX_RETRIES = 3;
 
-  /**
-   * @const {string}
-   * @private
-   */
-  AudioClient.CLIENT_PORT_NAME_ = 'chwcpn';
+/**
+ * Delay to wait in milliseconds before rechecking for any transient errors.
+ * @const {number}
+ * @private
+ */
+AudioClient.RETRY_TIME_MS_ = 2000;
 
-  /**
-   * Existence of the Audio Client.
-   * @const {string}
-   * @private
-   */
-  AudioClient.EXISTS_ = 'chwace';
+/**
+ * DOM ID for the speech UI overlay.
+ * @const {string}
+ * @private
+ */
+AudioClient.SPEECH_UI_OVERLAY_ID_ = 'spch';
 
-  /**
-   * Checks for the presence of speech overlay UI DOM elements.
-   * @private
-   */
-  AudioClient.prototype.checkSpeechOverlayUi_ = function() {
-    if (!this.speechOverlay_) {
-      window.setTimeout(
-          this.delayedCheckSpeechOverlayUi_.bind(this),
-          AudioClient.RETRY_TIME_MS_);
-    } else {
-      this.checkSpeechUiRetries_ = 0;
-    }
-  };
+/**
+ * @const {string}
+ * @private
+ */
+AudioClient.HELP_CENTER_URL_ =
+    'https://support.google.com/chrome/?p=ui_hotword_search';
 
-  /**
-   * Function called to check for the speech UI overlay after some time has
-   * passed since an initial check. Will either retry triggering the speech
-   * or sends an error message depending on the number of retries.
-   * @private
-   */
-  AudioClient.prototype.delayedCheckSpeechOverlayUi_ = function() {
-    this.speechOverlay_ =
-        document.getElementById(AudioClient.SPEECH_UI_OVERLAY_ID_);
-    if (!this.speechOverlay_) {
-      if (this.checkSpeechUiRetries_++ < AudioClient.MAX_RETRIES) {
-        this.sendCommandToPage_(AudioClient.CommandToPage.VOICE_TRIGGER);
-        this.checkSpeechOverlayUi_();
-      } else {
-        this.sendCommandToExtension_(AudioClient.Error.NO_SPEECH_UI);
-      }
-    } else {
-      this.checkSpeechUiRetries_ = 0;
-    }
-  };
+/**
+ * @const {string}
+ * @private
+ */
+AudioClient.CLIENT_PORT_NAME_ = 'chwcpn';
 
-  /**
-   * Checks that the triggered UI is actually displayed.
-   * @param {AudioClient.CommandToPage} command Command that was send.
-   * @private
-   */
-  AudioClient.prototype.checkUi_ = function(command) {
-    this.uiStatus_[command].timeoutId = window.setTimeout(
-        this.failedCheckUi_.bind(this, command), AudioClient.RETRY_TIME_MS_);
-  };
+/**
+ * Existence of the Audio Client.
+ * @const {string}
+ * @private
+ */
+AudioClient.EXISTS_ = 'chwace';
 
-  /**
-   * Function called when the UI verification is not called in time. Will either
-   * retry the command or sends an error message, depending on the number of
-   * retries for the command.
-   * @param {AudioClient.CommandToPage} command Command that was sent.
-   * @private
-   */
-  AudioClient.prototype.failedCheckUi_ = function(command) {
-    if (this.uiStatus_[command].tries++ < AudioClient.MAX_RETRIES) {
-      this.sendCommandToPage_(command);
-      this.checkUi_(command);
+/**
+ * Checks for the presence of speech overlay UI DOM elements.
+ * @private
+ */
+AudioClient.prototype.checkSpeechOverlayUi_ = function() {
+  if (!this.speechOverlay_) {
+    window.setTimeout(
+        this.delayedCheckSpeechOverlayUi_.bind(this),
+        AudioClient.RETRY_TIME_MS_);
+  } else {
+    this.checkSpeechUiRetries_ = 0;
+  }
+};
+
+/**
+ * Function called to check for the speech UI overlay after some time has
+ * passed since an initial check. Will either retry triggering the speech
+ * or sends an error message depending on the number of retries.
+ * @private
+ */
+AudioClient.prototype.delayedCheckSpeechOverlayUi_ = function() {
+  this.speechOverlay_ =
+      document.getElementById(AudioClient.SPEECH_UI_OVERLAY_ID_);
+  if (!this.speechOverlay_) {
+    if (this.checkSpeechUiRetries_++ < AudioClient.MAX_RETRIES) {
+      this.sendCommandToPage_(AudioClient.CommandToPage.VOICE_TRIGGER);
+      this.checkSpeechOverlayUi_();
     } else {
-      this.sendCommandToExtension_(this.uiStatus_[command].error);
+      this.sendCommandToExtension_(AudioClient.Error.NO_SPEECH_UI);
     }
-  };
+  } else {
+    this.checkSpeechUiRetries_ = 0;
+  }
+};
 
-  /**
-   * Confirm that an UI element has been shown.
-   * @param {AudioClient.CommandToPage} command UI to confirm.
-   * @private
-   */
-  AudioClient.prototype.verifyUi_ = function(command) {
-    if (this.uiStatus_[command].timeoutId) {
-      window.clearTimeout(this.uiStatus_[command].timeoutId);
-      this.uiStatus_[command].timeoutId = null;
-      this.uiStatus_[command].tries = 0;
-    }
-  };
+/**
+ * Checks that the triggered UI is actually displayed.
+ * @param {AudioClient.CommandToPage} command Command that was send.
+ * @private
+ */
+AudioClient.prototype.checkUi_ = function(command) {
+  this.uiStatus_[command].timeoutId = window.setTimeout(
+      this.failedCheckUi_.bind(this, command), AudioClient.RETRY_TIME_MS_);
+};
 
-  /**
-   * Sends a command to the audio manager.
-   * @param {string} commandStr command to send to plugin.
-   * @private
-   */
-  AudioClient.prototype.sendCommandToExtension_ = function(commandStr) {
-    if (this.port_)
-      this.port_.postMessage({'cmd': commandStr});
-  };
+/**
+ * Function called when the UI verification is not called in time. Will either
+ * retry the command or sends an error message, depending on the number of
+ * retries for the command.
+ * @param {AudioClient.CommandToPage} command Command that was sent.
+ * @private
+ */
+AudioClient.prototype.failedCheckUi_ = function(command) {
+  if (this.uiStatus_[command].tries++ < AudioClient.MAX_RETRIES) {
+    this.sendCommandToPage_(command);
+    this.checkUi_(command);
+  } else {
+    this.sendCommandToExtension_(this.uiStatus_[command].error);
+  }
+};
 
-  /**
-   * Handles a message from the audio manager.
-   * @param {{cmd: string}} commandObj Command from the audio manager.
-   * @private
-   */
-  AudioClient.prototype.handleCommandFromExtension_ = function(commandObj) {
-    var command = commandObj['cmd'];
-    if (command) {
-      switch (command) {
-        case AudioClient.CommandToPage.HOTWORD_VOICE_TRIGGER:
-          this.sendCommandToPage_(command);
-          this.checkSpeechOverlayUi_();
-          break;
-        case AudioClient.CommandToPage.HOTWORD_STARTED:
-          this.sendCommandToPage_(command);
-          this.checkUi_(command);
-          break;
-        case AudioClient.CommandToPage.HOTWORD_ENDED:
-          this.sendCommandToPage_(command);
-          break;
-        case AudioClient.CommandToPage.HOTWORD_TIMEOUT:
-          this.sendCommandToPage_(command);
-          this.checkUi_(command);
-          break;
-        case AudioClient.CommandToPage.HOTWORD_ERROR:
-          this.sendCommandToPage_(command);
-          this.checkUi_(command);
-          break;
-      }
-    }
-  };
+/**
+ * Confirm that an UI element has been shown.
+ * @param {AudioClient.CommandToPage} command UI to confirm.
+ * @private
+ */
+AudioClient.prototype.verifyUi_ = function(command) {
+  if (this.uiStatus_[command].timeoutId) {
+    window.clearTimeout(this.uiStatus_[command].timeoutId);
+    this.uiStatus_[command].timeoutId = null;
+    this.uiStatus_[command].tries = 0;
+  }
+};
 
-  /**
-   * @param {AudioClient.CommandToPage} commandStr Command to send.
-   * @private
-   */
-  AudioClient.prototype.sendCommandToPage_ = function(commandStr) {
-    window.postMessage({'type': commandStr}, '*');
-  };
+/**
+ * Sends a command to the audio manager.
+ * @param {string} commandStr command to send to plugin.
+ * @private
+ */
+AudioClient.prototype.sendCommandToExtension_ = function(commandStr) {
+  if (this.port_)
+    this.port_.postMessage({'cmd': commandStr});
+};
 
-  /**
-   * Handles a message from the html window.
-   * @param {!MessageEvent} messageEvent Message event from the window.
-   * @private
-   */
-  AudioClient.prototype.handleCommandFromPage_ = function(messageEvent) {
-    if (messageEvent.source == window && messageEvent.data.type) {
-      var command = messageEvent.data.type;
-      switch (command) {
-        case AudioClient.CommandFromPage.SPEECH_START:
-          this.speechActive_ = true;
-          this.sendCommandToExtension_(command);
-          break;
-        case AudioClient.CommandFromPage.SPEECH_END:
-          this.speechActive_ = false;
-          this.sendCommandToExtension_(command);
-          break;
-        case AudioClient.CommandFromPage.SPEECH_RESET:
-          this.speechActive_ = false;
-          this.sendCommandToExtension_(command);
-          break;
-        case 'SPEECH_RESET':  // Legacy, for embedded NTP.
-          this.speechActive_ = false;
-          this.sendCommandToExtension_(AudioClient.CommandFromPage.SPEECH_END);
-          break;
-        case AudioClient.CommandFromPage.CLICKED_RESUME:
-          this.sendCommandToExtension_(command);
-          break;
-        case AudioClient.CommandFromPage.CLICKED_RESTART:
-          this.sendCommandToExtension_(command);
-          break;
-        case AudioClient.CommandFromPage.CLICKED_DEBUG:
-          window.open(AudioClient.HELP_CENTER_URL_, '_blank');
-          break;
-        case AudioClient.CommandFromPage.SHOWING_HOTWORD_START:
-          this.verifyUi_(AudioClient.CommandToPage.HOTWORD_STARTED);
-          break;
-        case AudioClient.CommandFromPage.SHOWING_ERROR_MESSAGE:
-          this.verifyUi_(AudioClient.CommandToPage.HOTWORD_ERROR);
-          break;
-        case AudioClient.CommandFromPage.SHOWING_TIMEOUT_MESSAGE:
-          this.verifyUi_(AudioClient.CommandToPage.HOTWORD_TIMEOUT);
-          break;
-      }
+/**
+ * Handles a message from the audio manager.
+ * @param {{cmd: string}} commandObj Command from the audio manager.
+ * @private
+ */
+AudioClient.prototype.handleCommandFromExtension_ = function(commandObj) {
+  var command = commandObj['cmd'];
+  if (command) {
+    switch (command) {
+      case AudioClient.CommandToPage.HOTWORD_VOICE_TRIGGER:
+        this.sendCommandToPage_(command);
+        this.checkSpeechOverlayUi_();
+        break;
+      case AudioClient.CommandToPage.HOTWORD_STARTED:
+        this.sendCommandToPage_(command);
+        this.checkUi_(command);
+        break;
+      case AudioClient.CommandToPage.HOTWORD_ENDED:
+        this.sendCommandToPage_(command);
+        break;
+      case AudioClient.CommandToPage.HOTWORD_TIMEOUT:
+        this.sendCommandToPage_(command);
+        this.checkUi_(command);
+        break;
+      case AudioClient.CommandToPage.HOTWORD_ERROR:
+        this.sendCommandToPage_(command);
+        this.checkUi_(command);
+        break;
     }
-  };
+  }
+};
 
-  /**
-   * Initialize the content script.
-   */
-  AudioClient.prototype.initialize = function() {
-    if (AudioClient.EXISTS_ in window)
-      return;
-    window[AudioClient.EXISTS_] = true;
-
-    // UI verification object.
-    this.uiStatus_ = {};
-    this.uiStatus_[AudioClient.CommandToPage.HOTWORD_STARTED] = {
-      timeoutId: null,
-      tries: 0,
-      error: AudioClient.Error.NO_HOTWORD_STARTED_UI
-    };
-    this.uiStatus_[AudioClient.CommandToPage.HOTWORD_TIMEOUT] = {
-      timeoutId: null,
-      tries: 0,
-      error: AudioClient.Error.NO_HOTWORD_TIMEOUT_UI
-    };
-    this.uiStatus_[AudioClient.CommandToPage.HOTWORD_ERROR] = {
-      timeoutId: null,
-      tries: 0,
-      error: AudioClient.Error.NO_HOTWORD_ERROR_UI
-    };
-
-    this.handleCommandFromPageFunc_ = this.handleCommandFromPage_.bind(this);
-    window.addEventListener('message', this.handleCommandFromPageFunc_, false);
-    this.initPort_();
-  };
+/**
+ * @param {AudioClient.CommandToPage} commandStr Command to send.
+ * @private
+ */
+AudioClient.prototype.sendCommandToPage_ = function(commandStr) {
+  window.postMessage({'type': commandStr}, '*');
+};
 
-  /**
-   * Initialize the communications port with the audio manager. This
-   * function will be also be called again if the audio-manager
-   * disconnects for some reason (such as the extension
-   * background.html page being reloaded).
-   * @private
-   */
-  AudioClient.prototype.initPort_ = function() {
-    this.port_ = chrome.runtime.connect(
-        AudioClient.HOTWORD_EXTENSION_ID_,
-        {'name': AudioClient.CLIENT_PORT_NAME_});
-    // Note that this listen may have to be destroyed manually if AudioClient
-    // is ever destroyed on this tab.
-    this.port_.onDisconnect.addListener(
-        (function(e) {
-          if (this.handleCommandFromPageFunc_) {
-            window.removeEventListener(
-                'message', this.handleCommandFromPageFunc_, false);
-          }
-          delete window[AudioClient.EXISTS_];
-        }).bind(this));
-
-    // See note above.
-    this.port_.onMessage.addListener(
-        this.handleCommandFromExtension_.bind(this));
-
-    if (this.speechActive_) {
-      this.sendCommandToExtension_(AudioClient.CommandFromPage.SPEECH_START);
-    } else {
-      // It's possible for this script to be injected into the page after it has
-      // completed loaded (i.e. when prerendering). In this case, this script
-      // won't receive a SPEECH_RESET from the page to forward onto the
-      // extension. To make up for this, always send a SPEECH_RESET. This means
-      // in most cases, the extension will receive SPEECH_RESET twice, one from
-      // this sendCommandToExtension_ and the one forwarded from the page. But
-      // that's OK and the extension can handle it.
-      this.sendCommandToExtension_(AudioClient.CommandFromPage.SPEECH_RESET);
+/**
+ * Handles a message from the html window.
+ * @param {!MessageEvent} messageEvent Message event from the window.
+ * @private
+ */
+AudioClient.prototype.handleCommandFromPage_ = function(messageEvent) {
+  if (messageEvent.source == window && messageEvent.data.type) {
+    var command = messageEvent.data.type;
+    switch (command) {
+      case AudioClient.CommandFromPage.SPEECH_START:
+        this.speechActive_ = true;
+        this.sendCommandToExtension_(command);
+        break;
+      case AudioClient.CommandFromPage.SPEECH_END:
+        this.speechActive_ = false;
+        this.sendCommandToExtension_(command);
+        break;
+      case AudioClient.CommandFromPage.SPEECH_RESET:
+        this.speechActive_ = false;
+        this.sendCommandToExtension_(command);
+        break;
+      case 'SPEECH_RESET':  // Legacy, for embedded NTP.
+        this.speechActive_ = false;
+        this.sendCommandToExtension_(AudioClient.CommandFromPage.SPEECH_END);
+        break;
+      case AudioClient.CommandFromPage.CLICKED_RESUME:
+        this.sendCommandToExtension_(command);
+        break;
+      case AudioClient.CommandFromPage.CLICKED_RESTART:
+        this.sendCommandToExtension_(command);
+        break;
+      case AudioClient.CommandFromPage.CLICKED_DEBUG:
+        window.open(AudioClient.HELP_CENTER_URL_, '_blank');
+        break;
+      case AudioClient.CommandFromPage.SHOWING_HOTWORD_START:
+        this.verifyUi_(AudioClient.CommandToPage.HOTWORD_STARTED);
+        break;
+      case AudioClient.CommandFromPage.SHOWING_ERROR_MESSAGE:
+        this.verifyUi_(AudioClient.CommandToPage.HOTWORD_ERROR);
+        break;
+      case AudioClient.CommandFromPage.SHOWING_TIMEOUT_MESSAGE:
+        this.verifyUi_(AudioClient.CommandToPage.HOTWORD_TIMEOUT);
+        break;
     }
+  }
+};
+
+/**
+ * Initialize the content script.
+ */
+AudioClient.prototype.initialize = function() {
+  if (AudioClient.EXISTS_ in window)
+    return;
+  window[AudioClient.EXISTS_] = true;
+
+  // UI verification object.
+  this.uiStatus_ = {};
+  this.uiStatus_[AudioClient.CommandToPage.HOTWORD_STARTED] = {
+    timeoutId: null,
+    tries: 0,
+    error: AudioClient.Error.NO_HOTWORD_STARTED_UI
+  };
+  this.uiStatus_[AudioClient.CommandToPage.HOTWORD_TIMEOUT] = {
+    timeoutId: null,
+    tries: 0,
+    error: AudioClient.Error.NO_HOTWORD_TIMEOUT_UI
+  };
+  this.uiStatus_[AudioClient.CommandToPage.HOTWORD_ERROR] = {
+    timeoutId: null,
+    tries: 0,
+    error: AudioClient.Error.NO_HOTWORD_ERROR_UI
   };
 
-  // Initializes as soon as the code is ready, do not wait for the page.
-  new AudioClient().initialize();
+  this.handleCommandFromPageFunc_ = this.handleCommandFromPage_.bind(this);
+  window.addEventListener('message', this.handleCommandFromPageFunc_, false);
+  this.initPort_();
+};
+
+/**
+ * Initialize the communications port with the audio manager. This
+ * function will be also be called again if the audio-manager
+ * disconnects for some reason (such as the extension
+ * background.html page being reloaded).
+ * @private
+ */
+AudioClient.prototype.initPort_ = function() {
+  this.port_ = chrome.runtime.connect(
+      AudioClient.HOTWORD_EXTENSION_ID_,
+      {'name': AudioClient.CLIENT_PORT_NAME_});
+  // Note that this listen may have to be destroyed manually if AudioClient
+  // is ever destroyed on this tab.
+  this.port_.onDisconnect.addListener(
+      (function(e) {
+        if (this.handleCommandFromPageFunc_) {
+          window.removeEventListener(
+              'message', this.handleCommandFromPageFunc_, false);
+        }
+        delete window[AudioClient.EXISTS_];
+      }).bind(this));
+
+  // See note above.
+  this.port_.onMessage.addListener(this.handleCommandFromExtension_.bind(this));
+
+  if (this.speechActive_) {
+    this.sendCommandToExtension_(AudioClient.CommandFromPage.SPEECH_START);
+  } else {
+    // It's possible for this script to be injected into the page after it has
+    // completed loaded (i.e. when prerendering). In this case, this script
+    // won't receive a SPEECH_RESET from the page to forward onto the
+    // extension. To make up for this, always send a SPEECH_RESET. This means
+    // in most cases, the extension will receive SPEECH_RESET twice, one from
+    // this sendCommandToExtension_ and the one forwarded from the page. But
+    // that's OK and the extension can handle it.
+    this.sendCommandToExtension_(AudioClient.CommandFromPage.SPEECH_RESET);
+  }
+};
+
+// Initializes as soon as the code is ready, do not wait for the page.
+new AudioClient().initialize();
 })();
diff --git a/chromium/chrome/browser/resources/hotword/manager.js b/chromium/chrome/browser/resources/hotword/manager.js
index 54f3fcecef8..f4ac1473c9a 100644
--- a/chromium/chrome/browser/resources/hotword/manager.js
+++ b/chromium/chrome/browser/resources/hotword/manager.js
@@ -3,48 +3,48 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
+'use strict';
 
-  /**
-   * @fileoverview This extension provides hotword triggering capabilites to
-   * Chrome.
-   *
-   * This extension contains all the JavaScript for loading and managing the
-   * hotword detector. The hotword detector and language model data will be
-   * provided by a shared module loaded from the web store.
-   *
-   * IMPORTANT! Whenever adding new events, the extension version number MUST be
-   * incremented.
-   */
+/**
+ * @fileoverview This extension provides hotword triggering capabilites to
+ * Chrome.
+ *
+ * This extension contains all the JavaScript for loading and managing the
+ * hotword detector. The hotword detector and language model data will be
+ * provided by a shared module loaded from the web store.
+ *
+ * IMPORTANT! Whenever adding new events, the extension version number MUST be
+ * incremented.
+ */
 
-  // Hotwording state.
-  var stateManager = new hotword.StateManager();
-  var pageAudioManager = new hotword.PageAudioManager(stateManager);
-  var alwaysOnManager = new hotword.AlwaysOnManager(stateManager);
-  var launcherManager = new hotword.LauncherManager(stateManager);
-  var trainingManager = new hotword.TrainingManager(stateManager);
+// Hotwording state.
+var stateManager = new hotword.StateManager();
+var pageAudioManager = new hotword.PageAudioManager(stateManager);
+var alwaysOnManager = new hotword.AlwaysOnManager(stateManager);
+var launcherManager = new hotword.LauncherManager(stateManager);
+var trainingManager = new hotword.TrainingManager(stateManager);
 
-  // Detect when hotword settings have changed.
-  chrome.hotwordPrivate.onEnabledChanged.addListener(function() {
-    stateManager.updateStatus();
-  });
+// Detect when hotword settings have changed.
+chrome.hotwordPrivate.onEnabledChanged.addListener(function() {
+  stateManager.updateStatus();
+});
 
-  // Detect a request to delete the speaker model.
-  chrome.hotwordPrivate.onDeleteSpeakerModel.addListener(function() {
-    hotword.TrainingManager.handleDeleteSpeakerModel();
-  });
+// Detect a request to delete the speaker model.
+chrome.hotwordPrivate.onDeleteSpeakerModel.addListener(function() {
+  hotword.TrainingManager.handleDeleteSpeakerModel();
+});
 
-  // Detect a request for the speaker model existence.
-  chrome.hotwordPrivate.onSpeakerModelExists.addListener(function() {
-    hotword.TrainingManager.handleSpeakerModelExists();
-  });
+// Detect a request for the speaker model existence.
+chrome.hotwordPrivate.onSpeakerModelExists.addListener(function() {
+  hotword.TrainingManager.handleSpeakerModelExists();
+});
 
-  // Detect when the shared module containing the NaCL module and language model
-  // is installed.
-  chrome.management.onInstalled.addListener(function(info) {
-    if (info.id == hotword.constants.SHARED_MODULE_ID) {
-      hotword.debug('Shared module installed, reloading extension.');
-      chrome.runtime.reload();
-    }
-  });
+// Detect when the shared module containing the NaCL module and language model
+// is installed.
+chrome.management.onInstalled.addListener(function(info) {
+  if (info.id == hotword.constants.SHARED_MODULE_ID) {
+    hotword.debug('Shared module installed, reloading extension.');
+    chrome.runtime.reload();
+  }
+});
 }());
diff --git a/chromium/chrome/browser/resources/hotword/nacl_manager.js b/chromium/chrome/browser/resources/hotword/nacl_manager.js
index 85394f48035..015399f346c 100644
--- a/chromium/chrome/browser/resources/hotword/nacl_manager.js
+++ b/chromium/chrome/browser/resources/hotword/nacl_manager.js
@@ -228,11 +228,11 @@ cr.define('hotword', function() {
   };
 
   /**
- * Checks whether the file at the given path exists.
- * @param {!string} path Path to a file. Can be any valid URL.
- * @return {boolean} True if the patch exists.
- * @private
- */
+   * Checks whether the file at the given path exists.
+   * @param {!string} path Path to a file. Can be any valid URL.
+   * @return {boolean} True if the patch exists.
+   * @private
+   */
   NaClManager.prototype.fileExists_ = function(path) {
     var xhr = new XMLHttpRequest();
     xhr.open('HEAD', path, false);
@@ -248,11 +248,11 @@ cr.define('hotword', function() {
   };
 
   /**
- * Creates and returns a list of possible languages to check for hotword
- * support.
- * @return {!Array<string>} Array of languages.
- * @private
- */
+   * Creates and returns a list of possible languages to check for hotword
+   * support.
+   * @return {!Array<string>} Array of languages.
+   * @private
+   */
   NaClManager.prototype.getPossibleLanguages_ = function() {
     // Create array used to search first for language-country, if not found then
     // search for language, if not found then no language (empty string).
@@ -273,11 +273,11 @@ cr.define('hotword', function() {
   };
 
   /**
- * Creates a NaCl plugin object and attaches it to the page.
- * @param {!string} src Location of the plugin.
- * @return {!HTMLEmbedElement} NaCl plugin DOM object.
- * @private
- */
+   * Creates a NaCl plugin object and attaches it to the page.
+   * @param {!string} src Location of the plugin.
+   * @return {!HTMLEmbedElement} NaCl plugin DOM object.
+   * @private
+   */
   NaClManager.prototype.createPlugin_ = function(src) {
     var plugin =
         /** @type {HTMLEmbedElement} */ (document.createElement('embed'));
@@ -288,11 +288,11 @@ cr.define('hotword', function() {
   };
 
   /**
- * Initializes the NaCl manager.
- * @param {!string} naclArch Either 'arm', 'x86-32' or 'x86-64'.
- * @param {!MediaStream} stream A stream containing an audio source track.
- * @return {boolean} True if the successful.
- */
+   * Initializes the NaCl manager.
+   * @param {!string} naclArch Either 'arm', 'x86-32' or 'x86-64'.
+   * @param {!MediaStream} stream A stream containing an audio source track.
+   * @return {boolean} True if the successful.
+   */
   NaClManager.prototype.initialize = function(naclArch, stream) {
     assert(
         this.recognizerState_ == ManagerState_.UNINITIALIZED,
@@ -377,7 +377,8 @@ cr.define('hotword', function() {
    */
   NaClManager.prototype.waitForMessage_ = function(timeout, message) {
     assert(
-        this.expectingMessage_ == null, 'Cannot wait for message: ' + message +
+        this.expectingMessage_ == null,
+        'Cannot wait for message: ' + message +
             ', already waiting for message ' + this.expectingMessage_);
     this.setTimeout_(function() {
       this.recognizerState_ = ManagerState_.ERROR;
diff --git a/chromium/chrome/browser/resources/hotword_audio_verification/event_page.js b/chromium/chrome/browser/resources/hotword_audio_verification/event_page.js
index f63ae57d767..ea379d33d9b 100644
--- a/chromium/chrome/browser/resources/hotword_audio_verification/event_page.js
+++ b/chromium/chrome/browser/resources/hotword_audio_verification/event_page.js
@@ -22,9 +22,6 @@ chrome.app.runtime.onLaunched.addListener(function() {
     'resizable': false,
     'hidden': true,
     'id': appId,
-    'innerBounds': {
-      'width': 784,
-      'height': 448
-    }
+    'innerBounds': {'width': 784, 'height': 448}
   });
 });
diff --git a/chromium/chrome/browser/resources/hotword_audio_verification/flow.js b/chromium/chrome/browser/resources/hotword_audio_verification/flow.js
index 9c0c4b01600..c22211492c4 100644
--- a/chromium/chrome/browser/resources/hotword_audio_verification/flow.js
+++ b/chromium/chrome/browser/resources/hotword_audio_verification/flow.js
@@ -4,566 +4,563 @@
 
 (function() {
 
-  // Correspond to steps in the hotword opt-in flow.
-  /** @const */ var START = 'start-container';
-  /** @const */ var AUDIO_HISTORY = 'audio-history-container';
-  /** @const */ var SPEECH_TRAINING = 'speech-training-container';
-  /** @const */ var FINISH = 'finish-container';
+// Correspond to steps in the hotword opt-in flow.
+/** @const */ var START = 'start-container';
+/** @const */ var AUDIO_HISTORY = 'audio-history-container';
+/** @const */ var SPEECH_TRAINING = 'speech-training-container';
+/** @const */ var FINISH = 'finish-container';
+
+/**
+ * These flows correspond to the three LaunchModes as defined in
+ * chrome/browser/search/hotword_service.h and should be kept in sync
+ * with them.
+ * @const
+ */
+var FLOWS = [
+  [START, SPEECH_TRAINING, FINISH],
+  [START, AUDIO_HISTORY, SPEECH_TRAINING, FINISH], [SPEECH_TRAINING, FINISH]
+];
+
+/**
+ * The launch mode. This enum needs to be kept in sync with that of
+ * the same name in hotword_service.h.
+ * @enum {number}
+ */
+var LaunchMode = {HOTWORD_ONLY: 0, HOTWORD_AND_AUDIO_HISTORY: 1, RETRAIN: 2};
+
+/**
+ * The training state.
+ * @enum {string}
+ */
+var TrainingState = {
+  RESET: 'reset',
+  TIMEOUT: 'timeout',
+  ERROR: 'error',
+};
+
+/**
+ * Class to control the page flow of the always-on hotword and
+ * Audio History opt-in process.
+ * @constructor
+ */
+function Flow() {
+  this.currentStepIndex_ = -1;
+  this.currentFlow_ = [];
 
   /**
-   * These flows correspond to the three LaunchModes as defined in
-   * chrome/browser/search/hotword_service.h and should be kept in sync
-   * with them.
-   * @const
+   * The mode that this app was launched in.
+   * @private {LaunchMode}
    */
-  var FLOWS = [
-    [START, SPEECH_TRAINING, FINISH],
-    [START, AUDIO_HISTORY, SPEECH_TRAINING, FINISH],
-    [SPEECH_TRAINING, FINISH]
-  ];
+  this.launchMode_ = LaunchMode.HOTWORD_AND_AUDIO_HISTORY;
 
   /**
-   * The launch mode. This enum needs to be kept in sync with that of
-   * the same name in hotword_service.h.
-   * @enum {number}
+   * Whether this flow is currently in the process of training a voice model.
+   * @private {boolean}
    */
-  var LaunchMode = {
-    HOTWORD_ONLY: 0,
-    HOTWORD_AND_AUDIO_HISTORY: 1,
-    RETRAIN: 2
-  };
-
-  /**
-   * The training state.
-   * @enum {string}
-   */
-  var TrainingState = {
-    RESET: 'reset',
-    TIMEOUT: 'timeout',
-    ERROR: 'error',
-  };
-
-  /**
-   * Class to control the page flow of the always-on hotword and
-   * Audio History opt-in process.
-   * @constructor
-   */
-  function Flow() {
-    this.currentStepIndex_ = -1;
-    this.currentFlow_ = [];
-
-    /**
-     * The mode that this app was launched in.
-     * @private {LaunchMode}
-     */
-    this.launchMode_ = LaunchMode.HOTWORD_AND_AUDIO_HISTORY;
-
-    /**
-     * Whether this flow is currently in the process of training a voice model.
-     * @private {boolean}
-     */
-    this.training_ = false;
-
-    /**
-     * The current training state.
-     * @private {?TrainingState}
-     */
-    this.trainingState_ = null;
-
-    /**
-     * Whether an expected hotword trigger has been received, indexed by
-     * training step.
-     * @private {boolean[]}
-     */
-    this.hotwordTriggerReceived_ = [];
-
-    /**
-     * Prefix of the element ids for the page that is currently training.
-     * @private {string}
-     */
-    this.trainingPagePrefix_ = 'speech-training';
-
-    /**
-     * Whether the speaker model for this flow has been finalized.
-     * @private {boolean}
-     */
-    this.speakerModelFinalized_ = false;
-
-    /**
-     * ID of the currently active timeout.
-     * @private {?number}
-     */
-    this.timeoutId_ = null;
-
-    /**
-     * Listener for the speakerModelSaved event.
-     * @private {Function}
-     */
-    this.speakerModelFinalizedListener_ =
-        this.onSpeakerModelFinalized_.bind(this);
-
-    /**
-     * Listener for the hotword trigger event.
-     * @private {Function}
-     */
-    this.hotwordTriggerListener_ =
-          this.handleHotwordTrigger_.bind(this);
-
-    // Listen for the user locking the screen.
-    chrome.idle.onStateChanged.addListener(
-        this.handleIdleStateChanged_.bind(this));
-
-    // Listen for hotword settings changes. This used to detect when the user
-    // switches to a different profile.
-    if (chrome.hotwordPrivate.onEnabledChanged) {
-      chrome.hotwordPrivate.onEnabledChanged.addListener(
-          this.handleEnabledChanged_.bind(this));
-    }
-  }
+  this.training_ = false;
 
   /**
-   * Advances the current step. Begins training if the speech-training
-   * page has been reached.
+   * The current training state.
+   * @private {?TrainingState}
    */
-  Flow.prototype.advanceStep = function() {
-    this.currentStepIndex_++;
-    if (this.currentStepIndex_ < this.currentFlow_.length) {
-      if (this.currentFlow_[this.currentStepIndex_] == SPEECH_TRAINING)
-        this.startTraining();
-      this.showStep_.apply(this);
-    }
-  };
+  this.trainingState_ = null;
 
   /**
-   * Gets the appropriate flow and displays its first page.
+   * Whether an expected hotword trigger has been received, indexed by
+   * training step.
+   * @private {boolean[]}
    */
-  Flow.prototype.startFlow = function() {
-    if (chrome.hotwordPrivate && chrome.hotwordPrivate.getLaunchState)
-      chrome.hotwordPrivate.getLaunchState(this.startFlowForMode_.bind(this));
-  };
+  this.hotwordTriggerReceived_ = [];
 
   /**
-   * Starts the training process.
+   * Prefix of the element ids for the page that is currently training.
+   * @private {string}
    */
-  Flow.prototype.startTraining = function() {
-    // Don't start a training session if one already exists.
-    if (this.training_)
-      return;
-
-    this.training_ = true;
-
-    if (chrome.hotwordPrivate.onHotwordTriggered &&
-        !chrome.hotwordPrivate.onHotwordTriggered.hasListener(
-            this.hotwordTriggerListener_)) {
-      chrome.hotwordPrivate.onHotwordTriggered.addListener(
-          this.hotwordTriggerListener_);
-    }
-
-    this.waitForHotwordTrigger_(0);
-    if (chrome.hotwordPrivate.startTraining)
-      chrome.hotwordPrivate.startTraining();
-  };
+  this.trainingPagePrefix_ = 'speech-training';
 
   /**
-   * Stops the training process.
+   * Whether the speaker model for this flow has been finalized.
+   * @private {boolean}
    */
-  Flow.prototype.stopTraining = function() {
-    if (!this.training_)
-      return;
-
-    this.training_ = false;
-    if (chrome.hotwordPrivate.onHotwordTriggered) {
-      chrome.hotwordPrivate.onHotwordTriggered.
-          removeListener(this.hotwordTriggerListener_);
-    }
-    if (chrome.hotwordPrivate.stopTraining)
-      chrome.hotwordPrivate.stopTraining();
-  };
+  this.speakerModelFinalized_ = false;
 
   /**
-   * Attempts to enable audio history for the signed-in account.
+   * ID of the currently active timeout.
+   * @private {?number}
    */
-  Flow.prototype.enableAudioHistory = function() {
-    // Update UI
-    $('audio-history-agree').disabled = true;
-    $('audio-history-cancel').disabled = true;
-
-    $('audio-history-error').hidden = true;
-    $('audio-history-wait').hidden = false;
-
-    if (chrome.hotwordPrivate.setAudioHistoryEnabled) {
-      chrome.hotwordPrivate.setAudioHistoryEnabled(
-          true, this.onAudioHistoryRequestCompleted_.bind(this));
-    }
-  };
-
-  // ---- private methods:
+  this.timeoutId_ = null;
 
   /**
-   * Shows an error if the audio history setting was not enabled successfully.
-   * @private
+   * Listener for the speakerModelSaved event.
+   * @private {Function}
    */
-  Flow.prototype.handleAudioHistoryError_ = function() {
-    $('audio-history-agree').disabled = false;
-    $('audio-history-cancel').disabled = false;
-
-    $('audio-history-wait').hidden = true;
-    $('audio-history-error').hidden = false;
-
-    // Set a timeout before focusing the Enable button so that screenreaders
-    // have time to announce the error first.
-    this.setTimeout_(function() {
-        $('audio-history-agree').focus();
-    }.bind(this), 50);
-  };
+  this.speakerModelFinalizedListener_ =
+      this.onSpeakerModelFinalized_.bind(this);
 
   /**
-   * Callback for when an audio history request completes.
-   * @param {chrome.hotwordPrivate.AudioHistoryState} state The audio history
-   *     request state.
-   * @private
+   * Listener for the hotword trigger event.
+   * @private {Function}
    */
-  Flow.prototype.onAudioHistoryRequestCompleted_ = function(state) {
-    if (!state.success || !state.enabled) {
-      this.handleAudioHistoryError_();
-      return;
-    }
+  this.hotwordTriggerListener_ = this.handleHotwordTrigger_.bind(this);
 
-    this.advanceStep();
-  };
-
-  /**
-   * Shows an error if the speaker model has not been finalized.
-   * @private
-   */
-  Flow.prototype.handleSpeakerModelFinalizedError_ = function() {
-    if (!this.training_)
-      return;
+  // Listen for the user locking the screen.
+  chrome.idle.onStateChanged.addListener(
+      this.handleIdleStateChanged_.bind(this));
 
-    if (this.speakerModelFinalized_)
-      return;
-
-    this.updateTrainingState_(TrainingState.ERROR);
-    this.stopTraining();
-  };
+  // Listen for hotword settings changes. This used to detect when the user
+  // switches to a different profile.
+  if (chrome.hotwordPrivate.onEnabledChanged) {
+    chrome.hotwordPrivate.onEnabledChanged.addListener(
+        this.handleEnabledChanged_.bind(this));
+  }
+}
+
+/**
+ * Advances the current step. Begins training if the speech-training
+ * page has been reached.
+ */
+Flow.prototype.advanceStep = function() {
+  this.currentStepIndex_++;
+  if (this.currentStepIndex_ < this.currentFlow_.length) {
+    if (this.currentFlow_[this.currentStepIndex_] == SPEECH_TRAINING)
+      this.startTraining();
+    this.showStep_.apply(this);
+  }
+};
+
+/**
+ * Gets the appropriate flow and displays its first page.
+ */
+Flow.prototype.startFlow = function() {
+  if (chrome.hotwordPrivate && chrome.hotwordPrivate.getLaunchState)
+    chrome.hotwordPrivate.getLaunchState(this.startFlowForMode_.bind(this));
+};
+
+/**
+ * Starts the training process.
+ */
+Flow.prototype.startTraining = function() {
+  // Don't start a training session if one already exists.
+  if (this.training_)
+    return;
+
+  this.training_ = true;
+
+  if (chrome.hotwordPrivate.onHotwordTriggered &&
+      !chrome.hotwordPrivate.onHotwordTriggered.hasListener(
+          this.hotwordTriggerListener_)) {
+    chrome.hotwordPrivate.onHotwordTriggered.addListener(
+        this.hotwordTriggerListener_);
+  }
 
-  /**
-   * Handles the speaker model finalized event.
-   * @private
-   */
-  Flow.prototype.onSpeakerModelFinalized_ = function() {
-    this.speakerModelFinalized_ = true;
-    if (chrome.hotwordPrivate.onSpeakerModelSaved) {
-      chrome.hotwordPrivate.onSpeakerModelSaved.removeListener(
-          this.speakerModelFinalizedListener_);
-    }
-    this.stopTraining();
-    this.setTimeout_(this.finishFlow_.bind(this), 2000);
-  };
+  this.waitForHotwordTrigger_(0);
+  if (chrome.hotwordPrivate.startTraining)
+    chrome.hotwordPrivate.startTraining();
+};
+
+/**
+ * Stops the training process.
+ */
+Flow.prototype.stopTraining = function() {
+  if (!this.training_)
+    return;
+
+  this.training_ = false;
+  if (chrome.hotwordPrivate.onHotwordTriggered) {
+    chrome.hotwordPrivate.onHotwordTriggered.removeListener(
+        this.hotwordTriggerListener_);
+  }
+  if (chrome.hotwordPrivate.stopTraining)
+    chrome.hotwordPrivate.stopTraining();
+};
+
+/**
+ * Attempts to enable audio history for the signed-in account.
+ */
+Flow.prototype.enableAudioHistory = function() {
+  // Update UI
+  $('audio-history-agree').disabled = true;
+  $('audio-history-cancel').disabled = true;
+
+  $('audio-history-error').hidden = true;
+  $('audio-history-wait').hidden = false;
+
+  if (chrome.hotwordPrivate.setAudioHistoryEnabled) {
+    chrome.hotwordPrivate.setAudioHistoryEnabled(
+        true, this.onAudioHistoryRequestCompleted_.bind(this));
+  }
+};
+
+// ---- private methods:
+
+/**
+ * Shows an error if the audio history setting was not enabled successfully.
+ * @private
+ */
+Flow.prototype.handleAudioHistoryError_ = function() {
+  $('audio-history-agree').disabled = false;
+  $('audio-history-cancel').disabled = false;
+
+  $('audio-history-wait').hidden = true;
+  $('audio-history-error').hidden = false;
+
+  // Set a timeout before focusing the Enable button so that screenreaders
+  // have time to announce the error first.
+  this.setTimeout_(function() {
+    $('audio-history-agree').focus();
+  }.bind(this), 50);
+};
+
+/**
+ * Callback for when an audio history request completes.
+ * @param {chrome.hotwordPrivate.AudioHistoryState} state The audio history
+ *     request state.
+ * @private
+ */
+Flow.prototype.onAudioHistoryRequestCompleted_ = function(state) {
+  if (!state.success || !state.enabled) {
+    this.handleAudioHistoryError_();
+    return;
+  }
 
-  /**
-   * Completes the training process.
-   * @private
-   */
-  Flow.prototype.finishFlow_ = function() {
-    if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
-      chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(true,
-          this.advanceStep.bind(this));
-    }
-  };
+  this.advanceStep();
+};
+
+/**
+ * Shows an error if the speaker model has not been finalized.
+ * @private
+ */
+Flow.prototype.handleSpeakerModelFinalizedError_ = function() {
+  if (!this.training_)
+    return;
+
+  if (this.speakerModelFinalized_)
+    return;
+
+  this.updateTrainingState_(TrainingState.ERROR);
+  this.stopTraining();
+};
+
+/**
+ * Handles the speaker model finalized event.
+ * @private
+ */
+Flow.prototype.onSpeakerModelFinalized_ = function() {
+  this.speakerModelFinalized_ = true;
+  if (chrome.hotwordPrivate.onSpeakerModelSaved) {
+    chrome.hotwordPrivate.onSpeakerModelSaved.removeListener(
+        this.speakerModelFinalizedListener_);
+  }
+  this.stopTraining();
+  this.setTimeout_(this.finishFlow_.bind(this), 2000);
+};
+
+/**
+ * Completes the training process.
+ * @private
+ */
+Flow.prototype.finishFlow_ = function() {
+  if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
+    chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(
+        true, this.advanceStep.bind(this));
+  }
+};
 
-  /**
-   * Handles a user clicking on the retry button.
-   */
-  Flow.prototype.handleRetry = function() {
-    if (!(this.trainingState_ == TrainingState.TIMEOUT ||
+/**
+ * Handles a user clicking on the retry button.
+ */
+Flow.prototype.handleRetry = function() {
+  if (!(this.trainingState_ == TrainingState.TIMEOUT ||
         this.trainingState_ == TrainingState.ERROR))
-      return;
-
-    this.startTraining();
-    this.updateTrainingState_(TrainingState.RESET);
-  };
-
-  // ---- private methods:
-
-  /**
-   * Completes the training process.
-   * @private
-   */
-  Flow.prototype.finalizeSpeakerModel_ = function() {
-    if (!this.training_)
-      return;
-
-    // Listen for the success event from the NaCl module.
-    if (chrome.hotwordPrivate.onSpeakerModelSaved &&
-        !chrome.hotwordPrivate.onSpeakerModelSaved.hasListener(
-            this.speakerModelFinalizedListener_)) {
-      chrome.hotwordPrivate.onSpeakerModelSaved.addListener(
-          this.speakerModelFinalizedListener_);
-    }
-
-    this.speakerModelFinalized_ = false;
-    this.setTimeout_(this.handleSpeakerModelFinalizedError_.bind(this), 30000);
-    if (chrome.hotwordPrivate.finalizeSpeakerModel)
-      chrome.hotwordPrivate.finalizeSpeakerModel();
-  };
-
-  /**
-   * Returns the current training step.
-   * @param {string} curStepClassName The name of the class of the current
-   *     training step.
-   * @return {Object} The current training step, its index, and an array of
-   *     all training steps. Any of these can be undefined.
-   * @private
-   */
-  Flow.prototype.getCurrentTrainingStep_ = function(curStepClassName) {
-    var steps =
-        $(this.trainingPagePrefix_ + '-training').querySelectorAll('.train');
-    var curStep =
-        $(this.trainingPagePrefix_ + '-training').querySelector('.listening');
-
-    return {current: curStep,
-            index: Array.prototype.indexOf.call(steps, curStep),
-            steps: steps};
-  };
-
-  /**
-   * Updates the training state.
-   * @param {TrainingState} state The training state.
-   * @private
-   */
-  Flow.prototype.updateTrainingState_ = function(state) {
-    this.trainingState_ = state;
-    this.updateErrorUI_();
-  };
-
-  /**
-   * Waits two minutes and then checks for a training error.
-   * @param {number} index The index of the training step.
-   * @private
-   */
-  Flow.prototype.waitForHotwordTrigger_ = function(index) {
-    if (!this.training_)
-      return;
-
-    this.hotwordTriggerReceived_[index] = false;
-    this.setTimeout_(this.handleTrainingTimeout_.bind(this, index), 120000);
-  };
-
-  /**
-   * Checks for and handles a training error.
-   * @param {number} index The index of the training step.
-   * @private
-   */
-  Flow.prototype.handleTrainingTimeout_ = function(index) {
-    if (this.hotwordTriggerReceived_[index])
-      return;
-
-    this.timeoutTraining_();
-  };
-
-  /**
-   * Times out training and updates the UI to show a "retry" message, if
-   * currently training.
-   * @private
-   */
-  Flow.prototype.timeoutTraining_ = function() {
-    if (!this.training_)
-      return;
-
-    this.clearTimeout_();
-    this.updateTrainingState_(TrainingState.TIMEOUT);
-    this.stopTraining();
-  };
+    return;
+
+  this.startTraining();
+  this.updateTrainingState_(TrainingState.RESET);
+};
+
+// ---- private methods:
+
+/**
+ * Completes the training process.
+ * @private
+ */
+Flow.prototype.finalizeSpeakerModel_ = function() {
+  if (!this.training_)
+    return;
+
+  // Listen for the success event from the NaCl module.
+  if (chrome.hotwordPrivate.onSpeakerModelSaved &&
+      !chrome.hotwordPrivate.onSpeakerModelSaved.hasListener(
+          this.speakerModelFinalizedListener_)) {
+    chrome.hotwordPrivate.onSpeakerModelSaved.addListener(
+        this.speakerModelFinalizedListener_);
+  }
 
-  /**
-   * Sets a timeout. If any timeout is active, clear it.
-   * @param {Function} func The function to invoke when the timeout occurs.
-   * @param {number} delay Timeout delay in milliseconds.
-   * @private
-   */
-  Flow.prototype.setTimeout_ = function(func, delay) {
-    this.clearTimeout_();
-    this.timeoutId_ = setTimeout(function() {
-      this.timeoutId_ = null;
-      func();
-    }, delay);
+  this.speakerModelFinalized_ = false;
+  this.setTimeout_(this.handleSpeakerModelFinalizedError_.bind(this), 30000);
+  if (chrome.hotwordPrivate.finalizeSpeakerModel)
+    chrome.hotwordPrivate.finalizeSpeakerModel();
+};
+
+/**
+ * Returns the current training step.
+ * @param {string} curStepClassName The name of the class of the current
+ *     training step.
+ * @return {Object} The current training step, its index, and an array of
+ *     all training steps. Any of these can be undefined.
+ * @private
+ */
+Flow.prototype.getCurrentTrainingStep_ = function(curStepClassName) {
+  var steps =
+      $(this.trainingPagePrefix_ + '-training').querySelectorAll('.train');
+  var curStep =
+      $(this.trainingPagePrefix_ + '-training').querySelector('.listening');
+
+  return {
+    current: curStep,
+    index: Array.prototype.indexOf.call(steps, curStep),
+    steps: steps
   };
-
-  /**
-   * Clears any currently active timeout.
-   * @private
-   */
-  Flow.prototype.clearTimeout_ = function() {
-    if (this.timeoutId_ != null) {
-      clearTimeout(this.timeoutId_);
-      this.timeoutId_ = null;
-    }
-  };
-
-  /**
-   * Updates the training error UI.
-   * @private
-   */
-  Flow.prototype.updateErrorUI_ = function() {
-    if (!this.training_)
-      return;
-
-    var trainingSteps = this.getCurrentTrainingStep_('listening');
-    var steps = trainingSteps.steps;
-
-    $(this.trainingPagePrefix_ + '-toast').hidden =
-        this.trainingState_ != TrainingState.TIMEOUT;
-    if (this.trainingState_ == TrainingState.RESET) {
-      // We reset the training to begin at the first step.
-      // The first step is reset to 'listening', while the rest
-      // are reset to 'not-started'.
-      var prompt = loadTimeData.getString('trainingFirstPrompt');
-      for (var i = 0; i < steps.length; ++i) {
-        steps[i].classList.remove('recorded');
-        if (i == 0) {
-          steps[i].classList.remove('not-started');
-          steps[i].classList.add('listening');
-        } else {
-          steps[i].classList.add('not-started');
-          if (i == steps.length - 1)
-            prompt = loadTimeData.getString('trainingLastPrompt');
-          else
-            prompt = loadTimeData.getString('trainingMiddlePrompt');
-        }
-        steps[i].querySelector('.text').textContent = prompt;
-      }
-
-      // Reset the buttonbar.
-      $(this.trainingPagePrefix_ + '-processing').hidden = true;
-      $(this.trainingPagePrefix_ + '-wait').hidden = false;
-      $(this.trainingPagePrefix_ + '-error').hidden = true;
-      $(this.trainingPagePrefix_ + '-retry').hidden = true;
-    } else if (this.trainingState_ == TrainingState.TIMEOUT) {
-      var curStep = trainingSteps.current;
-      if (curStep) {
-        curStep.classList.remove('listening');
-        curStep.classList.add('not-started');
+};
+
+/**
+ * Updates the training state.
+ * @param {TrainingState} state The training state.
+ * @private
+ */
+Flow.prototype.updateTrainingState_ = function(state) {
+  this.trainingState_ = state;
+  this.updateErrorUI_();
+};
+
+/**
+ * Waits two minutes and then checks for a training error.
+ * @param {number} index The index of the training step.
+ * @private
+ */
+Flow.prototype.waitForHotwordTrigger_ = function(index) {
+  if (!this.training_)
+    return;
+
+  this.hotwordTriggerReceived_[index] = false;
+  this.setTimeout_(this.handleTrainingTimeout_.bind(this, index), 120000);
+};
+
+/**
+ * Checks for and handles a training error.
+ * @param {number} index The index of the training step.
+ * @private
+ */
+Flow.prototype.handleTrainingTimeout_ = function(index) {
+  if (this.hotwordTriggerReceived_[index])
+    return;
+
+  this.timeoutTraining_();
+};
+
+/**
+ * Times out training and updates the UI to show a "retry" message, if
+ * currently training.
+ * @private
+ */
+Flow.prototype.timeoutTraining_ = function() {
+  if (!this.training_)
+    return;
+
+  this.clearTimeout_();
+  this.updateTrainingState_(TrainingState.TIMEOUT);
+  this.stopTraining();
+};
+
+/**
+ * Sets a timeout. If any timeout is active, clear it.
+ * @param {Function} func The function to invoke when the timeout occurs.
+ * @param {number} delay Timeout delay in milliseconds.
+ * @private
+ */
+Flow.prototype.setTimeout_ = function(func, delay) {
+  this.clearTimeout_();
+  this.timeoutId_ = setTimeout(function() {
+    this.timeoutId_ = null;
+    func();
+  }, delay);
+};
+
+/**
+ * Clears any currently active timeout.
+ * @private
+ */
+Flow.prototype.clearTimeout_ = function() {
+  if (this.timeoutId_ != null) {
+    clearTimeout(this.timeoutId_);
+    this.timeoutId_ = null;
+  }
+};
+
+/**
+ * Updates the training error UI.
+ * @private
+ */
+Flow.prototype.updateErrorUI_ = function() {
+  if (!this.training_)
+    return;
+
+  var trainingSteps = this.getCurrentTrainingStep_('listening');
+  var steps = trainingSteps.steps;
+
+  $(this.trainingPagePrefix_ + '-toast').hidden =
+      this.trainingState_ != TrainingState.TIMEOUT;
+  if (this.trainingState_ == TrainingState.RESET) {
+    // We reset the training to begin at the first step.
+    // The first step is reset to 'listening', while the rest
+    // are reset to 'not-started'.
+    var prompt = loadTimeData.getString('trainingFirstPrompt');
+    for (var i = 0; i < steps.length; ++i) {
+      steps[i].classList.remove('recorded');
+      if (i == 0) {
+        steps[i].classList.remove('not-started');
+        steps[i].classList.add('listening');
+      } else {
+        steps[i].classList.add('not-started');
+        if (i == steps.length - 1)
+          prompt = loadTimeData.getString('trainingLastPrompt');
+        else
+          prompt = loadTimeData.getString('trainingMiddlePrompt');
       }
-
-      // Set a timeout before focusing the Retry button so that screenreaders
-      // have time to announce the timeout first.
-      this.setTimeout_(function() {
-        $(this.trainingPagePrefix_ + '-toast').children[1].focus();
-      }.bind(this), 50);
-    } else if (this.trainingState_ == TrainingState.ERROR) {
-      // Update the buttonbar.
-      $(this.trainingPagePrefix_ + '-wait').hidden = true;
-      $(this.trainingPagePrefix_ + '-error').hidden = false;
-      $(this.trainingPagePrefix_ + '-retry').hidden = false;
-      $(this.trainingPagePrefix_ + '-processing').hidden = false;
-
-      // Set a timeout before focusing the Retry button so that screenreaders
-      // have time to announce the error first.
-      this.setTimeout_(function() {
-        $(this.trainingPagePrefix_ + '-retry').children[0].focus();
-      }.bind(this), 50);
+      steps[i].querySelector('.text').textContent = prompt;
     }
-  };
-
-  /**
-   * Handles a hotword trigger event and updates the training UI.
-   * @private
-   */
-  Flow.prototype.handleHotwordTrigger_ = function() {
-    var trainingSteps = this.getCurrentTrainingStep_('listening');
-
-    if (!trainingSteps.current)
-      return;
 
-    var index = trainingSteps.index;
-    this.hotwordTriggerReceived_[index] = true;
-
-    trainingSteps.current.querySelector('.text').textContent =
-        loadTimeData.getString('trainingRecorded');
-    trainingSteps.current.classList.remove('listening');
-    trainingSteps.current.classList.add('recorded');
-
-    if (trainingSteps.steps[index + 1]) {
-      trainingSteps.steps[index + 1].classList.remove('not-started');
-      trainingSteps.steps[index + 1].classList.add('listening');
-      this.waitForHotwordTrigger_(index + 1);
-      return;
+    // Reset the buttonbar.
+    $(this.trainingPagePrefix_ + '-processing').hidden = true;
+    $(this.trainingPagePrefix_ + '-wait').hidden = false;
+    $(this.trainingPagePrefix_ + '-error').hidden = true;
+    $(this.trainingPagePrefix_ + '-retry').hidden = true;
+  } else if (this.trainingState_ == TrainingState.TIMEOUT) {
+    var curStep = trainingSteps.current;
+    if (curStep) {
+      curStep.classList.remove('listening');
+      curStep.classList.add('not-started');
     }
 
-    // Only the last step makes it here.
-    var buttonElem = $(this.trainingPagePrefix_ + '-processing').hidden = false;
-    this.finalizeSpeakerModel_();
-  };
-
-  /**
-   * Handles a chrome.idle.onStateChanged event and times out the training if
-   * the state is "locked".
-   * @param {!string} state State, one of "active", "idle", or "locked".
-   * @private
-   */
-  Flow.prototype.handleIdleStateChanged_ = function(state) {
-    if (state == 'locked')
-      this.timeoutTraining_();
-  };
+    // Set a timeout before focusing the Retry button so that screenreaders
+    // have time to announce the timeout first.
+    this.setTimeout_(function() {
+      $(this.trainingPagePrefix_ + '-toast').children[1].focus();
+    }.bind(this), 50);
+  } else if (this.trainingState_ == TrainingState.ERROR) {
+    // Update the buttonbar.
+    $(this.trainingPagePrefix_ + '-wait').hidden = true;
+    $(this.trainingPagePrefix_ + '-error').hidden = false;
+    $(this.trainingPagePrefix_ + '-retry').hidden = false;
+    $(this.trainingPagePrefix_ + '-processing').hidden = false;
+
+    // Set a timeout before focusing the Retry button so that screenreaders
+    // have time to announce the error first.
+    this.setTimeout_(function() {
+      $(this.trainingPagePrefix_ + '-retry').children[0].focus();
+    }.bind(this), 50);
+  }
+};
+
+/**
+ * Handles a hotword trigger event and updates the training UI.
+ * @private
+ */
+Flow.prototype.handleHotwordTrigger_ = function() {
+  var trainingSteps = this.getCurrentTrainingStep_('listening');
+
+  if (!trainingSteps.current)
+    return;
+
+  var index = trainingSteps.index;
+  this.hotwordTriggerReceived_[index] = true;
+
+  trainingSteps.current.querySelector('.text').textContent =
+      loadTimeData.getString('trainingRecorded');
+  trainingSteps.current.classList.remove('listening');
+  trainingSteps.current.classList.add('recorded');
+
+  if (trainingSteps.steps[index + 1]) {
+    trainingSteps.steps[index + 1].classList.remove('not-started');
+    trainingSteps.steps[index + 1].classList.add('listening');
+    this.waitForHotwordTrigger_(index + 1);
+    return;
+  }
 
-  /**
-   * Handles a chrome.hotwordPrivate.onEnabledChanged event and times out
-   * training if the user is no longer the active user (user switches profiles).
-   * @private
-   */
-  Flow.prototype.handleEnabledChanged_ = function() {
-    if (chrome.hotwordPrivate.getStatus) {
-      chrome.hotwordPrivate.getStatus(function(status) {
-        if (status.userIsActive)
-          return;
-
-        this.timeoutTraining_();
-      }.bind(this));
-    }
-  };
+  // Only the last step makes it here.
+  var buttonElem = $(this.trainingPagePrefix_ + '-processing').hidden = false;
+  this.finalizeSpeakerModel_();
+};
+
+/**
+ * Handles a chrome.idle.onStateChanged event and times out the training if
+ * the state is "locked".
+ * @param {!string} state State, one of "active", "idle", or "locked".
+ * @private
+ */
+Flow.prototype.handleIdleStateChanged_ = function(state) {
+  if (state == 'locked')
+    this.timeoutTraining_();
+};
+
+/**
+ * Handles a chrome.hotwordPrivate.onEnabledChanged event and times out
+ * training if the user is no longer the active user (user switches profiles).
+ * @private
+ */
+Flow.prototype.handleEnabledChanged_ = function() {
+  if (chrome.hotwordPrivate.getStatus) {
+    chrome.hotwordPrivate.getStatus(function(status) {
+      if (status.userIsActive)
+        return;
 
-  /**
-   * Gets and starts the appropriate flow for the launch mode.
-   * @param {chrome.hotwordPrivate.LaunchState} state Launch state of the
-   *     Hotword Audio Verification App.
-   * @private
-   */
-  Flow.prototype.startFlowForMode_ = function(state) {
-    this.launchMode_ = state.launchMode;
-    assert(state.launchMode >= 0 && state.launchMode < FLOWS.length,
-           'Invalid Launch Mode.');
-    this.currentFlow_ = FLOWS[state.launchMode];
-    if (state.launchMode == LaunchMode.HOTWORD_ONLY) {
-      $('intro-description-audio-history-enabled').hidden = false;
-    } else if (state.launchMode == LaunchMode.HOTWORD_AND_AUDIO_HISTORY) {
-      $('intro-description').hidden = false;
-    }
+      this.timeoutTraining_();
+    }.bind(this));
+  }
+};
+
+/**
+ * Gets and starts the appropriate flow for the launch mode.
+ * @param {chrome.hotwordPrivate.LaunchState} state Launch state of the
+ *     Hotword Audio Verification App.
+ * @private
+ */
+Flow.prototype.startFlowForMode_ = function(state) {
+  this.launchMode_ = state.launchMode;
+  assert(
+      state.launchMode >= 0 && state.launchMode < FLOWS.length,
+      'Invalid Launch Mode.');
+  this.currentFlow_ = FLOWS[state.launchMode];
+  if (state.launchMode == LaunchMode.HOTWORD_ONLY) {
+    $('intro-description-audio-history-enabled').hidden = false;
+  } else if (state.launchMode == LaunchMode.HOTWORD_AND_AUDIO_HISTORY) {
+    $('intro-description').hidden = false;
+  }
 
-    this.advanceStep();
-  };
+  this.advanceStep();
+};
 
-  /**
-   * Displays the current step. If the current step is not the first step,
-   * also hides the previous step. Focuses the current step's first button.
-   * @private
-   */
-  Flow.prototype.showStep_ = function() {
-    var currentStepId = this.currentFlow_[this.currentStepIndex_];
-    var currentStep = document.getElementById(currentStepId);
-    currentStep.hidden = false;
+/**
+ * Displays the current step. If the current step is not the first step,
+ * also hides the previous step. Focuses the current step's first button.
+ * @private
+ */
+Flow.prototype.showStep_ = function() {
+  var currentStepId = this.currentFlow_[this.currentStepIndex_];
+  var currentStep = document.getElementById(currentStepId);
+  currentStep.hidden = false;
 
-    cr.ui.setInitialFocus(currentStep);
+  cr.ui.setInitialFocus(currentStep);
 
-    var previousStep = null;
-    if (this.currentStepIndex_ > 0)
-      previousStep = this.currentFlow_[this.currentStepIndex_ - 1];
+  var previousStep = null;
+  if (this.currentStepIndex_ > 0)
+    previousStep = this.currentFlow_[this.currentStepIndex_ - 1];
 
-    if (previousStep)
-      document.getElementById(previousStep).hidden = true;
+  if (previousStep)
+    document.getElementById(previousStep).hidden = true;
 
-    chrome.app.window.current().show();
-  };
+  chrome.app.window.current().show();
+};
 
-  window.Flow = Flow;
+window.Flow = Flow;
 })();
diff --git a/chromium/chrome/browser/resources/identity_internals.js b/chromium/chrome/browser/resources/identity_internals.js
index 3fc17decebf..bdd44acf138 100644
--- a/chromium/chrome/browser/resources/identity_internals.js
+++ b/chromium/chrome/browser/resources/identity_internals.js
@@ -34,8 +34,8 @@ cr.define('identity_internals', function() {
           'extensionName', this.data_.extensionName, 'extension-name'));
       tbody.appendChild(this.createEntry_(
           'extensionId', this.data_.extensionId, 'extension-id'));
-      tbody.appendChild(this.createEntry_(
-          'tokenStatus', this.data_.status, 'token-status'));
+      tbody.appendChild(
+          this.createEntry_('tokenStatus', this.data_.status, 'token-status'));
       tbody.appendChild(this.createEntry_(
           'expirationTime', this.data_.expirationTime, 'expiration-time'));
       tbody.appendChild(this.createEntryForScopes_());
@@ -113,8 +113,9 @@ cr.define('identity_internals', function() {
       var revokeButton = this.ownerDocument.createElement('button');
       revokeButton.classList.add('revoke-button');
       revokeButton.addEventListener('click', function() {
-        chrome.send('identityInternalsRevokeToken',
-                    [this.data_.extensionId, this.data_.accessToken]);
+        chrome.send(
+            'identityInternalsRevokeToken',
+            [this.data_.extensionId, this.data_.accessToken]);
       }.bind(this));
       revokeButton.textContent = loadTimeData.getString('revoke');
       return revokeButton;
diff --git a/chromium/chrome/browser/resources/identity_scope_approval_dialog/background.js b/chromium/chrome/browser/resources/identity_scope_approval_dialog/background.js
index 4139360ae3e..0215c41fff6 100644
--- a/chromium/chrome/browser/resources/identity_scope_approval_dialog/background.js
+++ b/chromium/chrome/browser/resources/identity_scope_approval_dialog/background.js
@@ -11,24 +11,17 @@
  *     if the mode is 'interactive'.
  */
 function showAuthDialog(key, url, mode) {
-  var options = {
-    frame: 'none',
-    id: key,
-    minWidth: 1024,
-    minHeight: 768,
-    hidden: true
-  };
-  chrome.app.window.create('scope_approval_dialog.html',
-                           options,
-                           function(win) {
-    win.contentWindow.addEventListener('load', function(event) {
-      var windowParam;
-      if (mode == 'interactive')
-        windowParam = win;
-      win.contentWindow.loadAuthUrlAndShowWindow(url, windowParam);
-    });
-  });
+  var options =
+      {frame: 'none', id: key, minWidth: 1024, minHeight: 768, hidden: true};
+  chrome.app.window.create(
+      'scope_approval_dialog.html', options, function(win) {
+        win.contentWindow.addEventListener('load', function(event) {
+          var windowParam;
+          if (mode == 'interactive')
+            windowParam = win;
+          win.contentWindow.loadAuthUrlAndShowWindow(url, windowParam);
+        });
+      });
 }
 
 chrome.identityPrivate.onWebFlowRequest.addListener(showAuthDialog);
-
diff --git a/chromium/chrome/browser/resources/identity_scope_approval_dialog/scope_approval_dialog.js b/chromium/chrome/browser/resources/identity_scope_approval_dialog/scope_approval_dialog.js
index 8c204c298ba..5bc4b2cca2d 100644
--- a/chromium/chrome/browser/resources/identity_scope_approval_dialog/scope_approval_dialog.js
+++ b/chromium/chrome/browser/resources/identity_scope_approval_dialog/scope_approval_dialog.js
@@ -20,14 +20,16 @@ function loadAuthUrlAndShowWindow(url, win) {
   });
 
   // Request a customized view from GAIA.
-  webview.request.onBeforeSendHeaders.addListener(function(details) {
-    headers = details.requestHeaders || [];
-    headers.push({'name': 'X-Browser-View',
-                  'value': 'embedded'});
-    return { requestHeaders: headers };
-  }, {
-    urls: ['https://accounts.google.com/*'],
-  }, ['blocking', 'requestHeaders']);
+  webview.request.onBeforeSendHeaders.addListener(
+      function(details) {
+        headers = details.requestHeaders || [];
+        headers.push({'name': 'X-Browser-View', 'value': 'embedded'});
+        return {requestHeaders: headers};
+      },
+      {
+        urls: ['https://accounts.google.com/*'],
+      },
+      ['blocking', 'requestHeaders']);
 
   if (!url.toLowerCase().startsWith('https://accounts.google.com/'))
     document.querySelector('.titlebar').classList.add('titlebar-border');
@@ -51,4 +53,3 @@ document.addEventListener('DOMContentLoaded', function() {
     document.title = strings['window-title'];
   });
 });
-
diff --git a/chromium/chrome/browser/resources/inline_login/inline_login.js b/chromium/chrome/browser/resources/inline_login/inline_login.js
index 17f1c433863..a29c409ddf7 100644
--- a/chromium/chrome/browser/resources/inline_login/inline_login.js
+++ b/chromium/chrome/browser/resources/inline_login/inline_login.js
@@ -21,8 +21,8 @@ cr.define('inline.login', function() {
   var authReadyFired;
 
   /**
-  * Whether the login UI is loaded for signing in primary account.
-  */
+   * Whether the login UI is loaded for signing in primary account.
+   */
   var isLoginPrimaryAccount;
 
   function onResize(e) {
@@ -77,9 +77,11 @@ cr.define('inline.login', function() {
     // TODO(rogerta): in when using webview, the |completeLogin| argument
     // is ignored.  See addEventListener() call above.
     authExtHost.load(data.authMode, data, completeLogin);
-    $('contents').classList.toggle('loading',
-        data.authMode != cr.login.GaiaAuthHost.AuthMode.DESKTOP ||
-        data.constrained == '1');
+    $('contents')
+        .classList.toggle(
+            'loading',
+            data.authMode != cr.login.GaiaAuthHost.AuthMode.DESKTOP ||
+                data.constrained == '1');
     isLoginPrimaryAccount = data.isLoginPrimaryAccount;
   }
 
@@ -114,19 +116,20 @@ cr.define('inline.login', function() {
   }
 
   function showBackButton() {
-
     $('navigation-button').icon =
         isRTL() ? 'icons:arrow-forward' : 'icons:arrow-back';
 
-    $('navigation-button').setAttribute(
-        'aria-label', loadTimeData.getString('accessibleBackButtonLabel'));
+    $('navigation-button')
+        .setAttribute(
+            'aria-label', loadTimeData.getString('accessibleBackButtonLabel'));
   }
 
   function showCloseButton() {
     $('navigation-button').icon = 'icons:close';
     $('navigation-button').classList.add('enabled');
-    $('navigation-button').setAttribute(
-        'aria-label', loadTimeData.getString('accessibleCloseButtonLabel'));
+    $('navigation-button')
+        .setAttribute(
+            'aria-label', loadTimeData.getString('accessibleCloseButtonLabel'));
   }
 
   function navigationButtonClicked() {
diff --git a/chromium/chrome/browser/resources/inspect/inspect.js b/chromium/chrome/browser/resources/inspect/inspect.js
index c770ab91385..64288b83e80 100644
--- a/chromium/chrome/browser/resources/inspect/inspect.js
+++ b/chromium/chrome/browser/resources/inspect/inspect.js
@@ -15,11 +15,11 @@ var browserInspectorTitle;
 (function() {
 var queryParams = window.location.search;
 if (!queryParams)
-    return;
+  return;
 var params = queryParams.substring(1).split('&');
 for (var i = 0; i < params.length; ++i) {
-    var pair = params[i].split('=');
-    queryParamsObject[pair[0]] = pair[1];
+  var pair = params[i].split('=');
+  queryParamsObject[pair[0]] = pair[1];
 }
 
 if ('trace' in queryParamsObject || 'tracing' in queryParamsObject) {
@@ -55,7 +55,7 @@ function removeChildrenExceptAdditional(element_id) {
   var element = $(element_id);
   var elements = element.querySelectorAll('.row:not(.additional)');
   for (var i = 0; i != elements.length; i++)
-      element.removeChild(elements[i]);
+    element.removeChild(elements[i]);
 }
 
 function onload() {
@@ -163,9 +163,8 @@ function alreadyDisplayed(element, data) {
 function updateBrowserVisibility(browserSection) {
   var icon = browserSection.querySelector('.used-for-port-forwarding');
   browserSection.hidden = !browserSection.querySelector('.open') &&
-                          !browserSection.querySelector('.row') &&
-                          !browserInspector &&
-                          (!icon || icon.hidden);
+      !browserSection.querySelector('.row') && !browserInspector &&
+      (!icon || icon.hidden);
 }
 
 function updateUsernameVisibility(deviceSection) {
@@ -207,7 +206,7 @@ function populateRemoteTargets(devices) {
 
   function insertBrowser(browserList, browser) {
     for (var sibling = browserList.firstElementChild; sibling;
-        sibling = sibling.nextElementSibling) {
+         sibling = sibling.nextElementSibling) {
       if (browserCompare(browser, sibling)) {
         browserList.insertBefore(browser, sibling);
         return;
@@ -225,7 +224,9 @@ function populateRemoteTargets(devices) {
       section.remove();
   }
 
-  var newDeviceIds = devices.map(function(d) { return d.id });
+  var newDeviceIds = devices.map(function(d) {
+    return d.id;
+  });
   Array.prototype.forEach.call(
       deviceList.querySelectorAll('.device'),
       removeObsolete.bind(null, newDeviceIds));
@@ -277,12 +278,14 @@ function populateRemoteTargets(devices) {
 
     deviceSection.querySelector('.device-name').textContent = device.adbModel;
     deviceSection.querySelector('.device-auth').textContent =
-        device.adbConnected ? '' : 'Pending authentication: please accept ' +
-          'debugging session on the device.';
+        device.adbConnected ? '' :
+                              'Pending authentication: please accept ' +
+            'debugging session on the device.';
 
     var browserList = deviceSection.querySelector('.browsers');
-    var newBrowserIds =
-        device.browsers.map(function(b) { return b.id });
+    var newBrowserIds = device.browsers.map(function(b) {
+      return b.id;
+    });
     Array.prototype.forEach.call(
         browserList.querySelectorAll('.browser'),
         removeObsolete.bind(null, newBrowserIds));
@@ -359,8 +362,10 @@ function populateRemoteTargets(devices) {
           browserHeader.appendChild(link);
           link.addEventListener(
               'click',
-              sendCommand.bind(null, 'inspect-browser', browser.source,
-                  browser.id, browserInspector), false);
+              sendCommand.bind(
+                  null, 'inspect-browser', browser.source, browser.id,
+                  browserInspector),
+              false);
         }
 
         pageList = document.createElement('div');
@@ -374,24 +379,27 @@ function populateRemoteTargets(devices) {
           var page = browser.pages[p];
           // Attached targets have no unique id until Chrome 26. For such
           // targets it is impossible to activate existing DevTools window.
-          page.hasNoUniqueId = page.attached &&
-              majorChromeVersion && majorChromeVersion < MIN_VERSION_TARGET_ID;
+          page.hasNoUniqueId = page.attached && majorChromeVersion &&
+              majorChromeVersion < MIN_VERSION_TARGET_ID;
           var row = addTargetToList(page, pageList, ['name', 'url']);
           if (page['description'])
             addWebViewDetails(row, page);
           else
             addFavicon(row, page);
           if (majorChromeVersion >= MIN_VERSION_TAB_ACTIVATE) {
-            addActionLink(row, 'focus tab',
+            addActionLink(
+                row, 'focus tab',
                 sendTargetCommand.bind(null, 'activate', page), false);
           }
           if (majorChromeVersion) {
-            addActionLink(row, 'reload',
-                sendTargetCommand.bind(null, 'reload', page), page.attached);
+            addActionLink(
+                row, 'reload', sendTargetCommand.bind(null, 'reload', page),
+                page.attached);
           }
           if (majorChromeVersion >= MIN_VERSION_TAB_CLOSE) {
-            addActionLink(row, 'close',
-                sendTargetCommand.bind(null, 'close', page), false);
+            addActionLink(
+                row, 'close', sendTargetCommand.bind(null, 'close', page),
+                false);
           }
         }
       }
@@ -433,15 +441,15 @@ function addGuestViews(row, guests) {
 function addToWorkersList(data) {
   var row =
       addTargetToList(data, $('workers-list'), ['name', 'description', 'url']);
-  addActionLink(row, 'terminate',
-      sendTargetCommand.bind(null, 'close', data), false);
+  addActionLink(
+      row, 'terminate', sendTargetCommand.bind(null, 'close', data), false);
 }
 
 function addToServiceWorkersList(data) {
-    var row = addTargetToList(
-        data, $('service-workers-list'), ['name', 'description', 'url']);
-    addActionLink(row, 'terminate',
-        sendTargetCommand.bind(null, 'close', data), false);
+  var row = addTargetToList(
+      data, $('service-workers-list'), ['name', 'description', 'url']);
+  addActionLink(
+      row, 'terminate', sendTargetCommand.bind(null, 'close', data), false);
 }
 
 function addToOthersList(data) {
@@ -491,7 +499,7 @@ function addWebViewDetails(row, data) {
 }
 
 function addWebViewDescription(row, webview) {
-  var viewStatus = { visibility: '', position: '', size: '' };
+  var viewStatus = {visibility: '', position: '', size: ''};
   if (!webview.empty) {
     if (webview.attached && !webview.visible)
       viewStatus.visibility = 'hidden';
@@ -502,7 +510,7 @@ function addWebViewDescription(row, webview) {
     viewStatus.visibility = 'empty';
   }
   if (webview.attached) {
-      viewStatus.position =
+    viewStatus.position =
         'at (' + webview.screenX + ', ' + webview.screenY + ')';
   }
 
@@ -592,11 +600,13 @@ function addTargetToList(data, list, properties) {
   subrowBox.appendChild(actionBox);
 
   if (data.isAdditional) {
-    addActionLink(row, 'inspect',
-        sendCommand.bind(null, 'inspect-additional', data.url), false);
+    addActionLink(
+        row, 'inspect', sendCommand.bind(null, 'inspect-additional', data.url),
+        false);
     row.classList.add('additional');
   } else if (!data.hasCustomInspectAction) {
-    addActionLink(row, 'inspect', sendTargetCommand.bind(null, 'inspect', data),
+    addActionLink(
+        row, 'inspect', sendTargetCommand.bind(null, 'inspect', data),
         data.hasNoUniqueId || data.adbAttachedForeign);
   }
 
@@ -626,21 +636,20 @@ function addActionLink(row, text, handler, opt_disabled) {
 }
 
 function initSettings() {
-  checkboxSendsCommand('discover-usb-devices-enable',
-                       'set-discover-usb-devices-enabled');
+  checkboxSendsCommand(
+      'discover-usb-devices-enable', 'set-discover-usb-devices-enabled');
   checkboxSendsCommand('port-forwarding-enable', 'set-port-forwarding-enabled');
-  checkboxSendsCommand('discover-tcp-devices-enable',
-                       'set-discover-tcp-targets-enabled');
+  checkboxSendsCommand(
+      'discover-tcp-devices-enable', 'set-discover-tcp-targets-enabled');
 
-  $('port-forwarding-config-open').addEventListener(
-      'click', openPortForwardingConfig);
-  $('tcp-discovery-config-open').addEventListener(
-      'click', openTargetsConfig);
+  $('port-forwarding-config-open')
+      .addEventListener('click', openPortForwardingConfig);
+  $('tcp-discovery-config-open').addEventListener('click', openTargetsConfig);
   $('config-dialog-close').addEventListener('click', function() {
     $('config-dialog').commit(true);
   });
-  $('node-frontend').addEventListener(
-      'click', sendCommand.bind(null, 'open-node-frontend'));
+  $('node-frontend')
+      .addEventListener('click', sendCommand.bind(null, 'open-node-frontend'));
 }
 
 function checkboxHandler(command, event) {
@@ -713,7 +722,6 @@ function openConfigDialog(dialogClass, commitHandler, lineFactory, data) {
     defaultFocus.focus();
   else
     doneButton.focus();
-
 }
 
 function openPortForwardingConfig() {
@@ -721,8 +729,8 @@ function openPortForwardingConfig() {
     var line = document.createElement('div');
     line.className = 'port-forwarding-pair config-list-row';
 
-    var portInput = createConfigField(port, 'port preselected',
-                                      'Port', validatePort);
+    var portInput =
+        createConfigField(port, 'port preselected', 'Port', validatePort);
     line.appendChild(portInput);
 
     var locationInput = createConfigField(
@@ -740,10 +748,9 @@ function openPortForwardingConfig() {
     sendCommand('set-port-forwarding-config', config);
   }
 
-  openConfigDialog('port-forwarding',
-             commitPortForwardingConfig,
-             createPortForwardingConfigLine,
-             window.portForwardingConfig);
+  openConfigDialog(
+      'port-forwarding', commitPortForwardingConfig,
+      createPortForwardingConfigLine, window.portForwardingConfig);
 }
 
 function openTargetsConfig() {
@@ -767,10 +774,9 @@ function openTargetsConfig() {
     sendCommand('set-tcp-discovery-config', entries);
   }
 
-  openConfigDialog('target-discovery',
-             commitTargetDiscoveryConfig,
-             createTargetDiscoveryConfigLine,
-             window.targetDiscoveryConfig);
+  openConfigDialog(
+      'target-discovery', commitTargetDiscoveryConfig,
+      createTargetDiscoveryConfigLine, window.targetDiscoveryConfig);
 }
 
 function filterList(fieldSelectors, callback) {
@@ -780,9 +786,8 @@ function filterList(fieldSelectors, callback) {
     var values = [];
     for (var selector of fieldSelectors) {
       var input = line.querySelector(selector);
-      var value = input.classList.contains('invalid') ?
-                  input.lastValidValue :
-                  input.value;
+      var value = input.classList.contains('invalid') ? input.lastValidValue :
+                                                        input.value;
       if (!value)
         break;
       values.push(value);
@@ -825,10 +830,8 @@ function updateTCPDiscoveryConfig(config) {
 function appendRow(list, lineFactory, key, value) {
   var line = lineFactory(key, value);
   line.lastElementChild.addEventListener('keydown', function(e) {
-    if (e.key == 'Tab' &&
-        !hasKeyModifiers(e) &&
-        line.classList.contains('fresh') &&
-        !line.classList.contains('empty')) {
+    if (e.key == 'Tab' && !hasKeyModifiers(e) &&
+        line.classList.contains('fresh') && !line.classList.contains('empty')) {
       // Tabbing forward on the fresh line, try create a new empty one.
       if (commitFreshLineIfValid(true))
         e.preventDefault();
@@ -845,10 +848,8 @@ function appendRow(list, lineFactory, key, value) {
   });
   line.appendChild(lineDelete);
 
-  line.addEventListener(
-      'click', selectLine.bind(null, line, true));
-  line.addEventListener(
-      'focus', selectLine.bind(null, line, true));
+  line.addEventListener('click', selectLine.bind(null, line, true));
+  line.addEventListener('focus', selectLine.bind(null, line, true));
   checkEmptyLine(line);
 
   if (!key && !value)
diff --git a/chromium/chrome/browser/resources/instant/instant.js b/chromium/chrome/browser/resources/instant/instant.js
index e874fca8729..2cb4b971bf9 100644
--- a/chromium/chrome/browser/resources/instant/instant.js
+++ b/chromium/chrome/browser/resources/instant/instant.js
@@ -5,7 +5,10 @@
 // Redefine '$' here rather than including 'cr.js', since this is
 // the only function needed.  This allows this file to be loaded
 // in a browser directly for layout and some testing purposes.
-var $ = function(id) { return document.getElementById(id); };
+// eslint-disable-next-line no-restricted-properties
+var $ = function(id) {
+  return document.getElementById(id);
+};
 
 /**
  * WebUI for configuring instant.* preference values used by
@@ -56,15 +59,19 @@ var instantConfig = (function() {
       var input = createElementWithClass('input', 'row-input');
       input.type = field.type;
       input.id = field.key;
-      input.title = "Default Value: " + field.default;
-      if (field.size) input.size = field.size;
+      input.title = 'Default Value: ' + field.default;
+      if (field.size)
+        input.size = field.size;
       input.min = field.min || 0;
-      if (field.max) input.max = field.max;
-      if (field.step) input.step = field.step;
+      if (field.max)
+        input.max = field.max;
+      if (field.step)
+        input.step = field.step;
       row.appendChild(input);
 
       var units = createElementWithClass('div', 'row-units');
-      if (field.units) units.innerHTML = field.units;
+      if (field.units)
+        units.innerHTML = field.units;
       row.appendChild(units);
 
       $('instant-form').appendChild(row);
@@ -78,8 +85,8 @@ var instantConfig = (function() {
     for (var i = 0; i < FIELDS.length; i++) {
       var field = FIELDS[i];
       $(field.key).onchange = (function(key) {
-        setPreferenceValue(key);
-      }).bind(null, field.key);
+                                setPreferenceValue(key);
+                              }).bind(null, field.key);
     }
   }
 
diff --git a/chromium/chrome/browser/resources/local_discovery/local_discovery.html b/chromium/chrome/browser/resources/local_discovery/local_discovery.html
index efa8485418e..9ef41d058dd 100644
--- a/chromium/chrome/browser/resources/local_discovery/local_discovery.html
+++ b/chromium/chrome/browser/resources/local_discovery/local_discovery.html
@@ -17,7 +17,7 @@
   <script src="local_discovery.js"></script>
   <script src="strings.js"></script>
 </head>
-<body class="uber-frame">
+<body>
   <div class="page" id="main-page">
     <div class="overlay" id="overlay" hidden>
       <div id="register-overlay" class="page">
diff --git a/chromium/chrome/browser/resources/local_discovery/local_discovery.js b/chromium/chrome/browser/resources/local_discovery/local_discovery.js
index cdad0b5ab1c..6906a948908 100644
--- a/chromium/chrome/browser/resources/local_discovery/local_discovery.js
+++ b/chromium/chrome/browser/resources/local_discovery/local_discovery.js
@@ -103,12 +103,9 @@ cr.define('local_discovery', function() {
       }
 
       this.registerButton = fillDeviceDescription(
-        this.domElement,
-        this.info.display_name,
-        this.info.description,
-        this.info.type,
-        loadTimeData.getString('serviceRegister'),
-        this.showRegister.bind(this, this.info.type));
+          this.domElement, this.info.display_name, this.info.description,
+          this.info.type, loadTimeData.getString('serviceRegister'),
+          this.showRegister.bind(this, this.info.type));
 
       this.setRegisterEnabled(this.registerEnabled);
     },
@@ -127,8 +124,9 @@ cr.define('local_discovery', function() {
     register: function() {
       recordUmaEvent(DEVICES_PAGE_EVENTS.REGISTER_CONFIRMED);
       chrome.send('registerDevice', [this.info.service_name]);
-      setRegisterPage(isPrinter(this.info.type) ?
-          'register-printer-page-adding1' : 'register-device-page-adding1');
+      setRegisterPage(
+          isPrinter(this.info.type) ? 'register-printer-page-adding1' :
+                                      'register-device-page-adding1');
     },
     /**
      * Show registrtation UI for device.
@@ -136,9 +134,9 @@ cr.define('local_discovery', function() {
     showRegister: function() {
       recordUmaEvent(DEVICES_PAGE_EVENTS.REGISTER_CLICKED);
       $('register-message').textContent = loadTimeData.getStringF(
-        isPrinter(this.info.type) ? 'registerPrinterConfirmMessage' :
-                                    'registerDeviceConfirmMessage',
-        this.info.display_name);
+          isPrinter(this.info.type) ? 'registerPrinterConfirmMessage' :
+                                      'registerDeviceConfirmMessage',
+          this.info.display_name);
       $('register-continue-button').onclick = this.register.bind(this);
       showRegisterOverlay();
     },
@@ -167,8 +165,7 @@ cr.define('local_discovery', function() {
     __proto__: cr.ui.FocusManager.prototype,
     /** @override */
     getFocusParent: function() {
-      return document.querySelector('#overlay .showing') ||
-        $('main-page');
+      return document.querySelector('#overlay .showing') || $('main-page');
     }
   };
 
@@ -182,8 +179,8 @@ cr.define('local_discovery', function() {
     } else if (numberPrinters == 1) {
       return loadTimeData.getString('printersOnNetworkOne');
     } else {
-      return loadTimeData.getStringF('printersOnNetworkMultiple',
-                                     numberPrinters);
+      return loadTimeData.getStringF(
+          'printersOnNetworkMultiple', numberPrinters);
     }
   }
 
@@ -197,12 +194,8 @@ cr.define('local_discovery', function() {
    * @param {function()?} button_action Action for button.
    * @return {HTMLElement} The button (for enabling/disabling/rebinding)
    */
-  function fillDeviceDescription(device_dom_element,
-                                 name,
-                                 description,
-                                 type,
-                                 button_text,
-                                 button_action) {
+  function fillDeviceDescription(
+      device_dom_element, name, description, type, button_text, button_action) {
     device_dom_element.classList.add('device');
     if (isPrinter(type))
       device_dom_element.classList.add('printer');
@@ -268,7 +261,7 @@ cr.define('local_discovery', function() {
    */
   function onRegistrationFailed() {
     $('error-message').textContent =
-      loadTimeData.getString('addingErrorMessage');
+        loadTimeData.getString('addingErrorMessage');
     setRegisterPage('register-page-error');
     recordUmaEvent(DEVICES_PAGE_EVENTS.REGISTER_FAILURE);
   }
@@ -278,7 +271,7 @@ cr.define('local_discovery', function() {
    */
   function onRegistrationCanceledPrinter() {
     $('error-message').textContent =
-      loadTimeData.getString('addingCanceledMessage');
+        loadTimeData.getString('addingCanceledMessage');
     setRegisterPage('register-page-error');
     recordUmaEvent(DEVICES_PAGE_EVENTS.REGISTER_CANCEL_ON_PRINTER);
   }
@@ -288,7 +281,7 @@ cr.define('local_discovery', function() {
    */
   function onRegistrationTimeout() {
     $('error-message').textContent =
-      loadTimeData.getString('addingTimeoutMessage');
+        loadTimeData.getString('addingTimeoutMessage');
     setRegisterPage('register-page-error');
     recordUmaEvent(DEVICES_PAGE_EVENTS.REGISTER_TIMEOUT);
   }
@@ -356,11 +349,11 @@ cr.define('local_discovery', function() {
       description = device.description;
     }
 
-    fillDeviceDescription(devicesDomElement, device.display_name,
-                          description, device.type,
-                          loadTimeData.getString('manageDevice'),
-                          isPrinter(device.type) ?
-                              manageCloudDevice.bind(null, device.id) : null);
+    fillDeviceDescription(
+        devicesDomElement, device.display_name, description, device.type,
+        loadTimeData.getString('manageDevice'),
+        isPrinter(device.type) ? manageCloudDevice.bind(null, device.id) :
+                                 null);
     return devicesDomElement;
   }
 
@@ -413,15 +406,14 @@ cr.define('local_discovery', function() {
       $('register-login-promo').hidden = true;
     } else {
       $('no-printers-message').hidden = true;
-      $('register-login-promo').hidden = isUserLoggedIn ||
-        isUserSupervisedOrOffTheRecord;
+      $('register-login-promo').hidden =
+          isUserLoggedIn || isUserSupervisedOrOffTheRecord;
     }
     if (!($('register-login-promo').hidden) ||
-      !($('cloud-devices-login-promo').hidden) ||
-      !($('register-overlay-login-promo').hidden)) {
+        !($('cloud-devices-login-promo').hidden) ||
+        !($('register-overlay-login-promo').hidden)) {
       chrome.send(
-        'metricsHandler:recordAction',
-        ['Signin_Impression_FromDevicesPage']);
+          'metricsHandler:recordAction', ['Signin_Impression_FromDevicesPage']);
     }
   }
 
@@ -484,13 +476,14 @@ cr.define('local_discovery', function() {
   }
 
   /**
-  * Record an event in the UMA histogram.
-  * @param {number} eventId The id of the event to be recorded.
-  * @private
-  */
+   * Record an event in the UMA histogram.
+   * @param {number} eventId The id of the event to be recorded.
+   * @private
+   */
   function recordUmaEvent(eventId) {
-    chrome.send('metricsHandler:recordInHistogram',
-      ['LocalDiscovery.DevicesPage', eventId, DEVICES_PAGE_EVENTS.MAX_EVENT]);
+    chrome.send(
+        'metricsHandler:recordInHistogram',
+        ['LocalDiscovery.DevicesPage', eventId, DEVICES_PAGE_EVENTS.MAX_EVENT]);
   }
 
   /**
@@ -524,12 +517,12 @@ cr.define('local_discovery', function() {
     isUserLoggedIn = userLoggedIn;
     isUserSupervisedOrOffTheRecord = userSupervisedOrOffTheRecord;
 
-    $('cloud-devices-login-promo').hidden = isUserLoggedIn ||
-      isUserSupervisedOrOffTheRecord;
-    $('register-overlay-login-promo').hidden = isUserLoggedIn ||
-      isUserSupervisedOrOffTheRecord;
-    $('register-continue-button').disabled = !isUserLoggedIn ||
-      isUserSupervisedOrOffTheRecord;
+    $('cloud-devices-login-promo').hidden =
+        isUserLoggedIn || isUserSupervisedOrOffTheRecord;
+    $('register-overlay-login-promo').hidden =
+        isUserLoggedIn || isUserSupervisedOrOffTheRecord;
+    $('register-continue-button').disabled =
+        !isUserLoggedIn || isUserSupervisedOrOffTheRecord;
 
     $('my-devices-container').hidden = userSupervisedOrOffTheRecord;
 
@@ -565,7 +558,7 @@ cr.define('local_discovery', function() {
 
   function registerOverlayLoginButtonClicked() {
     recordUmaEvent(
-      DEVICES_PAGE_EVENTS.LOG_IN_STARTED_FROM_REGISTER_OVERLAY_PROMO);
+        DEVICES_PAGE_EVENTS.LOG_IN_STARTED_FROM_REGISTER_OVERLAY_PROMO);
     openSignInPage();
   }
 
@@ -583,10 +576,10 @@ cr.define('local_discovery', function() {
       $('cloudPrintConnectorLabel').textContent = label;
       if (disabled || !allowed) {
         $('cloudPrintConnectorSetupButton').textContent =
-          loadTimeData.getString('cloudPrintConnectorDisabledButton');
+            loadTimeData.getString('cloudPrintConnectorDisabledButton');
       } else {
         $('cloudPrintConnectorSetupButton').textContent =
-          loadTimeData.getString('cloudPrintConnectorEnabledButton');
+            loadTimeData.getString('cloudPrintConnectorEnabledButton');
       }
       $('cloudPrintConnectorSetupButton').disabled = !allowed;
 
@@ -594,7 +587,7 @@ cr.define('local_discovery', function() {
         $('cloudPrintConnectorSetupButton').onclick = function(event) {
           // Disable the button, set its text to the intermediate state.
           $('cloudPrintConnectorSetupButton').textContent =
-            loadTimeData.getString('cloudPrintConnectorEnablingButton');
+              loadTimeData.getString('cloudPrintConnectorEnablingButton');
           $('cloudPrintConnectorSetupButton').disabled = true;
           chrome.send('showCloudPrintSetupDialog');
         };
@@ -629,31 +622,28 @@ cr.define('local_discovery', function() {
 
     [].forEach.call(
         document.querySelectorAll('.register-cancel'), function(button) {
-      button.addEventListener('click', cancelRegistration);
-    });
+          button.addEventListener('click', cancelRegistration);
+        });
 
     [].forEach.call(
         document.querySelectorAll('.confirm-code'), function(button) {
-      button.addEventListener('click', confirmCode);
-    });
+          button.addEventListener('click', confirmCode);
+        });
 
     $('register-error-exit').addEventListener('click', cancelRegistration);
 
 
-    $('cloud-devices-retry-link').addEventListener('click',
-                                                   retryLoadCloudDevices);
+    $('cloud-devices-retry-link')
+        .addEventListener('click', retryLoadCloudDevices);
 
-    $('cloud-devices-login-link').addEventListener(
-      'click',
-      cloudDevicesLoginButtonClicked);
+    $('cloud-devices-login-link')
+        .addEventListener('click', cloudDevicesLoginButtonClicked);
 
-    $('register-login-link').addEventListener(
-      'click',
-      registerLoginButtonClicked);
+    $('register-login-link')
+        .addEventListener('click', registerLoginButtonClicked);
 
-    $('register-overlay-login-button').addEventListener(
-      'click',
-      registerOverlayLoginButtonClicked);
+    $('register-overlay-login-button')
+        .addEventListener('click', registerOverlayLoginButtonClicked);
 
     if (loadTimeData.valueExists('backButtonURL')) {
       $('back-link').hidden = false;
diff --git a/chromium/chrome/browser/resources/local_ntp/instant_iframe_validation.js b/chromium/chrome/browser/resources/local_ntp/instant_iframe_validation.js
index 822350da69c..a557dc6a9c8 100644
--- a/chromium/chrome/browser/resources/local_ntp/instant_iframe_validation.js
+++ b/chromium/chrome/browser/resources/local_ntp/instant_iframe_validation.js
@@ -16,8 +16,8 @@
 function convertToHexColor(color) {
   // Color must be a number, finite, with no fractional part, in the correct
   // range for an RGB hex color.
-  if (isFinite(color) && Math.floor(color) == color &&
-      color >= 0 && color <= 0xffffff) {
+  if (isFinite(color) && Math.floor(color) == color && color >= 0 &&
+      color <= 0xffffff) {
     var hexColor = color.toString(16);
     // Pads with initial zeros and # (e.g. for 'ff' yields '#0000ff').
     return '#000000'.substr(0, 7 - hexColor.length) + hexColor;
@@ -48,11 +48,8 @@ function convertArrayToRGBAColor(rgbaColor) {
       isValidRBGAComponent(rgbaColor[1]) &&
       isValidRBGAComponent(rgbaColor[2]) &&
       isValidRBGAComponent(rgbaColor[3])) {
-    return 'rgba(' +
-            rgbaColor[0] + ',' +
-            rgbaColor[1] + ',' +
-            rgbaColor[2] + ',' +
-            rgbaColor[3] / 255 + ')';
+    return 'rgba(' + rgbaColor[0] + ',' + rgbaColor[1] + ',' + rgbaColor[2] +
+        ',' + rgbaColor[3] / 255 + ')';
   }
   return null;
 }
diff --git a/chromium/chrome/browser/resources/local_ntp/local_ntp.css b/chromium/chrome/browser/resources/local_ntp/local_ntp.css
index 6c53cac2120..1fa5dbe99ec 100644
--- a/chromium/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chromium/chrome/browser/resources/local_ntp/local_ntp.css
@@ -51,33 +51,27 @@ body.alternate-logo #logo {
 
 #fakebox {
   background-color: #fff;
-  border: 1px solid rgb(185, 185, 185);
-  border-radius: 1px;
-  border-top-color: rgb(160, 160, 160);
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
   cursor: text;
   font-size: 18px;
-  height: 36px;
+  height: 44px;
   line-height: 36px;
   max-width: 672px;
+  outline: none;
   position: relative;
-  transform: translate3d(0, 0, 0);
-  transition: transform 100ms linear, border-color 100ms linear;
-  /* #fakebox width (here and below) should be 2px less than #mv-tiles
-     to account for its border. */
-  width: 298px;
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* #fakebox width is set dynamically from JS. */
+  width: 300px;
 }
 
 .non-google-page #fakebox {
   display: none;
 }
 
-#fakebox:hover {
-  border: 1px solid rgb(169, 169, 169);
-  border-top-color: rgb(144, 144, 144);
-}
-
+#fakebox:hover,
 body.fakebox-focused #fakebox {
-  border: 1px solid rgb(77, 144, 254);
+  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 
 #fakebox > input {
@@ -99,18 +93,18 @@ html[dir=rtl] #fakebox > input {
 }
 
 #fakebox-text {
-  bottom: 0;
-  color: #bbb;
+  bottom: 4px;
+  color: rgba(0, 0, 0, 0.38);
   font-family: arial, sans-serif;
   font-size: 16px;
-  left: 9px;
+  left: 13px;
   margin-top: 1px;
   overflow: hidden;
   position: absolute;
-  right: 9px;
+  right: 13px;
   text-align: initial;
   text-overflow: ellipsis;
-  top: 0;
+  top: 4px;
   vertical-align: middle;
   visibility: inherit;
   white-space: nowrap;
@@ -118,22 +112,22 @@ html[dir=rtl] #fakebox > input {
 
 html[dir=rtl] #fakebox-text {
   left: auto;
-  right: 9px;
+  right: 13px;
 }
 
 #cursor {
   background: #333;
-  bottom: 5px;
-  left: 9px;
+  bottom: 12px;
+  left: 13px;
   position: absolute;
-  top: 5px;
+  top: 12px;
   visibility: hidden;
   width: 1px;
 }
 
 html[dir=rtl] #cursor {
   left: auto;
-  right: 9px;
+  right: 13px;
 }
 
 @keyframes blink {
@@ -171,9 +165,10 @@ body.fakebox-focused #cursor {
 }
 
 #mv-tiles {
-  /* We need a 16px margin and the tiles have 130px height. */
-  height: calc(2*130px + 16px);
-  line-height: calc(130px + 16px);
+  /* Two rows of tiles of 128px each, 16px of spacing between the rows, and
+   * 4px/8px of margin on top and bottom respectively. If you change this, also
+   * change the corresponding values in most_visited_single.css. */
+  height: calc(2*128px + 16px + 4px + 8px);
   margin: 0;
   position: relative;
   text-align: -webkit-auto;
diff --git a/chromium/chrome/browser/resources/local_ntp/local_ntp.html b/chromium/chrome/browser/resources/local_ntp/local_ntp.html
index 1ea6c0bdbce..8ca3d298743 100644
--- a/chromium/chrome/browser/resources/local_ntp/local_ntp.html
+++ b/chromium/chrome/browser/resources/local_ntp/local_ntp.html
@@ -7,9 +7,9 @@
   <link rel="stylesheet" href="chrome-search://local-ntp/theme.css"></link>
   <link rel="stylesheet" href="chrome-search://local-ntp/local-ntp.css"></link>
   <script src="chrome-search://local-ntp/config.js"
-      integrity="{{CONFIG_INTEGRITY}}"></script>
+      {{CONFIG_INTEGRITY}}></script>
   <script src="chrome-search://local-ntp/local-ntp.js"
-      integrity="sha256-yAvSu2Dl9rlQTpQn8P1hcE5GUFQVGbuCMHypwtN6uDg="></script>
+      {{LOCAL_NTP_INTEGRITY}}></script>
   <meta charset="utf-8">
   <meta name="google" value="notranslate">
 </head>
diff --git a/chromium/chrome/browser/resources/local_ntp/local_ntp.js b/chromium/chrome/browser/resources/local_ntp/local_ntp.js
index ec10dfc5e3d..3d0970971bb 100644
--- a/chromium/chrome/browser/resources/local_ntp/local_ntp.js
+++ b/chromium/chrome/browser/resources/local_ntp/local_ntp.js
@@ -3,10 +3,6 @@
 // found in the LICENSE file.
 
 
-// NOTE: If you modify this file, you also have to change its hash in
-// local_ntp.html and in LocalNtpSource::GetContentSecurityPolicyScriptSrc.
-
-
 /**
  * @fileoverview The local InstantExtended NTP.
  */
@@ -26,6 +22,7 @@ function LocalNTP() {
  * @return {HTMLElement} The found element or null if not found.
  */
 function $(id) {
+  // eslint-disable-next-line no-restricted-properties
   return document.getElementById(id);
 }
 
@@ -230,37 +227,27 @@ function onThemeChange() {
 
 /**
  * Updates the NTP style according to theme.
- * @param {Object=} opt_themeInfo The information about the theme. If it is
- * omitted the style will be reverted to the default.
+ * @param {Object} themeInfo The information about the theme.
  * @private
  */
-// TODO(treib): We actually never call this without a themeInfo. Should we?
-function setCustomThemeStyle(opt_themeInfo) {
+function setCustomThemeStyle(themeInfo) {
   var customStyleElement = $(IDS.CUSTOM_THEME_STYLE);
   var head = document.head;
-  if (opt_themeInfo && !opt_themeInfo.usingDefaultTheme) {
+  if (!themeInfo.usingDefaultTheme) {
     $(IDS.NTP_CONTENTS).classList.remove(CLASSES.DEFAULT_THEME);
     var themeStyle =
       '#attribution {' +
-      '  color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' +
+      '  color: ' + convertToRGBAColor(themeInfo.textColorLightRgba) + ';' +
       '}' +
       '#mv-msg {' +
-      '  color: ' + convertToRGBAColor(opt_themeInfo.textColorRgba) + ';' +
+      '  color: ' + convertToRGBAColor(themeInfo.textColorRgba) + ';' +
       '}' +
       '#mv-notice-links span {' +
-      '  color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' +
+      '  color: ' + convertToRGBAColor(themeInfo.textColorLightRgba) + ';' +
       '}' +
       '#mv-notice-x {' +
       '  -webkit-filter: drop-shadow(0 0 0 ' +
-          convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' +
-      '}' +
-      '.mv-page-ready .mv-mask {' +
-      '  border: 1px solid ' +
-          convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' +
-      '}' +
-      '.mv-page-ready:hover .mv-mask, .mv-page-ready .mv-focused ~ .mv-mask {' +
-      '  border-color: ' +
-          convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' +
+          convertToRGBAColor(themeInfo.textColorRgba) + ');' +
       '}';
 
     if (customStyleElement) {
@@ -637,7 +624,7 @@ function init() {
     document.body.appendChild(ogScript);
     ogScript.onload = function() {
       injectOneGoogleBar(og.html, og.end_of_body_html);
-    }
+    };
   } else {
     document.body.classList.add(CLASSES.NON_GOOGLE_PAGE);
   }
@@ -717,9 +704,9 @@ function injectOneGoogleBar(barHtml, endOfBodyHtml) {
         endOfBodyScript.src =
             'chrome-search://local-ntp/one-google/end-of-body.js';
         document.body.appendChild(endOfBodyScript);
-      }
-    }
-  }
+      };
+    };
+  };
 }
 
 
diff --git a/chromium/chrome/browser/resources/local_ntp/most_visited_single.css b/chromium/chrome/browser/resources/local_ntp/most_visited_single.css
index 48bcc7f59fe..85b8c3d7db4 100644
--- a/chromium/chrome/browser/resources/local_ntp/most_visited_single.css
+++ b/chromium/chrome/browser/resources/local_ntp/most_visited_single.css
@@ -33,9 +33,12 @@ a:visited {
 .mv-tiles-old {
   -webkit-user-select: none;
   font-size: 0;
-  height: calc(146px + 130px);
-  line-height: 146px;
-  margin: 0;
+  /* Two rows of tiles of 128px each, and 16px of spacing between the rows.
+   * If you change this, also change the corresponding values in
+   * local_ntp.css. */
+  height: calc(2*128px + 16px);
+  line-height: calc(128px + 16px);
+  margin: 4px 0 8px 0;
   opacity: 0;
   position: absolute;
   /* This align correctly for both LTR and RTL */
@@ -45,23 +48,28 @@ a:visited {
 
 .mv-tile,
 .mv-empty-tile {
-  background: rgb(242,242,242);
-  border: 1px solid transparent;
   border-radius: 2px;
   box-sizing: border-box;
   display: inline-block;
   font-family: arial, sans-serif;
   font-size: 12px;
-  height: calc(130px - 2px);
+  height: 128px;
   line-height: 100%;
   margin: 0 8px;
   opacity: 1;
-  outline: 0;
   overflow: hidden;
   position: relative;
   vertical-align: top;
   white-space: nowrap;
-  width: calc(156px - 2px);
+  width: 154px;
+}
+
+.mv-tile {
+  background: rgb(250,250,250);
+}
+
+.mv-empty-tile {
+  background: rgb(245,245,245);
 }
 
 .mv-tile.hidden,
@@ -70,49 +78,42 @@ a:visited {
 }
 
 .mv-tile {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
   cursor: pointer;
   transition-duration: 200ms;
-  transition-property: transform, border, box-shadow, margin, opacity, width;
+  transition-property: transform, box-shadow, margin, opacity, width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.mv-tile:focus:not(:hover) {
-  -webkit-filter: brightness(75%);
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
+.mv-tile:hover:not(:active) {
+  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
 }
 
-.mv-tile.blacklisted {
-  border: none !important;
-  margin: 0;
-  transform: scale(0, 0);
-  width: 0;
+.mv-tile:focus {
+  -webkit-filter: brightness(92%);
 }
 
-.mv-tile:hover {
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
+.mv-tile:active {
+  -webkit-filter: brightness(88%);
+  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.12);
 }
 
-.mv-tile.mv-blacklist {
-  margin-left: 0;
-  margin-right: 0;
-  opacity: 0;
+.mv-tile.blacklisted {
+  margin: 0;
   transform: scale(0, 0);
-  transform-origin: 0 41px;
   width: 0;
 }
 
 .mv-title {
-  -webkit-mask-image:
-    linear-gradient(to right, #000, #000, 100px, transparent);
-  border: none;
   height: 15px;
   left: 31px;
   line-height: 14px;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  text-overflow: clip;
-  top: 8px;
-  width: calc(156px - 32px - 4px);
+  text-overflow: ellipsis;
+  top: 9px;
+  width: 120px;
 }
 
 .mv-title.multiline {
@@ -141,16 +142,13 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
 }
 
 .mv-thumb {
-  border: none;
-  border-radius: 0;
   cursor: pointer;
   display: block;
-  height: 94px;
-  left: 3px;
+  height: 96px;
   overflow: hidden;
   position: absolute;
-  top: 31px;
-  width: 148px;
+  top: 32px;
+  width: 154px;
 }
 
 .mv-thumb img {
@@ -160,15 +158,13 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
 }
 
 .mv-thumb.failed-img {
-  background-color: #fff;
-  height: 94px;
-  width: 148px;
+  background-color: rgb(245,245,245);
 }
 
 /* We use ::after without content to provide an aditional element on top of the
  * thumbnail. */
 .mv-thumb.failed-img::after {
-  border: 8px solid #f2f2f2;
+  border: 8px solid rgb(215,215,215);
   border-radius: 50%;
   content: '';
   display: block;
@@ -178,7 +174,7 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
 }
 
 .mv-x {
-  background: linear-gradient(to left, rgb(242,242,242) 60%, transparent);
+  background: linear-gradient(to left, rgb(250,250,250) 60%, transparent);
   border: none;
   cursor: pointer;
   height: 30px;
@@ -208,7 +204,7 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
 }
 
 html[dir=rtl] .mv-x {
-  background: linear-gradient(to right, rgb(242,242,242) 60%, transparent);
+  background: linear-gradient(to right, rgb(250,250,250) 60%, transparent);
   left: -1px;
   right: auto;
 }
@@ -242,7 +238,7 @@ html[dir=rtl] .mv-x::after {
   margin: 0;
   pointer-events: none;
   position: absolute;
-  top: 7px;
+  top: 8px;
   width: 16px;
 }
 
diff --git a/chromium/chrome/browser/resources/local_ntp/most_visited_single.js b/chromium/chrome/browser/resources/local_ntp/most_visited_single.js
index 55f3df4ef35..212538cfcc6 100644
--- a/chromium/chrome/browser/resources/local_ntp/most_visited_single.js
+++ b/chromium/chrome/browser/resources/local_ntp/most_visited_single.js
@@ -2,7 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
- // Single iframe for NTP tiles.
+// Single iframe for NTP tiles.
 (function() {
 'use strict';
 
@@ -117,9 +117,8 @@ var logEvent = function(eventType) {
  * @param {number} tileType The type from TileVisualType.
  */
 function logMostVisitedImpression(tileIndex, tileSource, tileType) {
-  chrome.embeddedSearch.newTabPage.logMostVisitedImpression(tileIndex,
-                                                            tileSource,
-                                                            tileType);
+  chrome.embeddedSearch.newTabPage.logMostVisitedImpression(
+      tileIndex, tileSource, tileType);
 }
 
 /**
@@ -129,9 +128,8 @@ function logMostVisitedImpression(tileIndex, tileSource, tileType) {
  * @param {number} tileType The type from TileVisualType.
  */
 function logMostVisitedNavigation(tileIndex, tileSource, tileType) {
-  chrome.embeddedSearch.newTabPage.logMostVisitedNavigation(tileIndex,
-                                                            tileSource,
-                                                            tileType);
+  chrome.embeddedSearch.newTabPage.logMostVisitedNavigation(
+      tileIndex, tileSource, tileType);
 }
 
 /**
@@ -196,7 +194,7 @@ var showTiles = function(info) {
   logEvent(LOG_TYPE.NTP_ALL_TILES_RECEIVED);
   countLoad();
   hideOverflowTiles(info);
-}
+};
 
 
 /**
@@ -206,32 +204,32 @@ var showTiles = function(info) {
 var updateTheme = function(info) {
   var themeStyle = [];
 
-  if (info.tileBorderColor) {
-    themeStyle.push('.mv-tile {' +
-        'border: 1px solid ' + info.tileBorderColor + '; }');
-  }
-  if (info.tileHoverBorderColor) {
-    themeStyle.push('.mv-tile:hover {' +
-        'border-color: ' + info.tileHoverBorderColor + '; }');
-  }
   if (info.isThemeDark) {
-    themeStyle.push('.mv-tile, .mv-empty-tile { ' +
+    themeStyle.push(
+        '.mv-tile, .mv-empty-tile { ' +
         'background: rgb(51,51,51); }');
-    themeStyle.push('.mv-thumb.failed-img { ' +
+    themeStyle.push(
+        '.mv-thumb.failed-img { ' +
         'background-color: #555; }');
-    themeStyle.push('.mv-thumb.failed-img::after { ' +
+    themeStyle.push(
+        '.mv-thumb.failed-img::after { ' +
         'border-color: #333; }');
-    themeStyle.push('.mv-x { ' +
+    themeStyle.push(
+        '.mv-x { ' +
         'background: linear-gradient(to left, ' +
         'rgb(51,51,51) 60%, transparent); }');
-    themeStyle.push('html[dir=rtl] .mv-x { ' +
+    themeStyle.push(
+        'html[dir=rtl] .mv-x { ' +
         'background: linear-gradient(to right, ' +
         'rgb(51,51,51) 60%, transparent); }');
-    themeStyle.push('.mv-x::after { ' +
+    themeStyle.push(
+        '.mv-x::after { ' +
         'background-color: rgba(255,255,255,0.7); }');
-    themeStyle.push('.mv-x:hover::after { ' +
+    themeStyle.push(
+        '.mv-x:hover::after { ' +
         'background-color: #fff; }');
-    themeStyle.push('.mv-x:active::after { ' +
+    themeStyle.push(
+        '.mv-x:active::after { ' +
         'background-color: rgba(255,255,255,0.5); }');
   }
   if (info.tileTitleColor) {
@@ -247,8 +245,8 @@ var updateTheme = function(info) {
  * and 'tilesVisible' messages from the host page.
  */
 var hideOverflowTiles = function(data) {
-  var tileAndEmptyTileList = document.querySelectorAll(
-      '#mv-tiles .mv-tile,#mv-tiles .mv-empty-tile');
+  var tileAndEmptyTileList =
+      document.querySelectorAll('#mv-tiles .mv-tile,#mv-tiles .mv-empty-tile');
   for (var i = 0; i < tileAndEmptyTileList.length; ++i) {
     tileAndEmptyTileList[i].classList.toggle('hidden', i >= data.maxVisible);
   }
@@ -358,11 +356,12 @@ var addTile = function(args) {
 var blacklistTile = function(tile) {
   tile.classList.add('blacklisted');
   tile.addEventListener('transitionend', function(ev) {
-    if (ev.propertyName != 'width') return;
+    if (ev.propertyName != 'width')
+      return;
 
-    window.parent.postMessage({cmd: 'tileBlacklisted',
-                               tid: Number(tile.getAttribute('data-tid'))},
-                              DOMAIN_ORIGIN);
+    window.parent.postMessage(
+        {cmd: 'tileBlacklisted', tid: Number(tile.getAttribute('data-tid'))},
+        DOMAIN_ORIGIN);
   });
 };
 
@@ -373,7 +372,7 @@ var blacklistTile = function(tile) {
  */
 var isSchemeAllowed = function(url) {
   return url.startsWith('http://') || url.startsWith('https://') ||
-         url.startsWith('ftp://') || url.startsWith('chrome-extension://');
+      url.startsWith('ftp://') || url.startsWith('chrome-extension://');
 };
 
 
@@ -421,8 +420,8 @@ var renderTile = function(data) {
       event.preventDefault();
       event.stopPropagation();
       blacklistTile(this);
-    } else if (event.keyCode == 13 /* ENTER */ ||
-               event.keyCode == 32 /* SPACE */) {
+    } else if (
+        event.keyCode == 13 /* ENTER */ || event.keyCode == 32 /* SPACE */) {
       event.preventDefault();
       this.click();
     } else if (event.keyCode >= 37 && event.keyCode <= 40 /* ARROWS */) {
@@ -431,15 +430,15 @@ var renderTile = function(data) {
         return (event.keyCode == 37 /* LEFT */ &&
                 origin.offsetTop == target.offsetTop &&
                 origin.offsetLeft > target.offsetLeft) ||
-                (event.keyCode == 38 /* UP */ &&
-                origin.offsetTop > target.offsetTop &&
-                origin.offsetLeft == target.offsetLeft) ||
-                (event.keyCode == 39 /* RIGHT */ &&
-                origin.offsetTop == target.offsetTop &&
-                origin.offsetLeft < target.offsetLeft) ||
-                (event.keyCode == 40 /* DOWN */ &&
-                origin.offsetTop < target.offsetTop &&
-                origin.offsetLeft == target.offsetLeft);
+            (event.keyCode == 38 /* UP */ &&
+             origin.offsetTop > target.offsetTop &&
+             origin.offsetLeft == target.offsetLeft) ||
+            (event.keyCode == 39 /* RIGHT */ &&
+             origin.offsetTop == target.offsetTop &&
+             origin.offsetLeft < target.offsetLeft) ||
+            (event.keyCode == 40 /* DOWN */ &&
+             origin.offsetTop < target.offsetTop &&
+             origin.offsetLeft == target.offsetLeft);
       };
 
       var nonEmptyTiles = document.querySelectorAll('#mv-tiles .mv-tile');
@@ -533,7 +532,8 @@ var init = function() {
   queryArgs = {};
   for (var i = 0; i < query.length; ++i) {
     var val = query[i].split('=');
-    if (val[0] == '') continue;
+    if (val[0] == '')
+      continue;
     queryArgs[decodeURIComponent(val[0])] = decodeURIComponent(val[1]);
   }
 
diff --git a/chromium/chrome/browser/resources/local_ntp/most_visited_title.js b/chromium/chrome/browser/resources/local_ntp/most_visited_title.js
index 7729c1cd04e..f25e46d5eed 100644
--- a/chromium/chrome/browser/resources/local_ntp/most_visited_title.js
+++ b/chromium/chrome/browser/resources/local_ntp/most_visited_title.js
@@ -11,8 +11,7 @@ window.addEventListener('DOMContentLoaded', function() {
   'use strict';
 
   fillMostVisited(window.location, function(params, data) {
-    document.body.appendChild(
-        createMostVisitedLink(
-            params, data.url, data.title, data.title, data.direction));
+    document.body.appendChild(createMostVisitedLink(
+        params, data.url, data.title, data.title, data.direction));
   });
 });
diff --git a/chromium/chrome/browser/resources/local_ntp/most_visited_util.js b/chromium/chrome/browser/resources/local_ntp/most_visited_util.js
index d7dc58d868b..63a6f03056f 100644
--- a/chromium/chrome/browser/resources/local_ntp/most_visited_util.js
+++ b/chromium/chrome/browser/resources/local_ntp/most_visited_util.js
@@ -12,13 +12,13 @@
 
 
 /**
-  * The different types of events that are logged from the NTP. The multi-iframe
-  * version of the NTP does *not* actually log any statistics anymore; this is
-  * only required as a workaround for crbug.com/698675.
-  * Note: Keep in sync with common/ntp_logging_events.h
-  * @enum {number}
-  * @const
-  */
+ * The different types of events that are logged from the NTP. The multi-iframe
+ * version of the NTP does *not* actually log any statistics anymore; this is
+ * only required as a workaround for crbug.com/698675.
+ * Note: Keep in sync with common/ntp_logging_events.h
+ * @enum {number}
+ * @const
+ */
 var NTP_LOGGING_EVENT_TYPE = {
   NTP_ALL_TILES_RECEIVED: 12,
 };
@@ -121,8 +121,8 @@ function createMostVisitedLink(params, href, title, text, direction) {
         event.keyCode == 8 /* BACKSPACE */) {
       event.preventDefault();
       window.parent.postMessage('tileBlacklisted,' + params.pos, DOMAIN_ORIGIN);
-    } else if (event.keyCode == 13 /* ENTER */ ||
-               event.keyCode == 32 /* SPACE */) {
+    } else if (
+        event.keyCode == 13 /* ENTER */ || event.keyCode == 32 /* SPACE */) {
       // Event target is the <a> tag. Send a click event on it, which will
       // trigger the 'click' event registered above.
       event.preventDefault();
@@ -239,8 +239,7 @@ function fillMostVisited(location, fill) {
   if (isFinite(params.dummy) && parseInt(params.dummy, 10)) {
     data.dummy = true;
   }
-  if (/^javascript:/i.test(data.url) ||
-      /^javascript:/i.test(data.thumbnailUrl))
+  if (/^javascript:/i.test(data.url) || /^javascript:/i.test(data.thumbnailUrl))
     return;
   if (data.direction)
     document.body.dir = data.direction;
diff --git a/chromium/chrome/browser/resources/local_state/local_state.js b/chromium/chrome/browser/resources/local_state/local_state.js
index 3011af54f9d..76656ac47d4 100644
--- a/chromium/chrome/browser/resources/local_state/local_state.js
+++ b/chromium/chrome/browser/resources/local_state/local_state.js
@@ -20,9 +20,7 @@ cr.define('localState', function() {
     $('content').textContent = localState;
   }
 
-  return {
-    setLocalState: setLocalState
-  };
+  return {setLocalState: setLocalState};
 });
 
 // When the page loads, request the JSON local state data from C++.
diff --git a/chromium/chrome/browser/resources/md_bookmarks/BUILD.gn b/chromium/chrome/browser/resources/md_bookmarks/BUILD.gn
new file mode 100644
index 00000000000..eea759d729c
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/BUILD.gn
@@ -0,0 +1,22 @@
+import("../vulcanize.gni")
+
+vulcanized_unbuilt = "vulcanized.unbuilt.html"
+
+vulcanize("vulcanize") {
+  host = "bookmarks"
+  html_in_file = "bookmarks.html"
+  html_out_file = vulcanized_unbuilt
+
+  input = rebase_path(".", root_build_dir)
+  js_out_file = "crisper.js"
+
+  deps = []
+}
+
+polymer_css_build("build") {
+  input_files = [ vulcanized_unbuilt ]
+  output_files = [ "vulcanized.html" ]
+  deps = [
+    ":vulcanize",
+  ]
+}
diff --git a/chromium/chrome/browser/resources/md_bookmarks/OWNERS b/chromium/chrome/browser/resources/md_bookmarks/OWNERS
index d0663e00c74..b02ce2c777a 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/OWNERS
+++ b/chromium/chrome/browser/resources/md_bookmarks/OWNERS
@@ -1,5 +1,4 @@
 calamity@chromium.org
-dbeam@chromium.org
 tsergeant@chromium.org
 
 # COMPONENT: UI>Browser>Bookmarks
diff --git a/chromium/chrome/browser/resources/md_bookmarks/PRESUBMIT.py b/chromium/chrome/browser/resources/md_bookmarks/PRESUBMIT.py
deleted file mode 100644
index 1b816b291d3..00000000000
--- a/chromium/chrome/browser/resources/md_bookmarks/PRESUBMIT.py
+++ /dev/null
@@ -1,7 +0,0 @@
-# Copyright 2017 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.
-
-def CheckChangeOnUpload(input_api, output_api):
-  return input_api.canned_checks.CheckPatchFormatted(
-      input_api, output_api, check_js=True)
diff --git a/chromium/chrome/browser/resources/md_bookmarks/actions.js b/chromium/chrome/browser/resources/md_bookmarks/actions.js
index f13c4510711..79807522fb5 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/actions.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/actions.js
@@ -241,6 +241,29 @@ cr.define('bookmarks.actions', function() {
     };
   }
 
+  /**
+   * @param {IncognitoAvailability} availability
+   * @return {!Action}
+   */
+  function setIncognitoAvailability(availability) {
+    assert(availability != IncognitoAvailability.FORCED);
+    return {
+      name: 'set-incognito-availability',
+      value: availability,
+    };
+  }
+
+  /**
+   * @param {boolean} canEdit
+   * @return {!Action}
+   */
+  function setCanEditBookmarks(canEdit) {
+    return {
+      name: 'set-can-edit',
+      value: canEdit,
+    };
+  }
+
   return {
     changeFolderOpen: changeFolderOpen,
     clearSearch: clearSearch,
@@ -254,6 +277,8 @@ cr.define('bookmarks.actions', function() {
     selectAll: selectAll,
     selectFolder: selectFolder,
     selectItem: selectItem,
+    setCanEditBookmarks: setCanEditBookmarks,
+    setIncognitoAvailability: setIncognitoAvailability,
     setSearchResults: setSearchResults,
     setSearchTerm: setSearchTerm,
     updateAnchor: updateAnchor,
diff --git a/chromium/chrome/browser/resources/md_bookmarks/api_listener.js b/chromium/chrome/browser/resources/md_bookmarks/api_listener.js
index 956345231af..1e8852cbe7d 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/api_listener.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/api_listener.js
@@ -8,6 +8,27 @@
  */
 
 cr.define('bookmarks.ApiListener', function() {
+
+  /** @type {?number} */
+  var timerHandle;
+
+  /**
+   * Batches UI updates so that no changes will be made to UI until the next
+   * task after the last call to this method. This is useful for listeners which
+   * can be called in a tight loop by UI actions.
+   */
+  function batchUIUpdates() {
+    if (timerHandle)
+      clearTimeout(timerHandle);
+    else
+      bookmarks.Store.getInstance().beginBatchUpdate();
+
+    timerHandle = setTimeout(function() {
+      bookmarks.Store.getInstance().endBatchUpdate();
+      timerHandle = null;
+    });
+  }
+
   /** @param {Action} action */
   function dispatch(action) {
     bookmarks.Store.getInstance().dispatch(action);
@@ -26,6 +47,7 @@ cr.define('bookmarks.ApiListener', function() {
    * @param {BookmarkTreeNode} treeNode
    */
   function onBookmarkCreated(id, treeNode) {
+    batchUIUpdates();
     dispatch(bookmarks.actions.createBookmark(id, treeNode));
   }
 
@@ -34,6 +56,7 @@ cr.define('bookmarks.ApiListener', function() {
    * @param {{parentId: string, index: number}} removeInfo
    */
   function onBookmarkRemoved(id, removeInfo) {
+    batchUIUpdates();
     var nodes = bookmarks.Store.getInstance().data.nodes;
     dispatch(bookmarks.actions.removeBookmark(
         id, removeInfo.parentId, removeInfo.index, nodes));
@@ -49,6 +72,7 @@ cr.define('bookmarks.ApiListener', function() {
    * }} moveInfo
    */
   function onBookmarkMoved(id, moveInfo) {
+    batchUIUpdates();
     dispatch(bookmarks.actions.moveBookmark(
         id, moveInfo.parentId, moveInfo.index, moveInfo.oldParentId,
         moveInfo.oldIndex));
@@ -78,6 +102,20 @@ cr.define('bookmarks.ApiListener', function() {
     chrome.bookmarks.onCreated.addListener(onBookmarkCreated);
   }
 
+  /**
+   * @param {IncognitoAvailability} availability
+   */
+  function onIncognitoAvailabilityChanged(availability) {
+    dispatch(bookmarks.actions.setIncognitoAvailability(availability));
+  }
+
+  /**
+   * @param {boolean} canEdit
+   */
+  function onCanEditBookmarksChanged(canEdit) {
+    dispatch(bookmarks.actions.setCanEditBookmarks(canEdit));
+  }
+
   function init() {
     chrome.bookmarks.onChanged.addListener(onBookmarkChanged);
     chrome.bookmarks.onChildrenReordered.addListener(onChildrenReordered);
@@ -86,6 +124,15 @@ cr.define('bookmarks.ApiListener', function() {
     chrome.bookmarks.onRemoved.addListener(onBookmarkRemoved);
     chrome.bookmarks.onImportBegan.addListener(onImportBegan);
     chrome.bookmarks.onImportEnded.addListener(onImportEnded);
+
+    cr.sendWithPromise('getIncognitoAvailability')
+        .then(onIncognitoAvailabilityChanged);
+    cr.addWebUIListener(
+        'incognito-availability-changed', onIncognitoAvailabilityChanged);
+
+    cr.sendWithPromise('getCanEditBookmarks').then(onCanEditBookmarksChanged);
+    cr.addWebUIListener(
+        'can-edit-bookmarks-changed', onCanEditBookmarksChanged);
   }
 
   return {
diff --git a/chromium/chrome/browser/resources/md_bookmarks/app.html b/chromium/chrome/browser/resources/md_bookmarks/app.html
index ce4aae3ba7f..88676c04b44 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/app.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/app.html
@@ -5,12 +5,14 @@
 <link rel="import" href="chrome://bookmarks/command_manager.html">
 <link rel="import" href="chrome://bookmarks/constants.html">
 <link rel="import" href="chrome://bookmarks/dnd_manager.html">
+<link rel="import" href="chrome://bookmarks/folder_node.html">
 <link rel="import" href="chrome://bookmarks/list.html">
+<link rel="import" href="chrome://bookmarks/mouse_focus_behavior.html">
 <link rel="import" href="chrome://bookmarks/router.html">
 <link rel="import" href="chrome://bookmarks/shared_vars.html">
 <link rel="import" href="chrome://bookmarks/store.html">
+<link rel="import" href="chrome://bookmarks/toast_manager.html">
 <link rel="import" href="chrome://bookmarks/toolbar.html">
-<link rel="import" href="chrome://bookmarks/folder_node.html">
 <link rel="import" href="chrome://bookmarks/util.html">
 
 <dom-module id="bookmarks-app">
@@ -33,7 +35,11 @@
 
       #splitter {
         box-sizing: border-box;
+        cursor: col-resize;
+<if expr="is_win">
+        /* Unlike other platforms, e-resize is a two-way arrow on Windows. */
         cursor: e-resize;
+</if>
         flex: 0 0 var(--splitter-width);
         opacity: 0;
       }
@@ -45,10 +51,6 @@
         transition: opacity 100ms ease-out;
       }
 
-      :host-context([dir='rtl']) #splitter {
-        cursor: w-resize;
-      }
-
       #sidebar {
         -webkit-padding-start: 3px;
         display: block;
@@ -68,7 +70,7 @@
     </style>
     <bookmarks-toolbar sidebar-width="[[sidebarWidth_]]"></bookmarks-toolbar>
     <div id="main-container">
-       <div id="sidebar">
+       <div id="sidebar" role="tree">
         <bookmarks-folder-node item-id="0" depth="-1"></bookmarks-folder-node>
       </div>
       <div id="splitter"></div>
@@ -76,6 +78,7 @@
     </div>
     <bookmarks-router></bookmarks-router>
     <bookmarks-command-manager></bookmarks-command-manager>
+    <bookmarks-toast-manager duration="5000"></bookmarks-toast-manager>
   </template>
   <script src="chrome://bookmarks/app.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/app.js b/chromium/chrome/browser/resources/md_bookmarks/app.js
index 7bc97e96699..24b2f1b2806 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/app.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/app.js
@@ -6,6 +6,7 @@ Polymer({
   is: 'bookmarks-app',
 
   behaviors: [
+    bookmarks.MouseFocusBehavior,
     bookmarks.StoreClient,
   ],
 
@@ -57,6 +58,12 @@ Polymer({
       bookmarks.Store.getInstance().init(initialState);
       bookmarks.ApiListener.init();
 
+      setTimeout(function() {
+        chrome.metricsPrivate.recordTime(
+            'BookmarkManager.ResultsRenderedTime',
+            Math.floor(window.performance.now()));
+      });
+
     }.bind(this));
 
     this.boundUpdateSidebarWidth_ = this.updateSidebarWidth_.bind(this);
@@ -115,6 +122,11 @@ Polymer({
         return node.id;
       });
       this.dispatch(bookmarks.actions.setSearchResults(ids));
+      this.fire('iron-announce', {
+        text: ids.length > 0 ?
+            loadTimeData.getStringF('searchResults', this.searchTerm_) :
+            loadTimeData.getString('noSearchResults')
+      });
     }.bind(this));
   },
 
diff --git a/chromium/chrome/browser/resources/md_bookmarks/bookmarks.html b/chromium/chrome/browser/resources/md_bookmarks/bookmarks.html
index 955f7fb2def..bc725be992e 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/bookmarks.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/bookmarks.html
@@ -5,19 +5,21 @@
   <title>$i18n{title}</title>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
-  <link rel="import" href="chrome://resources/html/load_time_data.html">
-  <script src="chrome://bookmarks/strings.js"></script>
-  <link rel="import" href="chrome://bookmarks/app.html">
   <style>
     html,
     body {
       background: var(--md-background-color);
       height: 100%;
       margin: 0;
+      overflow: hidden;
     }
   </style>
 </head>
 <body>
   <bookmarks-app></bookmarks-app>
+
+  <link rel="import" href="chrome://resources/html/load_time_data.html">
+  <script src="chrome://bookmarks/strings.js"></script>
+  <link rel="import" href="chrome://bookmarks/app.html">
 </body>
 </html>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/command_manager.html b/chromium/chrome/browser/resources/md_bookmarks/command_manager.html
index dff7845295c..728e5189d80 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/command_manager.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/command_manager.html
@@ -2,29 +2,68 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
+<link rel="import" href="chrome://resources/html/cr/ui/command.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="chrome://bookmarks/dialog_focus_manager.html">
 <link rel="import" href="chrome://bookmarks/edit_dialog.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
 <link rel="import" href="chrome://bookmarks/store_client.html">
 
 <dom-module id="bookmarks-command-manager">
   <template>
-    <style include="shared-style"></style>
-    <dialog is="cr-action-menu" id="dropdown" on-mousedown="onMenuMousedown_">
-      <template is="dom-repeat" items="[[menuCommands_]]" as="command">
-        <button class="dropdown-item"
-            command$="[[command]]"
-            hidden$="[[!isCommandVisible_(command, menuIds_)]]"
-            disabled$="[[!isCommandEnabled_(command, menuIds_)]]"
-            on-tap="onCommandClick_">
-          [[getCommandLabel_(command, menuIds_)]]
-        </button>
-        <hr hidden$="[[!showDividerAfter_(command)]]"></hr>
-      </template>
-    </dialog>
+    <style include="shared-style">
+      .label {
+        flex: 1;
+      }
+
+      .sublabel {
+        -webkit-margin-start: 8px;
+        color: var(--secondary-text-color);
+        text-align: end;
+        width: 3ch;
+      }
+
+      :host(:not([has-any-sublabel_])) .sublabel {
+        display: none;
+      }
+    </style>
+    <template is="cr-lazy-render" id="dropdown">
+      <dialog is="cr-action-menu" on-mousedown="onMenuMousedown_" role="menu">
+        <template is="dom-repeat" items="[[menuCommands_]]" as="command">
+          <button class="dropdown-item"
+              command$="[[command]]"
+              hidden$="[[!isCommandVisible_(command, menuIds_)]]"
+              disabled$="[[!isCommandEnabled_(command, menuIds_)]]"
+              on-click="onCommandClick_"
+              role="menuitem">
+            <span class="label">
+              [[getCommandLabel_(command, menuIds_)]]
+            </span>
+            <span class="sublabel">
+              [[getCommandSublabel_(command, menuIds_)]]
+            </span>
+          </button>
+          <hr hidden$="[[!showDividerAfter_(command, menuIds_)]]"></hr>
+        </template>
+      </dialog>
+    </template>
     <template is="cr-lazy-render" id="editDialog">
       <bookmarks-edit-dialog></bookmarks-edit-dialog>
     </template>
+    <template is="cr-lazy-render" id="openDialog">
+      <dialog is="cr-dialog">
+        <div class="title" slot="title">$i18n{openDialogTitle}</div>
+        <div class="body" slot="body"></div>
+        <div class="button-container" slot="button-container">
+          <paper-button class="cancel-button" on-tap="onOpenCancelTap_">
+            $i18n{cancel}
+          </paper-button>
+          <paper-button class="action-button" on-tap="onOpenConfirmTap_">
+            $i18n{openDialogConfirm}
+          </paper-button>
+        </div>
+      </dialog>
+    </template>
   </template>
   <script src="chrome://bookmarks/command_manager.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/command_manager.js b/chromium/chrome/browser/resources/md_bookmarks/command_manager.js
index 7dbf8d0761b..dee208efa92 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/command_manager.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/command_manager.js
@@ -22,7 +22,8 @@ cr.define('bookmarks', function() {
         value: function() {
           return [
             Command.EDIT,
-            Command.COPY,
+            Command.COPY_URL,
+            Command.SHOW_IN_FOLDER,
             Command.DELETE,
             // <hr>
             Command.OPEN_NEW_TAB,
@@ -32,64 +33,131 @@ cr.define('bookmarks', function() {
         },
       },
 
-      /** @type {Set<string>} */
-      menuIds_: Object,
+      /** @private {Set<string>} */
+      menuIds_: {
+        type: Object,
+        observer: 'onMenuIdsChanged_',
+      },
+
+      /** @private */
+      hasAnySublabel_: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
+      /** @private */
+      globalCanEdit_: Boolean,
     },
 
+    /** @private {?Function} */
+    confirmOpenCallback_: null,
+
     attached: function() {
       assert(CommandManager.instance_ == null);
       CommandManager.instance_ = this;
 
+      this.watch('globalCanEdit_', function(state) {
+        return state.prefs.canEdit;
+      });
+      this.updateFromStore();
+
       /** @private {function(!Event)} */
       this.boundOnOpenItemMenu_ = this.onOpenItemMenu_.bind(this);
       document.addEventListener('open-item-menu', this.boundOnOpenItemMenu_);
 
+      /** @private {function()} */
+      this.boundOnCommandUndo_ = function() {
+        this.handle(Command.UNDO, new Set());
+      }.bind(this);
+      document.addEventListener('command-undo', this.boundOnCommandUndo_);
+
       /** @private {function(!Event)} */
       this.boundOnKeydown_ = this.onKeydown_.bind(this);
       document.addEventListener('keydown', this.boundOnKeydown_);
 
-      /** @private {Object<Command, string>} */
+      /**
+       * Indicates where the context menu was opened from. Will be NONE if
+       * menu is not open, indicating that commands are from keyboard shortcuts
+       * or elsewhere in the UI.
+       * @private {MenuSource}
+       */
+      this.menuSource_ = MenuSource.NONE;
+
+      /** @private {Object<Command, cr.ui.KeyboardShortcutList>} */
       this.shortcuts_ = {};
-      this.shortcuts_[Command.EDIT] = cr.isMac ? 'enter' : 'f2';
-      this.shortcuts_[Command.COPY] = cr.isMac ? 'meta+c' : 'ctrl+c';
-      this.shortcuts_[Command.DELETE] =
-          cr.isMac ? 'delete backspace' : 'delete';
-      this.shortcuts_[Command.OPEN_NEW_TAB] =
-          cr.isMac ? 'meta+enter' : 'ctrl+enter';
-      this.shortcuts_[Command.OPEN_NEW_WINDOW] = 'shift+enter';
-      this.shortcuts_[Command.OPEN] = cr.isMac ? 'meta+down' : 'enter';
+
+      this.addShortcut_(Command.EDIT, 'F2', 'Enter');
+      this.addShortcut_(Command.DELETE, 'Delete', 'Delete Backspace');
+
+      this.addShortcut_(Command.OPEN, 'Enter', 'Meta|o');
+      this.addShortcut_(Command.OPEN_NEW_TAB, 'Ctrl|Enter', 'Meta|Enter');
+      this.addShortcut_(Command.OPEN_NEW_WINDOW, 'Shift|Enter');
+
+      this.addShortcut_(Command.UNDO, 'Ctrl|z', 'Meta|z');
+      this.addShortcut_(Command.REDO, 'Ctrl|y Ctrl|Shift|Z', 'Meta|Shift|Z');
+
+      this.addShortcut_(Command.SELECT_ALL, 'Ctrl|a', 'Meta|a');
+      this.addShortcut_(Command.DESELECT_ALL, 'Escape');
+
+      this.addShortcut_(Command.CUT, 'Ctrl|x', 'Meta|x');
+      this.addShortcut_(Command.COPY, 'Ctrl|c', 'Meta|c');
+      this.addShortcut_(Command.PASTE, 'Ctrl|v', 'Meta|v');
     },
 
     detached: function() {
       CommandManager.instance_ = null;
       document.removeEventListener('open-item-menu', this.boundOnOpenItemMenu_);
+      document.removeEventListener('command-undo', this.boundOnCommandUndo_);
       document.removeEventListener('keydown', this.boundOnKeydown_);
     },
 
     /**
      * Display the command context menu at (|x|, |y|) in window co-ordinates.
-     * Commands will execute on the currently selected items.
+     * Commands will execute on |items| if given, or on the currently selected
+     * items.
      * @param {number} x
      * @param {number} y
+     * @param {MenuSource} source
+     * @param {Set<string>=} items
      */
-    openCommandMenuAtPosition: function(x, y) {
-      this.menuIds_ = this.getState().selection.items;
-      /** @type {!CrActionMenuElement} */ (this.$.dropdown)
-          .showAtPosition({top: y, left: x});
+    openCommandMenuAtPosition: function(x, y, source, items) {
+      this.menuSource_ = source;
+      this.menuIds_ = items || this.getState().selection.items;
+
+      var dropdown =
+          /** @type {!CrActionMenuElement} */ (this.$.dropdown.get());
+      // Ensure that the menu is fully rendered before trying to position it.
+      Polymer.dom.flush();
+      bookmarks.DialogFocusManager.getInstance().showDialog(
+          dropdown, function() {
+            dropdown.showAtPosition({top: y, left: x});
+          });
     },
 
     /**
      * Display the command context menu positioned to cover the |target|
      * element. Commands will execute on the currently selected items.
      * @param {!Element} target
+     * @param {MenuSource} source
      */
-    openCommandMenuAtElement: function(target) {
+    openCommandMenuAtElement: function(target, source) {
+      this.menuSource_ = source;
       this.menuIds_ = this.getState().selection.items;
-      /** @type {!CrActionMenuElement} */ (this.$.dropdown).showAt(target);
+
+      var dropdown =
+          /** @type {!CrActionMenuElement} */ (this.$.dropdown.get());
+      // Ensure that the menu is fully rendered before trying to position it.
+      Polymer.dom.flush();
+      bookmarks.DialogFocusManager.getInstance().showDialog(
+          dropdown, function() {
+            dropdown.showAt(target);
+          });
     },
 
     closeCommandMenu: function() {
-      /** @type {!CrActionMenuElement} */ (this.$.dropdown).close();
+      this.menuIds_ = new Set();
+      this.menuSource_ = MenuSource.NONE;
+      /** @type {!CrActionMenuElement} */ (this.$.dropdown.get()).close();
     },
 
     ////////////////////////////////////////////////////////////////////////////
@@ -104,9 +172,26 @@ cr.define('bookmarks', function() {
      * @return {boolean}
      */
     canExecute: function(command, itemIds) {
+      var state = this.getState();
       switch (command) {
         case Command.OPEN:
           return itemIds.size > 0;
+        case Command.UNDO:
+        case Command.REDO:
+          return this.globalCanEdit_;
+        case Command.SELECT_ALL:
+        case Command.DESELECT_ALL:
+          return true;
+        case Command.COPY:
+          return itemIds.size > 0;
+        case Command.CUT:
+          return itemIds.size > 0 &&
+              !this.containsMatchingNode_(itemIds, function(node) {
+                return !bookmarks.util.canEditNode(state, node.id);
+              });
+        case Command.PASTE:
+          return state.search.term == '' &&
+              bookmarks.util.canReorderChildren(state, state.selectedFolder);
         default:
           return this.isCommandVisible_(command, itemIds) &&
               this.isCommandEnabled_(command, itemIds);
@@ -122,13 +207,17 @@ cr.define('bookmarks', function() {
     isCommandVisible_: function(command, itemIds) {
       switch (command) {
         case Command.EDIT:
-          return itemIds.size == 1;
-        case Command.COPY:
-          return itemIds.size == 1 &&
-              this.containsMatchingNode_(itemIds, function(node) {
-                return !!node.url;
-              });
+          return itemIds.size == 1 && this.globalCanEdit_;
+        case Command.COPY_URL:
+          return this.isSingleBookmark_(itemIds);
         case Command.DELETE:
+          return itemIds.size > 0 && this.globalCanEdit_;
+        case Command.SHOW_IN_FOLDER:
+          return this.menuSource_ == MenuSource.LIST && itemIds.size == 1 &&
+              this.getState().search.term != '' &&
+              !this.containsMatchingNode_(itemIds, function(node) {
+                return !node.parentId || node.parentId == ROOT_NODE_ID;
+              });
         case Command.OPEN_NEW_TAB:
         case Command.OPEN_NEW_WINDOW:
         case Command.OPEN_INCOGNITO:
@@ -146,10 +235,19 @@ cr.define('bookmarks', function() {
      */
     isCommandEnabled_: function(command, itemIds) {
       switch (command) {
+        case Command.EDIT:
+        case Command.DELETE:
+          var state = this.getState();
+          return !this.containsMatchingNode_(itemIds, function(node) {
+            return !bookmarks.util.canEditNode(state, node.id);
+          });
         case Command.OPEN_NEW_TAB:
         case Command.OPEN_NEW_WINDOW:
-        case Command.OPEN_INCOGNITO:
           return this.expandUrls_(itemIds).length > 0;
+        case Command.OPEN_INCOGNITO:
+          return this.expandUrls_(itemIds).length > 0 &&
+              this.getState().prefs.incognitoAvailability !=
+              IncognitoAvailability.DISABLED;
         default:
           return true;
       }
@@ -160,23 +258,61 @@ cr.define('bookmarks', function() {
      * @param {!Set<string>} itemIds
      */
     handle: function(command, itemIds) {
+      var state = this.getState();
       switch (command) {
         case Command.EDIT:
           var id = Array.from(itemIds)[0];
           /** @type {!BookmarksEditDialogElement} */ (this.$.editDialog.get())
-              .showEditDialog(this.getState().nodes[id]);
+              .showEditDialog(state.nodes[id]);
           break;
+        case Command.COPY_URL:
         case Command.COPY:
           var idList = Array.from(itemIds);
           chrome.bookmarkManagerPrivate.copy(idList, function() {
-            // TODO(jiaxi): Add toast later.
-          });
+            var labelPromise;
+            if (command == Command.COPY_URL) {
+              labelPromise =
+                  Promise.resolve(loadTimeData.getString('toastUrlCopied'));
+            } else if (idList.length == 1) {
+              labelPromise =
+                  Promise.resolve(loadTimeData.getString('toastItemCopied'));
+            } else {
+              labelPromise = cr.sendWithPromise(
+                  'getPluralString', 'toastItemsCopied', idList.length);
+            }
+
+            this.showTitleToast_(
+                labelPromise, state.nodes[idList[0]].title, false);
+          }.bind(this));
+          break;
+        case Command.SHOW_IN_FOLDER:
+          var id = Array.from(itemIds)[0];
+          this.dispatch(bookmarks.actions.selectFolder(
+              assert(state.nodes[id].parentId), state.nodes));
           break;
         case Command.DELETE:
-          chrome.bookmarkManagerPrivate.removeTrees(
-              Array.from(this.minimizeDeletionSet_(itemIds)), function() {
-                // TODO(jiaxi): Add toast later.
-              });
+          var idList = Array.from(this.minimizeDeletionSet_(itemIds));
+          var title = state.nodes[idList[0]].title;
+          var labelPromise;
+
+          if (idList.length == 1) {
+            labelPromise =
+                Promise.resolve(loadTimeData.getString('toastItemDeleted'));
+          } else {
+            labelPromise = cr.sendWithPromise(
+                'getPluralString', 'toastItemsDeleted', idList.length);
+          }
+
+          chrome.bookmarkManagerPrivate.removeTrees(idList, function() {
+            this.showTitleToast_(labelPromise, title, true);
+          }.bind(this));
+          break;
+        case Command.UNDO:
+          chrome.bookmarkManagerPrivate.undo();
+          bookmarks.ToastManager.getInstance().hide();
+          break;
+        case Command.REDO:
+          chrome.bookmarkManagerPrivate.redo();
           break;
         case Command.OPEN_NEW_TAB:
         case Command.OPEN_NEW_WINDOW:
@@ -190,21 +326,71 @@ cr.define('bookmarks', function() {
               });
           if (isFolder) {
             var folderId = Array.from(itemIds)[0];
-            this.dispatch(bookmarks.actions.selectFolder(
-                folderId, this.getState().nodes));
+            this.dispatch(
+                bookmarks.actions.selectFolder(folderId, state.nodes));
           } else {
             this.openUrls_(this.expandUrls_(itemIds), command);
           }
           break;
+        case Command.SELECT_ALL:
+          var displayedIds = bookmarks.util.getDisplayedList(state);
+          this.dispatch(bookmarks.actions.selectAll(displayedIds, state));
+          break;
+        case Command.DESELECT_ALL:
+          this.dispatch(bookmarks.actions.deselectItems());
+          break;
+        case Command.CUT:
+          chrome.bookmarkManagerPrivate.cut(Array.from(itemIds));
+          break;
+        case Command.PASTE:
+          var selectedFolder = state.selectedFolder;
+          var selectedItems = state.selection.items;
+          chrome.bookmarkManagerPrivate.paste(
+              selectedFolder, Array.from(selectedItems));
+          break;
         default:
           assert(false);
       }
     },
 
+    /**
+     * @param {!Event} e
+     * @param {!Set<string>} itemIds
+     * @return {boolean} True if the event was handled, triggering a keyboard
+     *     shortcut.
+     */
+    handleKeyEvent: function(e, itemIds) {
+      for (var commandName in this.shortcuts_) {
+        var shortcut = this.shortcuts_[commandName];
+        if (shortcut.matchesEvent(e) && this.canExecute(commandName, itemIds)) {
+          this.handle(commandName, itemIds);
+
+          e.stopPropagation();
+          e.preventDefault();
+          return true;
+        }
+      }
+
+      return false;
+    },
+
     ////////////////////////////////////////////////////////////////////////////
     // Private functions:
 
     /**
+     * Register a keyboard shortcut for a command.
+     * @param {Command} command Command that the shortcut will trigger.
+     * @param {string} shortcut Keyboard shortcut, using the syntax of
+     *     cr/ui/command.js.
+     * @param {string=} macShortcut If set, enables a replacement shortcut for
+     *     Mac.
+     */
+    addShortcut_: function(command, shortcut, macShortcut) {
+      var shortcut = (cr.isMac && macShortcut) ? macShortcut : shortcut;
+      this.shortcuts_[command] = new cr.ui.KeyboardShortcutList(shortcut);
+    },
+
+    /**
      * Minimize the set of |itemIds| by removing any node which has an ancestor
      * node already in the set. This ensures that instead of trying to delete
      * both a node and its descendant, we will only try to delete the topmost
@@ -229,6 +415,8 @@ cr.define('bookmarks', function() {
     },
 
     /**
+     * Open the given |urls| in response to a |command|. May show a confirmation
+     * dialog before opening large numbers of URLs.
      * @param {!Array<string>} urls
      * @param {Command} command
      * @private
@@ -242,16 +430,31 @@ cr.define('bookmarks', function() {
       if (urls.length == 0)
         return;
 
-      var incognito = command == Command.OPEN_INCOGNITO;
-      if (command == Command.OPEN_NEW_WINDOW || incognito) {
-        chrome.windows.create({url: urls, incognito: incognito});
-      } else {
-        if (command == Command.OPEN)
-          chrome.tabs.create({url: urls.shift(), active: true});
-        urls.forEach(function(url) {
-          chrome.tabs.create({url: url, active: false});
-        });
+      var openUrlsCallback = function() {
+        var incognito = command == Command.OPEN_INCOGNITO;
+        if (command == Command.OPEN_NEW_WINDOW || incognito) {
+          chrome.windows.create({url: urls, incognito: incognito});
+        } else {
+          if (command == Command.OPEN)
+            chrome.tabs.create({url: urls.shift(), active: true});
+          urls.forEach(function(url) {
+            chrome.tabs.create({url: url, active: false});
+          });
+        }
+      };
+
+      if (urls.length <= OPEN_CONFIRMATION_LIMIT) {
+        openUrlsCallback();
+        return;
       }
+
+      this.confirmOpenCallback_ = openUrlsCallback;
+      var dialog = this.$.openDialog.get();
+      dialog.querySelector('.body').textContent =
+          loadTimeData.getStringF('openDialogBody', urls.length);
+
+      bookmarks.DialogFocusManager.getInstance().showDialog(
+          this.$.openDialog.get());
     },
 
     /**
@@ -298,60 +501,15 @@ cr.define('bookmarks', function() {
     },
 
     /**
-     * @param {Event} e
-     * @private
-     */
-    onOpenItemMenu_: function(e) {
-      if (e.detail.targetElement) {
-        this.openCommandMenuAtElement(e.detail.targetElement);
-      } else {
-        this.openCommandMenuAtPosition(e.detail.x, e.detail.y);
-      }
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onCommandClick_: function(e) {
-      this.closeCommandMenu();
-      this.handle(e.target.getAttribute('command'), assert(this.menuIds_));
-    },
-
-    /**
-     * @param {!Event} e
-     * @private
-     */
-    onKeydown_: function(e) {
-      var selection = this.getState().selection.items;
-      // TODO(tsergeant): Prevent keyboard shortcuts when a dialog is open or
-      // text field is focused.
-      for (var commandName in this.shortcuts_) {
-        var shortcut = this.shortcuts_[commandName];
-        if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(
-                e, shortcut) &&
-            this.canExecute(commandName, selection)) {
-          this.handle(commandName, selection);
-
-          e.stopPropagation();
-          e.preventDefault();
-          return;
-        }
-      }
-    },
-
-    /**
-     * Close the menu on mousedown so clicks can propagate to the underlying UI.
-     * This allows the user to right click the list while a context menu is
-     * showing and get another context menu.
-     * @param {Event} e
-     * @private
+     * @param {!Set<string>} itemIds
+     * @return {boolean} True if |itemIds| is a single bookmark (non-folder)
+     *     node.
      */
-    onMenuMousedown_: function(e) {
-      if (e.path[0] != this.$.dropdown)
-        return;
-
-      this.$.dropdown.close();
+    isSingleBookmark_: function(itemIds) {
+      return itemIds.size == 1 &&
+          this.containsMatchingNode_(itemIds, function(node) {
+            return !!node.url;
+          });
     },
 
     /**
@@ -367,19 +525,22 @@ cr.define('bookmarks', function() {
       var label;
       switch (command) {
         case Command.EDIT:
-          if (this.menuIds_.size > 1)
+          if (this.menuIds_.size != 1)
             return '';
 
           var id = Array.from(this.menuIds_)[0];
           var itemUrl = this.getState().nodes[id].url;
           label = itemUrl ? 'menuEdit' : 'menuRename';
           break;
-        case Command.COPY:
+        case Command.COPY_URL:
           label = 'menuCopyURL';
           break;
         case Command.DELETE:
           label = 'menuDelete';
           break;
+        case Command.SHOW_IN_FOLDER:
+          label = 'menuShowInFolder';
+          break;
         case Command.OPEN_NEW_TAB:
           label = multipleNodes ? 'menuOpenAllNewTab' : 'menuOpenNewTab';
           break;
@@ -396,11 +557,126 @@ cr.define('bookmarks', function() {
 
     /**
      * @param {Command} command
+     * @return {string}
+     * @private
+     */
+    getCommandSublabel_: function(command) {
+      var multipleNodes = this.menuIds_.size > 1 ||
+          this.containsMatchingNode_(this.menuIds_, function(node) {
+            return !node.url;
+          });
+      switch (command) {
+        case Command.OPEN_NEW_TAB:
+          var urls = this.expandUrls_(this.menuIds_);
+          return multipleNodes && urls.length > 0 ? String(urls.length) : '';
+        default:
+          return '';
+      }
+    },
+
+    /** @private */
+    onMenuIdsChanged_: function() {
+      if (!this.menuIds_)
+        return;
+
+      this.hasAnySublabel_ = this.menuCommands_.some(function(command) {
+        return this.getCommandSublabel_(command) != '';
+      }.bind(this));
+    },
+
+    /**
+     * @param {Command} command
      * @return {boolean}
      * @private
      */
-    showDividerAfter_: function(command) {
-      return command == Command.DELETE;
+    showDividerAfter_: function(command, itemIds) {
+      return command == Command.DELETE &&
+          (this.globalCanEdit_ || this.isSingleBookmark_(itemIds));
+    },
+
+    /**
+     * Show a toast with a bookmark |title| inserted into a label, with the
+     * title ellipsised if necessary.
+     * @param {!Promise<string>} labelPromise Promise which resolves with the
+     *    label for the toast.
+     * @param {string} title Bookmark title to insert.
+     * @param {boolean} canUndo If true, shows an undo button in the toast.
+     * @private
+     */
+    showTitleToast_: function(labelPromise, title, canUndo) {
+      labelPromise.then(function(label) {
+        var pieces = loadTimeData.getSubstitutedStringPieces(label, title)
+                         .map(function(p) {
+                           // Make the bookmark name collapsible.
+                           p.collapsible = !!p.arg;
+                           return p;
+                         });
+
+        bookmarks.ToastManager.getInstance().showForStringPieces(
+            pieces, canUndo);
+      });
+    },
+
+    ////////////////////////////////////////////////////////////////////////////
+    // Event handlers:
+
+    /**
+     * @param {Event} e
+     * @private
+     */
+    onOpenItemMenu_: function(e) {
+      if (e.detail.targetElement) {
+        this.openCommandMenuAtElement(e.detail.targetElement, e.detail.source);
+      } else {
+        this.openCommandMenuAtPosition(e.detail.x, e.detail.y, e.detail.source);
+      }
+    },
+
+    /**
+     * @param {Event} e
+     * @private
+     */
+    onCommandClick_: function(e) {
+      this.handle(
+          e.currentTarget.getAttribute('command'), assert(this.menuIds_));
+      this.closeCommandMenu();
+    },
+
+    /**
+     * @param {!Event} e
+     * @private
+     */
+    onKeydown_: function(e) {
+      var selection = this.getState().selection.items;
+      if (e.target == document.body &&
+          !bookmarks.DialogFocusManager.getInstance().hasOpenDialog()) {
+        this.handleKeyEvent(e, selection);
+      }
+    },
+
+    /**
+     * Close the menu on mousedown so clicks can propagate to the underlying UI.
+     * This allows the user to right click the list while a context menu is
+     * showing and get another context menu.
+     * @param {Event} e
+     * @private
+     */
+    onMenuMousedown_: function(e) {
+      if (e.path[0] != this.$.dropdown.getIfExists())
+        return;
+
+      this.closeCommandMenu();
+    },
+
+    /** @private */
+    onOpenCancelTap_: function() {
+      this.$.openDialog.get().cancel();
+    },
+
+    /** @private */
+    onOpenConfirmTap_: function() {
+      this.confirmOpenCallback_();
+      this.$.openDialog.get().close();
     },
   });
 
diff --git a/chromium/chrome/browser/resources/md_bookmarks/compiled_resources2.gyp b/chromium/chrome/browser/resources/md_bookmarks/compiled_resources2.gyp
index c4b7645256c..1810e03df48 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/md_bookmarks/compiled_resources2.gyp
@@ -27,10 +27,12 @@
     {
       'target_name': 'app',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/cr/ui/compiled_resources2.gyp:splitter',
         '<(EXTERNS_GYP):chrome_extensions',
         'api_listener',
         'dnd_manager',
+        'mouse_focus_behavior',
         'router',
         'store',
         'store_client',
@@ -42,11 +44,15 @@
       'dependencies': [
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior/compiled_resources2.gyp:iron-a11y-keys-behavior-extracted',
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_action_menu/compiled_resources2.gyp:cr_action_menu',
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_lazy_render/compiled_resources2.gyp:cr_lazy_render',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        '<(DEPTH)/ui/webui/resources/js/cr/ui/compiled_resources2.gyp:command',
         '<(EXTERNS_GYP):bookmark_manager_private',
+        'dialog_focus_manager',
         'edit_dialog',
         'store_client',
+        'toast_manager'
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -55,13 +61,32 @@
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi']
     },
     {
+      'target_name': 'dialog_focus_manager',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'dnd_chip',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:icon',
+        'types',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'dnd_manager',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(EXTERNS_GYP):bookmark_manager_private',
         '<(EXTERNS_GYP):metrics_private',
+        'dnd_chip',
         'store',
+        'timer_proxy',
         'types',
+        'util',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi']
     },
@@ -70,9 +95,10 @@
       'dependencies': [
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(EXTERNS_GYP):chrome_extensions',
+        'dialog_focus_manager',
         'types',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi']
@@ -83,6 +109,7 @@
       'dependencies': [
         '<(EXTERNS_GYP):chrome_extensions',
         'actions',
+        'command_manager',
         'store_client',
       ],
     },
@@ -103,11 +130,20 @@
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-list/compiled_resources2.gyp:iron-list-extracted',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         'actions',
+        'command_manager',
+        'item',
         'store_client',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'mouse_focus_behavior',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'reducers',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
@@ -144,6 +180,24 @@
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi']
     },
     {
+      'target_name': 'timer_proxy',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'toast_manager',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-announcer/compiled_resources2.gyp:iron-a11y-announcer-extracted',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-button/compiled_resources2.gyp:paper-button-extracted',
+        'timer_proxy',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'toolbar',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_action_menu/compiled_resources2.gyp:cr_action_menu',
diff --git a/chromium/chrome/browser/resources/md_bookmarks/constants.js b/chromium/chrome/browser/resources/md_bookmarks/constants.js
index bcbee2b931d..8ff285b12e4 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/constants.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/constants.js
@@ -21,13 +21,42 @@ var DropPosition = {
  */
 var Command = {
   EDIT: 'edit',
-  COPY: 'copy',
+  COPY_URL: 'copy-url',
+  SHOW_IN_FOLDER: 'show-in-folder',
   DELETE: 'delete',
   OPEN_NEW_TAB: 'open-new-tab',
   OPEN_NEW_WINDOW: 'open-new-window',
   OPEN_INCOGNITO: 'open-incognito',
+  UNDO: 'undo',
+  REDO: 'redo',
   // OPEN triggers when you double-click an item.
   OPEN: 'open',
+  SELECT_ALL: 'select-all',
+  DESELECT_ALL: 'deselect-all',
+  COPY: 'copy',
+  CUT: 'cut',
+  PASTE: 'paste',
+};
+
+/**
+ * @enum {number}
+ * @const
+ */
+var MenuSource = {
+  NONE: 0,
+  LIST: 1,
+  TREE: 2,
+};
+
+/**
+ * Mirrors the C++ enum from IncognitoModePrefs.
+ * @enum {number}
+ * @const
+ */
+var IncognitoAvailability = {
+  ENABLED: 0,
+  DISABLED: 1,
+  FORCED: 2,
 };
 
 /** @const */
@@ -38,3 +67,9 @@ var LOCAL_STORAGE_TREE_WIDTH_KEY = 'treeWidth';
 
 /** @const */
 var ROOT_NODE_ID = '0';
+
+/** @const */
+var BOOKMARKS_BAR_ID = '1';
+
+/** @const {number} */
+var OPEN_CONFIRMATION_LIMIT = 15;
diff --git a/chromium/chrome/browser/resources/md_bookmarks/dialog_focus_manager.html b/chromium/chrome/browser/resources/md_bookmarks/dialog_focus_manager.html
new file mode 100644
index 00000000000..2476ff0ce78
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/dialog_focus_manager.html
@@ -0,0 +1,2 @@
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome://bookmarks/dialog_focus_manager.js"></script>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/dialog_focus_manager.js b/chromium/chrome/browser/resources/md_bookmarks/dialog_focus_manager.js
new file mode 100644
index 00000000000..98c0fd34e84
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/dialog_focus_manager.js
@@ -0,0 +1,100 @@
+// Copyright 2017 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.
+
+cr.define('bookmarks', function() {
+  /**
+   * Manages focus restoration for modal dialogs. After the final dialog in a
+   * stack is closed, restores focus to the element which was focused when the
+   * first dialog was opened.
+   * @constructor
+   */
+  function DialogFocusManager() {
+    /** @private {HTMLElement} */
+    this.previousFocusElement_ = null;
+
+    /** @private {Set<HTMLDialogElement>} */
+    this.dialogs_ = new Set();
+  }
+
+  DialogFocusManager.prototype = {
+    /**
+     * @param {HTMLDialogElement} dialog
+     * @param {function()=} showFn
+     */
+    showDialog: function(dialog, showFn) {
+      if (!showFn) {
+        showFn = function() {
+          dialog.showModal();
+        };
+      }
+
+      // Update the focus if there are no open dialogs or if this is the only
+      // dialog and it's getting reshown.
+      if (!this.dialogs_.size ||
+          (this.dialogs_.has(dialog) && this.dialogs_.size == 1)) {
+        this.updatePreviousFocus_();
+      }
+
+      if (!this.dialogs_.has(dialog)) {
+        dialog.addEventListener('close', this.getCloseListener_(dialog));
+        this.dialogs_.add(dialog);
+      }
+
+      showFn();
+    },
+
+    /**
+     * @return {boolean} True if the document currently has an open dialog.
+     */
+    hasOpenDialog: function() {
+      return this.dialogs_.size > 0;
+    },
+
+    /** @private */
+    updatePreviousFocus_: function() {
+      this.previousFocusElement_ = this.getFocusedElement_();
+    },
+
+    /**
+     * @return {HTMLElement}
+     * @private
+     */
+    getFocusedElement_: function() {
+      var focus = document.activeElement;
+      while (focus.root && focus.root.activeElement)
+        focus = focus.root.activeElement;
+
+      return focus;
+    },
+
+    /**
+     * @param {HTMLDialogElement} dialog
+     * @return {function(Event)}
+     * @private
+     */
+    getCloseListener_: function(dialog) {
+      var closeListener = function(e) {
+        // If the dialog is open, then it got reshown immediately and we
+        // shouldn't clear it until it is closed again.
+        if (dialog.open)
+          return;
+
+        assert(this.dialogs_.delete(dialog));
+        // Focus the originally focused element if there are no more dialogs.
+        if (!this.hasOpenDialog())
+          this.previousFocusElement_.focus();
+
+        dialog.removeEventListener('close', closeListener);
+      }.bind(this);
+
+      return closeListener;
+    },
+  };
+
+  cr.addSingletonGetter(DialogFocusManager);
+
+  return {
+    DialogFocusManager: DialogFocusManager,
+  };
+});
diff --git a/chromium/chrome/browser/resources/md_bookmarks/dnd_chip.html b/chromium/chrome/browser/resources/md_bookmarks/dnd_chip.html
new file mode 100644
index 00000000000..c0775007678
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/dnd_chip.html
@@ -0,0 +1,102 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/html/icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://bookmarks/shared_style.html">
+
+<dom-module id="bookmarks-dnd-chip">
+  <template>
+    <style include="shared-style">
+      :host {
+        --chip-height: 40px;
+        --chip-padding-x: 20px;
+        --chip-width: 172px;
+
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transform: translate(calc(var(--mouse-x) - var(--chip-width) * 0.5),
+                             calc(var(--mouse-y) - var(--chip-height) * 0.8));
+        z-index: 2;
+      }
+
+      :host(:not([showing_])) {
+        display: none;
+      }
+
+      .chip-container {
+        background-color: var(--interactive-color);
+        border-radius: calc(var(--chip-height) / 2);
+        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12),
+                    0 8px 8px 0 rgba(0, 0, 0, 0.24);
+        height: var(--chip-height);
+        left: 0;
+        padding: 0 var(--chip-padding-x);
+        position: absolute;
+        top: 0;
+        width: calc(var(--chip-width) - var(--chip-padding-x) * 2);
+      }
+
+      #secondary {
+        left: 5px;
+        top: 5px;
+      }
+
+      #title {
+        -webkit-margin-start: 20px;
+        color: white;
+        flex: 1;
+        font-weight: 500;
+        overflow: hidden;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      #icon-wrapper {
+        background: white;
+        border-radius: 12px;
+        color: var(--secondary-text-color);
+        height: 24px;
+        position: relative;
+        width: 24px;
+      }
+
+      .centered {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+      }
+
+      #count {
+        background: var(--google-red-500);
+        border-radius: 12px;
+        color: white;
+        font-weight: 500;
+        height: 24px;
+        min-width: 14px;
+        padding: 0 5px;
+        position: absolute;
+        right: -170px;
+        top: -10px;
+      }
+
+      :host-context([dir='rtl']) #count {
+        left: 2px;
+        right: auto;
+      }
+    </style>
+    <div id="secondary" class="chip-container" hidden$="[[!isMultiItem_]]">
+    </div>
+    <div id="primary" class="chip-container centered">
+      <div id="icon-wrapper" class="centered">
+        <div id="icon"></div>
+      </div>
+      <div id="title"></div>
+    </div>
+    <div id="count" class="centered" hidden$="[[!isMultiItem_]]"></div>
+  </template>
+  <script src="chrome://bookmarks/dnd_chip.js"></script>
+<dom-module>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/dnd_chip.js b/chromium/chrome/browser/resources/md_bookmarks/dnd_chip.js
new file mode 100644
index 00000000000..a4108e320d4
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/dnd_chip.js
@@ -0,0 +1,47 @@
+// Copyright 2017 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({
+  is: 'bookmarks-dnd-chip',
+
+  properties: {
+    /** @private */
+    showing_: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
+    /** @private */
+    isMultiItem_: Boolean,
+  },
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {!Array<BookmarkNode>} items
+   * @param {!BookmarkNode} dragItem
+   */
+  showForItems: function(x, y, items, dragItem) {
+    this.style.setProperty('--mouse-x', x + 'px');
+    this.style.setProperty('--mouse-y', y + 'px');
+
+    if (this.showing_)
+      return;
+
+    var isFolder = !dragItem.url;
+    this.isMultiItem_ = items.length > 1;
+
+    this.$.icon.className = isFolder ? 'folder-icon' : 'website-icon';
+    this.$.icon.style.backgroundImage =
+        isFolder ? null : cr.icon.getFavicon(assert(dragItem.url));
+
+    this.$.title.textContent = dragItem.title;
+    this.$.count.textContent = items.length;
+    this.showing_ = true;
+  },
+
+  hide: function() {
+    this.showing_ = false;
+  },
+});
diff --git a/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.html b/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.html
index 0a87bf04183..dc6db92bf87 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.html
@@ -1,2 +1,4 @@
 <link rel="import" href="chrome://bookmarks/constants.html">
+<link rel="import" href="chrome://bookmarks/dnd_chip.html">
+<link rel="import" href="chrome://bookmarks/timer_proxy.html">
 <script src="chrome://bookmarks/dnd_manager.js"></script>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.js b/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.js
index c5c3c7ea4c6..c1a73839400 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/dnd_manager.js
@@ -186,7 +186,7 @@ cr.define('bookmarks', function() {
     /**
      * @private {number|null} Timer id used to help minimize flicker.
      */
-    this.removeDropIndicatorTimer_ = null;
+    this.removeDropIndicatorTimeoutId_ = null;
 
     /**
      * The element that had a style applied it to indicate the drop location.
@@ -203,9 +203,9 @@ cr.define('bookmarks', function() {
 
     /**
      * Used to instantly remove the indicator style in tests.
-     * @private {function((Function|null|string), number)}
+     * @private {bookmarks.TimerProxy}
      */
-    this.setTimeout = window.setTimeout.bind(window);
+    this.timerProxy = new bookmarks.TimerProxy();
   }
 
   DropIndicator.prototype = {
@@ -244,7 +244,7 @@ cr.define('bookmarks', function() {
      * @param {DropDestination} dropDest
      */
     update: function(dropDest) {
-      window.clearTimeout(this.removeDropIndicatorTimer_);
+      this.timerProxy.clearTimeout(this.removeDropIndicatorTimeoutId_);
 
       var indicatorElement = dropDest.element.getDropTarget();
       var position = dropDest.position;
@@ -259,10 +259,11 @@ cr.define('bookmarks', function() {
     finish: function() {
       // The use of a timeout is in order to reduce flickering as we move
       // between valid drop targets.
-      window.clearTimeout(this.removeDropIndicatorTimer_);
-      this.removeDropIndicatorTimer_ = this.setTimeout(function() {
-        this.removeDropIndicatorStyle();
-      }.bind(this), 100);
+      this.timerProxy.clearTimeout(this.removeDropIndicatorTimeoutId_);
+      this.removeDropIndicatorTimeoutId_ =
+          this.timerProxy.setTimeout(function() {
+            this.removeDropIndicatorStyle();
+          }.bind(this), 100);
     },
   };
 
@@ -285,9 +286,21 @@ cr.define('bookmarks', function() {
 
     /**
      * Used to instantly clearDragData in tests.
-     * @private {function((Function|null|string), number)}
+     * @private {bookmarks.TimerProxy}
      */
-    this.setTimeout_ = window.setTimeout.bind(window);
+    this.timerProxy_ = new bookmarks.TimerProxy();
+
+    /**
+     * The bookmark drag and drop indicator chip.
+     * @private {BookmarksDndChipElement}
+     */
+    this.chip_ = null;
+
+    /**
+     * The element that initiated a drag.
+     * @private {BookmarkElement}
+     */
+    this.dragElement_ = null;
   }
 
   DNDManager.prototype = {
@@ -318,6 +331,9 @@ cr.define('bookmarks', function() {
     },
 
     destroy: function() {
+      if (this.chip_ && this.chip_.parentElement)
+        document.body.removeChild(this.chip_);
+
       for (var event in this.documentListeners_)
         document.removeEventListener(event, this.documentListeners_[event]);
     },
@@ -383,10 +399,13 @@ cr.define('bookmarks', function() {
 
     /** @private */
     clearDragData_: function() {
+      this.dndChip.hide();
+      this.dragElement_ = null;
+
       // Defer the clearing of the data so that the bookmark manager API's drop
       // event doesn't clear the drop data before the web drop event has a
       // chance to execute (on Mac).
-      this.setTimeout_(function() {
+      this.timerProxy_.setTimeout(function() {
         this.dragInfo_.clearDragData();
         this.dropDestination_ = null;
         this.dropIndicator_.finish();
@@ -404,6 +423,7 @@ cr.define('bookmarks', function() {
 
       var store = bookmarks.Store.getInstance();
       var dragId = dragElement.itemId;
+      this.dragElement_ = dragElement;
 
       // Determine the selected bookmarks.
       var state = store.data;
@@ -426,6 +446,13 @@ cr.define('bookmarks', function() {
 
       e.preventDefault();
 
+      // If any node can't be dragged, early return (after preventDefault).
+      var anyUnmodifiable = draggedNodes.some(function(itemId) {
+        return !bookmarks.util.canEditNode(state, itemId);
+      });
+      if (anyUnmodifiable)
+        return;
+
       // If we are dragging a single link, we can do the *Link* effect.
       // Otherwise, we only allow copy and move.
       if (e.dataTransfer) {
@@ -470,12 +497,19 @@ cr.define('bookmarks', function() {
       if (!this.dragInfo_.isDragValid())
         return;
 
+      var state = bookmarks.Store.getInstance().data;
+      var items = this.dragInfo_.dragData.elements.map(function(x) {
+        return bookmarks.util.normalizeNode(x);
+      });
+      this.dndChip.showForItems(
+          e.clientX, e.clientY, items,
+          this.dragElement_ ? state.nodes[this.dragElement_.itemId] : items[0]);
+
       var overElement = getBookmarkElement(e.path);
       this.autoExpander_.update(e, overElement);
       if (!overElement)
         return;
 
-
       // Now we know that we can drop. Determine if we will drop above, on or
       // below based on mouse position etc.
       this.dropDestination_ =
@@ -547,6 +581,9 @@ cr.define('bookmarks', function() {
       if (isBookmarkList(overElement))
         itemId = state.selectedFolder;
 
+      if (!bookmarks.util.canReorderChildren(state, itemId))
+        return DropPosition.NONE;
+
       // Drags of a bookmark onto itself or of a folder into its children aren't
       // allowed.
       if (dragInfo.isDraggingBookmark(itemId) ||
@@ -626,15 +663,26 @@ cr.define('bookmarks', function() {
       if (getBookmarkNode(overElement).url)
         return false;
 
-      return !this.dragInfo_.isDraggingChildBookmark(overElement.itemId)
+      return !this.dragInfo_.isDraggingChildBookmark(overElement.itemId);
     },
 
-    disableTimeoutsForTesting: function() {
-      this.setTimeout_ = function(fn) {
-        fn();
-      };
-      this.dropIndicator_.setTimeout = this.setTimeout_;
-    }
+    /** @param {bookmarks.TimerProxy} timerProxy */
+    setTimerProxyForTesting: function(timerProxy) {
+      this.timerProxy_ = timerProxy;
+      this.dropIndicator_.timerProxy = timerProxy;
+    },
+
+    /** @return {BookmarksDndChipElement} */
+    get dndChip() {
+      if (!this.chip_) {
+        this.chip_ =
+            /** @type {BookmarksDndChipElement} */ (
+                document.createElement('bookmarks-dnd-chip'));
+        document.body.appendChild(this.chip_);
+      }
+
+      return this.chip_;
+    },
   };
 
   return {
diff --git a/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.html b/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.html
index 416f4170162..8daaaedacfe 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.html
@@ -5,13 +5,16 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://bookmarks/dialog_focus_manager.html">
 
 <dom-module id="bookmarks-edit-dialog">
   <template>
     <style include="cr-shared-style"></style>
     <dialog is="cr-dialog" id="dialog">
-      <div class="title">[[getDialogTitle_(isFolder_, isEdit_)]]</div>
-      <div class="body">
+      <div class="title" slot="title">
+        [[getDialogTitle_(isFolder_, isEdit_)]]
+      </div>
+      <div class="body" slot="body">
         <paper-input always-float-label id="name"
             label="$i18n{editDialogNameInput}"
             value="{{titleValue_}}"
@@ -26,7 +29,7 @@
             required>
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelButtonTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.js b/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.js
index 06f916a3091..582417e708d 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/edit_dialog.js
@@ -43,7 +43,7 @@ Polymer({
     this.isFolder_ = isFolder;
     this.parentId_ = parentId;
 
-    this.$.dialog.showModal();
+    bookmarks.DialogFocusManager.getInstance().showDialog(this.$.dialog);
   },
 
   /**
@@ -60,7 +60,7 @@ Polymer({
     if (!this.isFolder_)
       this.urlValue_ = assert(editItem.url);
 
-    this.$.dialog.showModal();
+    bookmarks.DialogFocusManager.getInstance().showDialog(this.$.dialog);
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/md_bookmarks/folder_node.html b/chromium/chrome/browser/resources/md_bookmarks/folder_node.html
index 3bb5c9b0793..e94af3f34da 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/folder_node.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/folder_node.html
@@ -4,7 +4,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/actions.html">
-<link rel="import" href="chrome://bookmarks/icons.html">
+<link rel="import" href="chrome://bookmarks/command_manager.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
 <link rel="import" href="chrome://bookmarks/store_client.html">
 
@@ -74,15 +74,19 @@
       }
 
       [no-children] {
-        -webkit-padding-start: 52px; /* The width of the arrow and its margin */
+        -webkit-margin-start: 52px; /* The width of the arrow and its margin */
       }
     </style>
 
-    <div id="container" class="v-centered" on-tap="selectFolder_"
-        draggable="[[!isTopLevelFolder_(depth)]]"
+    <div id="container"
+        class="v-centered"
+        draggable="true"
+        on-tap="selectFolder_"
+        on-contextmenu="onContextMenu_"
         tabindex$="[[getTabIndex_(isSelectedFolder_)]]"
-        hidden="[[isRootFolder_(depth)]]">
-      <template is="dom-if" if="[[hasChildFolder_(item_.children)]]">
+        hidden="[[isRootFolder_(depth)]]"
+        role="treeitem">
+      <template is="dom-if" if="[[hasChildFolder_]]">
         <button is="paper-icon-button-light" id="arrow"
             on-tap="toggleFolder_" on-mousedown="preventDefault_" tabindex="-1">
           <iron-icon icon="cr:arrow-drop-down" is-open$="[[!isClosed_]]">
@@ -90,20 +94,23 @@
         </button>
       </template>
       <div id="folder-label" class="v-centered">
-        <iron-icon icon="[[getFolderIcon_(isSelectedFolder_)]]"
-            no-children$="[[!hasChildFolder_(item_.children)]]">
-        </iron-icon>
+        <div class="folder-icon"
+            open$="[[isSelectedFolder_]]"
+            no-children$="[[!hasChildFolder_]]">
+        </div>
         <div class="menu-label">[[item_.title]]</div>
       </div>
     </div>
-    <div id="descendants" hidden$="[[isClosed_]]">
-      <template is="dom-repeat"
-          items="[[item_.children]]"
-          as="child"
-          filter="isFolder_">
-        <bookmarks-folder-node item-id="[[child]]"
-            depth="[[getChildDepth_(depth)]]">
-        </bookmarks-folder-node>
+    <div id="descendants" role="group">
+      <template is="dom-if" if="[[!isClosed_]]">
+        <template is="dom-repeat"
+            items="[[item_.children]]"
+            as="child"
+            filter="isFolder_">
+          <bookmarks-folder-node item-id="[[child]]"
+              depth="[[getChildDepth_(depth)]]">
+          </bookmarks-folder-node>
+        </template>
       </template>
     </div>
   </template>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/folder_node.js b/chromium/chrome/browser/resources/md_bookmarks/folder_node.js
index 09dd8099ee5..df6ac016a1a 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/folder_node.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/folder_node.js
@@ -39,12 +39,22 @@ Polymer({
       reflectToAttribute: true,
       computed: 'computeIsSelected_(itemId, selectedFolder_, searchActive_)'
     },
+
+    /** @private */
+    hasChildFolder_: {
+      type: Boolean,
+      computed: 'computeHasChildFolder_(item_.children)',
+    },
   },
 
   listeners: {
     'keydown': 'onKeydown_',
   },
 
+  observers: [
+    'updateAriaExpanded_(hasChildFolder_, isClosed_)',
+  ],
+
   /** @override */
   attached: function() {
     this.watch('item_', function(state) {
@@ -69,7 +79,10 @@ Polymer({
     }
   },
 
-  /** @return {HTMLElement} */
+  /**
+   * Overriden from bookmarks.MouseFocusBehavior.
+   * @return {!HTMLElement}
+   */
   getFocusTarget: function() {
     return this.$.container;
   },
@@ -79,11 +92,6 @@ Polymer({
     return this.$.container;
   },
 
-  /** @return {boolean} */
-  isTopLevelFolder_: function() {
-    return this.depth == 0;
-  },
-
   /**
    * @private
    * @param {!Event} e
@@ -110,6 +118,11 @@ Polymer({
     this.changeKeyboardSelection_(
         xDirection, yDirection, this.root.activeElement);
 
+    if (!handled) {
+      handled = bookmarks.CommandManager.getInstance().handleKeyEvent(
+          e, new Set([this.itemId]));
+    }
+
     if (!handled)
       return;
 
@@ -131,7 +144,7 @@ Polymer({
     if (xDirection == 1) {
       // The right arrow opens a folder if closed and goes to the first child
       // otherwise.
-      if (this.hasChildFolder_()) {
+      if (this.hasChildFolder_) {
         if (this.isClosed_) {
           this.dispatch(
               bookmarks.actions.changeFolderOpen(this.item_.id, true));
@@ -142,7 +155,7 @@ Polymer({
     } else if (xDirection == -1) {
       // The left arrow closes a folder if open and goes to the parent
       // otherwise.
-      if (this.hasChildFolder_() && !this.isClosed_) {
+      if (this.hasChildFolder_ && !this.isClosed_) {
         this.dispatch(bookmarks.actions.changeFolderOpen(this.item_.id, false));
       } else {
         var parentFolderNode = this.getParentFolderNode_();
@@ -245,18 +258,23 @@ Polymer({
     return children.pop().getLastVisibleDescendant_();
   },
 
+  /** @private */
+  selectFolder_: function() {
+    if (!this.isSelectedFolder_) {
+      this.dispatch(
+          bookmarks.actions.selectFolder(this.itemId, this.getState().nodes));
+    }
+  },
+
   /**
+   * @param {!Event} e
    * @private
-   * @return {string}
    */
-  getFolderIcon_: function() {
-    return this.isSelectedFolder_ ? 'bookmarks:folder-open' : 'cr:folder';
-  },
-
-  /** @private */
-  selectFolder_: function() {
-    this.dispatch(
-        bookmarks.actions.selectFolder(this.item_.id, this.getState().nodes));
+  onContextMenu_: function(e) {
+    e.preventDefault();
+    this.selectFolder_();
+    bookmarks.CommandManager.getInstance().openCommandMenuAtPosition(
+        e.clientX, e.clientY, MenuSource.TREE, new Set([this.itemId]));
   },
 
   /**
@@ -274,7 +292,7 @@ Polymer({
    */
   toggleFolder_: function(e) {
     this.dispatch(
-        bookmarks.actions.changeFolderOpen(this.item_.id, this.isClosed_));
+        bookmarks.actions.changeFolderOpen(this.itemId, this.isClosed_));
     e.stopPropagation();
   },
 
@@ -300,13 +318,15 @@ Polymer({
    * @private
    * @return {boolean}
    */
-  hasChildFolder_: function() {
+  computeHasChildFolder_: function() {
     return bookmarks.util.hasChildFolders(this.itemId, this.getState().nodes);
   },
 
   /** @private */
   depthChanged_: function() {
     this.style.setProperty('--node-depth', String(this.depth));
+    if (this.depth == -1)
+      this.$.descendants.removeAttribute('role');
   },
 
   /**
@@ -339,6 +359,20 @@ Polymer({
    * @return {string}
    */
   getTabIndex_: function() {
-    return this.isSelectedFolder_ ? '0' : '';
+    return this.isSelectedFolder_ ? '0' : '-1';
+  },
+
+  /**
+   * Sets the 'aria-expanded' accessibility on nodes which need it. Note that
+   * aria-expanded="false" is different to having the attribute be undefined.
+   * @param {boolean} hasChildFolder
+   * @param {boolean} isClosed
+   * @private
+   */
+  updateAriaExpanded_: function(hasChildFolder, isClosed) {
+    if (hasChildFolder)
+      this.getFocusTarget().setAttribute('aria-expanded', String(!isClosed));
+    else
+      this.getFocusTarget().removeAttribute('aria-expanded');
   },
 });
diff --git a/chromium/chrome/browser/resources/md_bookmarks/icons.html b/chromium/chrome/browser/resources/md_bookmarks/icons.html
deleted file mode 100644
index 8f96ef8711e..00000000000
--- a/chromium/chrome/browser/resources/md_bookmarks/icons.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
-
-<iron-iconset-svg size="24" name="bookmarks">
-  <svg>
-    <defs>
-      <!--
-      These icons are copied from Polymer's iron-icons and kept in sorted order.
-      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-      -->
-      <g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/images/folder.svg b/chromium/chrome/browser/resources/md_bookmarks/images/folder.svg
new file mode 100644
index 00000000000..d9c142650e4
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/images/folder.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575">
+  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path>
+</svg>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/images/folder_open.svg b/chromium/chrome/browser/resources/md_bookmarks/images/folder_open.svg
new file mode 100644
index 00000000000..0ad4331c9aa
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/images/folder_open.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#4285F4">
+  <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path>
+</svg>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/item.html b/chromium/chrome/browser/resources/md_bookmarks/item.html
index 523e7aa19ae..398affb21b2 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/item.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/item.html
@@ -1,8 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/actions.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
@@ -27,15 +25,12 @@
         text-decoration: none;
       }
 
-      :host([mouse-focus_]) {
-        outline: none;
-      }
-
       :host([is-selected-item_]) {
         background-color: var(--highlight-color);
       }
 
       #website-title {
+        -webkit-margin-start: 20px;
         flex: 1;
         overflow: hidden;
         text-decoration: none;
@@ -43,19 +38,8 @@
         white-space: nowrap;
       }
 
-      #icon-wrapper {
-        -webkit-margin-end: 20px;
-        color: var(--secondary-text-color);
-        display: flex;
-        height: 20px;
-        width: 20px;
-      }
-
       #icon {
-        background-repeat: no-repeat;
-        height: 16px;
-        margin: 2px;
-        width: 16px;
+        color: var(--secondary-text-color);
       }
 
       button.more-vert-button {
@@ -63,17 +47,16 @@
       }
     </style>
     <div id="url">
-      <div id="icon-wrapper">
-        <iron-icon id="folder-icon" icon="cr:folder" hidden$="[[!isFolder_]]">
-        </iron-icon>
-        <div id="icon" hidden$="[[isFolder_]]"></div>
-      </div>
+      <div id="icon"></div>
       <div id="website-title">
         [[item_.title]]
       </div>
-      <button is="paper-icon-button-light" class="more-vert-button"
-          on-click="onMenuButtonClick_" on-dblclick="onMenuButtonDblClick_"
-          tabindex$="[[ironListTabIndex]]" on-focus="onItemBlur_">
+      <button is="paper-icon-button-light"
+          class="more-vert-button"
+          tabindex$="[[ironListTabIndex]]"
+          title="$i18n{moreActionsButtonTitle}"
+          on-click="onMenuButtonClick_"
+          on-dblclick="onMenuButtonDblClick_">
         <div></div>
         <div></div>
         <div></div>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/item.js b/chromium/chrome/browser/resources/md_bookmarks/item.js
index 040eb143e1a..99e210f01fc 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/item.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/item.js
@@ -30,22 +30,18 @@ Polymer({
     },
 
     /** @private */
-    mouseFocus_: {
-      type: Boolean,
-      reflectToAttribute: true,
-    },
-
-    /** @private */
     isFolder_: Boolean,
   },
 
+  hostAttributes: {
+    'role': 'listitem',
+  },
+
   observers: [
     'updateFavicon_(item_.url)',
   ],
 
   listeners: {
-    'mousedown': 'onMousedown_',
-    'blur': 'onItemBlur_',
     'click': 'onClick_',
     'dblclick': 'onDblClick_',
     'contextmenu': 'onContextMenu_',
@@ -74,12 +70,14 @@ Polymer({
    */
   onContextMenu_: function(e) {
     e.preventDefault();
+    this.focus();
     if (!this.isSelectedItem_)
       this.selectThisItem_();
 
     this.fire('open-item-menu', {
       x: e.clientX,
       y: e.clientY,
+      source: MenuSource.LIST,
     });
   },
 
@@ -93,6 +91,7 @@ Polymer({
     this.selectThisItem_();
     this.fire('open-item-menu', {
       targetElement: e.target,
+      source: MenuSource.LIST,
     });
   },
 
@@ -124,20 +123,7 @@ Polymer({
   /** @private */
   onItemChanged_: function() {
     this.isFolder_ = !this.item_.url;
-  },
-
-  /**
-   * @private
-   */
-  onMousedown_: function() {
-    this.mouseFocus_ = true;
-  },
-
-  /**
-   * @private
-   */
-  onItemBlur_: function() {
-    this.mouseFocus_ = false;
+    this.setAttribute('aria-label', this.item_.title);
   },
 
   /**
@@ -148,10 +134,11 @@ Polymer({
     // Ignore double clicks so that Ctrl double-clicking an item won't deselect
     // the item before opening.
     if (e.detail != 2) {
+      var addKey = cr.isMac ? e.metaKey : e.ctrlKey;
       this.dispatch(bookmarks.actions.selectItem(this.itemId, this.getState(), {
-        clear: !e.ctrlKey,
+        clear: !addKey,
         range: e.shiftKey,
-        toggle: e.ctrlKey && !e.shiftKey,
+        toggle: addKey && !e.shiftKey,
       }));
     }
     e.stopPropagation();
@@ -163,6 +150,9 @@ Polymer({
    * @private
    */
   onDblClick_: function(e) {
+    if (!this.isSelectedItem_)
+      this.selectThisItem_();
+
     var commandManager = bookmarks.CommandManager.getInstance();
     var itemSet = this.getState().selection.items;
     if (commandManager.canExecute(Command.OPEN, itemSet))
@@ -174,6 +164,7 @@ Polymer({
    * @private
    */
   updateFavicon_: function(url) {
-    this.$.icon.style.backgroundImage = cr.icon.getFavicon(url);
+    this.$.icon.className = url ? 'website-icon' : 'folder-icon';
+    this.$.icon.style.backgroundImage = url ? cr.icon.getFavicon(url) : null;
   },
 });
diff --git a/chromium/chrome/browser/resources/md_bookmarks/list.html b/chromium/chrome/browser/resources/md_bookmarks/list.html
index 6705d25236c..ae6ee5e1d32 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/list.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/list.html
@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
+<link rel="import" href="chrome://bookmarks/command_manager.html">
 <link rel="import" href="chrome://bookmarks/item.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
 <link rel="import" href="chrome://bookmarks/store_client.html">
@@ -28,15 +29,17 @@
       .centered-message {
         align-items: center;
         color: #6e6e6e;
+        cursor: default;
         display: flex;
         font-size: 14px;
         font-weight: 500;
         height: 100%;
         justify-content: center;
+        user-select: none;
       }
     </style>
     <iron-list items="[[displayedList_]]" id="bookmarksCard"
-        hidden$="[[isEmptyList_(displayedList_.length)]]">
+        hidden$="[[isEmptyList_(displayedList_.length)]]" role="list">
       <template>
         <bookmarks-item item-id="[[item.id]]" draggable="true"
             tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]">
diff --git a/chromium/chrome/browser/resources/md_bookmarks/list.js b/chromium/chrome/browser/resources/md_bookmarks/list.js
index 75810eaaddf..0b14ed4dd24 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/list.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/list.js
@@ -32,11 +32,21 @@ Polymer({
     },
 
     /** @private */
-    searchTerm_: String,
+    searchTerm_: {
+      type: String,
+      observer: 'onDisplayedListSourceChange_',
+    },
+
+    /** @private */
+    selectedFolder_: {
+      type: String,
+      observer: 'onDisplayedListSourceChange_',
+    },
   },
 
   listeners: {
     'click': 'deselectItems_',
+    'open-item-menu': 'onOpenItemMenu_',
   },
 
   attached: function() {
@@ -49,6 +59,9 @@ Polymer({
     this.watch('searchTerm_', function(state) {
       return state.search.term;
     });
+    this.watch('selectedFolder_', function(state) {
+      return state.selectedFolder;
+    });
     this.updateFromStore();
 
     this.$.bookmarksCard.addEventListener(
@@ -73,7 +86,9 @@ Polymer({
         return {id: id};
       });
     } else {
-      var splices = Polymer.ArraySplice.calculateSplices(newValue, oldValue);
+      var splices = Polymer.ArraySplice.calculateSplices(
+          /** @type {!Array<string>} */ (newValue),
+          /** @type {!Array<string>} */ (oldValue));
       splices.forEach(function(splice) {
         // TODO(calamity): Could use notifySplices to improve performance here.
         var additions =
@@ -89,6 +104,11 @@ Polymer({
   },
 
   /** @private */
+  onDisplayedListSourceChange_: function() {
+    this.scrollTop = 0;
+  },
+
+  /** @private */
   emptyListMessage_: function() {
     var emptyListMessage = this.searchTerm_ ? 'noSearchResults' : 'emptyList';
     return loadTimeData.getString(emptyListMessage);
@@ -104,12 +124,6 @@ Polymer({
     this.dispatch(bookmarks.actions.deselectItems());
   },
 
-  /** @private */
-  selectAllItems_: function() {
-    this.dispatch(
-        bookmarks.actions.selectAll(this.displayedIds_, this.getState()));
-  },
-
   /**
    * @param{HTMLElement} el
    * @private
@@ -119,6 +133,19 @@ Polymer({
   },
 
   /**
+   * @param {Event} e
+   * @private
+   */
+  onOpenItemMenu_: function(e) {
+    var index = this.displayedIds_.indexOf(
+        /** @type {BookmarksItemElement} */ (e.path[0]).itemId);
+    var list = this.$.bookmarksCard;
+    // If the item is not visible, scroll to it before rendering the menu.
+    if (index < list.firstVisibleIndex || index > list.lastVisibleIndex)
+      list.scrollToIndex(index);
+  },
+
+  /**
    * @param {KeyboardEvent} e
    * @private
    */
@@ -128,6 +155,8 @@ Polymer({
     var focusMoved = false;
     var focusedIndex =
         this.getIndexForItemElement_(/** @type {HTMLElement} */ (e.target));
+    var oldFocusedIndex = focusedIndex;
+    var cursorModifier = cr.isMac ? e.metaKey : e.ctrlKey;
     if (e.key == 'ArrowUp') {
       focusedIndex--;
       focusMoved = true;
@@ -141,17 +170,13 @@ Polymer({
     } else if (e.key == 'End') {
       focusedIndex = list.items.length - 1;
       focusMoved = true;
-    } else if (e.key == ' ' && e.ctrlKey) {
+    } else if (e.key == ' ' && cursorModifier) {
       this.dispatch(bookmarks.actions.selectItem(
           this.displayedIds_[focusedIndex], this.getState(), {
             clear: false,
             range: false,
             toggle: true,
           }));
-    } else if (e.key == 'a' && e.ctrlKey) {
-      this.selectAllItems_();
-    } else if (e.key == 'Escape') {
-      this.deselectItems_();
     } else {
       handled = false;
     }
@@ -160,14 +185,20 @@ Polymer({
       focusedIndex = Math.min(list.items.length - 1, Math.max(0, focusedIndex));
       list.focusItem(focusedIndex);
 
-      if (e.ctrlKey && !e.shiftKey) {
+      if (cursorModifier && !e.shiftKey) {
         this.dispatch(
             bookmarks.actions.updateAnchor(this.displayedIds_[focusedIndex]));
       } else {
+        // If shift-selecting with no anchor, use the old focus index.
+        if (e.shiftKey && this.getState().selection.anchor == null) {
+          this.dispatch(bookmarks.actions.updateAnchor(
+              this.displayedIds_[oldFocusedIndex]));
+        }
+
         // If the focus moved from something other than a Ctrl + move event,
         // update the selection.
         var config = {
-          clear: !e.ctrlKey,
+          clear: !cursorModifier,
           range: e.shiftKey,
           toggle: false,
         };
@@ -177,6 +208,15 @@ Polymer({
       }
     }
 
+    // Prevent the iron-list from changing focus on enter.
+    if (e.path[0] instanceof HTMLButtonElement && e.key == 'Enter')
+      handled = true;
+
+    if (!handled) {
+      handled = bookmarks.CommandManager.getInstance().handleKeyEvent(
+          e, this.getState().selection.items);
+    }
+
     if (handled)
       e.stopPropagation();
   },
diff --git a/chromium/chrome/browser/resources/md_bookmarks/mouse_focus_behavior.html b/chromium/chrome/browser/resources/md_bookmarks/mouse_focus_behavior.html
new file mode 100644
index 00000000000..b9c6e27dd77
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/mouse_focus_behavior.html
@@ -0,0 +1 @@
+<script src="chrome://bookmarks/mouse_focus_behavior.js"></script>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/mouse_focus_behavior.js b/chromium/chrome/browser/resources/md_bookmarks/mouse_focus_behavior.js
new file mode 100644
index 00000000000..85afefe14d9
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/mouse_focus_behavior.js
@@ -0,0 +1,44 @@
+// Copyright 2017 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.
+
+cr.define('bookmarks', function() {
+  /** @const */
+  var HIDE_FOCUS_RING_ATTRIBUTE = 'hide-focus-ring';
+
+  /**
+   * Behavior which adds the 'hide-focus-ring' attribute to a target element
+   * when the user interacts with it using the mouse, allowing the focus outline
+   * to be hidden without affecting keyboard users.
+   * @polymerBehavior
+   */
+  var MouseFocusBehavior = {
+    attached: function() {
+      this.boundOnMousedown_ = this.onMousedown_.bind(this);
+      this.boundOnKeydown = this.onKeydown_.bind(this);
+
+      this.addEventListener('mousedown', this.boundOnMousedown_);
+      this.addEventListener('keydown', this.boundOnKeydown, true);
+
+    },
+
+    detached: function() {
+      this.removeEventListener('mousedown', this.boundOnMousedown_);
+      this.removeEventListener('keydown', this.boundOnKeydown, true);
+    },
+
+    /** @private */
+    onMousedown_: function() {
+      this.setAttribute(HIDE_FOCUS_RING_ATTRIBUTE, '');
+    },
+
+    /** @private */
+    onKeydown_: function() {
+      this.removeAttribute(HIDE_FOCUS_RING_ATTRIBUTE);
+    },
+  };
+
+  return {
+    MouseFocusBehavior: MouseFocusBehavior,
+  };
+});
diff --git a/chromium/chrome/browser/resources/md_bookmarks/reducers.js b/chromium/chrome/browser/resources/md_bookmarks/reducers.js
index 9b846892b79..7154b83d59b 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/reducers.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/reducers.js
@@ -55,7 +55,7 @@ cr.define('bookmarks', function() {
    * @param {!Set<string>} deleted
    * @return SelectionState
    */
-  SelectionState.deselectDeletedItems = function(selectionState, deleted) {
+  SelectionState.deselectItems = function(selectionState, deleted) {
     return /** @type {SelectionState} */ Object.assign({}, selectionState, {
       items: bookmarks.util.removeIdsFromSet(selectionState.items, deleted),
       anchor: !selectionState.anchor || deleted.has(selectionState.anchor) ?
@@ -90,8 +90,16 @@ cr.define('bookmarks', function() {
       case 'select-items':
         return SelectionState.selectItems(selection, action);
       case 'remove-bookmark':
-        return SelectionState.deselectDeletedItems(
-            selection, action.descendants);
+        return SelectionState.deselectItems(selection, action.descendants);
+      case 'move-bookmark':
+        // Deselect items when they are moved to another folder, since they will
+        // no longer be visible on screen (for simplicity, ignores items visible
+        // in search results).
+        if (action.parentId != action.oldParentId &&
+            selection.items.has(action.id)) {
+          return SelectionState.deselectItems(selection, new Set([action.id]));
+        }
+        return selection;
       case 'update-anchor':
         return SelectionState.updateAnchor(selection, action);
       default:
@@ -110,7 +118,7 @@ cr.define('bookmarks', function() {
     return {
       term: action.term,
       inProgress: true,
-      results: [],
+      results: search.results,
     };
   };
 
@@ -131,7 +139,7 @@ cr.define('bookmarks', function() {
     return {
       term: '',
       inProgress: false,
-      results: [],
+      results: null,
     };
   };
 
@@ -141,6 +149,9 @@ cr.define('bookmarks', function() {
    * @return {SearchState}
    */
   SearchState.removeDeletedResults = function(search, deletedIds) {
+    if (!search.results)
+      return search;
+
     var newResults = [];
     search.results.forEach(function(id) {
       if (!deletedIds.has(id))
@@ -395,6 +406,28 @@ cr.define('bookmarks', function() {
     return newClosedFolders;
   };
 
+  var PreferencesState = {};
+
+  /**
+   * @param {PreferencesState} prefs
+   * @param {Action} action
+   * @return {PreferencesState}
+   */
+  PreferencesState.updatePrefs = function(prefs, action) {
+    switch (action.name) {
+      case 'set-incognito-availability':
+        return /** @type {PreferencesState} */ (Object.assign({}, prefs, {
+          incognitoAvailability: action.value,
+        }));
+      case 'set-can-edit':
+        return /** @type {PreferencesState} */ (Object.assign({}, prefs, {
+          canEdit: action.value,
+        }));
+      default:
+        return prefs;
+    }
+  };
+
   /**
    * @param {ClosedFolderState} closedFolders
    * @param {Action} action
@@ -437,6 +470,7 @@ cr.define('bookmarks', function() {
           state.selectedFolder, action, state.nodes),
       closedFolders: ClosedFolderState.updateClosedFolders(
           state.closedFolders, action, state.nodes),
+      prefs: PreferencesState.updatePrefs(state.prefs, action),
       search: SearchState.updateSearch(state.search, action),
       selection: SelectionState.updateSelection(state.selection, action),
     };
@@ -446,6 +480,7 @@ cr.define('bookmarks', function() {
     reduceAction: reduceAction,
     ClosedFolderState: ClosedFolderState,
     NodeState: NodeState,
+    PreferencesState: PreferencesState,
     SearchState: SearchState,
     SelectedFolderState: SelectedFolderState,
     SelectionState: SelectionState,
diff --git a/chromium/chrome/browser/resources/md_bookmarks/router.html b/chromium/chrome/browser/resources/md_bookmarks/router.html
index f9308fdcf18..ba6454b2cb2 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/router.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/router.html
@@ -7,7 +7,7 @@
 
 <dom-module id="bookmarks-router">
   <template>
-    <iron-location query="{{query}}"></iron-location>
+    <iron-location query="{{query}}" dwell-time="200"></iron-location>
     <iron-query-params params-string="{{query}}"
         params-object="{{queryParams_}}"></iron-query-params>
   </template>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/router.js b/chromium/chrome/browser/resources/md_bookmarks/router.js
index 2634fb32157..431331e62b1 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/router.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/router.js
@@ -23,15 +23,17 @@ Polymer({
     queryParams_: Object,
 
     /** @private */
-    searchTerm_: String,
+    searchTerm_: {
+      type: String,
+      value: '',
+    },
 
     /** @private {?string} */
     selectedId_: String,
   },
 
   observers: [
-    'onQueryChanged_(queryParams_.q)',
-    'onFolderChanged_(queryParams_.id)',
+    'onQueryParamsChanged_(queryParams_)',
     'onStateChanged_(searchTerm_, selectedId_)',
   ],
 
@@ -46,17 +48,17 @@ Polymer({
   },
 
   /** @private */
-  onQueryChanged_: function() {
+  onQueryParamsChanged_: function() {
     var searchTerm = this.queryParams_.q || '';
-    if (searchTerm && searchTerm != this.searchTerm_) {
+    var selectedId = this.queryParams_.id;
+    if (!selectedId && !searchTerm)
+      selectedId = BOOKMARKS_BAR_ID;
+
+    if (searchTerm != this.searchTerm_) {
       this.searchTerm_ = searchTerm;
       this.dispatch(bookmarks.actions.setSearchTerm(searchTerm));
     }
-  },
 
-  /** @private */
-  onFolderChanged_: function() {
-    var selectedId = this.queryParams_.id;
     if (selectedId && selectedId != this.selectedId_) {
       this.selectedId_ = selectedId;
       // Need to dispatch a deferred action so that during page load
@@ -77,7 +79,9 @@ Polymer({
   updateQueryParams_: function() {
     if (this.searchTerm_)
       this.queryParams_ = {q: this.searchTerm_};
-    else
+    else if (this.selectedId_ != BOOKMARKS_BAR_ID)
       this.queryParams_ = {id: this.selectedId_};
+    else
+      this.queryParams_ = {};
   },
 });
diff --git a/chromium/chrome/browser/resources/md_bookmarks/shared_style.html b/chromium/chrome/browser/resources/md_bookmarks/shared_style.html
index 037f6fa82c5..790386acfd8 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/shared_style.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/shared_style.html
@@ -38,7 +38,7 @@
         left: 0;
         position: absolute;
         right: 0;
-        z-index: 10;
+        z-index: 1;
       }
 
       .drag-above::before {
@@ -54,6 +54,29 @@
       .drag-on {
         background-color: var(--highlight-color);
       }
+
+      :host-context([hide-focus-ring]) [tabindex]:focus {
+        outline: none;
+      }
+
+      .folder-icon {
+        background-image: url(chrome://bookmarks/images/folder.svg);
+        background-size: contain;
+        height: 20px;
+        min-width: 20px;
+        width: 20px;
+      }
+
+      .folder-icon[open] {
+        background-image: url(chrome://bookmarks/images/folder_open.svg);
+      }
+
+      .website-icon {
+        background-repeat: no-repeat;
+        height: 16px;
+        margin: 2px;
+        width: 16px;
+      }
     </style>
   </template>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/store.js b/chromium/chrome/browser/resources/md_bookmarks/store.js
index 9b47de1b916..7cbf93d854a 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/store.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/store.js
@@ -19,6 +19,8 @@ cr.define('bookmarks', function() {
     this.queuedActions_ = [];
     /** @type {!Array<!StoreObserver>} */
     this.observers_ = [];
+    /** @private {boolean} */
+    this.batchMode_ = false;
   }
 
   Store.prototype = {
@@ -58,6 +60,25 @@ cr.define('bookmarks', function() {
     },
 
     /**
+     * Begin a batch update to store data, which will disable updates to the
+     * UI until `endBatchUpdate` is called. This is useful when a single UI
+     * operation is likely to cause many sequential model updates (eg, deleting
+     * 100 bookmarks).
+     */
+    beginBatchUpdate: function() {
+      this.batchMode_ = true;
+    },
+
+    /**
+     * End a batch update to the store data, notifying the UI of any changes
+     * which occurred while batch mode was enabled.
+     */
+    endBatchUpdate: function() {
+      this.batchMode_ = false;
+      this.notifyObservers_(this.data);
+    },
+
+    /**
      * Handles a 'deferred' action, which can asynchronously dispatch actions
      * to the Store in order to reach a new UI state. DeferredActions have the
      * form `dispatchAsync(function(dispatch) { ... })`). Inside that function,
@@ -104,7 +125,7 @@ cr.define('bookmarks', function() {
       this.data_ = bookmarks.reduceAction(this.data_, action);
       // Batch notifications until after all initialization queuedActions are
       // resolved.
-      if (this.isInitialized())
+      if (this.isInitialized() && !this.batchMode_)
         this.notifyObservers_(this.data_);
     },
 
diff --git a/chromium/chrome/browser/resources/md_bookmarks/timer_proxy.html b/chromium/chrome/browser/resources/md_bookmarks/timer_proxy.html
new file mode 100644
index 00000000000..d70600af6a1
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/timer_proxy.html
@@ -0,0 +1,2 @@
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome://bookmarks/timer_proxy.js"></script>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/timer_proxy.js b/chromium/chrome/browser/resources/md_bookmarks/timer_proxy.js
new file mode 100644
index 00000000000..de96c7fdb4e
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/timer_proxy.js
@@ -0,0 +1,33 @@
+// Copyright 2017 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 A class that mediates window timer calls to support mockability
+ * in tests.
+ */
+
+cr.define('bookmarks', function() {
+  /** @constructor */
+  function TimerProxy() {}
+
+  TimerProxy.prototype = {
+    /**
+     * @param {Function|string} fn
+     * @param {number=} delay
+     * @return {number}
+     */
+    setTimeout: function(fn, delay) {
+      return window.setTimeout(fn, delay);
+    },
+
+    /** @param {number|undefined?} id */
+    clearTimeout: function(id) {
+      window.clearTimeout(id);
+    },
+  };
+
+  return {
+    TimerProxy: TimerProxy,
+  };
+});
diff --git a/chromium/chrome/browser/resources/md_bookmarks/toast_manager.html b/chromium/chrome/browser/resources/md_bookmarks/toast_manager.html
new file mode 100644
index 00000000000..cb30e2209fd
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/toast_manager.html
@@ -0,0 +1,70 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://bookmarks/shared_style.html">
+
+<dom-module id="bookmarks-toast-manager">
+  <template>
+    <style include="shared-style">
+      #content {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      paper-button {
+        -webkit-margin-end: 0;
+        -webkit-margin-start: 32px;
+        color: var(--google-blue-300);
+        font-weight: 500;
+        height: 32px;
+        min-width: 52px;
+        padding: 8px;
+      }
+
+      .collapsible {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      span {
+        white-space: pre;
+      }
+
+      #toast {
+        align-items: center;
+        background-color: #323232;
+        border-radius: 4px;
+        bottom: 0;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
+        box-sizing: border-box;
+        color: #fff;
+        display: flex;
+        margin: 24px;
+        max-width: 568px;
+        min-height: 52px;
+        min-width: 288px;
+        opacity: 0;
+        padding: 0 24px;
+        position: fixed;
+        transform: translateY(100px);
+        transition: transform 300ms, opacity 300ms;
+        white-space: nowrap;
+      }
+
+      #toast[aria-hidden=false] {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    </style>
+    <div id="toast">
+      <div id="content"></div>
+      <paper-button id="button" hidden$="[[!showUndo_]]" on-tap="onUndoTap_">
+        $i18n{undo}
+      </paper-button>
+    </div>
+  </template>
+  <script src="chrome://bookmarks/toast_manager.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/toast_manager.js b/chromium/chrome/browser/resources/md_bookmarks/toast_manager.js
new file mode 100644
index 00000000000..3692b5f949b
--- /dev/null
+++ b/chromium/chrome/browser/resources/md_bookmarks/toast_manager.js
@@ -0,0 +1,132 @@
+// Copyright 2017 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 Element which shows toasts.
+ */
+cr.define('bookmarks', function() {
+
+  var ToastManager = Polymer({
+    is: 'bookmarks-toast-manager',
+
+    properties: {
+      duration: {
+        type: Number,
+        value: 0,
+      },
+
+      /** @private */
+      open_: {
+        type: Boolean,
+        observer: 'openChanged_',
+        value: false,
+      },
+
+      /** @private */
+      showUndo_: Boolean,
+    },
+
+    /** @private {bookmarks.TimerProxy} */
+    timerProxy_: new bookmarks.TimerProxy(),
+
+    /** @private {number|null} */
+    hideTimeoutId_: null,
+
+    /** @override */
+    attached: function() {
+      assert(ToastManager.instance_ == null);
+      ToastManager.instance_ = this;
+      Polymer.RenderStatus.afterNextRender(this, function() {
+        Polymer.IronA11yAnnouncer.requestAvailability();
+      });
+    },
+
+    /** @override */
+    detached: function() {
+      ToastManager.instance_ = null;
+    },
+
+    /**
+     * @param {string} label The label to display inside the toast.
+     * @param {boolean} showUndo Whether the undo button should be shown.
+     */
+    show: function(label, showUndo) {
+      this.$.content.textContent = label;
+      this.showInternal_(showUndo);
+    },
+
+    /**
+     * Shows the toast, making certain text fragments collapsible.
+     * @param {!Array<!{value: string, collapsible: boolean}>} pieces
+     * @param {boolean} showUndo Whether the undo button should be shown.
+     */
+    showForStringPieces: function(pieces, showUndo) {
+      var content = this.$.content;
+      content.textContent = '';
+      pieces.forEach(function(p) {
+        if (p.value.length == 0)
+          return;
+
+        var span = document.createElement('span');
+        span.textContent = p.value;
+        if (p.collapsible)
+          span.classList.add('collapsible');
+
+        content.appendChild(span);
+      });
+
+      this.showInternal_(showUndo);
+    },
+
+    /**
+     * @param {boolean} showUndo Whether the undo button should be shown.
+     * @private
+     */
+    showInternal_: function(showUndo) {
+      this.open_ = true;
+      this.showUndo_ = showUndo;
+      this.fire('iron-announce', {text: this.$.content.textContent});
+
+      if (!this.duration)
+        return;
+
+      if (this.hideTimeoutId_ != null)
+        this.timerProxy_.clearTimeout(this.hideTimeoutId_);
+
+      this.hideTimeoutId_ = this.timerProxy_.setTimeout(function() {
+        this.hide();
+        this.hideTimeoutId_ = null;
+      }.bind(this), this.duration);
+    },
+
+    hide: function() {
+      this.open_ = false;
+      // Hide the undo button to prevent it from being accessed with tab.
+      this.showUndo_ = false;
+    },
+
+    /** @private */
+    onUndoTap_: function() {
+      // Will hide the toast.
+      this.fire('command-undo');
+    },
+
+    /** @private */
+    openChanged_: function() {
+      this.$.toast.setAttribute('aria-hidden', String(!this.open_));
+    },
+  });
+
+  /** @private {?bookmarks.ToastManager} */
+  ToastManager.instance_ = null;
+
+  /** @return {!bookmarks.ToastManager} */
+  ToastManager.getInstance = function() {
+    return assert(ToastManager.instance_);
+  };
+
+  return {
+    ToastManager: ToastManager,
+  };
+});
diff --git a/chromium/chrome/browser/resources/md_bookmarks/toolbar.html b/chromium/chrome/browser/resources/md_bookmarks/toolbar.html
index ee3e8d6798d..94911b0c99c 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/toolbar.html
+++ b/chromium/chrome/browser/resources/md_bookmarks/toolbar.html
@@ -46,48 +46,68 @@
         --selection-overlay-max-width: var(--card-max-width);
       }
     </style>
-    <dialog is="cr-action-menu" id="dropdown">
-      <button class="dropdown-item" on-tap="onSortTap_"
-          disabled="[[hasSearchTerm_(searchTerm_)]]">
-        $i18n{menuSort}
-      </button>
-      <hr>
-      <button class="dropdown-item" on-tap="onAddBookmarkTap_"
-          disabled="[[hasSearchTerm_(searchTerm_)]]">
-        $i18n{menuAddBookmark}
-      </button>
-      <button class="dropdown-item" on-tap="onAddFolderTap_"
-          disabled="[[hasSearchTerm_(searchTerm_)]]">
-        $i18n{menuAddFolder}
-      </button>
-      <hr>
-      <button class="dropdown-item" on-tap="onImportTap_">
-        $i18n{menuImport}
-      </button>
-      <button class="dropdown-item" on-tap="onExportTap_">
-        $i18n{menuExport}
-      </button>
-    </dialog>
     <cr-toolbar page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
         hidden$="[[showSelectionOverlay]]"
         narrow="{{narrow_}}"
         on-search-changed="onSearchChanged_">
-      <button is="paper-icon-button-light" class="more-actions more-vert-button"
+      <button is="paper-icon-button-light"
+          id="menuButton"
+          class="more-actions more-vert-button"
+          title="$i18n{organizeButtonTitle}"
           on-tap="onMenuButtonOpenTap_">
         <div></div>
         <div></div>
         <div></div>
       </button>
     </cr-toolbar>
+    <template is="cr-lazy-render" id="dropdown">
+      <dialog is="cr-action-menu" role="menu">
+        <button id="sortButton"
+            class="dropdown-item"
+            on-tap="onSortTap_"
+            disabled="[[!canSortFolder_]]"
+            role="menuitem">
+          $i18n{menuSort}
+        </button>
+        <hr>
+        <button id="addBookmarkButton"
+            class="dropdown-item"
+            on-tap="onAddBookmarkTap_"
+            disabled="[[!canChangeList_]]"
+            role="menuitem">
+          $i18n{menuAddBookmark}
+        </button>
+        <button class="dropdown-item"
+            on-tap="onAddFolderTap_"
+            disabled="[[!canChangeList_]]"
+            role="menuitem">
+          $i18n{menuAddFolder}
+        </button>
+        <hr>
+        <button id="importBookmarkButton"
+            class="dropdown-item"
+            on-tap="onImportTap_"
+            disabled="[[!globalCanEdit_]]"
+            role="menuitem">
+          $i18n{menuImport}
+        </button>
+        <button class="dropdown-item"
+            on-tap="onExportTap_"
+            role="menuitem">
+          $i18n{menuExport}
+        </button>
+      </dialog>
+    </template>
     <template is="cr-lazy-render" id="addDialog">
       <bookmarks-edit-dialog></bookmarks-edit-dialog>
     </template>
     <template is="dom-if" if="[[showSelectionOverlay]]">
       <cr-toolbar-selection-overlay delete-label="$i18n{delete}"
           cancel-label="$i18n{cancel}"
-          selection-label="[[getItemsSelectedString_(selectedCount_)]]"
+          selection-label="[[getItemsSelectedString_(selectedItems_.size)]]"
+          delete-disabled="[[!canDeleteSelection_(selectedItems_)]]"
           on-delete-selected-items="onDeleteSelectionTap_"
           on-clear-selected-items="onClearSelectionTap_">
       </cr-toolbar-selection-overlay>
diff --git a/chromium/chrome/browser/resources/md_bookmarks/toolbar.js b/chromium/chrome/browser/resources/md_bookmarks/toolbar.js
index bc489049cb7..0155ca92180 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/toolbar.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/toolbar.js
@@ -23,7 +23,7 @@ Polymer({
 
     showSelectionOverlay: {
       type: Boolean,
-      computed: 'shouldShowSelectionOverlay_(selectedCount_)',
+      computed: 'shouldShowSelectionOverlay_(selectedItems_, globalCanEdit_)',
       readOnly: true,
       reflectToAttribute: true,
     },
@@ -34,16 +34,51 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /** @private {!Set<string>} */
+    selectedItems_: Object,
+
+    /** @private */
+    globalCanEdit_: Boolean,
+
+    /** @private */
+    selectedFolder_: String,
+
+    /** @private */
+    selectedFolderChildren_: Number,
+
+    /** @private */
+    canSortFolder_: {
+      type: Boolean,
+      computed: `computeCanSortFolder_(
+          canChangeList_, selectedFolder_, selectedFolderChildren_)`,
+    },
+
     /** @private */
-    selectedCount_: Number,
+    canChangeList_: {
+      type: Boolean,
+      computed:
+          'computeCanChangeList_(selectedFolder_, searchTerm_, globalCanEdit_)',
+    }
   },
 
   attached: function() {
     this.watch('searchTerm_', function(state) {
       return state.search.term;
     });
-    this.watch('selectedCount_', function(state) {
-      return state.selection.items.size;
+    this.watch('selectedItems_', function(state) {
+      return state.selection.items;
+    });
+    this.watch('globalCanEdit_', function(state) {
+      return state.prefs.canEdit;
+    });
+    this.watch('selectedFolder_', function(state) {
+      return state.selectedFolder;
+    });
+    this.watch('selectedFolderChildren_', (state) => {
+      if (!state.selectedFolder)
+        return 0;
+
+      return state.nodes[state.selectedFolder].children.length;
     });
     this.updateFromStore();
   },
@@ -59,14 +94,15 @@ Polymer({
    * @private
    */
   onMenuButtonOpenTap_: function(e) {
-    var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown);
+    var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown.get());
     menu.showAt(/** @type {!Element} */ (e.target));
   },
 
   /** @private */
   onSortTap_: function() {
-    chrome.bookmarkManagerPrivate.sortChildren(
-        assert(this.getState().selectedFolder));
+    chrome.bookmarkManagerPrivate.sortChildren(assert(this.selectedFolder_));
+    bookmarks.ToastManager.getInstance().show(
+        loadTimeData.getString('toastFolderSorted'), true);
     this.closeDropdownMenu_();
   },
 
@@ -74,7 +110,7 @@ Polymer({
   onAddBookmarkTap_: function() {
     var dialog =
         /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get());
-    dialog.showAddDialog(false, assert(this.getState().selectedFolder));
+    dialog.showAddDialog(false, assert(this.selectedFolder_));
     this.closeDropdownMenu_();
   },
 
@@ -82,7 +118,7 @@ Polymer({
   onAddFolderTap_: function() {
     var dialog =
         /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get());
-    dialog.showAddDialog(true, assert(this.getState().selectedFolder));
+    dialog.showAddDialog(true, assert(this.selectedFolder_));
     this.closeDropdownMenu_();
   },
 
@@ -100,7 +136,7 @@ Polymer({
 
   /** @private */
   onDeleteSelectionTap_: function() {
-    var selection = this.getState().selection.items;
+    var selection = this.selectedItems_;
     var commandManager = bookmarks.CommandManager.getInstance();
     assert(commandManager.canExecute(Command.DELETE, selection));
     commandManager.handle(Command.DELETE, selection);
@@ -113,7 +149,7 @@ Polymer({
 
   /** @private */
   closeDropdownMenu_: function() {
-    var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown);
+    var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown.get());
     menu.close();
   },
 
@@ -141,8 +177,18 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  hasSearchTerm_: function() {
-    return !!this.searchTerm_;
+  computeCanSortFolder_: function() {
+    return this.canChangeList_ && this.selectedFolderChildren_ > 0;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeCanChangeList_: function() {
+    return !this.searchTerm_ &&
+        bookmarks.util.canReorderChildren(
+            this.getState(), this.selectedFolder_);
   },
 
   /**
@@ -150,7 +196,12 @@ Polymer({
    * @private
    */
   shouldShowSelectionOverlay_: function() {
-    return this.selectedCount_ > 1;
+    return this.selectedItems_.size > 1 && this.globalCanEdit_;
+  },
+
+  canDeleteSelection_: function() {
+    return bookmarks.CommandManager.getInstance().canExecute(
+        Command.DELETE, this.selectedItems_);
   },
 
   /**
@@ -158,6 +209,6 @@ Polymer({
    * @private
    */
   getItemsSelectedString_: function() {
-    return loadTimeData.getStringF('itemsSelected', this.selectedCount_);
+    return loadTimeData.getStringF('itemsSelected', this.selectedItems_.size);
   },
 });
diff --git a/chromium/chrome/browser/resources/md_bookmarks/types.js b/chromium/chrome/browser/resources/md_bookmarks/types.js
index d8f9986fd4a..6361f9dc7c6 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/types.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/types.js
@@ -37,10 +37,20 @@ var NodeMap;
 var SelectionState;
 
 /**
+ * Note:
+ * - If |results| is null, it means no search results have been returned. This
+ *   is different to |results| being [], which means the last search returned 0
+ *   results.
+ * - |term| is the last search that was performed by the user, and |results| are
+ *   the last results that were returned from the backend. We don't clear
+ *   |results| on incremental searches, meaning that |results| can be 'stale'
+ *   data from a previous search term (while |inProgress| is true). If you need
+ *   to know the exact search term used to generate |results|, you'll need to
+ *   add a new field to the state to track it (eg, SearchState.resultsTerm).
  * @typedef {{
  *   term: string,
  *   inProgress: boolean,
- *   results: !Array<string>,
+ *   results: ?Array<string>,
  * }}
  */
 var SearchState;
@@ -50,9 +60,18 @@ var ClosedFolderState;
 
 /**
  * @typedef {{
+ *   canEdit: boolean,
+ *   incognitoAvailability: IncognitoAvailability,
+ * }}
+ */
+var PreferencesState;
+
+/**
+ * @typedef {{
  *   nodes: NodeMap,
  *   selectedFolder: string,
  *   closedFolders: ClosedFolderState,
+ *   prefs: PreferencesState,
  *   search: SearchState,
  *   selection: SelectionState,
  * }}
@@ -93,39 +112,3 @@ function StoreObserver() {}
 
 /** @param {!BookmarksPageState} newState */
 StoreObserver.prototype.onStateChanged = function(newState) {};
-
-// TODO(calamity): Remove once
-// https://github.com/google/closure-compiler/pull/2495 is merged.
-Polymer.ArraySplice = {};
-
-/**
- * Returns an array of splice records indicating the minimum edits required
- * to transform the `previous` array into the `current` array.
- *
- * Splice records are ordered by index and contain the following fields:
- * - `index`: index where edit started
- * - `removed`: array of removed items from this index
- * - `addedCount`: number of items added at this index
- *
- * This function is based on the Levenshtein "minimum edit distance"
- * algorithm. Note that updates are treated as removal followed by addition.
- *
- * The worst-case time complexity of this algorithm is `O(l * p)`
- *   l: The length of the current array
- *   p: The length of the previous array
- *
- * However, the worst-case complexity is reduced by an `O(n)` optimization
- * to detect any shared prefix & suffix between the two arrays and only
- * perform the more expensive minimum edit distance calculation over the
- * non-shared portions of the arrays.
- *
- * @param {Array} current The "changed" array for which splices will be
- * calculated.
- * @param {Array} previous The "unchanged" original array to compare
- * `current` against to determine the splices.
- * @return {Array} Returns an array of splice record objects. Each of these
- * contains: `index` the location where the splice occurred; `removed`
- * the array of removed items from this location; `addedCount` the number
- * of items added at this location.
- */
-Polymer.ArraySplice.calculateSplices = function(current, previous) {};
diff --git a/chromium/chrome/browser/resources/md_bookmarks/util.js b/chromium/chrome/browser/resources/md_bookmarks/util.js
index a660add7c4f..3760bdea171 100644
--- a/chromium/chrome/browser/resources/md_bookmarks/util.js
+++ b/chromium/chrome/browser/resources/md_bookmarks/util.js
@@ -14,10 +14,10 @@ cr.define('bookmarks.util', function() {
    * @return {!Array<string>}
    */
   function getDisplayedList(state) {
-    if (!isShowingSearch(state))
-      return assert(state.nodes[state.selectedFolder].children);
+    if (isShowingSearch(state))
+      return assert(state.search.results);
 
-    return state.search.results;
+    return assert(state.nodes[state.selectedFolder].children);
   }
 
   /**
@@ -68,12 +68,16 @@ cr.define('bookmarks.util', function() {
   function createEmptyState() {
     return {
       nodes: {},
-      selectedFolder: '0',
+      selectedFolder: BOOKMARKS_BAR_ID,
       closedFolders: new Set(),
+      prefs: {
+        canEdit: true,
+        incognitoAvailability: IncognitoAvailability.ENABLED,
+      },
       search: {
         term: '',
         inProgress: false,
-        results: [],
+        results: null,
       },
       selection: {
         items: new Set(),
@@ -87,7 +91,34 @@ cr.define('bookmarks.util', function() {
    * @return {boolean}
    */
   function isShowingSearch(state) {
-    return !!state.search.term && !state.search.inProgress;
+    return state.search.results != null;
+  }
+
+  /**
+   * Returns true if the node with ID |itemId| is modifiable, allowing
+   * the node to be renamed, moved or deleted. Note that if a node is
+   * uneditable, it may still have editable children (for example, the top-level
+   * folders).
+   * @param {BookmarksPageState} state
+   * @param {string} itemId
+   * @return {boolean}
+   */
+  function canEditNode(state, itemId) {
+    return itemId != ROOT_NODE_ID &&
+        state.nodes[itemId].parentId != ROOT_NODE_ID &&
+        !state.nodes[itemId].unmodifiable && state.prefs.canEdit;
+  }
+
+  /**
+   * Returns true if it is possible to modify the children list of the node with
+   * ID |itemId|. This includes rearranging the children or adding new ones.
+   * @param {BookmarksPageState} state
+   * @param {string} itemId
+   * @return {boolean}
+   */
+  function canReorderChildren(state, itemId) {
+    return itemId != ROOT_NODE_ID && !state.nodes[itemId].unmodifiable &&
+        state.prefs.canEdit;
   }
 
   /**
@@ -163,6 +194,8 @@ cr.define('bookmarks.util', function() {
   }
 
   return {
+    canEditNode: canEditNode,
+    canReorderChildren: canReorderChildren,
     createEmptyState: createEmptyState,
     getDescendants: getDescendants,
     getDisplayedList: getDisplayedList,
diff --git a/chromium/chrome/browser/resources/md_downloads/action_service.js b/chromium/chrome/browser/resources/md_downloads/action_service.js
index c3557124dea..7dec7eec0d7 100644
--- a/chromium/chrome/browser/resources/md_downloads/action_service.js
+++ b/chromium/chrome/browser/resources/md_downloads/action_service.js
@@ -8,7 +8,9 @@ cr.define('downloads', function() {
    * @return {function(string):void} A chrome.send() callback with curried name.
    */
   function chromeSendWithId(chromeSendName) {
-    return function(id) { chrome.send(chromeSendName, [id]); };
+    return function(id) {
+      chrome.send(chromeSendName, [id]);
+    };
   }
 
   /** @constructor */
@@ -21,13 +23,17 @@ cr.define('downloads', function() {
    * @param {string} s
    * @return {string} |s| without whitespace at the beginning or end.
    */
-  function trim(s) { return s.trim(); }
+  function trim(s) {
+    return s.trim();
+  }
 
   /**
    * @param {string|undefined} value
    * @return {boolean} Whether |value| is truthy.
    */
-  function truthy(value) { return !!value; }
+  function truthy(value) {
+    return !!value;
+  }
 
   /**
    * @param {string} searchText Input typed by the user into a search box.
diff --git a/chromium/chrome/browser/resources/md_downloads/downloads.js b/chromium/chrome/browser/resources/md_downloads/downloads.js
index 9f934af5bc9..fe3834c01f4 100644
--- a/chromium/chrome/browser/resources/md_downloads/downloads.js
+++ b/chromium/chrome/browser/resources/md_downloads/downloads.js
@@ -5,10 +5,9 @@
 window.addEventListener('load', function() {
   downloads.Manager.onLoad().then(function() {
     requestIdleCallback(function() {
-      chrome.send('metricsHandler:recordTime', [
-        'Download.ResultsRenderedTime',
-        window.performance.now()
-      ]);
+      chrome.send(
+          'metricsHandler:recordTime',
+          ['Download.ResultsRenderedTime', window.performance.now()]);
       document.fonts.load('bold 12px Roboto');
     });
   });
diff --git a/chromium/chrome/browser/resources/md_downloads/item.js b/chromium/chrome/browser/resources/md_downloads/item.js
index 00a3716f6a3..47b216a12b1 100644
--- a/chromium/chrome/browser/resources/md_downloads/item.js
+++ b/chromium/chrome/browser/resources/md_downloads/item.js
@@ -106,7 +106,7 @@ cr.define('downloads', function() {
     /** @private */
     computeCompletelyOnDisk_: function() {
       return this.data.state == downloads.States.COMPLETE &&
-             !this.data.file_externally_removed;
+          !this.data.file_externally_removed;
     },
 
     /** @private */
@@ -141,18 +141,18 @@ cr.define('downloads', function() {
           var fileName = data.file_name;
           switch (data.danger_type) {
             case downloads.DangerType.DANGEROUS_FILE:
-             return loadTimeData.getString('dangerFileDesc');
+              return loadTimeData.getString('dangerFileDesc');
 
             case downloads.DangerType.DANGEROUS_URL:
             case downloads.DangerType.DANGEROUS_CONTENT:
             case downloads.DangerType.DANGEROUS_HOST:
-             return loadTimeData.getString('dangerDownloadDesc');
+              return loadTimeData.getString('dangerDownloadDesc');
 
             case downloads.DangerType.UNCOMMON_CONTENT:
-             return loadTimeData.getString('dangerUncommonDesc');
+              return loadTimeData.getString('dangerUncommonDesc');
 
             case downloads.DangerType.POTENTIALLY_UNWANTED:
-             return loadTimeData.getString('dangerSettingsDesc');
+              return loadTimeData.getString('dangerSettingsDesc');
           }
           break;
 
@@ -167,8 +167,8 @@ cr.define('downloads', function() {
     /** @private */
     computeIsActive_: function() {
       return this.data.state != downloads.States.CANCELLED &&
-             this.data.state != downloads.States.INTERRUPTED &&
-             !this.data.file_externally_removed;
+          this.data.state != downloads.States.INTERRUPTED &&
+          !this.data.file_externally_removed;
     },
 
     /** @private */
@@ -209,7 +209,7 @@ cr.define('downloads', function() {
     /** @private */
     computeShowCancel_: function() {
       return this.data.state == downloads.States.IN_PROGRESS ||
-             this.data.state == downloads.States.PAUSED;
+          this.data.state == downloads.States.PAUSED;
     },
 
     /** @private */
@@ -228,7 +228,8 @@ cr.define('downloads', function() {
 
         case downloads.States.COMPLETE:
           return this.data.file_externally_removed ?
-              loadTimeData.getString('statusRemoved') : '';
+              loadTimeData.getString('statusRemoved') :
+              '';
       }
 
       return '';
diff --git a/chromium/chrome/browser/resources/md_downloads/manager.js b/chromium/chrome/browser/resources/md_downloads/manager.js
index ec56d515419..b3ebe46d975 100644
--- a/chromium/chrome/browser/resources/md_downloads/manager.js
+++ b/chromium/chrome/browser/resources/md_downloads/manager.js
@@ -29,7 +29,9 @@ cr.define('downloads', function() {
       /** @private {!Array<!downloads.Data>} */
       items_: {
         type: Array,
-        value: function() { return []; },
+        value: function() {
+          return [];
+        },
       },
 
       /** @private */
@@ -120,7 +122,7 @@ cr.define('downloads', function() {
      * @private
      */
     onCanExecute_: function(e) {
-      e = /** @type {cr.ui.CanExecuteEvent} */(e);
+      e = /** @type {cr.ui.CanExecuteEvent} */ (e);
       switch (e.command.id) {
         case 'undo-command':
           e.canExecute = this.$.toolbar.canUndo();
@@ -209,7 +211,7 @@ cr.define('downloads', function() {
     updateItem_: function(index, data) {
       this.set('items_.' + index, data);
       this.updateHideDates_(index, index);
-      var list = /** @type {!IronListElement} */(this.$['downloads-list']);
+      var list = /** @type {!IronListElement} */ (this.$['downloads-list']);
       list.updateSizeForItem(index);
     },
   });
@@ -220,7 +222,7 @@ cr.define('downloads', function() {
 
   /** @return {!downloads.Manager} */
   Manager.get = function() {
-    return /** @type {!downloads.Manager} */(
+    return /** @type {!downloads.Manager} */ (
         queryRequiredElement('downloads-manager'));
   };
 
diff --git a/chromium/chrome/browser/resources/md_extensions/animation_helper.js b/chromium/chrome/browser/resources/md_extensions/animation_helper.js
index a429f18475a..00483b37d41 100644
--- a/chromium/chrome/browser/resources/md_extensions/animation_helper.js
+++ b/chromium/chrome/browser/resources/md_extensions/animation_helper.js
@@ -22,24 +22,25 @@ cr.define('extensions', function() {
    * A helper object for setting entry/exit animations. Polymer's support of
    * this is pretty limited, since it doesn't allow for things like specifying
    * hero properties or nodes.
-   * @param {!HTMLElement} element The parent element to set the animations on.
-   *     This will be used as the page in to/fromPage.
-   * @param {?HTMLElement} node The node to use for scaling and fading
-   *     animations.
-   * @constructor
    */
-  function AnimationHelper(element, node) {
-    this.element_ = element;
-    this.node_ = node;
-    element.animationConfig = {};
-  }
+  class AnimationHelper {
+    /**
+     * @param {!HTMLElement} element The parent element to set the animations
+     *     on. This will be used as the page in to/fromPage.
+     * @param {?HTMLElement} node The node to use for scaling and fading
+     *     animations.
+     */
+    constructor(element, node) {
+      this.element_ = element;
+      this.node_ = node;
+      element.animationConfig = {};
+    }
 
-  AnimationHelper.prototype = {
     /**
      * Set the entry animation for the element.
      * @param {!Array<extensions.Animation>} animations
      */
-    setEntryAnimations: function(animations) {
+    setEntryAnimations(animations) {
       var configs = [];
       for (let animation of animations) {
         switch (animation) {
@@ -56,13 +57,13 @@ cr.define('extensions', function() {
         }
       }
       this.element_.animationConfig.entry = configs;
-    },
+    }
 
     /**
      * Set the exit animation for the element.
      * @param {!Array<extensions.Animation>} animations
      */
-    setExitAnimations: function(animations) {
+    setExitAnimations(animations) {
       var configs = [];
       for (let animation of animations) {
         switch (animation) {
@@ -88,8 +89,8 @@ cr.define('extensions', function() {
         }
       }
       this.element_.animationConfig.exit = configs;
-    },
-  };
+    }
+  }
 
   return {AnimationHelper: AnimationHelper};
 });
diff --git a/chromium/chrome/browser/resources/md_extensions/code_section.html b/chromium/chrome/browser/resources/md_extensions/code_section.html
index 88d32c6b124..c8056e3452d 100644
--- a/chromium/chrome/browser/resources/md_extensions/code_section.html
+++ b/chromium/chrome/browser/resources/md_extensions/code_section.html
@@ -1,14 +1,11 @@
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <dom-module id="extensions-code-section">
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="cr-hidden-style">
       #main {
         border: 1px solid var(--paper-grey-500);
         color: var(--paper-grey-800);
diff --git a/chromium/chrome/browser/resources/md_extensions/code_section.js b/chromium/chrome/browser/resources/md_extensions/code_section.js
index 502c86dc1ff..d2f4e8f32eb 100644
--- a/chromium/chrome/browser/resources/md_extensions/code_section.js
+++ b/chromium/chrome/browser/resources/md_extensions/code_section.js
@@ -35,8 +35,8 @@ cr.define('extensions', function() {
      */
     isEmpty: function() {
       return !this.code ||
-             (!this.code.beforeHighlight && !this.code.highlight &&
-              !this.code.afterHighlight);
+          (!this.code.beforeHighlight && !this.code.highlight &&
+           !this.code.afterHighlight);
     },
 
     /**
@@ -49,9 +49,9 @@ cr.define('extensions', function() {
       if (!this.code)
         return '';
 
-      var lines = [this.code.beforeHighlight,
-                   this.code.highlight,
-                   this.code.afterHighlight].join('').match(/\n/g);
+      var lines = [
+        this.code.beforeHighlight, this.code.highlight, this.code.afterHighlight
+      ].join('').match(/\n/g);
       var lineCount = lines ? lines.length : 0;
       var textContent = '';
       for (var i = 1; i <= lineCount; ++i)
diff --git a/chromium/chrome/browser/resources/md_extensions/detail_view.html b/chromium/chrome/browser/resources/md_extensions/detail_view.html
index d9fb22ad877..fed3c550838 100644
--- a/chromium/chrome/browser/resources/md_extensions/detail_view.html
+++ b/chromium/chrome/browser/resources/md_extensions/detail_view.html
@@ -1,6 +1,10 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/html/action_link.html">
+<link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
@@ -11,13 +15,8 @@
 <link rel="import" href="chrome://extensions/item_util.html">
 
 <dom-module id="extensions-detail-view">
-  <style include="iron-flex"></style>
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="iron-flex cr-hidden-style action-link">
       :host {
         display: flex;
         justify-content: center;
@@ -72,7 +71,6 @@
 
       .section {
         border-bottom: 1px solid var(--paper-grey-400);
-        font-size: 13px;
         padding: 16px 20px;
       }
 
@@ -156,10 +154,10 @@
           <ul id="inspect-views">
             <template is="dom-repeat" items="[[data.views]]">
               <li>
-                <button class="inspectable-view" on-tap="onInspectTap_"
-                    is="paper-icon-button-light">
+                <a is="action-link" class="inspectable-view"
+                    on-tap="onInspectTap_">
                   [[computeInspectLabel_(item)]]
-                </button>
+                </a>
               </li>
             </template>
           </ul>
diff --git a/chromium/chrome/browser/resources/md_extensions/detail_view.js b/chromium/chrome/browser/resources/md_extensions/detail_view.js
index e8b733e51df..31695c4011f 100644
--- a/chromium/chrome/browser/resources/md_extensions/detail_view.js
+++ b/chromium/chrome/browser/resources/md_extensions/detail_view.js
@@ -39,7 +39,9 @@ cr.define('extensions', function() {
      * @return {boolean}
      * @private
      */
-    isEnabled_: function() { return extensions.isEnabled(this.data.state); },
+    isEnabled_: function() {
+      return extensions.isEnabled(this.data.state);
+    },
 
     /**
      * @return {boolean}
@@ -109,15 +111,14 @@ cr.define('extensions', function() {
      */
     shouldShowOptionsSection_: function() {
       return this.data.incognitoAccess.isEnabled ||
-             this.data.fileAccess.isEnabled ||
-             this.data.runOnAllUrls.isEnabled ||
-             this.data.errorCollection.isEnabled;
+          this.data.fileAccess.isEnabled || this.data.runOnAllUrls.isEnabled ||
+          this.data.errorCollection.isEnabled;
     },
 
     /** @private */
     onEnableChange_: function() {
-      this.delegate.setItemEnabled(this.data.id,
-                                   this.$['enable-toggle'].checked);
+      this.delegate.setItemEnabled(
+          this.data.id, this.$['enable-toggle'].checked);
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/md_extensions/drop_overlay.html b/chromium/chrome/browser/resources/md_extensions/drop_overlay.html
index f1ae416753c..ea2646c74d0 100644
--- a/chromium/chrome/browser/resources/md_extensions/drop_overlay.html
+++ b/chromium/chrome/browser/resources/md_extensions/drop_overlay.html
@@ -1,3 +1,4 @@
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/drag_wrapper.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
@@ -8,11 +9,7 @@
 
 <dom-module id="extensions-drop-overlay">
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="cr-hidden-style">
       :host {
         align-items: center;
         background-color: white;
diff --git a/chromium/chrome/browser/resources/md_extensions/drop_overlay.js b/chromium/chrome/browser/resources/md_extensions/drop_overlay.js
index e0d88d9a08d..d862888c2da 100644
--- a/chromium/chrome/browser/resources/md_extensions/drop_overlay.js
+++ b/chromium/chrome/browser/resources/md_extensions/drop_overlay.js
@@ -3,23 +3,23 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
+'use strict';
 
-  Polymer({
-    is: 'extensions-drop-overlay',
-    created: function() {
+Polymer({
+  is: 'extensions-drop-overlay',
+  created: function() {
+    this.hidden = true;
+    var dragTarget = document.documentElement;
+    this.dragWrapperHandler_ =
+        new extensions.DragAndDropHandler(true, dragTarget);
+    dragTarget.addEventListener('extension-drag-started', function() {
+      this.hidden = false;
+    }.bind(this));
+    dragTarget.addEventListener('extension-drag-ended', function() {
       this.hidden = true;
-      var dragTarget = document.documentElement;
-      this.dragWrapperHandler_ =
-          new extensions.DragAndDropHandler(true, dragTarget);
-      dragTarget.addEventListener('extension-drag-started', function() {
-        this.hidden = false;
-      }.bind(this));
-      dragTarget.addEventListener('extension-drag-ended', function() {
-        this.hidden = true;
-      }.bind(this));
-      this.dragWrapper_ =
-          new cr.ui.DragWrapper(dragTarget, this.dragWrapperHandler_);
-    },
-  });
+    }.bind(this));
+    this.dragWrapper_ =
+        new cr.ui.DragWrapper(dragTarget, this.dragWrapperHandler_);
+  },
+});
 })();
diff --git a/chromium/chrome/browser/resources/md_extensions/error_page.html b/chromium/chrome/browser/resources/md_extensions/error_page.html
index 10bcd508ee9..742a82408fe 100644
--- a/chromium/chrome/browser/resources/md_extensions/error_page.html
+++ b/chromium/chrome/browser/resources/md_extensions/error_page.html
@@ -1,3 +1,4 @@
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
@@ -10,11 +11,7 @@
 
 <dom-module id="extensions-error-page">
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="cr-hidden-style">
       #main {
         background-color: white;
         height: 800px;
diff --git a/chromium/chrome/browser/resources/md_extensions/error_page.js b/chromium/chrome/browser/resources/md_extensions/error_page.js
index da607103b98..2658f9d33f5 100644
--- a/chromium/chrome/browser/resources/md_extensions/error_page.js
+++ b/chromium/chrome/browser/resources/md_extensions/error_page.js
@@ -110,7 +110,7 @@ cr.define('extensions', function() {
     onDeleteErrorTap_: function(event) {
       // TODO(devlin): It would be cleaner if we could cast this to a
       // PolymerDomRepeatEvent-type thing, but that doesn't exist yet.
-      var e = /** @type {!{model:Object}} */(event);
+      var e = /** @type {!{model:Object}} */ (event);
       this.delegate.deleteErrors(this.data.id, [e.model.item.id]);
     },
 
@@ -134,7 +134,8 @@ cr.define('extensions', function() {
           // slice(1) because pathname starts with a /.
           args.pathSuffix = new URL(error.source).pathname.slice(1);
           args.lineNumber = error.stackTrace && error.stackTrace[0] ?
-                                error.stackTrace[0].lineNumber : 0;
+              error.stackTrace[0].lineNumber :
+              0;
           break;
       }
       this.delegate.requestFileSource(args).then(function(code) {
@@ -151,8 +152,7 @@ cr.define('extensions', function() {
      * @private
      */
     computeErrorClass_: function(selectedError, error) {
-      return selectedError == error ?
-          'error-item selected' : 'error-item';
+      return selectedError == error ? 'error-item selected' : 'error-item';
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/md_extensions/extensions.html b/chromium/chrome/browser/resources/md_extensions/extensions.html
index 531a160533b..fb287b7b84f 100644
--- a/chromium/chrome/browser/resources/md_extensions/extensions.html
+++ b/chromium/chrome/browser/resources/md_extensions/extensions.html
@@ -13,14 +13,15 @@
 
     html,
     body {
-      font-family: Roboto;
       height: 100%;
+      line-height: 154%;
       margin: 0;
     }
   </style>
 </head>
 <body>
   <extensions-manager></extensions-manager>
+  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
   <link rel="import" href="chrome://resources/html/load_time_data.html">
   <link rel="import" href="chrome://extensions/strings.html">
   <link rel="import" href="chrome://extensions/service.html">
diff --git a/chromium/chrome/browser/resources/md_extensions/extensions.js b/chromium/chrome/browser/resources/md_extensions/extensions.js
index a152964ff7d..5b5cfd27e02 100644
--- a/chromium/chrome/browser/resources/md_extensions/extensions.js
+++ b/chromium/chrome/browser/resources/md_extensions/extensions.js
@@ -3,10 +3,10 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
-  var manager = /** @type {extensions.Manager} */(
-                    document.querySelector('extensions-manager'));
-  manager.readyPromiseResolver.promise.then(function() {
-    extensions.Service.getInstance().managerReady(manager);
-  });
+'use strict';
+var manager = /** @type {extensions.Manager} */ (
+    document.querySelector('extensions-manager'));
+manager.readyPromiseResolver.promise.then(function() {
+  extensions.Service.getInstance().managerReady(manager);
+});
 })();
diff --git a/chromium/chrome/browser/resources/md_extensions/item.html b/chromium/chrome/browser/resources/md_extensions/item.html
index 6709a81e514..0b1ec86fa41 100644
--- a/chromium/chrome/browser/resources/md_extensions/item.html
+++ b/chromium/chrome/browser/resources/md_extensions/item.html
@@ -1,8 +1,13 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/html/action_link.html">
+<link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://extensions/icons.html">
 <link rel="import" href="chrome://extensions/item_util.html">
 <link rel="import" href="chrome://extensions/strings.html">
@@ -14,13 +19,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 
 <dom-module id="extensions-item">
-  <style include="iron-flex"></style>
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="iron-flex cr-hidden-style action-link paper-button-style">
       #icon-wrapper {
         align-self: flex-start;
         display: flex;
@@ -37,7 +37,6 @@
         background: white;
         display: flex;
         flex-direction: column;
-        font-size: 13px;
         height: 160px;
         width: 400px;
       }
@@ -87,19 +86,6 @@
         color: var(--paper-grey-600);
       }
 
-      #description,
-      #extension-id,
-      #inspect-views {
-        line-height: 20px;
-      }
-
-      #inspect-views paper-button {
-        color: var(--google-blue-700);
-        height: 20px;
-        padding: 0;
-        text-transform: none;
-      }
-
       #button-strip {
         -webkit-padding-end: 4px;
         -webkit-padding-start: 20px;
@@ -110,6 +96,10 @@
         padding-top: 8px;
       }
 
+      #button-strip paper-button {
+        margin: 0 4px;
+      }
+
       #source-indicator {
         -webkit-margin-start: 30px;
         margin-top: 30px;
@@ -152,20 +142,10 @@
         display: block;
       }
 
-      paper-button,
       paper-toggle-button {
         cursor: pointer;
       }
 
-      #button-strip paper-button {
-        align-items: center;
-        display: flex;
-        margin: 0 4px;
-        min-height: 32px;
-        padding: 0 12px;
-        text-transform: uppercase;
-      }
-
       .action-button {
         color: var(--google-blue-500);
       }
@@ -231,14 +211,14 @@
                 if="[[!computeInspectViewsHidden_(data.views)]]">
               <div id="inspect-views">
                 <span>$i18n{itemInspectViews}</span>
-                <paper-button on-tap="onInspectTap_">
+                <a is="action-link" on-tap="onInspectTap_">
                   [[computeFirstInspectLabel_(data.views)]]
-                </paper-button>
-                <paper-button
+                </a>
+                <a is="action-link"
                     hidden$="[[computeExtraViewsHidden_(data.views)]]"
                     on-tap="onExtraInspectTap_">
                   [[computeExtraInspectLabel_(data.views)]]
-                </paper-button>
+                </a>
               </div>
             </template>
           </template>
diff --git a/chromium/chrome/browser/resources/md_extensions/item.js b/chromium/chrome/browser/resources/md_extensions/item.js
index 83dd8f557cd..7e1570b2b9f 100644
--- a/chromium/chrome/browser/resources/md_extensions/item.js
+++ b/chromium/chrome/browser/resources/md_extensions/item.js
@@ -109,7 +109,7 @@ cr.define('extensions', function() {
      */
     computeErrorsHidden_: function() {
       return !this.data.manifestErrors.length &&
-             !this.data.runtimeErrors.length;
+          !this.data.runtimeErrors.length;
     },
 
     /** @private */
@@ -119,8 +119,8 @@ cr.define('extensions', function() {
 
     /** @private */
     onEnableChange_: function() {
-      this.delegate.setItemEnabled(this.data.id,
-                                   this.$['enable-toggle'].checked);
+      this.delegate.setItemEnabled(
+          this.data.id, this.$['enable-toggle'].checked);
     },
 
     /** @private */
@@ -160,7 +160,9 @@ cr.define('extensions', function() {
      * @return {boolean}
      * @private
      */
-    isEnabled_: function() { return extensions.isEnabled(this.data.state); },
+    isEnabled_: function() {
+      return extensions.isEnabled(this.data.state);
+    },
 
     /**
      * @return {boolean}
@@ -224,8 +226,9 @@ cr.define('extensions', function() {
      */
     computeSourceIndicatorText_: function() {
       var sourceType = extensions.getItemSource(this.data);
-      return sourceType == SourceType.WEBSTORE ? '' :
-             extensions.getItemSourceString(sourceType);
+      return sourceType == SourceType.WEBSTORE ?
+          '' :
+          extensions.getItemSourceString(sourceType);
     },
 
     /**
@@ -281,8 +284,8 @@ cr.define('extensions', function() {
      * @private
      */
     computeExtraInspectLabel_: function() {
-      return loadTimeData.getStringF('itemInspectViewsExtra',
-                                     this.data.views.length - 1);
+      return loadTimeData.getStringF(
+          'itemInspectViewsExtra', this.data.views.length - 1);
     },
 
     /**
@@ -291,8 +294,8 @@ cr.define('extensions', function() {
      */
     hasWarnings_: function() {
       return this.data.disableReasons.corruptInstall ||
-             this.data.disableReasons.suspiciousInstall ||
-             !!this.data.blacklistText;
+          this.data.disableReasons.suspiciousInstall ||
+          !!this.data.blacklistText;
     },
 
     /**
@@ -309,4 +312,3 @@ cr.define('extensions', function() {
     ItemDelegate: ItemDelegate,
   };
 });
-
diff --git a/chromium/chrome/browser/resources/md_extensions/item_list.html b/chromium/chrome/browser/resources/md_extensions/item_list.html
index e4ad4abd4d1..14883739fcc 100644
--- a/chromium/chrome/browser/resources/md_extensions/item_list.html
+++ b/chromium/chrome/browser/resources/md_extensions/item_list.html
@@ -1,3 +1,4 @@
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
@@ -8,7 +9,7 @@
 
 <dom-module id="extensions-item-list">
   <template>
-    <style>
+    <style include="cr-hidden-style">
       :host {
         @apply(--layout-vertical);
       }
@@ -18,11 +19,29 @@
         margin-top: 18px;
       }
 
+      .empty-list-message {
+        align-items: center;
+        color: #6e6e6e;
+        display: flex;
+        flex: 1;
+        font-weight: 500;
+        justify-content: center;
+      }
+
       .wrapper {
         padding: 6px;
       }
     </style>
-    <iron-list id="list" items="[[computeShownItems_(items.*, filter)]]"
+    <div id="no-items" class="empty-list-message"
+        hidden$="[[!shouldShowEmptyItemsMessage_(items.length)]]">
+      <span>$i18nRaw{noExtensionsOrApps}</span>
+    </div>
+    <div id="no-search-results" class="empty-list-message"
+        hidden$="[[!shouldShowEmptySearchMessage_(shownItems_.length)]]">
+      <span>$i18n{noSearchResults}</span>
+    </div>
+
+    <iron-list id="list" items="[[shownItems_]]"
         as="item" grid>
       <template>
         <div class="wrapper">
diff --git a/chromium/chrome/browser/resources/md_extensions/item_list.js b/chromium/chrome/browser/resources/md_extensions/item_list.js
index 2da081cdd82..a545b82e4c3 100644
--- a/chromium/chrome/browser/resources/md_extensions/item_list.js
+++ b/chromium/chrome/browser/resources/md_extensions/item_list.js
@@ -6,10 +6,7 @@ cr.define('extensions', function() {
   var ItemList = Polymer({
     is: 'extensions-item-list',
 
-    behaviors: [
-      Polymer.NeonAnimatableBehavior,
-      Polymer.IronResizableBehavior
-    ],
+    behaviors: [Polymer.NeonAnimatableBehavior, Polymer.IronResizableBehavior],
 
     properties: {
       /** @type {Array<!chrome.developerPrivate.ExtensionInfo>} */
@@ -24,6 +21,12 @@ cr.define('extensions', function() {
       },
 
       filter: String,
+
+      /** @private {Array<!chrome.developerPrivate.ExtensionInfo>} */
+      shownItems_: {
+        type: Array,
+        computed: 'computeShownItems_(items.*, filter)',
+      }
     },
 
     listeners: {
@@ -76,6 +79,15 @@ cr.define('extensions', function() {
         return item.name.toLowerCase().includes(this.filter.toLowerCase());
       }, this);
     },
+
+    shouldShowEmptyItemsMessage_: function() {
+      return this.items.length === 0;
+    },
+
+    shouldShowEmptySearchMessage_: function() {
+      return !this.shouldShowEmptyItemsMessage_() &&
+          this.shownItems_.length === 0;
+    },
   });
 
   return {
diff --git a/chromium/chrome/browser/resources/md_extensions/item_util.js b/chromium/chrome/browser/resources/md_extensions/item_util.js
index 46ad2423392..608964d1a13 100644
--- a/chromium/chrome/browser/resources/md_extensions/item_util.js
+++ b/chromium/chrome/browser/resources/md_extensions/item_util.js
@@ -115,9 +115,11 @@ cr.define('extensions', function() {
     return label;
   }
 
-  return {isEnabled: isEnabled,
-          userCanChangeEnablement: userCanChangeEnablement,
-          getItemSource: getItemSource,
-          getItemSourceString: getItemSourceString,
-          computeInspectableViewLabel: computeInspectableViewLabel};
+  return {
+    isEnabled: isEnabled,
+    userCanChangeEnablement: userCanChangeEnablement,
+    getItemSource: getItemSource,
+    getItemSourceString: getItemSourceString,
+    computeInspectableViewLabel: computeInspectableViewLabel
+  };
 });
diff --git a/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.html b/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.html
index f8afc54493e..c4b1e187080 100644
--- a/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.html
+++ b/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.html
@@ -1,9 +1,8 @@
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://extensions/animation_helper.html">
@@ -11,11 +10,7 @@
 
 <dom-module id="extensions-keyboard-shortcuts">
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="md-select cr-hidden-style">
       .shortcut-card {
         @apply(--shadow-elevation-2dp);
         background-color: white;
@@ -30,7 +25,6 @@
       .command-entry {
         align-items: center;
         display: flex;
-        font-size: 13px;
         height: 48px;
       }
 
@@ -39,7 +33,7 @@
         flex: 1;
       }
 
-      .command-entry paper-dropdown-menu {
+      .command-entry .md-select-wrapper {
         -webkit-margin-start: 40px;
       }
 
@@ -69,22 +63,6 @@
       #main {
         margin-top: 24px;
       }
-
-      #main paper-dropdown-menu {
-        --paper-input-container: {
-          margin-bottom: 14px;
-          padding: 0;
-        };
-        --paper-input-container-color: var(--paper-grey-400);
-        --paper-input-container-focus-color: var(--google-blue-500);
-        --paper-input-container-input: {
-          font-size: 13px;
-        };
-        --paper-input-container-underline-disabled: {
-          border-bottom: 1px solid;
-        };
-      }
-
     </style>
     <div id="main">
       <template is="dom-repeat" items="[[calculateShownItems_(items.*)]]">
@@ -101,14 +79,22 @@
                     shortcut="[[command.keybinding]]"
                     command-name="[[command.name]]">
                 </extensions-shortcut-input>
-                <paper-dropdown-menu
-                    disabled$="[[computeScopeDisabled_(command)]]">
-                  <paper-listbox class="dropdown-content"
-                      selected="[[computeSelectedScope_(command)]]">
-                    <paper-item>$i18n{shortcutScopeInChrome}</paper-item>
-                    <paper-item>$i18n{shortcutScopeGlobal}</paper-item>
-                  </paper-listbox>
-                </paper-dropdown>
+                <div class="md-select-wrapper">
+                  <!-- Binding "value" to triggerScopeChange_ to trigger update
+                      only after CommandScope_ becomes available. -->
+                  <select class="md-select" on-change="onScopeChanged_"
+                      disabled$="[[computeScopeDisabled_(command)]]"
+                      value="[[
+                          triggerScopeChange_(command.scope, CommandScope_)]]">
+                    <option value$="[[CommandScope_.CHROME]]">
+                      $i18n{shortcutScopeInChrome}
+                    </option>
+                    <option value$="[[CommandScope_.GLOBAL]]">
+                      $i18n{shortcutScopeGlobal}
+                    </option>
+                  </select>
+                  <span class="md-select-underline"></span>
+                </div>
               </div>
             </template>
           </div>
diff --git a/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.js b/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.js
index 98dd95e9079..1490eeb7b0d 100644
--- a/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.js
+++ b/chromium/chrome/browser/resources/md_extensions/keyboard_shortcuts.js
@@ -14,6 +14,15 @@ cr.define('extensions', function() {
     properties: {
       /** @type {Array<!chrome.developerPrivate.ExtensionInfo>} */
       items: Array,
+
+      /**
+       * Proxying the enum to be used easily by the html template.
+       * @private
+       */
+      CommandScope_: {
+        type: Object,
+        value: chrome.developerPrivate.CommandScope
+      },
     },
 
     ready: function() {
@@ -57,26 +66,27 @@ cr.define('extensions', function() {
     },
 
     /**
-     * Returns the scope index in the dropdown menu for the command's scope.
-     * @param {chrome.developerPrivate.Command} command
-     * @return {number}
-     * @private
+     * This function exists to force trigger an update when CommandScope_
+     * becomes available.
+     * @param {string} scope
+     * @return {string}
      */
-    computeSelectedScope_: function(command) {
-      // These numbers match the indexes in the dropdown menu in the html.
-      switch (command.scope) {
-        case chrome.developerPrivate.CommandScope.CHROME:
-          return 0;
-        case chrome.developerPrivate.CommandScope.GLOBAL:
-          return 1;
-      }
-      assertNotReached();
+    triggerScopeChange_: function(scope) {
+      return scope;
     },
 
     /** @private */
     onCloseButtonClick_: function() {
       this.fire('close');
     },
+
+    /**
+     * @param {!{target: HTMLSelectElement, model: Object}} event
+     * @private
+     */
+    onScopeChanged_: function(event) {
+      event.model.set('command.scope', event.target.value);
+    },
   });
 
   return {KeyboardShortcuts: KeyboardShortcuts};
diff --git a/chromium/chrome/browser/resources/md_extensions/load_error.html b/chromium/chrome/browser/resources/md_extensions/load_error.html
index c2fd7d17cb3..b032246e510 100644
--- a/chromium/chrome/browser/resources/md_extensions/load_error.html
+++ b/chromium/chrome/browser/resources/md_extensions/load_error.html
@@ -1,54 +1,16 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://extensions/code_section.html">
 
 <dom-module id="extensions-load-error">
   <template>
-    <style>
-      dialog {
-        @apply(--shadow-elevation-2dp);
-        border: none;
-        border-radius: 2px;
-        padding: 0;
-        width: 512px;
-      }
-
-      header {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 24px;
-        align-items: center;
-        border-bottom: 1px solid var(--paper-grey-200);
-        color: #333;
-        display: flex;
-        font-size: 16px;
-        justify-content: space-between;
-        padding-bottom: 16px;
-        padding-top: 16px;
-      }
-
-      #close-button {
-        height: 20px;
-        padding: 0;
-        width: 20px;
-      }
-
-      #main {
-        -webkit-margin-end: 16px;
-        -webkit-margin-start: 24px;
-        font-size: 13px;
-        line-height: 20px;
-        max-width: 800px;
-        padding-bottom: 16px;
-        padding-top: 20px;
-      }
-
+    <style include="cr-shared-style paper-button-style">
       .description-row {
-        color: #333;
         display: flex;
       }
 
@@ -56,41 +18,10 @@
         display: block;
         width: 104px;  /* Magic number from the specs. */
       }
-
-      paper-button {
-        align-items: center;
-        border-radius: 2px;
-        cursor: pointer;
-        display: flex;
-        font-size: 13px;
-        justify-content: center;
-        padding: 8px 12px;
-        text-transform: uppercase;
-      }
-
-      #buttons-container {
-        display: flex;
-        justify-content: flex-end;
-        padding: 20px;
-      }
-
-      #dismiss {
-        color: #5a5a5a;
-      }
-
-      #retry {
-        -webkit-margin-start: 12px;
-        background-color: var(--google-blue-500);
-        color: white;
-      }
     </style>
-    <dialog>
-      <header>
-        <span>$i18n{loadErrorHeading}</span>
-        <paper-icon-button id="close-button" icon="close" on-tap="close">
-        </paper-icon-button>
-      </header>
-      <div id="main">
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title" slot="title">$i18n{loadErrorHeading}</div>
+      <div class="body" slot="body">
         <div id="info">
           <div id="file" class="description-row">
             <span class="row-label">$i18n{loadErrorFileLabel}</span>
@@ -105,11 +36,11 @@
             could-not-display-code="$i18n{loadErrorCouldNotLoadManifest}">
         </extensions-code-section>
       </div>
-      <div id="buttons-container">
-        <paper-button id="dismiss" on-tap="close">
+      <div class="button-container" slot="button-container">
+        <paper-button class="cancel-button" on-tap="close">
           $i18n{loadErrorCancel}
         </paper-button>
-        <paper-button id="retry" on-tap="onRetryTap_">
+        <paper-button class="action-button" on-tap="onRetryTap_">
           $i18n{loadErrorRetry}
         </paper-button>
       </div>
diff --git a/chromium/chrome/browser/resources/md_extensions/load_error.js b/chromium/chrome/browser/resources/md_extensions/load_error.js
index eaba34c8b60..bd440713d39 100644
--- a/chromium/chrome/browser/resources/md_extensions/load_error.js
+++ b/chromium/chrome/browser/resources/md_extensions/load_error.js
@@ -64,6 +64,5 @@ cr.define('extensions', function() {
     },
   });
 
-  return {LoadError: LoadError,
-          LoadErrorDelegate: LoadErrorDelegate};
+  return {LoadError: LoadError, LoadErrorDelegate: LoadErrorDelegate};
 });
diff --git a/chromium/chrome/browser/resources/md_extensions/manager.html b/chromium/chrome/browser/resources/md_extensions/manager.html
index 0ad334bd3a5..b83e72d0a6d 100644
--- a/chromium/chrome/browser/resources/md_extensions/manager.html
+++ b/chromium/chrome/browser/resources/md_extensions/manager.html
@@ -1,5 +1,6 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
@@ -24,11 +25,7 @@
 
 <dom-module id="extensions-manager">
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="cr-hidden-style">
       :host {
         height: 100%;
       }
@@ -48,24 +45,38 @@
         overflow-y: auto;
       }
 
+      /* Neon-animated pages set the position of the content to be absolute,
+       * which is necessary for animations, but breaks sub-page layout. Apply a
+       * static position to the selected page. See
+       * https://github.com/PolymerElements/neon-animation/issues/101 for
+       * conversations.
+       * Note: Another proposed solution was
+       *   neon-animated-pages .iron-selected:not(.neon-animating) {
+       *     position: relative;
+       *   }
+       * but the below appears to work fine, and is in line with what settings
+       * does.
+       */
+      neon-animated-pages ::content > .iron-selected {
+        position: static;
+      }
+
       extensions-item {
         display: inline-block;
       }
 
       extensions-toolbar {
         background: var(--md-toolbar-color);
-        font-size: 13px;
       }
     </style>
     <extensions-drop-overlay></extensions-drop-overlay>
     <paper-header-panel id="panel">
       <extensions-toolbar class="paper-header" in-dev-mode="[[inDevMode]]"
-          on-pack-tap="onPackTap_"
+          on-pack-tap="onPackTap_" delegate="[[delegate]]"
           on-cr-toolbar-menu-tap="onMenuButtonTap_"
           on-search-changed="onFilterChanged_">
       </extensions-toolbar>
-      <dialog id="drawer" is="cr-drawer">
-        <div class="drawer-header">$i18n{toolbarTitle}</div>
+      <dialog id="drawer" is="cr-drawer" heading="$i18n{toolbarTitle}">
         <div class="drawer-content">
           <extensions-sidebar></extensions-sidebar>
         </div>
@@ -73,11 +84,10 @@
       <neon-animated-pages id="pages" attr-for-selected="id"
           selected="items-list">
         <extensions-item-list id="items-list" items="[[extensions]]"
-            delegate="[[itemDelegate]]" in-dev-mode="[[inDevMode]]"
-            filter="[[filter]]"
-            hidden$="[[computeListHidden_(extensions, extensions.splices, apps, apps.splices)]]">
+            delegate="[[delegate]]" in-dev-mode="[[inDevMode]]"
+            filter="[[filter]]" hidden$="[[!didInitPage_]]">
         </extensions-item-list>
-        <extensions-detail-view id="details-view" delegate="[[itemDelegate]]"
+        <extensions-detail-view id="details-view" delegate="[[delegate]]"
             in-dev-mode="[[inDevMode]]" data="[[detailViewItem_]]"
             on-close="onDetailsViewClose_">
         </extensions-detail-view>
@@ -85,13 +95,15 @@
             items="[[extensions]]">
         </extensions-keyboard-shortcuts>
         <extensions-error-page id="error-page" on-close="onErrorPageClose_"
-            data="[[errorPageItem_]]">
+            data="[[errorPageItem_]]" delegate="[[delegate]]">
         </extensions-error-page>
       </neon-animated-pages>
       <extensions-options-dialog id="options-dialog">
       </extensions-options-dialog>
-      <extensions-pack-dialog id="pack-dialog"></extensions-pack-dialog>
-      <extensions-load-error id="load-error"></extensions-load-error>
+      <extensions-pack-dialog id="pack-dialog" delegate="[[delegate]]">
+      </extensions-pack-dialog>
+      <extensions-load-error id="load-error" delegate="[[delegate]]">
+      </extensions-load-error>
     </paper-header-panel>
   </template>
   <script src="chrome://extensions/manager.js"></script>
diff --git a/chromium/chrome/browser/resources/md_extensions/manager.js b/chromium/chrome/browser/resources/md_extensions/manager.js
index aee244fd623..9b970cfa541 100644
--- a/chromium/chrome/browser/resources/md_extensions/manager.js
+++ b/chromium/chrome/browser/resources/md_extensions/manager.js
@@ -25,8 +25,8 @@ cr.define('extensions', function() {
       return 0;
     }
     return compareLocation(a, b) ||
-           compare(a.name.toLowerCase(), b.name.toLowerCase()) ||
-           compare(a.id, b.id);
+        compare(a.name.toLowerCase(), b.name.toLowerCase()) ||
+        compare(a.id, b.id);
   };
 
   var Manager = Polymer({
@@ -41,8 +41,9 @@ cr.define('extensions', function() {
       /** @type {extensions.Toolbar} */
       toolbar: Object,
 
-      /** @type {extensions.ItemDelegate} */
-      itemDelegate: Object,
+      // This is not typed because it implements multiple interfaces, and is
+      // passed to different elements as different types.
+      delegate: Object,
 
       inDevMode: {
         type: Boolean,
@@ -86,13 +87,26 @@ cr.define('extensions', function() {
       /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
       extensions: {
         type: Array,
-        value: function() { return []; },
+        value: function() {
+          return [];
+        },
       },
 
       /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
       apps: {
         type: Array,
-        value: function() { return []; },
+        value: function() {
+          return [];
+        },
+      },
+
+      /**
+       * Prevents page content from showing before data is first loaded.
+       * @private
+       */
+      didInitPage_: {
+        type: Boolean,
+        value: false,
       },
     },
 
@@ -108,17 +122,17 @@ cr.define('extensions', function() {
     ready: function() {
       /** @type {extensions.Sidebar} */
       this.sidebar =
-          /** @type {extensions.Sidebar} */(this.$$('extensions-sidebar'));
+          /** @type {extensions.Sidebar} */ (this.$$('extensions-sidebar'));
       this.toolbar =
-          /** @type {extensions.Toolbar} */(this.$$('extensions-toolbar'));
+          /** @type {extensions.Toolbar} */ (this.$$('extensions-toolbar'));
       this.listHelper_ = new ListHelper(this);
       this.sidebar.setListDelegate(this.listHelper_);
       this.readyPromiseResolver.resolve();
       this.currentPage_ = {page: Page.LIST};
       this.navigationHelper_ =
           new extensions.NavigationHelper(function(newPage) {
-        this.changePage(newPage, true);
-      }.bind(this));
+            this.changePage(newPage, true);
+          }.bind(this));
       this.optionsDialog.addEventListener('close', function() {
         // We update the page when the options dialog closes, but only if we're
         // still on the details page. We could be on a different page if the
@@ -167,6 +181,7 @@ cr.define('extensions', function() {
      * the user visits chrome://extensions/?id=..., we land on the proper page.
      */
     initPage: function() {
+      this.didInitPage_ = true;
       this.changePage(this.navigationHelper_.getCurrentPage(), true);
     },
 
@@ -228,15 +243,7 @@ cr.define('extensions', function() {
      */
     getData_: function(id) {
       return this.extensions[this.getIndexInList_('extensions', id)] ||
-             this.apps[this.getIndexInList_('apps', id)];
-    },
-
-    /**
-     * @return {boolean} Whether the list should be visible.
-     * @private
-     */
-    computeListHidden_: function() {
-      return this.$['items-list'].items.length == 0;
+          this.apps[this.getIndexInList_('apps', id)];
     },
 
     /**
@@ -276,8 +283,9 @@ cr.define('extensions', function() {
       if (this.detailViewItem_ && this.detailViewItem_.id == item.id &&
           this.$.pages.selected == Page.DETAILS) {
         this.detailViewItem_ = item;
-      } else if (this.errorPageItem_ && this.errorPageItem_.id == item.id &&
-                 this.$.pages.selected == Page.ERRORS) {
+      } else if (
+          this.errorPageItem_ && this.errorPageItem_.id == item.id &&
+          this.$.pages.selected == Page.ERRORS) {
         this.errorPageItem_ = item;
       }
     },
@@ -346,8 +354,8 @@ cr.define('extensions', function() {
       if (fromPage != toPage) {
         var entry;
         var exit;
-        if (fromPage == Page.LIST && (toPage == Page.DETAILS ||
-                                           toPage == Page.ERRORS)) {
+        if (fromPage == Page.LIST &&
+            (toPage == Page.DETAILS || toPage == Page.ERRORS)) {
           this.$['items-list'].willShowItemSubpage(data.id);
           entry = [extensions.Animation.HERO];
           // The item grid can be larger than the detail view that we're
@@ -357,8 +365,7 @@ cr.define('extensions', function() {
           entry = [extensions.Animation.FADE_IN];
           exit = [extensions.Animation.SCALE_DOWN];
         } else {
-          assert(toPage == Page.DETAILS ||
-                 toPage == Page.SHORTCUTS);
+          assert(toPage == Page.DETAILS || toPage == Page.SHORTCUTS);
           entry = [extensions.Animation.FADE_IN];
           exit = [extensions.Animation.FADE_OUT];
         }
@@ -418,18 +425,15 @@ cr.define('extensions', function() {
     }
   });
 
-  /**
-   * @param {extensions.Manager} manager
-   * @constructor
-   * @implements {extensions.SidebarListDelegate}
-   */
-  function ListHelper(manager) {
-    this.manager_ = manager;
-  }
+  /** @implements {extensions.SidebarListDelegate} */
+  class ListHelper {
+    /** @param {extensions.Manager} manager */
+    constructor(manager) {
+      this.manager_ = manager;
+    }
 
-  ListHelper.prototype = {
     /** @override */
-    showType: function(type) {
+    showType(type) {
       var items;
       switch (type) {
         case extensions.ShowingType.EXTENSIONS:
@@ -440,15 +444,15 @@ cr.define('extensions', function() {
           break;
       }
 
-      this.manager_.$/* hack */ ['items-list'].set('items', assert(items));
+      this.manager_.$ /* hack */['items-list'].set('items', assert(items));
       this.manager_.changePage({page: Page.LIST});
-    },
+    }
 
     /** @override */
-    showKeyboardShortcuts: function() {
+    showKeyboardShortcuts() {
       this.manager_.changePage({page: Page.SHORTCUTS});
-    },
-  };
+    }
+  }
 
   return {Manager: Manager};
 });
diff --git a/chromium/chrome/browser/resources/md_extensions/navigation_helper.js b/chromium/chrome/browser/resources/md_extensions/navigation_helper.js
index e58107fdad6..d15ca599647 100644
--- a/chromium/chrome/browser/resources/md_extensions/navigation_helper.js
+++ b/chromium/chrome/browser/resources/md_extensions/navigation_helper.js
@@ -31,26 +31,28 @@ cr.define('extensions', function() {
    * A helper object to manage in-page navigations. Since the extensions page
    * needs to support different urls for different subpages (like the details
    * page), we use this object to manage the history and url conversions.
-   * @param {!function(!PageState):void} onHistoryChange A function to call when
-   *     the page has changed as a result of the user going back or forward in
-   *     history; called with the new active page.
-   * @constructor */
-  function NavigationHelper(onHistoryChange) {
-    this.onHistoryChange_ = onHistoryChange;
-    window.addEventListener('popstate', this.onPopState_.bind(this));
-  }
+   */
+  class NavigationHelper {
+    /**
+     * @param {!function(!PageState):void} onHistoryChange A function to call
+     *     when the page has changed as a result of the user going back or
+     *     forward in history; called with the new active page.
+     */
+    constructor(onHistoryChange) {
+      this.onHistoryChange_ = onHistoryChange;
+      window.addEventListener('popstate', this.onPopState_.bind(this));
+    }
 
-  NavigationHelper.prototype = {
     /** @private */
-    onPopState_: function() {
+    onPopState_() {
       this.onHistoryChange_(this.getCurrentPage());
-    },
+    }
 
     /**
-     * Returns the page that should be displayed for the current URL.
-     * @return {!PageState}
+     * @return {!PageState} The page that should be displayed for the current
+     *     URL.
      */
-    getCurrentPage: function() {
+    getCurrentPage() {
       var search = new URLSearchParams(location.search);
       var id = search.get('id');
       if (id)
@@ -66,13 +68,13 @@ cr.define('extensions', function() {
         return {page: Page.SHORTCUTS};
 
       return {page: Page.LIST};
-    },
+    }
 
     /**
      * Called when a page changes, and pushes state to history to reflect it.
      * @param {!PageState} entry
      */
-    updateHistory: function(entry) {
+    updateHistory(entry) {
       var path;
       switch (entry.page) {
         case Page.LIST:
@@ -96,8 +98,7 @@ cr.define('extensions', function() {
       assert(path);
       var state = {url: path};
       var currentPage = this.getCurrentPage();
-      var isDialogNavigation =
-          currentPage.page == entry.page &&
+      var isDialogNavigation = currentPage.page == entry.page &&
           currentPage.extensionId == entry.extensionId;
       // Navigating to a dialog doesn't visually change pages; it just opens
       // a dialog. As such, we replace state rather than pushing a new state
@@ -107,8 +108,8 @@ cr.define('extensions', function() {
         history.replaceState(state, '', path);
       else
         history.pushState(state, '', path);
-    },
-  };
+    }
+  }
 
   return {NavigationHelper: NavigationHelper};
 });
diff --git a/chromium/chrome/browser/resources/md_extensions/options_dialog.html b/chromium/chrome/browser/resources/md_extensions/options_dialog.html
index 92c2411916c..c00b200d8ef 100644
--- a/chromium/chrome/browser/resources/md_extensions/options_dialog.html
+++ b/chromium/chrome/browser/resources/md_extensions/options_dialog.html
@@ -1,25 +1,11 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 
 <dom-module id="extensions-options-dialog">
   <template>
     <style>
-      dialog {
-        @apply(--shadow-elevation-2dp);
-        border: none;
-        border-radius: 2px;
-        padding: 0;
-      }
-      header {
-        align-items: center;
-        border-bottom: 1px solid var(--paper-grey-200);
-        color: var(--paper-grey-800);
-        display: flex;
-        justify-content: space-between;
-        padding: 12px 20px;
-      }
       #icon {
         -webkit-margin-end: 10px;
         height: 32px;
@@ -29,22 +15,26 @@
         align-items: center;
         display: flex;
       }
+
       extensionoptions {
-        display: inline-block;
-        height: 100%;
+        display: block;
+      }
+
+      dialog {
+        /* Initially as wide as possible. This will be adjusted by js-code. */
         width: 100%;
       }
     </style>
-    <dialog>
-      <header>
+
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title" slot="title">
         <div id="icon-and-name-wrapper">
           <img id="icon" src="[[data_.iconUrl]]"></img>
           <span>[[data_.name]]</span>
         </div>
-        <paper-icon-button id="close-button" icon="close" on-tap="close">
-        </paper-icon-button>
-      </header>
-      <div id="main"></div>
+      </div>
+      <div class="body" slot="body" id="body">
+      </div>
     </dialog>
   </template>
   <script src="chrome://extensions/options_dialog.js"></script>
diff --git a/chromium/chrome/browser/resources/md_extensions/options_dialog.js b/chromium/chrome/browser/resources/md_extensions/options_dialog.js
index 3ea5059563f..261f00708ca 100644
--- a/chromium/chrome/browser/resources/md_extensions/options_dialog.js
+++ b/chromium/chrome/browser/resources/md_extensions/options_dialog.js
@@ -9,7 +9,8 @@ cr.define('extensions', function() {
   var MAX_WIDTH = 600;
   var MIN_HEIGHT = 300;
   var MIN_WIDTH = 300;
-  var HEADER_PADDING = 40;
+  var HEADER_EXTRA_SPACING = 50;  // 40 from x-button + 10 from img margin.
+  var DIALOG_PADDING = 32;        // Padding from cr-dialog's .body styling.
 
   var OptionsDialog = Polymer({
     is: 'extensions-options-dialog',
@@ -37,19 +38,20 @@ cr.define('extensions', function() {
       };
 
       var onSizeChanged = function(e) {
-        var minHeaderWidth =
-            this.$['icon-and-name-wrapper'].offsetWidth +
-            this.$['close-button'].offsetWidth +
-            HEADER_PADDING;
+        var minHeaderWidth = this.$$('#icon-and-name-wrapper img').offsetWidth +
+            this.$$('#icon-and-name-wrapper span').offsetWidth +
+            HEADER_EXTRA_SPACING;
         var minWidth = Math.max(minHeaderWidth, MIN_WIDTH);
-        this.$.main.style.height =
+        this.extensionOptions_.style.height =
             bounded(MIN_HEIGHT, MAX_HEIGHT, e.height) + 'px';
-        this.$.main.style.width =
+        this.extensionOptions_.style.width =
             bounded(minWidth, MAX_WIDTH, e.width) + 'px';
+        this.$.dialog.style.width =
+            (bounded(minWidth, MAX_WIDTH, e.width) + DIALOG_PADDING) + 'px';
       }.bind(this);
 
       this.extensionOptions_.onpreferredsizechanged = onSizeChanged;
-      this.$.main.appendChild(this.extensionOptions_);
+      this.$.body.appendChild(this.extensionOptions_);
       this.$$('dialog').showModal();
       onSizeChanged({height: 0, width: 0});
     },
diff --git a/chromium/chrome/browser/resources/md_extensions/pack_dialog.html b/chromium/chrome/browser/resources/md_extensions/pack_dialog.html
index 218057e7a54..ad54b3f77e0 100644
--- a/chromium/chrome/browser/resources/md_extensions/pack_dialog.html
+++ b/chromium/chrome/browser/resources/md_extensions/pack_dialog.html
@@ -1,67 +1,18 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 
 <dom-module id="extensions-pack-dialog">
   <template>
-    <style>
-      dialog {
-        @apply(--shadow-elevation-2dp);
-        border: none;
-        border-radius: 2px;
-        padding: 0;
-        width: 512px;
-      }
-
-      header {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 24px;
-        align-items: center;
-        border-bottom: 1px solid var(--paper-grey-200);
-        color: #333;
-        display: flex;
-        font-size: 16px;
-        justify-content: space-between;
-        padding-bottom: 16px;
-        padding-top: 16px;
-      }
-
-      #close-button {
-        height: 20px;
-        padding: 0;
-        width: 20px;
-      }
-
-      #main {
-        -webkit-margin-end: 16px;
-        -webkit-margin-start: 24px;
-        font-size: 13px;
-        max-width: 800px;
-        padding-bottom: 16px;
-        padding-top: 20px;
-      }
-
-      #description {
-        color: #333;
-      }
-
-      paper-button {
-        align-items: center;
-        border-radius: 2px;
-        cursor: pointer;
-        display: flex;
-        font-size: 13px;
-        justify-content: center;
-        padding: 8px 12px;
-        text-transform: uppercase;
-      }
-
+    <style include="cr-shared-style paper-button-style">
       .file-input {
+        align-items: center;
         display: flex;
         --paper-input-container-input: {
           font-size: inherit;
@@ -76,31 +27,12 @@
         -webkit-margin-start: 10px;
         color: var(--google-blue-500);
       }
-
-      #buttons-container {
-        display: flex;
-        justify-content: flex-end;
-        padding: 20px;
-      }
-
-      #dismiss {
-        color: #5a5a5a;
-      }
-
-      #confirm {
-        -webkit-margin-start: 12px;
-        background-color: var(--google-blue-500);
-        color: white;
-      }
     </style>
-    <dialog>
-      <header>
-        <span>$i18n{packDialogTitle}</span>
-        <paper-icon-button id="close-button" icon="close" on-tap="close">
-        </paper-icon-button>
-      </header>
-      <div id="main">
-        <div id="description">$i18n{packDialogContent}</div>
+
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title" slot="title">$i18n{packDialogTitle}</div>
+      <div class="body" slot="body">
+        <div>$i18n{packDialogContent}</div>
         <div class="file-input">
           <paper-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
               always-float-label value="[[packDirectory_]]">
@@ -118,11 +50,11 @@
           </paper-button>
         </div>
       </div>
-      <div id="buttons-container">
-        <paper-button id="dismiss" on-tap="close">
+      <div class="button-container" slot="button-container">
+        <paper-button class="cancel-button" on-tap="close">
           $i18n{packDialogCancel}
         </paper-button>
-        <paper-button id="confirm" on-tap="onConfirmTap_">
+        <paper-button class="action-button" on-tap="onConfirmTap_">
           $i18n{packDialogConfirm}
         </paper-button>
       </div>
diff --git a/chromium/chrome/browser/resources/md_extensions/pack_dialog.js b/chromium/chrome/browser/resources/md_extensions/pack_dialog.js
index 89b9edb1da0..b1524a08689 100644
--- a/chromium/chrome/browser/resources/md_extensions/pack_dialog.js
+++ b/chromium/chrome/browser/resources/md_extensions/pack_dialog.js
@@ -75,6 +75,5 @@ cr.define('extensions', function() {
     },
   });
 
-  return {PackDialog: PackDialog,
-          PackDialogDelegate: PackDialogDelegate};
+  return {PackDialog: PackDialog, PackDialogDelegate: PackDialogDelegate};
 });
diff --git a/chromium/chrome/browser/resources/md_extensions/service.js b/chromium/chrome/browser/resources/md_extensions/service.js
index a063ca7fba6..3754972ebf0 100644
--- a/chromium/chrome/browser/resources/md_extensions/service.js
+++ b/chromium/chrome/browser/resources/md_extensions/service.js
@@ -6,32 +6,32 @@ cr.define('extensions', function() {
   'use strict';
 
   /**
-   * @constructor
    * @implements {extensions.ErrorPageDelegate}
    * @implements {extensions.ItemDelegate}
    * @implements {extensions.LoadErrorDelegate}
    * @implements {extensions.PackDialogDelegate}
    * @implements {extensions.ToolbarDelegate}
    */
-  function Service() {}
+  class Service {
+    constructor() {
+      /** @private {boolean} */
+      this.isDeleting_ = false;
 
-  Service.prototype = {
-    /** @private {boolean} */
-    isDeleting_: false,
+      /** @private {extensions.Manager} */
+      this.manager_;
+
+      /** @private {Array<chrome.developerPrivate.ExtensionInfo>} */
+      this.extensions_;
+    }
 
     /** @param {extensions.Manager} manager */
-    managerReady: function(manager) {
-      /** @private {extensions.Manager} */
+    managerReady(manager) {
       this.manager_ = manager;
-      this.manager_.toolbar.setDelegate(this);
-      this.manager_.set('itemDelegate', this);
-      this.manager_.packDialog.set('delegate', this);
-      this.manager_.loadError.set('delegate', this);
-      this.manager_.errorPage.delegate = this;
+      this.manager_.set('delegate', this);
+
       var keyboardShortcuts = this.manager_.keyboardShortcuts;
       keyboardShortcuts.addEventListener(
-          'shortcut-updated',
-          this.onExtensionCommandUpdated_.bind(this));
+          'shortcut-updated', this.onExtensionCommandUpdated_.bind(this));
       keyboardShortcuts.addEventListener(
           'shortcut-capture-started',
           this.onShortcutCaptureChanged_.bind(this, true));
@@ -45,30 +45,29 @@ cr.define('extensions', function() {
       chrome.developerPrivate.getExtensionsInfo(
           {includeDisabled: true, includeTerminated: true},
           function(extensions) {
-        /** @private {Array<chrome.developerPrivate.ExtensionInfo>} */
-        this.extensions_ = extensions;
-        for (let extension of extensions)
-          this.manager_.addItem(extension);
+            this.extensions_ = extensions;
+            for (let extension of extensions)
+              this.manager_.addItem(extension);
 
-        this.manager_.initPage();
-      }.bind(this));
+            this.manager_.initPage();
+          }.bind(this));
       chrome.developerPrivate.getProfileConfiguration(
           this.onProfileStateChanged_.bind(this));
-    },
+    }
 
     /**
      * @param {chrome.developerPrivate.ProfileInfo} profileInfo
      * @private
      */
-    onProfileStateChanged_: function(profileInfo) {
+    onProfileStateChanged_(profileInfo) {
       this.manager_.set('inDevMode', profileInfo.inDeveloperMode);
-    },
+    }
 
     /**
      * @param {chrome.developerPrivate.EventData} eventData
      * @private
      */
-    onItemStateChanged_: function(eventData) {
+    onItemStateChanged_(eventData) {
       var currentIndex = this.extensions_.findIndex(function(extension) {
         return extension.id == eventData.item_id;
       });
@@ -104,7 +103,7 @@ cr.define('extensions', function() {
         default:
           assertNotReached();
       }
-    },
+    }
 
     /**
      * Opens a file browser dialog for the user to select a file (or directory).
@@ -113,32 +112,32 @@ cr.define('extensions', function() {
      * @return {Promise<string>} The promise to be resolved with the selected
      *     path.
      */
-    chooseFilePath_: function(selectType, fileType) {
+    chooseFilePath_(selectType, fileType) {
       return new Promise(function(resolve, reject) {
         chrome.developerPrivate.choosePath(
             selectType, fileType, function(path) {
-          if (chrome.runtime.lastError &&
-              chrome.runtime.lastError != 'File selection was canceled.') {
-            reject(chrome.runtime.lastError);
-          } else {
-            resolve(path || '');
-          }
-        });
+              if (chrome.runtime.lastError &&
+                  chrome.runtime.lastError != 'File selection was canceled.') {
+                reject(chrome.runtime.lastError);
+              } else {
+                resolve(path || '');
+              }
+            });
       });
-    },
+    }
 
     /**
      * Updates an extension command.
      * @param {!CustomEvent} e
      * @private
      */
-    onExtensionCommandUpdated_: function(e) {
+    onExtensionCommandUpdated_(e) {
       chrome.developerPrivate.updateExtensionCommand({
         extensionId: e.detail.item,
         commandName: e.detail.commandName,
         keybinding: e.detail.keybinding,
       });
-    },
+    }
 
     /**
      * Called when shortcut capturing changes in order to suspend or re-enable
@@ -151,9 +150,9 @@ cr.define('extensions', function() {
      * @param {!CustomEvent} e
      * @private
      */
-    onShortcutCaptureChanged_: function(isCapturing, e) {
+    onShortcutCaptureChanged_(isCapturing, e) {
       chrome.developerPrivate.setShortcutHandlingSuspended(isCapturing);
-    },
+    }
 
     /**
      * Attempts to load an unpacked extension, optionally as another attempt at
@@ -161,24 +160,24 @@ cr.define('extensions', function() {
      * @param {string=} opt_retryGuid
      * @private
      */
-    loadUnpackedHelper_: function(opt_retryGuid) {
+    loadUnpackedHelper_(opt_retryGuid) {
       chrome.developerPrivate.loadUnpacked(
           {failQuietly: true, populateError: true, retryGuid: opt_retryGuid},
           (loadError) => {
-        if (chrome.runtime.lastError &&
-            chrome.runtime.lastError.message !=
-                'File selection was canceled.') {
-          throw new Error(chrome.runtime.lastError.message);
-        }
-        if (loadError) {
-          this.manager_.loadError.loadError = loadError;
-          this.manager_.loadError.show();
-        }
-      });
-    },
+            if (chrome.runtime.lastError &&
+                chrome.runtime.lastError.message !=
+                    'File selection was canceled.') {
+              throw new Error(chrome.runtime.lastError.message);
+            }
+            if (loadError) {
+              this.manager_.loadError.loadError = loadError;
+              this.manager_.loadError.show();
+            }
+          });
+    }
 
     /** @override */
-    deleteItem: function(id) {
+    deleteItem(id) {
       if (this.isDeleting_)
         return;
       this.isDeleting_ = true;
@@ -189,67 +188,67 @@ cr.define('extensions', function() {
         chrome.runtime.lastError;
         this.isDeleting_ = false;
       }.bind(this));
-    },
+    }
 
     /** @override */
-    setItemEnabled: function(id, isEnabled) {
+    setItemEnabled(id, isEnabled) {
       chrome.management.setEnabled(id, isEnabled);
-    },
+    }
 
     /** @override */
-    setItemAllowedIncognito: function(id, isAllowedIncognito) {
+    setItemAllowedIncognito(id, isAllowedIncognito) {
       chrome.developerPrivate.updateExtensionConfiguration({
         extensionId: id,
         incognitoAccess: isAllowedIncognito,
       });
-    },
+    }
 
     /** @override */
-    setItemAllowedOnFileUrls: function(id, isAllowedOnFileUrls) {
+    setItemAllowedOnFileUrls(id, isAllowedOnFileUrls) {
       chrome.developerPrivate.updateExtensionConfiguration({
         extensionId: id,
         fileAccess: isAllowedOnFileUrls,
       });
-    },
+    }
 
     /** @override */
-    setItemAllowedOnAllSites: function(id, isAllowedOnAllSites) {
+    setItemAllowedOnAllSites(id, isAllowedOnAllSites) {
       chrome.developerPrivate.updateExtensionConfiguration({
         extensionId: id,
         runOnAllUrls: isAllowedOnAllSites,
       });
-    },
+    }
 
     /** @override */
-    setItemCollectsErrors: function(id, collectsErrors) {
+    setItemCollectsErrors(id, collectsErrors) {
       chrome.developerPrivate.updateExtensionConfiguration({
         extensionId: id,
         errorCollection: collectsErrors,
       });
-    },
+    }
 
     /** @override */
-    inspectItemView: function(id, view) {
+    inspectItemView(id, view) {
       chrome.developerPrivate.openDevTools({
         extensionId: id,
         renderProcessId: view.renderProcessId,
         renderViewId: view.renderViewId,
         incognito: view.incognito,
       });
-    },
+    }
 
     /** @override */
-    reloadItem: function(id) {
+    reloadItem(id) {
       chrome.developerPrivate.reload(id, {failQuietly: false});
-    },
+    }
 
     /** @override */
-    repairItem: function(id) {
+    repairItem(id) {
       chrome.developerPrivate.repairExtension(id);
-    },
+    }
 
     /** @override */
-    showItemOptionsPage: function(id) {
+    showItemOptionsPage(id) {
       var extension = this.extensions_.find(function(e) {
         return e.id == id;
       });
@@ -260,66 +259,66 @@ cr.define('extensions', function() {
         this.manager_.changePage(
             {page: Page.DETAILS, subpage: Dialog.OPTIONS, extensionId: id});
       }
-    },
+    }
 
     /** @override */
-    setProfileInDevMode: function(inDevMode) {
+    setProfileInDevMode(inDevMode) {
       chrome.developerPrivate.updateProfileConfiguration(
           {inDeveloperMode: inDevMode});
-    },
+    }
 
     /** @override */
-    loadUnpacked: function() {
+    loadUnpacked() {
       this.loadUnpackedHelper_();
-    },
+    }
 
     /** @override */
-    retryLoadUnpacked: function(retryGuid) {
+    retryLoadUnpacked(retryGuid) {
       this.loadUnpackedHelper_(retryGuid);
-    },
+    }
 
     /** @override */
-    choosePackRootDirectory: function() {
+    choosePackRootDirectory() {
       return this.chooseFilePath_(
           chrome.developerPrivate.SelectType.FOLDER,
           chrome.developerPrivate.FileType.LOAD);
-    },
+    }
 
     /** @override */
-    choosePrivateKeyPath: function() {
+    choosePrivateKeyPath() {
       return this.chooseFilePath_(
           chrome.developerPrivate.SelectType.FILE,
           chrome.developerPrivate.FileType.PEM);
-    },
+    }
 
     /** @override */
-    packExtension: function(rootPath, keyPath) {
+    packExtension(rootPath, keyPath) {
       chrome.developerPrivate.packDirectory(rootPath, keyPath);
-    },
+    }
 
     /** @override */
-    updateAllExtensions: function() {
+    updateAllExtensions() {
       chrome.developerPrivate.autoUpdate();
-    },
+    }
 
     /** @override */
-    deleteErrors: function(extensionId, errorIds, type) {
+    deleteErrors(extensionId, errorIds, type) {
       chrome.developerPrivate.deleteExtensionErrors({
         extensionId: extensionId,
         errorIds: errorIds,
         type: type,
       });
-    },
+    }
 
     /** @override */
-    requestFileSource: function(args) {
+    requestFileSource(args) {
       return new Promise(function(resolve, reject) {
         chrome.developerPrivate.requestFileSource(args, function(code) {
           resolve(code);
         });
       });
-    },
-  };
+    }
+  }
 
   cr.addSingletonGetter(Service);
 
diff --git a/chromium/chrome/browser/resources/md_extensions/shortcut_input.html b/chromium/chrome/browser/resources/md_extensions/shortcut_input.html
index 64fdc2cd810..381c52b046c 100644
--- a/chromium/chrome/browser/resources/md_extensions/shortcut_input.html
+++ b/chromium/chrome/browser/resources/md_extensions/shortcut_input.html
@@ -1,18 +1,16 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://extensions/shortcut_util.html">
 
 <dom-module id="extensions-shortcut-input">
   <template>
-    <style>
-      [hidden] {
-        display: none !important;
-      }
-
+    <style include="cr-hidden-style">
       #main {
         position: relative;
         width: 200px;
@@ -26,7 +24,7 @@
         --paper-input-container-color: var(--paper-grey-400);
         --paper-input-container-focus-color: var(--google-blue-500);
         --paper-input-container-input: {
-          font-size: 13px;
+          font-size: inherit;
         };
       }
 
diff --git a/chromium/chrome/browser/resources/md_extensions/shortcut_input.js b/chromium/chrome/browser/resources/md_extensions/shortcut_input.js
index 542ad36c76d..aeb278de725 100644
--- a/chromium/chrome/browser/resources/md_extensions/shortcut_input.js
+++ b/chromium/chrome/browser/resources/md_extensions/shortcut_input.js
@@ -131,9 +131,11 @@ cr.define('extensions', function() {
     /** @private */
     commitPending_: function() {
       this.shortcut = this.pendingShortcut_;
-      this.fire('shortcut-updated', {keybinding: this.shortcut,
-                                     item: this.item,
-                                     commandName: this.commandName});
+      this.fire('shortcut-updated', {
+        keybinding: this.shortcut,
+        item: this.item,
+        commandName: this.commandName
+      });
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/md_extensions/sidebar.html b/chromium/chrome/browser/resources/md_extensions/sidebar.html
index 925f4c9ac56..c8dcb011d23 100644
--- a/chromium/chrome/browser/resources/md_extensions/sidebar.html
+++ b/chromium/chrome/browser/resources/md_extensions/sidebar.html
@@ -38,7 +38,6 @@
         -webkit-padding-start: 24px;
         color: #5A5A5A;
         cursor: pointer;
-        font-size: 13px;
         height: 48px;
       }
 
diff --git a/chromium/chrome/browser/resources/md_extensions/sidebar.js b/chromium/chrome/browser/resources/md_extensions/sidebar.js
index 76244d45907..ad6b4011b65 100644
--- a/chromium/chrome/browser/resources/md_extensions/sidebar.js
+++ b/chromium/chrome/browser/resources/md_extensions/sidebar.js
@@ -58,4 +58,3 @@ cr.define('extensions', function() {
     SidebarListDelegate: SidebarListDelegate,
   };
 });
-
diff --git a/chromium/chrome/browser/resources/md_extensions/toolbar.html b/chromium/chrome/browser/resources/md_extensions/toolbar.html
index d496c9b1fb8..413eab810ce 100644
--- a/chromium/chrome/browser/resources/md_extensions/toolbar.html
+++ b/chromium/chrome/browser/resources/md_extensions/toolbar.html
@@ -1,6 +1,9 @@
-<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://extensions/icons.html">
@@ -8,20 +11,15 @@
 
 <dom-module id="extensions-toolbar">
   <template>
-    <style>
+    <style include="cr-hidden-style paper-button-style">
       :host {
         --toolbar-width: 580px;
         --toolbar-color: var(--md-toolbar-color);
       }
 
-      [hidden] {
-        display: none !important;
-      }
-
       cr-toolbar {
         --cr-toolbar-field-width: var(--toolbar-width);
         background: var(--toolbar-color);
-        font-size: 13px;
       }
 
       .dev-controls {
@@ -32,6 +30,7 @@
       }
 
       #button-strip {
+        margin-bottom: 4px;
         /* We left-align the text of the left button with the left edge of the
            search field. Since the buttons have 12px padding, add 24px to the
            width of the button strip (12px each side) to make centering easy. */
@@ -40,10 +39,7 @@
 
       #button-strip paper-button {
         -webkit-margin-end: 16px;
-        -webkit-margin-start: 0;
         color: white;
-        font-size: 13px;
-        padding: 12px 9px;
       }
 
       .more-actions {
diff --git a/chromium/chrome/browser/resources/md_extensions/toolbar.js b/chromium/chrome/browser/resources/md_extensions/toolbar.js
index be11f251882..6cb12268aaf 100644
--- a/chromium/chrome/browser/resources/md_extensions/toolbar.js
+++ b/chromium/chrome/browser/resources/md_extensions/toolbar.js
@@ -28,26 +28,23 @@ cr.define('extensions', function() {
     behaviors: [I18nBehavior],
 
     properties: {
+      /** @type {extensions.ToolbarDelegate} */
+      delegate: Object,
+
       inDevMode: {
         type: Boolean,
         value: false,
       },
     },
 
-    /** @param {extensions.ToolbarDelegate} delegate */
-    setDelegate: function(delegate) {
-      /** @private {extensions.ToolbarDelegate} */
-      this.delegate_ = delegate;
-    },
-
     /** @private */
     onDevModeChange_: function() {
-      this.delegate_.setProfileInDevMode(this.$['dev-mode'].checked);
+      this.delegate.setProfileInDevMode(this.$['dev-mode'].checked);
     },
 
     /** @private */
     onLoadUnpackedTap_: function() {
-      this.delegate_.loadUnpacked();
+      this.delegate.loadUnpacked();
     },
 
     /** @private */
@@ -57,7 +54,7 @@ cr.define('extensions', function() {
 
     /** @private */
     onUpdateNowTap_: function() {
-      this.delegate_.updateAllExtensions();
+      this.delegate.updateAllExtensions();
     },
   });
 
diff --git a/chromium/chrome/browser/resources/md_feedback/feedback.js b/chromium/chrome/browser/resources/md_feedback/feedback.js
index 61695ad98a3..895f9933525 100644
--- a/chromium/chrome/browser/resources/md_feedback/feedback.js
+++ b/chromium/chrome/browser/resources/md_feedback/feedback.js
@@ -9,7 +9,6 @@ var Feedback = {};
  * with this UI.
  */
 Feedback.UI = class {
-
   /**
    * Populates the feedback form with data.
    *
diff --git a/chromium/chrome/browser/resources/md_feedback/feedback_container.js b/chromium/chrome/browser/resources/md_feedback/feedback_container.js
index 5b1f8bf2fc5..05f7dceeb68 100644
--- a/chromium/chrome/browser/resources/md_feedback/feedback_container.js
+++ b/chromium/chrome/browser/resources/md_feedback/feedback_container.js
@@ -29,8 +29,8 @@ Polymer({
   ready: function() {
     // Retrieves the feedback privacy note text, if it exists. On non-official
     // branded builds, the string is not defined.
-    this.$.privacyNote.innerHTML =
-        loadTimeData.valueExists('privacyNote') ?
-            loadTimeData.getString('privacyNote') : '';
+    this.$.privacyNote.innerHTML = loadTimeData.valueExists('privacyNote') ?
+        loadTimeData.getString('privacyNote') :
+        '';
   },
 });
diff --git a/chromium/chrome/browser/resources/md_history/PRESUBMIT.py b/chromium/chrome/browser/resources/md_history/PRESUBMIT.py
deleted file mode 100644
index ac646c2bde9..00000000000
--- a/chromium/chrome/browser/resources/md_history/PRESUBMIT.py
+++ /dev/null
@@ -1,7 +0,0 @@
-# Copyright 2016 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.
-
-def CheckChangeOnUpload(input_api, output_api):
-  return input_api.canned_checks.CheckPatchFormatted(
-      input_api, output_api, check_js=True)
diff --git a/chromium/chrome/browser/resources/md_history/app.html b/chromium/chrome/browser/resources/md_history/app.html
index e7de32477bf..36b380fed20 100644
--- a/chromium/chrome/browser/resources/md_history/app.html
+++ b/chromium/chrome/browser/resources/md_history/app.html
@@ -113,8 +113,7 @@
     </div>
 
     <template is="cr-lazy-render" id="drawer">
-      <dialog is="cr-drawer" swipe-open>
-        <div class="drawer-header">$i18n{title}</div>
+      <dialog is="cr-drawer" heading="$i18n{title}" swipe-open>
         <history-side-bar id="drawer-side-bar" class="drawer-content"
             selected-page="{{selectedPage_}}"
             show-footer="[[showSidebarFooter]]">
diff --git a/chromium/chrome/browser/resources/md_history/browser_service.js b/chromium/chrome/browser/resources/md_history/browser_service.js
index a2a09ad4852..9ee3c8ebdfa 100644
--- a/chromium/chrome/browser/resources/md_history/browser_service.js
+++ b/chromium/chrome/browser/resources/md_history/browser_service.js
@@ -92,9 +92,9 @@ cr.define('md_history', function() {
     },
 
     /**
-    * Record an action in UMA.
-    * @param {string} action The name of the action to be logged.
-    */
+     * Record an action in UMA.
+     * @param {string} action The name of the action to be logged.
+     */
     recordAction: function(action) {
       if (action.indexOf('_') == -1)
         action = 'HistoryPage_' + action;
diff --git a/chromium/chrome/browser/resources/md_history/externs.js b/chromium/chrome/browser/resources/md_history/externs.js
index 4c870ec7841..6ba6f5ad8b9 100644
--- a/chromium/chrome/browser/resources/md_history/externs.js
+++ b/chromium/chrome/browser/resources/md_history/externs.js
@@ -35,8 +35,8 @@ var HistoryEntry;
  *     BrowsingHistoryHandler::QueryComplete()
  * @typedef {{finished: boolean,
  *            hasSyncedResults: boolean,
- *            queryInterval: string,
- *            queryStartMonth: string,
+ *            queryEndTime: string,
+ *            queryStartTime: string,
  *            term: string}}
  */
 var HistoryQuery;
diff --git a/chromium/chrome/browser/resources/md_history/history.js b/chromium/chrome/browser/resources/md_history/history.js
index 7248ec901a2..5f8e6d4dec7 100644
--- a/chromium/chrome/browser/resources/md_history/history.js
+++ b/chromium/chrome/browser/resources/md_history/history.js
@@ -4,7 +4,7 @@
 
 // Send the history query immediately. This allows the query to process during
 // the initial page startup.
-chrome.send('queryHistory', ['', 0, 0, 0, RESULTS_PER_PAGE]);
+chrome.send('queryHistory', ['', 0, RESULTS_PER_PAGE]);
 chrome.send('getForeignSessions');
 
 /** @type {Promise} */
diff --git a/chromium/chrome/browser/resources/md_history/history_item.html b/chromium/chrome/browser/resources/md_history/history_item.html
index 8bbdbdae64c..982ab92b227 100644
--- a/chromium/chrome/browser/resources/md_history/history_item.html
+++ b/chromium/chrome/browser/resources/md_history/history_item.html
@@ -217,7 +217,7 @@
             aria-label$="[[getEntrySummary_(item)]]">
           <div id="checkmark"></div>
         </button>
-        <span id="time-accessed" on-mouseover="addTimeTitle_">
+        <span id="time-accessed">
           [[item.readableTimestamp]]
         </span>
         <div class="website-icon" id="icon"></div>
diff --git a/chromium/chrome/browser/resources/md_history/history_item.js b/chromium/chrome/browser/resources/md_history/history_item.js
index 0415d721acb..36692e881e4 100644
--- a/chromium/chrome/browser/resources/md_history/history_item.js
+++ b/chromium/chrome/browser/resources/md_history/history_item.js
@@ -66,6 +66,10 @@ cr.define('md_history', function() {
      * @return {boolean} Whether the event was handled.
      */
     onKeydown: function(row, e) {
+      // Allow Home and End to move the history list.
+      if (e.key == 'Home' || e.key == 'End')
+        return true;
+
       // Prevent iron-list from changing the focus on enter.
       if (e.key == 'Enter')
         e.stopPropagation();
@@ -82,7 +86,7 @@ cr.define('md_history', function() {
       // from the history backend, as well as fields computed by history-list.
       item: {
         type: Object,
-        observer: 'showIcon_',
+        observer: 'itemChanged_',
       },
 
       selected: {
@@ -129,6 +133,9 @@ cr.define('md_history', function() {
     /** @private {?HistoryFocusRow} */
     row_: null,
 
+    /** @private {boolean} */
+    mouseDown_: false,
+
     /** @override */
     attached: function() {
       Polymer.RenderStatus.afterNextRender(this, function() {
@@ -152,6 +159,12 @@ cr.define('md_history', function() {
      * @private
      */
     onFocus_: function() {
+      // Don't change the focus while the mouse is down, as it prevents text
+      // selection. Not changing focus here is acceptable because the checkbox
+      // will be focused in onItemClick_() anyway.
+      if (this.mouseDown_)
+        return;
+
       if (this.lastFocused)
         this.row_.getEquivalentElement(this.lastFocused).focus();
       else
@@ -206,6 +219,10 @@ cr.define('md_history', function() {
      * @private
      */
     onItemMousedown_: function(e) {
+      this.mouseDown_ = true;
+      listenOnce(document, 'mouseup', function() {
+        this.mouseDown_ = false;
+      }.bind(this));
       // Prevent shift clicking a checkbox from selecting text.
       if (e.shiftKey)
         e.preventDefault();
@@ -299,8 +316,9 @@ cr.define('md_history', function() {
      * Set the favicon image, based on the URL of the history item.
      * @private
      */
-    showIcon_: function() {
+    itemChanged_: function() {
       this.$.icon.style.backgroundImage = cr.icon.getFavicon(this.item.url);
+      this.listen(this.$['time-accessed'], 'mouseover', 'addTimeTitle_');
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/md_history/history_list.html b/chromium/chrome/browser/resources/md_history/history_list.html
index 1d73ed225b2..a9c4b6405bf 100644
--- a/chromium/chrome/browser/resources/md_history/history_list.html
+++ b/chromium/chrome/browser/resources/md_history/history_list.html
@@ -59,9 +59,9 @@
 
     <template is="cr-lazy-render" id="dialog">
       <dialog is="cr-dialog">
-        <div class="title">$i18n{removeSelected}</div>
-        <div class="body">$i18n{deleteWarning}</div>
-        <div class="button-container">
+        <div class="title" slot="title">$i18n{removeSelected}</div>
+        <div class="body" slot="body">$i18n{deleteWarning}</div>
+        <div class="button-container" slot="button-container">
           <paper-button class="cancel-button" on-tap="onDialogCancelTap_">
             $i18n{cancel}
           </paper-button>
diff --git a/chromium/chrome/browser/resources/md_history/history_list.js b/chromium/chrome/browser/resources/md_history/history_list.js
index d850ad634a2..09ac8442c3c 100644
--- a/chromium/chrome/browser/resources/md_history/history_list.js
+++ b/chromium/chrome/browser/resources/md_history/history_list.js
@@ -112,6 +112,7 @@ Polymer({
       if (this.historyData_)
         this.splice('historyData_', 0, this.historyData_.length);
       this.fire('unselect-all');
+      this.scrollTop = 0;
     }
 
     if (this.historyData_) {
diff --git a/chromium/chrome/browser/resources/md_history/query_manager.js b/chromium/chrome/browser/resources/md_history/query_manager.js
index 3ad12d92542..2d41730edc4 100644
--- a/chromium/chrome/browser/resources/md_history/query_manager.js
+++ b/chromium/chrome/browser/resources/md_history/query_manager.js
@@ -72,8 +72,6 @@ Polymer({
 
     chrome.send('queryHistory', [
       queryState.searchTerm,
-      0,  // No grouped offset.
-      0,  // Disable grouping.
       lastVisitTime,
       RESULTS_PER_PAGE,
     ]);
diff --git a/chromium/chrome/browser/resources/md_history/router.js b/chromium/chrome/browser/resources/md_history/router.js
index b20d4e2f111..29f7512aede 100644
--- a/chromium/chrome/browser/resources/md_history/router.js
+++ b/chromium/chrome/browser/resources/md_history/router.js
@@ -9,7 +9,7 @@ Polymer({
     selectedPage: {
       type: String,
       notify: true,
-      observer: 'selectedPageChanged_'
+      observer: 'selectedPageChanged_',
     },
 
     /** @type {QueryState} */
diff --git a/chromium/chrome/browser/resources/md_user_manager/control_bar.js b/chromium/chrome/browser/resources/md_user_manager/control_bar.js
index 2c2b2380047..5e22faf8086 100644
--- a/chromium/chrome/browser/resources/md_user_manager/control_bar.js
+++ b/chromium/chrome/browser/resources/md_user_manager/control_bar.js
@@ -6,7 +6,7 @@
  * @fileoverview 'control-bar' is the horizontal bar at the bottom of the user
  * manager screen.
  */
- Polymer({
+Polymer({
   is: 'control-bar',
 
   behaviors: [
@@ -18,19 +18,13 @@
      * True if 'Browse as Guest' button is displayed.
      * @type {boolean}
      */
-    showGuest: {
-      type: Boolean,
-      value: false
-    },
+    showGuest: {type: Boolean, value: false},
 
     /**
      * True if 'Add Person' button is displayed.
      * @type {boolean}
      */
-    showAddPerson: {
-      type: Boolean,
-      value: false
-    },
+    showAddPerson: {type: Boolean, value: false},
 
     /** @private {!signin.ProfileBrowserProxy} */
     browserProxy_: Object,
@@ -58,15 +52,14 @@
    * @private
    */
   onLaunchGuestTap_: function(event) {
-    this.browserProxy_.areAllProfilesLocked().then(
-        function(allProfilesLocked) {
-          if (!allProfilesLocked || this.isForceSigninEnabled_) {
-            this.browserProxy_.launchGuestUser();
-          } else {
-            document.querySelector('error-dialog').show(
-                this.i18n('browseAsGuestAllProfilesLockedError'));
-          }
-        }.bind(this));
+    this.browserProxy_.areAllProfilesLocked().then(function(allProfilesLocked) {
+      if (!allProfilesLocked || this.isForceSigninEnabled_) {
+        this.browserProxy_.launchGuestUser();
+      } else {
+        document.querySelector('error-dialog')
+            .show(this.i18n('browseAsGuestAllProfilesLockedError'));
+      }
+    }.bind(this));
   },
 
   /**
@@ -75,15 +68,14 @@
    * @private
    */
   onAddUserTap_: function(event) {
-    this.browserProxy_.areAllProfilesLocked().then(
-        function(allProfilesLocked) {
-          if (!allProfilesLocked || this.isForceSigninEnabled_) {
-            // Event is caught by user-manager-pages.
-            this.fire('change-page', {page: 'create-user-page'});
-          } else {
-            document.querySelector('error-dialog').show(
-                this.i18n('addProfileAllProfilesLockedError'));
-          }
-        }.bind(this));
+    this.browserProxy_.areAllProfilesLocked().then(function(allProfilesLocked) {
+      if (!allProfilesLocked || this.isForceSigninEnabled_) {
+        // Event is caught by user-manager-pages.
+        this.fire('change-page', {page: 'create-user-page'});
+      } else {
+        document.querySelector('error-dialog')
+            .show(this.i18n('addProfileAllProfilesLockedError'));
+      }
+    }.bind(this));
   }
 });
diff --git a/chromium/chrome/browser/resources/md_user_manager/create_profile.html b/chromium/chrome/browser/resources/md_user_manager/create_profile.html
index 6d42a095f7d..b098070f5e0 100644
--- a/chromium/chrome/browser/resources/md_user_manager/create_profile.html
+++ b/chromium/chrome/browser/resources/md_user_manager/create_profile.html
@@ -7,20 +7,18 @@
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 
 <dom-module id="create-profile">
   <template>
-    <style include="shared-styles iron-positioning">
+    <style include="shared-styles iron-positioning md-select">
       .container {
         color: var(--primary-text-color);
         width: var(--page-width);
@@ -72,8 +70,7 @@
         padding: 104px 0 16px;
       }
 
-      #nameInput,
-      paper-dropdown-menu {
+      #nameInput {
         --paper-input-container-focus-color: var(--google-blue-500);
         --paper-input-container-input: {
           font-size: inherit;
@@ -109,16 +106,9 @@
         line-height: 20px;
       }
 
-      #supervised-user-container paper-dropdown-menu {
+      #supervised-user-container .md-select-wrapper {
+        -webkit-margin-start: calc(-1 * var(--md-select-side-padding));
         margin-top: 4px;
-        width: 200px;
-      }
-
-      #supervised-user-container paper-listbox paper-item {
-        --paper-item: {
-          font-size: inherit;
-          min-height: 40px;
-        };
       }
 
       #supervised-user-container #import-user {
@@ -158,13 +148,13 @@
           no-label-float auto-validate>
       </paper-input>
       <cr-profile-avatar-selector avatars="[[availableIcons_]]"
-          selected-avatar-url="{{profileIconUrl_}}">
+          selected-avatar="{{selectedAvatar_}}">
       </cr-profile-avatar-selector>
       <paper-checkbox id="createShortcutCheckbox" checked="{{createShortcut_}}"
           hidden="[[!isProfileShortcutsEnabled_]]">
         $i18n{createDesktopShortcutLabel}
       </paper-checkbox>
-      <template is="dom-if" if="[[!isForceSigninEnabled_]]">
+      <template is="dom-if" if="[[isSupervisedUserCreationEnabled_]]">
         <paper-checkbox id="makeSupervisedCheckbox" checked="{{isSupervised_}}">
           $i18n{manageProfilesSupervisedSignedInLabel}
         </paper-checkbox>
@@ -174,17 +164,17 @@
           </div>
           <template is="dom-if" if="[[isSupervised_]]">
             <template is="dom-if" if="[[isSignedIn_(signedInUsers_)]]">
-              <paper-dropdown-menu label="$i18n{selectAnAccount}" no-label-float>
-                <paper-listbox class="dropdown-content"
-                    selected="{{signedInUserIndex_}}"
-                    attr-for-selected="data-user-index">
+              <div class="md-select-wrapper">
+                <select class="md-select" on-change="onAccountChanged_">
+                  <option disabled selected>$i18n{selectAnAccount}</option>
                   <template is="dom-repeat" items="[[signedInUsers_]]">
-                    <paper-item data-user-index$="[[index]]">
+                    <option value="[[index]]">
                       [[item.username]]
-                    </paper-item>
+                    </option>
                   </template>
-                </paper-listbox>
-              </paper-dropdown-menu>
+                </select>
+                <span class="md-select-underline"></span>
+              </div>
               <a id="import-user" is="action-link" on-tap="onImportUserTap_"
                   hidden="[[isImportUserLinkHidden_(createInProgress_,
                                                     loadingSupervisedUsers_,
diff --git a/chromium/chrome/browser/resources/md_user_manager/create_profile.js b/chromium/chrome/browser/resources/md_user_manager/create_profile.js
index 3e92efa3b2e..59deaa4b27c 100644
--- a/chromium/chrome/browser/resources/md_user_manager/create_profile.js
+++ b/chromium/chrome/browser/resources/md_user_manager/create_profile.js
@@ -20,20 +20,14 @@ var NO_USER_SELECTED = -1;
 Polymer({
   is: 'create-profile',
 
-  behaviors: [
-    I18nBehavior,
-    WebUIListenerBehavior
-  ],
+  behaviors: [I18nBehavior, WebUIListenerBehavior],
 
   properties: {
     /**
      * The current profile name.
      * @private {string}
      */
-    profileName_: {
-      type: String,
-      value: ''
-    },
+    profileName_: {type: String, value: ''},
 
     /**
      * The list of available profile icon Urls and labels.
@@ -41,71 +35,52 @@ Polymer({
      */
     availableIcons_: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /**
-     * The currently selected profile icon URL. May be a data URL.
-     * @private {string}
+     * The currently selected profile avatar, if any.
+     * @private {?AvatarIcon}
      */
-    profileIconUrl_: {
-      type: String,
-      value: ''
-    },
+    selectedAvatar_: Object,
 
     /**
      * True if the existing supervised users are being loaded.
      * @private {boolean}
      */
-    loadingSupervisedUsers_: {
-      type: Boolean,
-      value: false
-    },
+    loadingSupervisedUsers_: {type: Boolean, value: false},
 
     /**
      * True if a profile is being created or imported.
      * @private {boolean}
      */
-    createInProgress_: {
-      type: Boolean,
-      value: false
-    },
+    createInProgress_: {type: Boolean, value: false},
 
     /**
      * True if the error/warning message is displaying.
      * @private {boolean}
      */
-    isMessageVisble_: {
-      type: Boolean,
-      value: false
-    },
+    isMessageVisble_: {type: Boolean, value: false},
 
     /**
      * The current error/warning message.
      * @private {string}
      */
-    message_: {
-      type: String,
-      value: ''
-    },
+    message_: {type: String, value: ''},
 
     /**
      * if true, a desktop shortcut will be created for the new profile.
      * @private {boolean}
      */
-    createShortcut_: {
-      type: Boolean,
-      value: true
-    },
+    createShortcut_: {type: Boolean, value: true},
 
     /**
      * True if the new profile is a supervised profile.
      * @private {boolean}
      */
-    isSupervised_: {
-      type: Boolean,
-      value: false
-    },
+    isSupervised_: {type: Boolean, value: false},
 
     /**
      * The list of usernames and profile paths for currently signed-in users.
@@ -113,17 +88,16 @@ Polymer({
      */
     signedInUsers_: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /**
      * Index of the selected signed-in user.
      * @private {number}
      */
-    signedInUserIndex_: {
-      type: Number,
-      value: NO_USER_SELECTED
-    },
+    signedInUserIndex_: {type: Number, value: NO_USER_SELECTED},
 
     /** @private {!signin.ProfileBrowserProxy} */
     browserProxy_: Object,
@@ -149,13 +123,23 @@ Polymer({
       value: function() {
         return loadTimeData.getBoolean('isForceSigninEnabled');
       },
+    },
+
+    /**
+     * True if Supervised User creation is enabled.
+     * @private {boolean}
+     */
+    isSupervisedUserCreationEnabled_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('isSupervisedUserCreationEnabled') &&
+            !loadTimeData.getBoolean('isForceSigninEnabled');
+      },
     }
   },
 
-  listeners: {
-    'tap': 'onTap_',
-    'importUserPopup.import': 'onImportUserPopupImport_'
-  },
+  listeners:
+      {'tap': 'onTap_', 'importUserPopup.import': 'onImportUserPopupImport_'},
 
   /** @override */
   created: function() {
@@ -165,17 +149,18 @@ Polymer({
   /** @override */
   ready: function() {
     this.addWebUIListener(
-      'create-profile-success', this.handleSuccess_.bind(this));
-    this.addWebUIListener(
-      'create-profile-warning', this.handleMessage_.bind(this));
+        'create-profile-success', this.handleSuccess_.bind(this));
     this.addWebUIListener(
-      'create-profile-error', this.handleMessage_.bind(this));
+        'create-profile-warning', this.handleMessage_.bind(this));
     this.addWebUIListener(
-      'profile-icons-received', this.handleProfileIcons_.bind(this));
+        'create-profile-error', this.handleMessage_.bind(this));
+    this.addWebUIListener('profile-icons-received', function(icons) {
+      this.availableIcons_ = icons;
+    }.bind(this));
     this.addWebUIListener(
-      'profile-defaults-received', this.handleProfileDefaults_.bind(this));
+        'profile-defaults-received', this.handleProfileDefaults_.bind(this));
     this.addWebUIListener(
-      'signedin-users-received', this.handleSignedInUsers_.bind(this));
+        'signedin-users-received', this.handleSignedInUsers_.bind(this));
 
     this.browserProxy_.getAvailableIcons();
     this.browserProxy_.getSignedInUsers();
@@ -211,16 +196,6 @@ Polymer({
   },
 
   /**
-   * Handler for when the profile icons are pushed from the browser.
-   * @param {!Array<!AvatarIcon>} icons
-   * @private
-   */
-  handleProfileIcons_: function(icons) {
-    this.availableIcons_ = icons;
-    this.profileIconUrl_ = icons[0].url;
-  },
-
-  /**
    * Handler for when the profile defaults are pushed from the browser.
    * @param {!ProfileInfo} profileInfo Default Info for the new profile.
    * @private
@@ -264,14 +239,16 @@ Polymer({
   onImportUserTap_: function(event) {
     if (this.signedInUserIndex_ == NO_USER_SELECTED) {
       // A custodian must be selected.
-      this.handleMessage_(this.i18n('custodianAccountNotSelectedError'));
+      this.handleMessage_(
+          this.i18nAdvanced('custodianAccountNotSelectedError'));
     } else {
       var signedInUser = this.signedInUser_(this.signedInUserIndex_);
       this.hideMessage_();
       this.loadingSupervisedUsers_ = true;
       this.browserProxy_.getExistingSupervisedUsers(signedInUser.profilePath)
-          .then(this.showImportSupervisedUserPopup_.bind(this),
-                this.handleMessage_.bind(this));
+          .then(
+              this.showImportSupervisedUserPopup_.bind(this),
+              this.handleMessage_.bind(this));
     }
   },
 
@@ -286,14 +263,16 @@ Polymer({
       this.createProfile_();
     } else if (this.signedInUserIndex_ == NO_USER_SELECTED) {
       // If the new profile is supervised, a custodian must be selected.
-      this.handleMessage_(this.i18n('custodianAccountNotSelectedError'));
+      this.handleMessage_(
+          this.i18nAdvanced('custodianAccountNotSelectedError'));
     } else {
       var signedInUser = this.signedInUser_(this.signedInUserIndex_);
       this.hideMessage_();
       this.loadingSupervisedUsers_ = true;
       this.browserProxy_.getExistingSupervisedUsers(signedInUser.profilePath)
-          .then(this.createProfileIfValidSupervisedUser_.bind(this),
-                this.handleMessage_.bind(this));
+          .then(
+              this.createProfileIfValidSupervisedUser_.bind(this),
+              this.handleMessage_.bind(this));
     }
   },
 
@@ -307,10 +286,10 @@ Polymer({
   showImportSupervisedUserPopup_: function(supervisedUsers) {
     this.loadingSupervisedUsers_ = false;
     if (supervisedUsers.length > 0) {
-      this.$.importUserPopup.show(this.signedInUser_(this.signedInUserIndex_),
-                                  supervisedUsers);
+      this.$.importUserPopup.show(
+          this.signedInUser_(this.signedInUserIndex_), supervisedUsers);
     } else {
-      this.handleMessage_(this.i18n('noSupervisedUserImportText'));
+      this.handleMessage_(this.i18nAdvanced('noSupervisedUserImportText'));
     }
   },
 
@@ -337,14 +316,14 @@ Polymer({
       for (var j = i + 1; j < supervisedUsers.length; ++j) {
         if (supervisedUsers[j].name == this.profileName_) {
           nameIsUnique = false;
-          allOnCurrentDevice = allOnCurrentDevice &&
-             supervisedUsers[j].onCurrentDevice;
+          allOnCurrentDevice =
+              allOnCurrentDevice && supervisedUsers[j].onCurrentDevice;
         }
       }
 
       var opts = {
         'substitutions':
-          [HTMLEscape(elide(this.profileName_, /* maxLength */ 50))],
+            [HTMLEscape(elide(this.profileName_, /* maxLength */ 50))],
         'attrs': {
           'id': function(node, value) {
             return node.tagName == 'A';
@@ -361,9 +340,10 @@ Polymer({
         }
       };
 
-      this.handleMessage_(allOnCurrentDevice ?
-          this.i18n('managedProfilesExistingLocalSupervisedUser') :
-          this.i18nAdvanced('manageProfilesExistingSupervisedUser', opts));
+      this.handleMessage_(
+          allOnCurrentDevice ?
+              this.i18nAdvanced('managedProfilesExistingLocalSupervisedUser') :
+              this.i18nAdvanced('manageProfilesExistingSupervisedUser', opts));
       return;
     }
     // No existing supervised user's name matches the entered profile name.
@@ -386,14 +366,25 @@ Polymer({
     }
     this.hideMessage_();
     this.createInProgress_ = true;
-    var createShortcut = this.isProfileShortcutsEnabled_ &&
-        this.createShortcut_;
+    var createShortcut =
+        this.isProfileShortcutsEnabled_ && this.createShortcut_;
+    // Select the 1st avatar if none selected.
+    var selectedAvatar = this.selectedAvatar_ || this.availableIcons_[0];
     this.browserProxy_.createProfile(
-        this.profileName_, this.profileIconUrl_, createShortcut,
+        this.profileName_, selectedAvatar.url, createShortcut,
         this.isSupervised_, '', custodianProfilePath);
   },
 
   /**
+   * Handler for a change in the supervised account dropdown.
+   * @param {!{target: HTMLSelectElement}} event
+   * @private
+   */
+  onAccountChanged_: function(event) {
+    this.signedInUserIndex_ = parseInt(event.target.value, 10);
+  },
+
+  /**
    * Handler for the 'import' event fired by #importUserPopup once a supervised
    * user is selected to be imported and the popup closes.
    * @param {!{detail: {supervisedUser: !SupervisedUser,
@@ -436,8 +427,9 @@ Polymer({
   handleSuccess_: function(profileInfo) {
     this.createInProgress_ = false;
     if (profileInfo.showConfirmation) {
-      this.fire('change-page', {page: 'supervised-create-confirm-page',
-                                data: profileInfo});
+      this.fire(
+          'change-page',
+          {page: 'supervised-create-confirm-page', data: profileInfo});
     } else {
       this.fire('change-page', {page: 'user-pods-page'});
     }
@@ -473,7 +465,7 @@ Polymer({
   i18nAllowIDAttr_: function(id) {
     var opts = {
       'attrs': {
-        'id' : function(node, value) {
+        'id': function(node, value) {
           return node.tagName == 'A';
         }
       }
@@ -483,17 +475,6 @@ Polymer({
   },
 
   /**
-   * Computed binding determining which profile icon button is toggled on.
-   * @param {string} iconUrl icon URL of a given icon button.
-   * @param {string} profileIconUrl Currently selected icon URL.
-   * @return {boolean}
-   * @private
-   */
-  isActiveIcon_: function(iconUrl, profileIconUrl) {
-    return iconUrl == profileIconUrl;
-  },
-
-  /**
    * Computed binding determining whether the paper-spinner is active.
    * @param {boolean} createInProgress Is create in progress?
    * @param {boolean} loadingSupervisedUsers Are supervised users being loaded?
@@ -512,15 +493,14 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  isSaveDisabled_: function(createInProgress,
-                            loadingSupervisedUsers,
-                            profileName) {
+  isSaveDisabled_: function(
+      createInProgress, loadingSupervisedUsers, profileName) {
     // TODO(mahmadi): Figure out a way to add 'paper-input-extracted' as a
     // dependency and cast to PaperInputElement instead.
     /** @type {{validate: function():boolean}} */
     var nameInput = this.$.nameInput;
     return createInProgress || loadingSupervisedUsers || !profileName ||
-           !nameInput.validate();
+        !nameInput.validate();
   },
 
   /**
@@ -532,9 +512,8 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  isImportUserLinkHidden_: function(createInProgress,
-                                    loadingSupervisedUsers,
-                                    signedInUserIndex) {
+  isImportUserLinkHidden_: function(
+      createInProgress, loadingSupervisedUsers, signedInUserIndex) {
     return createInProgress || loadingSupervisedUsers ||
         !this.signedInUser_(signedInUserIndex);
   },
diff --git a/chromium/chrome/browser/resources/md_user_manager/error_dialog.html b/chromium/chrome/browser/resources/md_user_manager/error_dialog.html
index 6c403d34c7c..6c1bd2904fe 100644
--- a/chromium/chrome/browser/resources/md_user_manager/error_dialog.html
+++ b/chromium/chrome/browser/resources/md_user_manager/error_dialog.html
@@ -1,14 +1,12 @@
 <link rel="import" href="/shared_styles.html">
-<link rel="import" href="/user_manager_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <dom-module id="error-dialog">
   <template>
     <style include="shared-styles">
-      #dialog {
-        --user-manager-dialog-title-bar: {
-          border-bottom: 0;
-        };
+      :host {
+        color: var(--primary-text-color);
       }
 
       #message {
@@ -17,11 +15,11 @@
         word-wrap: break-word;
       }
     </style>
-    <user-manager-dialog id="dialog">
-      <div class="body">
+    <dialog is="cr-dialog" id="dialog">
+      <div class="body" slot="body">
         <div id="message">[[message_]]</div>
       </div>
-    </user-manager-dialog>
+    </dialog>
   </template>
   <script src="error_dialog.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/md_user_manager/error_dialog.js b/chromium/chrome/browser/resources/md_user_manager/error_dialog.js
index 7794fa52e86..0b15eb7f4e5 100644
--- a/chromium/chrome/browser/resources/md_user_manager/error_dialog.js
+++ b/chromium/chrome/browser/resources/md_user_manager/error_dialog.js
@@ -15,10 +15,7 @@ Polymer({
      * The message shown in the dialog.
      * @private {string}
      */
-    message_: {
-      type: String,
-      value: ''
-    }
+    message_: {type: String, value: ''}
   },
 
   /**
@@ -27,7 +24,7 @@ Polymer({
    */
   show: function(message) {
     this.message_ = message;
-    this.$.dialog.open();
+    this.$.dialog.showModal();
   }
 });
 })();
diff --git a/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.html b/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.html
index 84131ecca22..89fc19669b3 100644
--- a/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.html
+++ b/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.html
@@ -1,5 +1,6 @@
 <link rel="import" href="/shared_styles.html">
-<link rel="import" href="/user_manager_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
@@ -9,7 +10,7 @@
 
 <dom-module id="import-supervised-user">
   <template>
-    <style include="shared-styles iron-flex iron-flex-alignment iron-positioning">
+    <style include="shared-styles cr-shared-style iron-flex iron-flex-alignment iron-positioning">
       :host {
         --item-height: 52px;
         --items-container-max-height: calc(var(--item-height) * 4);
@@ -60,9 +61,9 @@
         flex-shrink: 0;
       }
     </style>
-    <user-manager-dialog id="dialog">
-      <div class="title">$i18n{supervisedUserImportTitle}</div>
-      <div class="body">
+    <dialog is="cr-dialog" id="dialog">
+      <div class="title" slot="title">$i18n{supervisedUserImportTitle}</div>
+      <div class="body" slot="body">
         <div id="message">$i18n{supervisedUserImportText}</div>
         <paper-listbox class="no-padding" selected="{{supervisedUserIndex_}}">
           <template is="dom-repeat" items="[[supervisedUsers_]]">
@@ -76,17 +77,17 @@
           </template>
         </paper-listbox>
       </div>
-      <div class="footer horizontal end-justified layout">
-        <paper-button id="cancel" class="action secondary" dialog-dismiss>
+      <div class="button-container" slot="button-container">
+        <paper-button id="cancel" class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
-        <paper-button id="import" class="action primary"
+        <paper-button id="import" class="action-button"
             on-tap="onImportTap_"
             disabled="[[isImportDisabled_(supervisedUserIndex_)]]">
           $i18n{supervisedUserImportOk}
         </paper-button>
       </div>
-    </user-manager-dialog>
+    </dialog>
   </template>
   <script src="import_supervised_user.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.js b/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.js
index c572419b3e8..7ffa15638e2 100644
--- a/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.js
+++ b/chromium/chrome/browser/resources/md_user_manager/import_supervised_user.js
@@ -27,7 +27,9 @@ Polymer({
      */
     signedInUser_: {
       type: Object,
-      value: function() { return null; }
+      value: function() {
+        return null;
+      }
     },
 
     /**
@@ -36,22 +38,16 @@ Polymer({
      */
     supervisedUsers_: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /**
      * Index of the selected supervised user.
      * @private {number}
      */
-    supervisedUserIndex_: {
-      type: Number,
-      value: NO_USER_SELECTED
-    }
-  },
-
-  /** override */
-  ready: function() {
-    this.$.dialog.lastFocusableNode = this.$.cancel;
+    supervisedUserIndex_: {type: Number, value: NO_USER_SELECTED}
   },
 
   /**
@@ -71,20 +67,16 @@ Polymer({
 
     this.signedInUser_ = signedInUser || null;
     if (this.signedInUser_)
-      this.$.dialog.open();
+      this.$.dialog.showModal();
   },
 
   /**
-   * param {number} supervisedUserIndex Index of the selected supervised user.
-   * @private
+   * @param {number} supervisedUserIndex Index of the selected supervised user.
    * @return {boolean} Whether the 'Import' button should be disabled.
+   * @private
    */
   isImportDisabled_: function(supervisedUserIndex) {
-    var disabled = supervisedUserIndex == NO_USER_SELECTED;
-    if (!disabled) {
-      this.$.dialog.lastFocusableNode = this.$.import;
-    }
-    return disabled;
+    return supervisedUserIndex == NO_USER_SELECTED;
   },
 
   /**
@@ -97,9 +89,15 @@ Polymer({
     if (this.signedInUser_ && supervisedUser) {
       this.$.dialog.close();
       // Event is caught by create-profile.
-      this.fire('import', {supervisedUser: supervisedUser,
-                           signedInUser: this.signedInUser_});
+      this.fire(
+          'import',
+          {supervisedUser: supervisedUser, signedInUser: this.signedInUser_});
     }
-  }
+  },
+
+  /** @private */
+  onCancelTap_: function() {
+    this.$.dialog.close();
+  },
 });
 })();
diff --git a/chromium/chrome/browser/resources/md_user_manager/profile_browser_proxy.js b/chromium/chrome/browser/resources/md_user_manager/profile_browser_proxy.js
index 1712a8a16d0..cfc9a4d66f2 100644
--- a/chromium/chrome/browser/resources/md_user_manager/profile_browser_proxy.js
+++ b/chromium/chrome/browser/resources/md_user_manager/profile_browser_proxy.js
@@ -75,8 +75,9 @@ cr.define('signin', function() {
      * @param {string} custodianProfilePath Profile path of the custodian if
      *     the new profile is supervised.
      */
-    createProfile: function(profileName, profileIconUrl, createShortcut,
-        isSupervised, supervisedUserId, custodianProfilePath) {
+    createProfile: function(
+        profileName, profileIconUrl, createShortcut, isSupervised,
+        supervisedUserId, custodianProfilePath) {
       assertNotReached();
     },
 
@@ -177,11 +178,13 @@ cr.define('signin', function() {
     },
 
     /** @override */
-    createProfile: function(profileName, profileIconUrl, createShortcut,
-        isSupervised, supervisedUserId, custodianProfilePath) {
-      chrome.send('createProfile',
-                  [profileName, profileIconUrl, createShortcut, isSupervised,
-                   supervisedUserId, custodianProfilePath]);
+    createProfile: function(
+        profileName, profileIconUrl, createShortcut, isSupervised,
+        supervisedUserId, custodianProfilePath) {
+      chrome.send('createProfile', [
+        profileName, profileIconUrl, createShortcut, isSupervised,
+        supervisedUserId, custodianProfilePath
+      ]);
     },
 
     /** @override */
diff --git a/chromium/chrome/browser/resources/md_user_manager/shared_styles.html b/chromium/chrome/browser/resources/md_user_manager/shared_styles.html
index 698f0d85fd1..7c9d1aa16ab 100644
--- a/chromium/chrome/browser/resources/md_user_manager/shared_styles.html
+++ b/chromium/chrome/browser/resources/md_user_manager/shared_styles.html
@@ -69,15 +69,6 @@
         --iron-overlay-backdrop-opacity: .8;
       }
 
-      /* TODO(mahmadi): Move this back to user_manager_dialog.html when it does
-       * not break the dialog */
-      user-manager-dialog {
-        --paper-dialog: {
-          font-size: inherit;
-          line-height: initial;
-        };
-      }
-
       .product-logo {
         content: -webkit-image-set(
             url(../../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo_name_22.png) 1x,
diff --git a/chromium/chrome/browser/resources/md_user_manager/supervised_user_create_confirm.js b/chromium/chrome/browser/resources/md_user_manager/supervised_user_create_confirm.js
index f89d0d58c95..e5ba99e779b 100644
--- a/chromium/chrome/browser/resources/md_user_manager/supervised_user_create_confirm.js
+++ b/chromium/chrome/browser/resources/md_user_manager/supervised_user_create_confirm.js
@@ -18,9 +18,7 @@ var MAX_NAME_LENGTH = 50;
 Polymer({
   is: 'supervised-user-create-confirm',
 
-  behaviors: [
-    I18nBehavior
-  ],
+  behaviors: [I18nBehavior],
 
   properties: {
     /**
@@ -29,16 +27,16 @@ Polymer({
      */
     profileInfo: {
       type: Object,
-      value: function() { return null; }
+      value: function() {
+        return null;
+      }
     },
 
     /** @private {!signin.ProfileBrowserProxy} */
     browserProxy_: Object
   },
 
-  listeners: {
-    'tap': 'onTap_'
-  },
+  listeners: {'tap': 'onTap_'},
 
   /** @override */
   created: function() {
@@ -92,8 +90,8 @@ Polymer({
    * @private
    */
   titleText_: function(profileInfo) {
-    return this.i18n('supervisedUserCreatedTitle',
-                     this.elideProfileName_(profileInfo));
+    return this.i18n(
+        'supervisedUserCreatedTitle', this.elideProfileName_(profileInfo));
   },
 
   /**
@@ -104,9 +102,12 @@ Polymer({
    * @private
    */
   confirmationMessage_: function(profileInfo) {
-    return this.i18n('supervisedUserCreatedText',
-                     this.elideProfileName_(profileInfo),
-                     this.elideCustodianUsername_(profileInfo));
+    return this.i18nAdvanced('supervisedUserCreatedText', {
+      substitutions: [
+        this.elideProfileName_(profileInfo),
+        this.elideCustodianUsername_(profileInfo)
+      ],
+    });
   },
 
   /**
@@ -116,8 +117,8 @@ Polymer({
    * @private
    */
   switchUserText_: function(profileInfo) {
-    return this.i18n('supervisedUserCreatedSwitch',
-                     this.elideProfileName_(profileInfo));
+    return this.i18n(
+        'supervisedUserCreatedSwitch', this.elideProfileName_(profileInfo));
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/md_user_manager/supervised_user_learn_more.js b/chromium/chrome/browser/resources/md_user_manager/supervised_user_learn_more.js
index 394a5598505..2f7b88b74cc 100644
--- a/chromium/chrome/browser/resources/md_user_manager/supervised_user_learn_more.js
+++ b/chromium/chrome/browser/resources/md_user_manager/supervised_user_learn_more.js
@@ -15,9 +15,7 @@ Polymer({
     browserProxy_: Object
   },
 
-  listeners: {
-    'tap': 'onTap_'
-  },
+  listeners: {'tap': 'onTap_'},
 
   /** @override */
   created: function() {
diff --git a/chromium/chrome/browser/resources/md_user_manager/user_manager.js b/chromium/chrome/browser/resources/md_user_manager/user_manager.js
index 3c0cedc166c..94330952489 100644
--- a/chromium/chrome/browser/resources/md_user_manager/user_manager.js
+++ b/chromium/chrome/browser/resources/md_user_manager/user_manager.js
@@ -24,7 +24,7 @@ cr.define('cr.ui', function() {
    * Manages initialization of screens, transitions, and error messages.
    * @constructor
    * @extends {DisplayManager}
-  */
+   */
   function UserManager() {}
 
   cr.addSingletonGetter(UserManager);
@@ -95,8 +95,8 @@ cr.define('cr.ui', function() {
    *     displayed.
    */
   UserManager.showUserManagerScreen = function(showGuest, showAddPerson) {
-    UserManager.getInstance().showScreen({id: 'account-picker',
-                                          data: {disableAddUser: false}});
+    UserManager.getInstance().showScreen(
+        {id: 'account-picker', data: {disableAddUser: false}});
     // Hide control options if the user does not have the right permissions.
     var controlBar = document.querySelector('control-bar');
     controlBar.showGuest = showGuest;
@@ -104,13 +104,15 @@ cr.define('cr.ui', function() {
 
     // Disable the context menu, as the Print/Inspect element items don't
     // make sense when displayed as a widget.
-    document.addEventListener('contextmenu', function(e) {e.preventDefault();});
+    document.addEventListener('contextmenu', function(e) {
+      e.preventDefault();
+    });
 
     if (window.location.hash == '#tutorial')
       document.querySelector('user-manager-tutorial').startTutorial();
     else if (window.location.hash == '#create-user') {
-      document.querySelector('user-manager-pages').setSelectedPage(
-          'create-user-page');
+      document.querySelector('user-manager-pages')
+          .setSelectedPage('create-user-page');
     }
   };
 
@@ -164,9 +166,7 @@ cr.define('cr.ui', function() {
   };
 
   // Export
-  return {
-    UserManager: UserManager
-  };
+  return {UserManager: UserManager};
 });
 
 // Alias to Oobe for use in src/ui/login/account_picker/user_pod_row.js
@@ -177,8 +177,7 @@ var Oobe = cr.ui.UserManager;
 disableTextSelectAndDrag(function(e) {
   var src = e.target;
   return src instanceof HTMLTextAreaElement ||
-         src instanceof HTMLInputElement &&
-         /text|password|search/.test(src.type);
+      src instanceof HTMLInputElement && /text|password|search/.test(src.type);
 });
 
 document.addEventListener('DOMContentLoaded', cr.ui.UserManager.initialize);
diff --git a/chromium/chrome/browser/resources/md_user_manager/user_manager_dialog.html b/chromium/chrome/browser/resources/md_user_manager/user_manager_dialog.html
deleted file mode 100644
index ee48a852f63..00000000000
--- a/chromium/chrome/browser/resources/md_user_manager/user_manager_dialog.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<link rel="import" href="/shared_styles.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-shared-styles.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-
-<dom-module id="user-manager-dialog">
-  <template>
-    <style include="shared-styles paper-dialog-shared-styles iron-flex iron-flex-alignment iron-positioning">
-      :host {
-        border-radius: 2px;
-        width: 512px;
-      }
-
-      :host > ::content > *,
-      :host > ::content > *:first-child,
-      :host > ::content > *:last-child {
-        /* Overrides paper-dialog-shared-styles. */
-        margin: 0;
-        padding: 0;
-      }
-
-      #title-bar {
-        align-items: center;
-        border-bottom: var(--user-manager-separator-line);
-        min-height: 52px;
-        @apply(--user-manager-dialog-title-bar);
-      }
-
-      #close {
-        --paper-icon-button: {
-          height: 40px;
-          padding: 10px;
-          width: 40px;
-        };
-        -webkit-margin-end: 6px;
-        -webkit-margin-start: auto;
-        flex-shrink: 0;
-      }
-
-      :host ::content .title {
-        -webkit-margin-end: 10px;
-        -webkit-margin-start: 16px;
-        font-size: 16px;
-      }
-
-      :host ::content .body > * {
-        padding: 0 16px;
-      }
-
-      :host ::content .body > .no-padding {
-        padding: 0;
-      }
-
-      :host ::content .footer {
-        margin-top: 20px;
-        padding: 16px;
-      }
-    </style>
-    <div id="title-bar" class="horizontal justified layout">
-      <content select=".title"></content>
-      <paper-icon-button icon="cr:close" id="close" dialog-dismiss>
-      </paper-icon-button>
-    </div>
-    <content select=".body"></content>
-    <content select=".footer"></content>
-  </template>
-  <script src="user_manager_dialog.js"></script>
-</dom-module>
diff --git a/chromium/chrome/browser/resources/md_user_manager/user_manager_dialog.js b/chromium/chrome/browser/resources/md_user_manager/user_manager_dialog.js
deleted file mode 100644
index 6db1a35475e..00000000000
--- a/chromium/chrome/browser/resources/md_user_manager/user_manager_dialog.js
+++ /dev/null
@@ -1,72 +0,0 @@
-// Copyright 2016 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 'user-manager-dialog' is a modal dialog for the user manager.
- */
-Polymer({
-  is: 'user-manager-dialog',
-
-  behaviors: [Polymer.PaperDialogBehavior],
-
-  properties: {
-    /** @override */
-    noCancelOnOutsideClick: {
-      type: Boolean,
-      value: true
-    },
-
-    /** @override */
-    withBackdrop: {
-      type: Boolean,
-      value: true
-    },
-
-    /**
-     * The first node that can receive focus.
-     * @type {!Node}
-     */
-    firstFocusableNode: {
-      type: Object,
-      value: function() { return this.$.close; },
-      observer: 'firstFocusableNodeChanged_'
-    },
-
-    /**
-     * The last node that can receive focus.
-     * @type {!Node}
-     */
-    lastFocusableNode: {
-      type: Object,
-      value: function() { return this.$.close; },
-      observer: 'lastFocusableNodeChanged_'
-    }
-  },
-
-  /**
-   * Returns the first and the last focusable elements in order to wrap the
-   * focus for the dialog in Polymer.PaperDialogBehavior.
-   * @override
-   * @type {!Array<!Node>}
-   */
-  get _focusableNodes() {
-    return [this.firstFocusableNode, this.lastFocusableNode];
-  },
-
-  /**
-   * Observer for firstFocusableNode. Updates __firstFocusableNode in
-   * Polymer.PaperDialogBehavior.
-   */
-  firstFocusableNodeChanged_: function(newValue) {
-    this.__firstFocusableNode = newValue;
-  },
-
-  /**
-   * Observer for lastFocusableNodeChanged_. Updates __lastFocusableNode in
-   * Polymer.PaperDialogBehavior.
-   */
-  lastFocusableNodeChanged_: function(newValue) {
-    this.__lastFocusableNode = newValue;
-  }
-});
diff --git a/chromium/chrome/browser/resources/md_user_manager/user_manager_pages.js b/chromium/chrome/browser/resources/md_user_manager/user_manager_pages.js
index fb08ddceee6..39b932fd8c0 100644
--- a/chromium/chrome/browser/resources/md_user_manager/user_manager_pages.js
+++ b/chromium/chrome/browser/resources/md_user_manager/user_manager_pages.js
@@ -14,24 +14,16 @@ Polymer({
      * ID of the currently selected page.
      * @private {string}
      */
-    selectedPage_: {
-      type: String,
-      value: 'user-pods-page'
-    },
+    selectedPage_: {type: String, value: 'user-pods-page'},
 
     /**
      * Data passed to the currently selected page.
      * @private {?Object}
      */
-    pageData_: {
-      type: Object,
-      value: null
-    }
+    pageData_: {type: Object, value: null}
   },
 
-  listeners: {
-    'change-page': 'onChangePage_'
-  },
+  listeners: {'change-page': 'onChangePage_'},
 
   /**
    * Handler for the change-page event.
diff --git a/chromium/chrome/browser/resources/md_user_manager/user_manager_tutorial.js b/chromium/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
index a9da577e1e3..1001781073c 100644
--- a/chromium/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
+++ b/chromium/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
@@ -25,29 +25,19 @@ Polymer({
      * True if the tutorial is currently hidden.
      * @private {boolean}
      */
-    hidden_: {
-      type: Boolean,
-      value: true
-    },
+    hidden_: {type: Boolean, value: true},
 
     /**
      * Current tutorial step ID.
      * @type {string}
      */
-    currentStep_: {
-      type: String,
-      value: ''
-    },
+    currentStep_: {type: String, value: ''},
 
     /**
      * Enum values for the step IDs.
      * @private {TutorialSteps}
      */
-    steps_: {
-      readOnly: true,
-      type: Object,
-      value: TutorialSteps
-    }
+    steps_: {readOnly: true, type: Object, value: TutorialSteps}
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/media/OWNERS b/chromium/chrome/browser/resources/media/OWNERS
new file mode 100644
index 00000000000..77384f3c0f9
--- /dev/null
+++ b/chromium/chrome/browser/resources/media/OWNERS
@@ -0,0 +1,8 @@
+# For Media Engagement
+mlamouri@chromium.org
+beccahughes@chromium.org
+
+# For WebRTC
+per-file webrtc_*=file://third_party/webrtc_overrides/OWNERS
+
+# COMPONENT: Internals>Media>UI
diff --git a/chromium/chrome/browser/resources/media/media_engagement.html b/chromium/chrome/browser/resources/media/media_engagement.html
new file mode 100644
index 00000000000..77b8ed8573d
--- /dev/null
+++ b/chromium/chrome/browser/resources/media/media_engagement.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+<head>
+  <title>Media Engagement</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+  <script src="chrome://resources/js/mojo_bindings.js"></script>
+  <script src="chrome://resources/js/promise_resolver.js"></script>
+  <script src="chrome://resources/js/util.js"></script>
+
+  <script src="chrome/browser/media/media_engagement_score_details.mojom.js">
+  </script>
+
+  <script src="chrome://media-engagement/media-engagement.js"></script>
+  <style>
+    body {
+      font-family: 'Roboto', 'Noto', sans-serif;
+      font-size: 14px;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
+    table td,
+    table th {
+      border: 1px solid #777;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+
+    table th {
+      background: rgb(224, 236, 255);
+      cursor: pointer;
+      padding-bottom: 4px;
+      padding-right: 16px;
+      padding-top: 4px;
+      white-space: nowrap;
+    }
+
+    .engagement-bar {
+      background-color: black;
+      height: 2px;
+    }
+
+    .engagement-bar-cell {
+      border: none;
+    }
+
+    .origin-cell {
+      background-color: rgba(230, 230, 230, 0.5);
+      min-width: 500px;
+    }
+
+    .visits-count-cell,
+    .media-playbacks-count-cell,
+    .last-playback-time-cell {
+      background-color: rgba(230, 230, 230, 0.5);
+      text-align: right;
+    }
+
+    .base-score-input {
+      border: 1px solid #ccc;
+      border-radius: 2px;
+      text-align: right;
+      width: 70px;
+    }
+
+    .base-score-input:focus {
+      border: 1px solid rgb(143, 185, 252);
+      box-shadow: 0 0 2px rgb(113, 158, 206);
+      outline: none;
+    }
+
+    table tr:hover {
+      background: rgb(255, 255, 187);
+    }
+
+    th.sort-column::after {
+      content: '▲';
+      position: absolute;
+    }
+
+    th[sort-reverse].sort-column::after {
+      content: '▼';
+      position: absolute;
+    }
+  </style>
+</head>
+<body>
+  <h1>Media Engagement</h1>
+  <table>
+    <thead>
+      <tr id="engagement-table-header">
+        <th sort-key="origin">
+          Origin
+        </th>
+        <th sort-key="visits" sort-reverse>
+          Visits
+        </th>
+        <th sort-key="mediaPlaybacks" sort-reverse>
+          Number of Playbacks
+        </th>
+        <th sort-key="lastMediaPlaybackTime" sort-reverse>
+          Last Playback
+        </th>
+        <th sort-key="totalScore" class="sort-column" sort-reverse>
+          Score
+        </th>
+      </tr>
+    </thead>
+    <tbody id="engagement-table-body">
+    </tbody>
+  </table>
+
+  <template id="datarow">
+    <tr>
+      <td class="origin-cell"></td>
+      <td class="visits-count-cell"></td>
+      <td class="media-playbacks-count-cell"></td>
+      <td class="last-playback-time-cell"></td>
+      <td class="total-score-cell"></td>
+      <td class="engagement-bar-cell">
+        <div class="engagement-bar"></div>
+      </td>
+    </tr>
+  </template>
+</body>
+</html>
diff --git a/chromium/chrome/browser/resources/media/media_engagement.js b/chromium/chrome/browser/resources/media/media_engagement.js
new file mode 100644
index 00000000000..c93a301c940
--- /dev/null
+++ b/chromium/chrome/browser/resources/media/media_engagement.js
@@ -0,0 +1,136 @@
+// Copyright 2017 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.
+
+'use strict';
+
+// Allow a function to be provided by tests, which will be called when
+// the page has been populated with media engagement details.
+var pageIsPopulatedResolver = new PromiseResolver();
+function whenPageIsPopulatedForTest() {
+  return pageIsPopulatedResolver.promise;
+}
+
+(function() {
+
+var uiHandler = null;
+var info = null;
+var engagementTableBody = null;
+var sortReverse = true;
+var sortKey = 'totalScore';
+
+/**
+ * Creates a single row in the engagement table.
+ * @param {!MediaEngagementScoreDetails} rowInfo The info to create the row.
+ * @return {!HTMLElement}
+ */
+function createRow(rowInfo) {
+  var template = $('datarow');
+  var td = template.content.querySelectorAll('td');
+  td[0].textContent = rowInfo.origin.url;
+  td[1].textContent = rowInfo.visits;
+  td[2].textContent = rowInfo.mediaPlaybacks;
+  td[3].textContent = rowInfo.lastMediaPlaybackTime ?
+      new Date(rowInfo.lastMediaPlaybackTime).toISOString() :
+      '';
+  td[4].textContent = rowInfo.totalScore ? rowInfo.totalScore.toFixed(2) : '0';
+  td[5].getElementsByClassName('engagement-bar')[0].style.width =
+      (rowInfo.totalScore * 50) + 'px';
+  return document.importNode(template.content, true);
+}
+
+/**
+ * Remove all rows from the engagement table.
+ */
+function clearTable() {
+  engagementTableBody.innerHTML = '';
+}
+
+/**
+ * Sort the engagement info based on |sortKey| and |sortReverse|.
+ */
+function sortInfo() {
+  info.sort((a, b) => {
+    return (sortReverse ? -1 : 1) * compareTableItem(sortKey, a, b);
+  });
+}
+
+/**
+ * Compares two MediaEngagementScoreDetails objects based on |sortKey|.
+ * @param {string} sortKey The name of the property to sort by.
+ * @param {number|url.mojom.Url} The first object to compare.
+ * @param {number|url.mojom.Url} The second object to compare.
+ * @return {number} A negative number if |a| should be ordered before
+ *     |b|, a positive number otherwise.
+ */
+function compareTableItem(sortKey, a, b) {
+  var val1 = a[sortKey];
+  var val2 = b[sortKey];
+
+  // Compare the hosts of the origin ignoring schemes.
+  if (sortKey == 'origin')
+    return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1;
+
+  if (sortKey == 'visits' || sortKey == 'mediaPlaybacks' ||
+      sortKey == 'lastMediaPlaybackTime' || sortKey == 'totalScore') {
+    return val1 - val2;
+  }
+
+  assertNotReached('Unsupported sort key: ' + sortKey);
+  return 0;
+}
+
+/**
+ * Regenerates the engagement table from |info|.
+ */
+function renderTable() {
+  clearTable();
+  sortInfo();
+  info.forEach(rowInfo => engagementTableBody.appendChild(createRow(rowInfo)));
+}
+
+/**
+ * Retrieve media engagement info and render the engagement table.
+ */
+function updateEngagementTable() {
+  // Populate engagement table.
+  uiHandler.getMediaEngagementScoreDetails().then(response => {
+    info = response.info;
+    renderTable();
+    pageIsPopulatedResolver.resolve();
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  uiHandler = new media.mojom.MediaEngagementScoreDetailsProviderPtr;
+  Mojo.bindInterface(
+      media.mojom.MediaEngagementScoreDetailsProvider.name,
+      mojo.makeRequest(uiHandler).handle);
+  updateEngagementTable();
+
+  engagementTableBody = $('engagement-table-body');
+
+  // Set table header sort handlers.
+  var engagementTableHeader = $('engagement-table-header');
+  var headers = engagementTableHeader.children;
+  for (var i = 0; i < headers.length; i++) {
+    headers[i].addEventListener('click', (e) => {
+      var newSortKey = e.target.getAttribute('sort-key');
+      if (sortKey == newSortKey) {
+        sortReverse = !sortReverse;
+      } else {
+        sortKey = newSortKey;
+        sortReverse = false;
+      }
+      var oldSortColumn = document.querySelector('.sort-column');
+      oldSortColumn.classList.remove('sort-column');
+      e.target.classList.add('sort-column');
+      if (sortReverse)
+        e.target.setAttribute('sort-reverse', '');
+      else
+        e.target.removeAttribute('sort-reverse');
+      renderTable();
+    });
+  }
+});
+})();
diff --git a/chromium/chrome/browser/resources/media/webrtc_logs.js b/chromium/chrome/browser/resources/media/webrtc_logs.js
index 83d48adc28d..e665ab67b85 100644
--- a/chromium/chrome/browser/resources/media/webrtc_logs.js
+++ b/chromium/chrome/browser/resources/media/webrtc_logs.js
@@ -15,8 +15,8 @@ function requestUploads() {
  * @param {string} version The browser version.
  */
 function updateWebRtcLogsList(uploads, version) {
-  $('log-banner').textContent = loadTimeData.getStringF('webrtcLogCountFormat',
-                                                        uploads.length);
+  $('log-banner').textContent =
+      loadTimeData.getStringF('webrtcLogCountFormat', uploads.length);
 
   var logSection = $('log-list');
 
@@ -29,9 +29,8 @@ function updateWebRtcLogsList(uploads, version) {
     var logBlock = document.createElement('div');
 
     var title = document.createElement('h3');
-    title.textContent =
-        loadTimeData.getStringF('webrtcLogHeaderFormat',
-                                upload['capture_time']);
+    title.textContent = loadTimeData.getStringF(
+        'webrtcLogHeaderFormat', upload['capture_time']);
     logBlock.appendChild(title);
 
     var localFileLine = document.createElement('p');
@@ -54,30 +53,24 @@ function updateWebRtcLogsList(uploads, version) {
           loadTimeData.getString('webrtcLogNotUploadedMessage');
     } else {
       uploadLine.textContent =
-          loadTimeData.getStringF('webrtcLogUploadTimeFormat',
-                                  upload['upload_time']) + '. ' +
-          loadTimeData.getStringF('webrtcLogReportIdFormat',
-                                  upload['id']) + '. ';
+          loadTimeData.getStringF(
+              'webrtcLogUploadTimeFormat', upload['upload_time']) +
+          '. ' +
+          loadTimeData.getStringF('webrtcLogReportIdFormat', upload['id']) +
+          '. ';
       var link = document.createElement('a');
       var commentLines = [
-          'Chrome Version: ' + version,
-          // TODO(tbreisacher): fill in the OS automatically?
-          'Operating System: e.g., "Windows 7", "Mac OSX 10.6"',
-          '',
-          'URL (if applicable) where the problem occurred:',
-          '',
-          'Can you reproduce this problem?',
-          '',
-          'What steps will reproduce this problem? (or if it\'s not ' +
-          'reproducible, what were you doing just before the problem)?',
-          '',
-          '1.', '2.', '3.',
-          '',
-          '*Please note that issues filed with no information filled in ' +
-          'above will be marked as WontFix*',
-          '',
-          '****DO NOT CHANGE BELOW THIS LINE****',
-          'report_id:' + upload.id
+        'Chrome Version: ' + version,
+        // TODO(tbreisacher): fill in the OS automatically?
+        'Operating System: e.g., "Windows 7", "Mac OSX 10.6"', '',
+        'URL (if applicable) where the problem occurred:', '',
+        'Can you reproduce this problem?', '',
+        'What steps will reproduce this problem? (or if it\'s not ' +
+            'reproducible, what were you doing just before the problem)?',
+        '', '1.', '2.', '3.', '',
+        '*Please note that issues filed with no information filled in ' +
+            'above will be marked as WontFix*',
+        '', '****DO NOT CHANGE BELOW THIS LINE****', 'report_id:' + upload.id
       ];
       var params = {
         template: 'Defect report from user',
diff --git a/chromium/chrome/browser/resources/media_router/compiled_resources2.gyp b/chromium/chrome/browser/resources/media_router/compiled_resources2.gyp
index b6af24babff..ff0af0525f8 100644
--- a/chromium/chrome/browser/resources/media_router/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/media_router/compiled_resources2.gyp
@@ -13,7 +13,15 @@
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         'media_router_ui_interface',
         'elements/media_router_header/compiled_resources2.gyp:media_router_header',
-        'elements/media_router_container/compiled_resources2.gyp:media_router_container',
+        'elements/media_router_container/compiled_resources2.gyp:media_router_container_interface',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'media_router_browser_api',
+      'dependencies': [
+        'media_router_data',
+        '<(EXTERNS_GYP):chrome_send',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -28,9 +36,10 @@
     {
       'target_name': 'media_router_ui_interface',
       'dependencies': [
-        '<(EXTERNS_GYP):chrome_send',
+        'media_router_browser_api',
         'elements/media_router_header/compiled_resources2.gyp:media_router_header',
-        'elements/media_router_container/compiled_resources2.gyp:media_router_container',
+        'elements/media_router_container/compiled_resources2.gyp:media_router_container_interface',
+        'elements/route_controls/compiled_resources2.gyp:route_controls_interface',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
diff --git a/chromium/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.js b/chromium/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.js
index 4698589dc75..28633c8a46c 100644
--- a/chromium/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.js
+++ b/chromium/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.js
@@ -115,7 +115,7 @@ Polymer({
    */
   onClickOptAction_: function(event) {
     this.fireIssueActionClick_(
-        /** @type {number} */(this.issue.secondaryActionType));
+        /** @type {number} */ (this.issue.secondaryActionType));
   },
 
   /**
@@ -128,14 +128,13 @@ Polymer({
     var defaultText = '';
     var secondaryText = '';
     if (this.issue) {
-      defaultText =
-          this.i18n(this.actionTypeToButtonTextResource_[
-              this.issue.defaultActionType]);
+      defaultText = this.i18n(
+          this.actionTypeToButtonTextResource_[this.issue.defaultActionType]);
 
       if (this.issue.secondaryActionType !== undefined) {
-        secondaryText =
-            this.i18n(this.actionTypeToButtonTextResource_[
-                this.issue.secondaryActionType]);
+        secondaryText = this.i18n(
+            this.actionTypeToButtonTextResource_[this.issue
+                                                     .secondaryActionType]);
       }
     }
 
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_container/compiled_resources2.gyp b/chromium/chrome/browser/resources/media_router/elements/media_router_container/compiled_resources2.gyp
index 967e3bb4865..dc5aa26cfb3 100644
--- a/chromium/chrome/browser/resources/media_router/elements/media_router_container/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_container/compiled_resources2.gyp
@@ -8,6 +8,7 @@
       'dependencies': [
         'pseudo_sink_search_state',
         '../../compiled_resources2.gyp:externs',
+        '../../compiled_resources2.gyp:media_router_browser_api',
         '../../compiled_resources2.gyp:media_router_data',
         '../../elements/issue_banner/compiled_resources2.gyp:issue_banner',
         '../../elements/media_router_header/compiled_resources2.gyp:media_router_header',
@@ -17,6 +18,14 @@
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'media_router_container_interface',
+      'dependencies': [
+        '../../compiled_resources2.gyp:media_router_data',
+        '../../elements/media_router_header/compiled_resources2.gyp:media_router_header',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'pseudo_sink_search_state',
       'dependencies': [
         '../../compiled_resources2.gyp:media_router_data',
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
index b1ae7f97ad1..ea21fbd46fc 100644
--- a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
@@ -142,7 +142,7 @@ paper-menu {
   color: rgba(0, 0, 0, 0.87);
   overflow-x: hidden;
   overflow-y: auto;
-  padding-bottom: 12px;
+  padding-bottom: 0;
   padding-top: 4px;
 }
 
@@ -170,7 +170,7 @@ paper-menu {
   width: 30px;
 }
 
-#share-screen-text {
+.subheading-text {
   -webkit-padding-start: var(--dialog-padding-start);
   color: var(--paper-grey-600);
   cursor: default;
@@ -196,15 +196,16 @@ paper-menu {
   /* TODO(crbug/589697): Handle overflow of very long domain names. */
 }
 
-#sink-list-view {
-  position: relative;
-}
-
 #sink-list {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
+#sink-list-view {
+  margin-bottom: 12px;
+  position: relative;
+}
+
 .sink-name {
   min-width: 10%;
 }
@@ -218,11 +219,6 @@ paper-menu {
   z-index: 1;
 }
 
-:host([search-use-bottom-padding]) #sink-search {
-  padding-bottom: 16px;
-  padding-top: 0;
-}
-
 /* Separate icon class is a consequence of box-sizing: border-box set by
  * paper-icon-button. This should achieve the same dimensions as .sink-icon. */
 #sink-search-icon {
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
index 5f2cef2d147..9e43aedbd52 100644
--- a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
@@ -58,9 +58,9 @@
     <div id="content">
       <template is="dom-if" if="[[!computeCastModeListHidden_(currentView_)]]">
         <paper-menu id="cast-mode-list" role="presentation"
-            selectable="paper-item">
-          <template is="dom-repeat" id="defaultCastModeList"
-              items="[[computeDefaultCastModeList_(castModeList)]]">
+            selectable="paper-item" selected="{{selectedCastModeMenuItem_}}">
+          <template is="dom-repeat" id="presentationCastModeList"
+              items="[[computePresentationCastModeList_(castModeList)]]">
             <paper-item on-tap="onCastModeClick_">
               <iron-icon class="cast-mode-icon"
                   icon="[[computeCastModeIcon_(item)]]">
@@ -68,12 +68,25 @@
               <div><span>[[item.host]]</span></div>
             </paper-item>
           </template>
-          <div id="share-screen-text"
+          <div id="share-screen-text" class="subheading-text"
               hidden$="[[computeShareScreenSubheadingHidden_(castModeList)]]">
             <span>[[i18n('shareYourScreenSubheadingText')]]</span>
           </div>
-          <template is="dom-repeat" id="nonDefaultCastModeList"
-              items="[[computeNonDefaultCastModeList_(castModeList)]]">
+          <template is="dom-repeat" id="shareScreenCastModeList"
+              items="[[computeShareScreenCastModeList_(castModeList)]]">
+            <paper-item on-tap="onCastModeClick_">
+              <iron-icon class="cast-mode-icon"
+                  icon="[[computeCastModeIcon_(item)]]">
+              </iron-icon>
+              <div><span>[[item.description]]</span></div>
+            </paper-item>
+          </template>
+          <div id="cast-local-media-text" class="subheading-text"
+              hidden$="[[computeLocalMediaSubheadingHidden_(castModeList)]]">
+            <span>[[i18n('castLocalMediaSubheadingText')]]</span>
+          </div>
+          <template is="dom-repeat" id="localMediaCastModeList"
+              items="[[computeLocalMediaCastModeList_(castModeList)]]">
             <paper-item on-tap="onCastModeClick_">
               <iron-icon class="cast-mode-icon"
                   icon="[[computeCastModeIcon_(item)]]">
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
index 48a1d0ee376..81925027a00 100644
--- a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
@@ -2,8 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// This Polymer element contains the entire media router interface. It handles
-// hiding and showing specific components.
+/**
+ * This Polymer element contains the entire media router interface. It handles
+ * hiding and showing specific components.
+ * @implements {MediaRouterContainerInterface}
+ */
 Polymer({
   is: 'media-router-container',
 
@@ -297,14 +300,13 @@ Polymer({
     },
 
     /**
-     * Whether the search input should be padded as if it were at the bottom of
-     * the dialog.
-     * @type {boolean}
+     * The selected cast mode menu item. The item with this index is bolded in
+     * the cast mode menu.
+     * @private {number|undefined}
      */
-    searchUseBottomPadding: {
-      type: Boolean,
-      reflectToAttribute: true,
-      value: true,
+    selectedCastModeMenuItem_: {
+      type: Number,
+      observer: 'updateSelectedCastModeMenuItem_',
     },
 
     /**
@@ -434,13 +436,17 @@ Polymer({
           that.putSearchAtBottom_();
         }
       };
-      this.importHref('chrome://resources/polymer/v1_0/neon-animation/' +
-          'web-animations.html', onload);
-      this.importHref(this.resolveUrl(
-          '../issue_banner/issue_banner.html'), onload);
-      this.importHref(this.resolveUrl(
-          '../media_router_search_highlighter/' +
-              'media_router_search_highlighter.html'), onload);
+      this.importHref(
+          'chrome://resources/polymer/v1_0/neon-animation/' +
+              'web-animations.html',
+          onload);
+      this.importHref(
+          this.resolveUrl('../issue_banner/issue_banner.html'), onload);
+      this.importHref(
+          this.resolveUrl(
+              '../media_router_search_highlighter/' +
+              'media_router_search_highlighter.html'),
+          onload);
 
       // If this is not on a Mac platform, remove the placeholder. See
       // onFocus_() for more details. ready() is only called once, so no need
@@ -484,7 +490,8 @@ Polymer({
     // Only set |userOptedIntoCloudServices| if the user was shown the cloud
     // services preferences option.
     var userOptedIntoCloudServices = this.showFirstRunFlowCloudPref ?
-        this.$$('#first-run-cloud-checkbox').checked : undefined;
+        this.$$('#first-run-cloud-checkbox').checked :
+        undefined;
     this.fire('acknowledge-first-run-flow', {
       optedIntoCloudServices: userOptedIntoCloudServices,
     });
@@ -522,6 +529,19 @@ Polymer({
   },
 
   /**
+   * Calls all the functions to set the UI to a given cast mode.
+   * @param {!media_router.CastMode} castMode The cast mode to set things to.
+   * @private
+   */
+  castModeSelected_(castMode) {
+    this.selectCastMode(castMode.type);
+    this.fire('cast-mode-selected', {castModeType: castMode.type});
+    this.showSinkList_();
+    this.maybeReportUserFirstAction(
+        media_router.MediaRouterUserAction.CHANGE_MODE);
+  },
+
+  /**
    * Checks that the currently selected cast mode is still in the
    * updated list of available cast modes. If not, then update the selected
    * cast mode to the first available cast mode on the list.
@@ -629,7 +649,8 @@ Polymer({
       return forcedMode;
 
     var allCastModes = this.allSinks.reduce(function(castModesSoFar, sink) {
-      return castModesSoFar | sink.castModes;
+      // Ignore pseudo sinks in the cast mode computation.
+      return castModesSoFar | (sink.isPseudoSink ? 0 : sink.castModes);
     }, 0);
 
     // This checks whether |castModes| does not consist of exactly 1 cast mode.
@@ -661,12 +682,14 @@ Polymer({
    */
   computeCastModeIcon_: function(castMode) {
     switch (castMode.type) {
-      case media_router.CastModeType.DEFAULT:
+      case media_router.CastModeType.PRESENTATION:
         return 'media-router:web';
       case media_router.CastModeType.TAB_MIRROR:
         return 'media-router:tab';
       case media_router.CastModeType.DESKTOP_MIRROR:
         return 'media-router:laptop';
+      case media_router.CastModeType.LOCAL_FILE:
+        return 'media-router:folder';
       default:
         return '';
     }
@@ -674,13 +697,14 @@ Polymer({
 
   /**
    * @param {!Array<!media_router.CastMode>} castModeList The current list of
-   *      cast modes.
-   * @return {!Array<!media_router.CastMode>} The list of default cast modes.
+   *     cast modes.
+   * @return {!Array<!media_router.CastMode>} The list of PRESENTATION cast
+   *     modes.
    * @private
    */
-  computeDefaultCastModeList_: function(castModeList) {
+  computePresentationCastModeList_: function(castModeList) {
     return castModeList.filter(function(mode) {
-      return mode.type == media_router.CastModeType.DEFAULT;
+      return mode.type == media_router.CastModeType.PRESENTATION;
     });
   },
 
@@ -713,8 +737,8 @@ Polymer({
    */
   computeHeaderHidden_: function(view, issue) {
     return view == media_router.MediaRouterView.ROUTE_DETAILS ||
-        (view == media_router.MediaRouterView.SINK_LIST &&
-         !!issue && issue.isBlocking);
+        (view == media_router.MediaRouterView.SINK_LIST && !!issue &&
+         issue.isBlocking);
   },
 
   /**
@@ -731,7 +755,8 @@ Polymer({
         return this.i18n('issueHeaderText');
       case media_router.MediaRouterView.ROUTE_DETAILS:
         return this.currentRoute_ && this.sinkMap_[this.currentRoute_.sinkId] ?
-            this.sinkMap_[this.currentRoute_.sinkId].name : '';
+            this.sinkMap_[this.currentRoute_.sinkId].name :
+            '';
       case media_router.MediaRouterView.SINK_LIST:
       case media_router.MediaRouterView.FILTER:
         return this.headerText;
@@ -776,9 +801,11 @@ Polymer({
    * @private
    */
   computeIssueBannerShown_: function(view, issue) {
-    return !!issue && (view == media_router.MediaRouterView.SINK_LIST ||
-                       view == media_router.MediaRouterView.FILTER ||
-                       view == media_router.MediaRouterView.ISSUE);
+    return !!issue &&
+        (view == media_router.MediaRouterView.CAST_MODE_LIST ||
+         view == media_router.MediaRouterView.SINK_LIST ||
+         view == media_router.MediaRouterView.FILTER ||
+         view == media_router.MediaRouterView.ISSUE);
   },
 
   /**
@@ -791,19 +818,33 @@ Polymer({
    */
   computeNoMatchesHidden_: function(searchResultsToShow, isSearchListHidden) {
     return isSearchListHidden || this.searchInputText_.length == 0 ||
-           searchResultsToShow.length != 0;
+        searchResultsToShow.length != 0;
+  },
+
+  /**
+   * @param {!Array<!media_router.CastMode>} castModeList The current list of
+   *     cast modes.
+   * @return {!Array<!media_router.CastMode>} The list of non-PRESENTATION cast
+   *     modes. Also excludes LOCAL_FILE.
+   * @private
+   */
+  computeShareScreenCastModeList_: function(castModeList) {
+    return castModeList.filter(function(mode) {
+      return mode.type == media_router.CastModeType.DESKTOP_MIRROR ||
+          mode.type == media_router.CastModeType.TAB_MIRROR;
+    });
   },
 
   /**
    * @param {!Array<!media_router.CastMode>} castModeList The current list of
    *     cast modes.
-   * @return {!Array<!media_router.CastMode>} The list of non-default cast
+   * @return {!Array<!media_router.CastMode>} The list of local media cast
    *     modes.
    * @private
    */
-  computeNonDefaultCastModeList_: function(castModeList) {
+  computeLocalMediaCastModeList_: function(castModeList) {
     return castModeList.filter(function(mode) {
-      return mode.type != media_router.CastModeType.DEFAULT;
+      return mode.type == media_router.CastModeType.LOCAL_FILE;
     });
   },
 
@@ -863,8 +904,8 @@ Polymer({
    * @return {boolean} Whether the search results list should be hidden.
    * @private
    */
-  computeSearchResultsHidden_: function(searchResultsToShow,
-                                        isSearchListHidden) {
+  computeSearchResultsHidden_: function(
+      searchResultsToShow, isSearchListHidden) {
     return isSearchListHidden || searchResultsToShow.length == 0;
   },
 
@@ -875,7 +916,17 @@ Polymer({
    * @private
    */
   computeShareScreenSubheadingHidden_: function(castModeList) {
-    return this.computeNonDefaultCastModeList_(castModeList).length == 0;
+    return this.computeShareScreenCastModeList_(castModeList).length == 0;
+  },
+
+  /**
+   * @param {!Array<!media_router.CastMode>} castModeList The current list of
+   *     cast modes.
+   * @return {boolean} Whether or not to hide the local media subheading text.
+   * @private
+   */
+  computeLocalMediaSubheadingHidden_: function(castModeList) {
+    return this.computeLocalMediaCastModeList_(castModeList).length == 0;
   },
 
   /**
@@ -898,16 +949,18 @@ Polymer({
     switch (sink.iconType) {
       case media_router.SinkIconType.CAST:
         return 'media-router:chromecast';
-      case media_router.SinkIconType.CAST_AUDIO:
-        return 'media-router:speaker';
       case media_router.SinkIconType.CAST_AUDIO_GROUP:
         return 'media-router:speaker-group';
-      case media_router.SinkIconType.GENERIC:
-        return 'media-router:tv';
-      case media_router.SinkIconType.HANGOUT:
-        return 'media-router:hangout';
+      case media_router.SinkIconType.CAST_AUDIO:
+        return 'media-router:speaker';
       case media_router.SinkIconType.MEETING:
         return 'media-router:meeting';
+      case media_router.SinkIconType.HANGOUT:
+        return 'media-router:hangout';
+      case media_router.SinkIconType.EDUCATION:
+        return 'media-router:education';
+      case media_router.SinkIconType.GENERIC:
+        return 'media-router:tv';
       default:
         return 'media-router:tv';
     }
@@ -1068,8 +1121,8 @@ Polymer({
   computeTotalSearchHeight_: function(
       deviceMissing, noMatches, results, searchOffsetHeight, maxHeight) {
     var contentHeight = deviceMissing.offsetHeight +
-        ((noMatches.hasAttribute('hidden')) ?
-         results.offsetHeight : noMatches.offsetHeight);
+        ((noMatches.hasAttribute('hidden')) ? results.offsetHeight :
+                                              noMatches.offsetHeight);
     return Math.min(contentHeight, maxHeight) + searchOffsetHeight;
   },
 
@@ -1080,14 +1133,22 @@ Polymer({
    * filter action here.
    * @param {?media_router.MediaRouterView} currentView The current view of the
    *     dialog.
+   * @param {?media_router.MediaRouterView} previousView The previous
+   *     |currentView|.
    * @private
    */
-  currentViewChanged_: function(currentView) {
+  currentViewChanged_: function(currentView, previousView) {
     if (currentView == media_router.MediaRouterView.FILTER) {
       this.reportFilterOnInput_ = true;
       this.maybeReportFilter_();
     }
     this.updateElementPositioning_();
+
+    if (previousView == media_router.MediaRouterView.ROUTE_DETAILS) {
+      media_router.browserApi.onMediaControllerClosed();
+      if (this.$$('route-details'))
+        this.$$('route-details').onClosed();
+    }
   },
 
   /**
@@ -1107,13 +1168,12 @@ Polymer({
     var searchResultsToShow = [];
     for (var i = 0; i < this.sinksToShow_.length; ++i) {
       var matchSubstrings = this.computeSearchMatches_(
-          searchInputText,
-          this.sinksToShow_[i].name);
+          searchInputText, this.sinksToShow_[i].name);
       if (!matchSubstrings) {
         continue;
       }
-      searchResultsToShow.push({sinkItem: this.sinksToShow_[i],
-                                substrings: matchSubstrings});
+      searchResultsToShow.push(
+          {sinkItem: this.sinksToShow_[i], substrings: matchSubstrings});
     }
     searchResultsToShow.sort(this.compareSearchMatches_);
 
@@ -1130,17 +1190,24 @@ Polymer({
     // the pseudo sink for the search will be treated like a real sink because
     // it will actually be in |sinksToShow_| until a real sink is returned by
     // search. So the filter here shouldn't treat it like a pseudo sink.
-    searchResultsToShow = this.pseudoSinks_.filter(function(pseudoSink) {
-      return (!pendingPseudoSink || pseudoSink.id != pendingPseudoSink.id) &&
-          !searchResultsToShow.find(function(searchResult) {
-            return searchResult.sinkItem.name == searchInputText &&
-                   searchResult.sinkItem.iconType == pseudoSink.iconType;
-          });
-    }).map(function(pseudoSink) {
-      pseudoSink.name = searchInputText;
-      return {sinkItem: pseudoSink,
-              substrings: [[0, searchInputText.length - 1]]};
-    }).concat(searchResultsToShow);
+    searchResultsToShow =
+        this.pseudoSinks_
+            .filter(function(pseudoSink) {
+              return (!pendingPseudoSink ||
+                      pseudoSink.id != pendingPseudoSink.id) &&
+                  !searchResultsToShow.find(function(searchResult) {
+                    return searchResult.sinkItem.name == searchInputText &&
+                        searchResult.sinkItem.iconType == pseudoSink.iconType;
+                  });
+            })
+            .map(function(pseudoSink) {
+              pseudoSink.name = searchInputText;
+              return {
+                sinkItem: pseudoSink,
+                substrings: [[0, searchInputText.length - 1]]
+              };
+            })
+            .concat(searchResultsToShow);
     this.searchResultsToShow_ = searchResultsToShow;
   },
 
@@ -1151,6 +1218,7 @@ Polymer({
    * @param {number} castModeType Type of cast mode to look for.
    * @return {media_router.CastMode|undefined} CastMode object with the given
    *     type in castModeList, or undefined if not found.
+   * @private
    */
   findCastModeByType_: function(castModeType) {
     return this.castModeList.find(function(element, index, array) {
@@ -1159,10 +1227,28 @@ Polymer({
   },
 
   /**
+   * Helper function to locate the position in the |castModeList| of the
+   * CastMode object with the given type.
+   *
+   * @param {number} castModeType Type of cast mode to look for.
+   * @return {number} index of the given type, or -1 if not found.
+   * @private
+   */
+  findCastModeIndexByType_: function(castModeType) {
+    return this.castModeList
+        .map(function(element) {
+          return element.type;
+        })
+        .indexOf(castModeType);
+  },
+
+
+  /**
    * Helper function to return a forced CastMode, if any.
    *
    * @return {media_router.CastMode|undefined} CastMode object with
    *     isForced = true, or undefined if not found.
+   * @private
    */
   findForcedCastMode_: function() {
     return this.castModeList &&
@@ -1177,8 +1263,10 @@ Polymer({
    */
   getElementVerticalPadding_: function(element) {
     var style = window.getComputedStyle(element);
-    return [parseInt(style.getPropertyValue('padding-bottom'), 10) || 0,
-            parseInt(style.getPropertyValue('padding-top'), 10) || 0];
+    return [
+      parseInt(style.getPropertyValue('padding-bottom'), 10) || 0,
+      parseInt(style.getPropertyValue('padding-top'), 10) || 0
+    ];
   },
 
   /**
@@ -1189,7 +1277,8 @@ Polymer({
    */
   getFirstRunFlowCloudPrefText_: function() {
     return loadTimeData.valueExists('firstRunFlowCloudPrefText') ?
-        this.i18n('firstRunFlowCloudPrefText') : '';
+        this.i18n('firstRunFlowCloudPrefText') :
+        '';
   },
 
   /**
@@ -1277,11 +1366,11 @@ Polymer({
         // Make space for the non-blocking issue in the sink list.
         this.updateElementPositioning_();
       }
-    } else {
-      // Switch back to the sink list if the issue was cleared. If the previous
-      // issue was non-blocking, this would be a no-op. It is expected that
-      // the only way to clear an issue is by user action; the IssueManager
-      // (C++ side) does not clear issues in the UI.
+    } else if (this.currentView_ == media_router.MediaRouterView.ISSUE) {
+      // Switch back to the sink list if the issue was cleared and it was
+      // showing an issue. It is expected that the only way to clear an issue is
+      // by user action; the IssueManager (C++ side) does not clear issues in
+      // the UI.
       this.showSinkList_();
     }
 
@@ -1374,7 +1463,6 @@ Polymer({
         this.getElementVerticalPadding_(search);
     var searchPadding = searchInitialPaddingBottom + searchInitialPaddingTop;
     var searchHeight = search.offsetHeight - searchPadding;
-    this.searchUseBottomPadding = true;
     var searchFinalPaddingBottom, searchFinalPaddingTop;
     [searchFinalPaddingBottom, searchFinalPaddingTop] =
         this.getElementVerticalPadding_(search);
@@ -1408,34 +1496,55 @@ Polymer({
     // This GroupEffect does the reverse of |moveSearchToTop_|. It fades the
     // sink list in while sliding the search input and search results list down.
     // The dialog height is also adjusted smoothly to the sink list height.
-    var deviceMissingEffect = new KeyframeEffect(deviceMissing,
-        [{'marginBottom': searchInitialOffsetHeight},
-         {'marginBottom': searchFinalOffsetHeight}],
+    var deviceMissingEffect = new KeyframeEffect(
+        deviceMissing,
+        [
+          {'marginBottom': searchInitialOffsetHeight},
+          {'marginBottom': searchFinalOffsetHeight}
+        ],
         timing);
-    var listEffect = new KeyframeEffect(list,
-        [{'opacity': '0'}, {'opacity': '1'}],
+    var listEffect =
+        new KeyframeEffect(list, [{'opacity': '0'}, {'opacity': '1'}], timing);
+    var resultsEffect = new KeyframeEffect(
+        resultsContainer,
+        [
+          {
+            'top': resultsInitialTop + 'px',
+            'paddingTop': resultsContainer.style['padding-top']
+          },
+          {'top': '100%', 'paddingTop': '0px'}
+        ],
         timing);
-    var resultsEffect = new KeyframeEffect(resultsContainer,
-        [{'top': resultsInitialTop + 'px',
-          'paddingTop': resultsContainer.style['padding-top']},
-         {'top': '100%', 'paddingTop': '0px'}],
+    var searchEffect = new KeyframeEffect(
+        search,
+        [
+          {
+            'top': searchInitialTop + 'px',
+            'marginTop': '0px',
+            'paddingBottom': searchInitialPaddingBottom + 'px',
+            'paddingTop': searchInitialPaddingTop + 'px'
+          },
+          {
+            'top': '100%',
+            'marginTop': '-' + searchFinalOffsetHeight + 'px',
+            'paddingBottom': searchFinalPaddingBottom + 'px',
+            'paddingTop': searchFinalPaddingTop + 'px'
+          }
+        ],
         timing);
-    var searchEffect = new KeyframeEffect(search,
-        [{'top': searchInitialTop + 'px', 'marginTop': '0px',
-          'paddingBottom': searchInitialPaddingBottom + 'px',
-          'paddingTop': searchInitialPaddingTop + 'px'},
-         {'top': '100%', 'marginTop': '-' + searchFinalOffsetHeight + 'px',
-          'paddingBottom': searchFinalPaddingBottom + 'px',
-          'paddingTop': searchFinalPaddingTop + 'px'}],
+    var viewEffect = new KeyframeEffect(
+        view,
+        [
+          {'height': initialHeight + 'px', 'paddingBottom': '0px'}, {
+            'height': finalHeight + 'px',
+            'paddingBottom': searchFinalOffsetHeight + 'px'
+          }
+        ],
         timing);
-    var viewEffect = new KeyframeEffect(view,
-        [{'height': initialHeight + 'px', 'paddingBottom': '0px'},
-         {'height': finalHeight + 'px',
-          'paddingBottom': searchFinalOffsetHeight + 'px'}],
-        timing);
-    var player = document.timeline.play(new GroupEffect(hasList ?
-          [listEffect, resultsEffect, searchEffect, viewEffect] :
-          [deviceMissingEffect, resultsEffect, searchEffect, viewEffect]));
+    var player = document.timeline.play(new GroupEffect(
+        hasList ?
+            [listEffect, resultsEffect, searchEffect, viewEffect] :
+            [deviceMissingEffect, resultsEffect, searchEffect, viewEffect]));
 
     var that = this;
     var finalizeAnimation = function() {
@@ -1472,6 +1581,9 @@ Polymer({
     var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
+    // Set the max height for the results list before it's shown.
+    results.style.maxHeight = this.sinkListMaxHeight_ + 'px';
+
     // Saves current search container |offsetHeight| which includes bottom
     // padding.
     var searchInitialOffsetHeight = search.offsetHeight;
@@ -1485,8 +1597,6 @@ Polymer({
         this.getElementVerticalPadding_(search);
     var searchPadding = searchInitialPaddingBottom + searchInitialPaddingTop;
     var searchHeight = search.offsetHeight - searchPadding;
-    this.searchUseBottomPadding =
-        this.shouldSearchUseBottomPadding_(deviceMissing);
     var searchFinalPaddingBottom, searchFinalPaddingTop;
     [searchFinalPaddingBottom, searchFinalPaddingTop] =
         this.getElementVerticalPadding_(search);
@@ -1511,34 +1621,55 @@ Polymer({
     // This GroupEffect will cause the sink list to fade out while the search
     // input and search results list slide up. The dialog will also resize
     // smoothly to the new search result list height.
-    var deviceMissingEffect = new KeyframeEffect(deviceMissing,
-        [{'marginBottom': searchInitialOffsetHeight},
-         {'marginBottom': searchFinalOffsetHeight}],
+    var deviceMissingEffect = new KeyframeEffect(
+        deviceMissing,
+        [
+          {'marginBottom': searchInitialOffsetHeight},
+          {'marginBottom': searchFinalOffsetHeight}
+        ],
         timing);
-    var listEffect = new KeyframeEffect(list,
-        [{'opacity': '1'}, {'opacity': '0'}],
+    var listEffect =
+        new KeyframeEffect(list, [{'opacity': '1'}, {'opacity': '0'}], timing);
+    var resultsEffect = new KeyframeEffect(
+        resultsContainer,
+        [
+          {'top': '100%', 'paddingTop': '0px'}, {
+            'top': searchFinalTop + 'px',
+            'paddingTop': searchFinalOffsetHeight + 'px'
+          }
+        ],
         timing);
-    var resultsEffect = new KeyframeEffect(resultsContainer,
-        [{'top': '100%', 'paddingTop': '0px'},
-         {'top': searchFinalTop + 'px',
-          'paddingTop': searchFinalOffsetHeight + 'px'}],
+    var searchEffect = new KeyframeEffect(
+        search,
+        [
+          {
+            'top': '100%',
+            'marginTop': '-' + searchInitialOffsetHeight + 'px',
+            'paddingBottom': searchInitialPaddingBottom + 'px',
+            'paddingTop': searchInitialPaddingTop + 'px'
+          },
+          {
+            'top': searchFinalTop + 'px',
+            'marginTop': '0px',
+            'paddingBottom': searchFinalPaddingBottom + 'px',
+            'paddingTop': searchFinalPaddingTop + 'px'
+          }
+        ],
         timing);
-    var searchEffect = new KeyframeEffect(search,
-        [{'top': '100%', 'marginTop': '-' + searchInitialOffsetHeight + 'px',
-          'paddingBottom': searchInitialPaddingBottom + 'px',
-          'paddingTop': searchInitialPaddingTop + 'px'},
-         {'top': searchFinalTop + 'px', 'marginTop': '0px',
-          'paddingBottom': searchFinalPaddingBottom + 'px',
-          'paddingTop': searchFinalPaddingTop + 'px'}],
+    var viewEffect = new KeyframeEffect(
+        view,
+        [
+          {
+            'height': initialHeight + 'px',
+            'paddingBottom': searchInitialOffsetHeight + 'px'
+          },
+          {'height': finalHeight + 'px', 'paddingBottom': '0px'}
+        ],
         timing);
-    var viewEffect = new KeyframeEffect(view,
-        [{'height': initialHeight + 'px',
-          'paddingBottom': searchInitialOffsetHeight + 'px'},
-         {'height': finalHeight + 'px', 'paddingBottom': '0px'}],
-        timing);
-    var player = document.timeline.play(new GroupEffect(hasList ?
-          [listEffect, resultsEffect, searchEffect, viewEffect] :
-          [deviceMissingEffect, resultsEffect, searchEffect, viewEffect]));
+    var player = document.timeline.play(new GroupEffect(
+        hasList ?
+            [listEffect, resultsEffect, searchEffect, viewEffect] :
+            [deviceMissingEffect, resultsEffect, searchEffect, viewEffect]));
 
     var that = this;
     var finalizeAnimation = function() {
@@ -1575,20 +1706,25 @@ Polymer({
    * @private
    */
   onCastModeClick_: function(event) {
-    // The clicked cast mode can come from one of two lists,
-    // defaultCastModeList and nonDefaultCastModeList.
+    // The clicked cast mode can come from one of three lists,
+    // presentationCastModeList, shareScreenCastModeList, and
+    // localMediaCastModeList.
     var clickedMode =
-        this.$$('#defaultCastModeList').itemForElement(event.target) ||
-            this.$$('#nonDefaultCastModeList').itemForElement(event.target);
+        this.$$('#presentationCastModeList').itemForElement(event.target) ||
+        this.$$('#shareScreenCastModeList').itemForElement(event.target) ||
+        this.$$('#localMediaCastModeList').itemForElement(event.target);
 
     if (!clickedMode)
       return;
 
-    this.selectCastMode(clickedMode.type);
-    this.fire('cast-mode-selected', {castModeType: clickedMode.type});
-    this.showSinkList_();
-    this.maybeReportUserFirstAction(
-        media_router.MediaRouterUserAction.CHANGE_MODE);
+    // If the user selects LOCAL_FILE, some additional steps are required
+    // (selecting the file), before the cast mode has been officially
+    // selected.
+    if (clickedMode.type == media_router.CastModeType.LOCAL_FILE) {
+      this.selectLocalMediaFile_();
+    } else {
+      this.castModeSelected_(clickedMode);
+    }
   },
 
   /**
@@ -1662,9 +1798,9 @@ Polymer({
 
     // Regardless of whether the route is for display, it was resolved
     // successfully.
-    this.fire('report-resolved-route', {
-      outcome: media_router.MediaRouterRouteCreationOutcome.SUCCESS
-    });
+    this.fire(
+        'report-resolved-route',
+        {outcome: media_router.MediaRouterRouteCreationOutcome.SUCCESS});
 
     if (isForDisplay) {
       this.showRouteDetails_(route);
@@ -1676,6 +1812,26 @@ Polymer({
   },
 
   /**
+   * Sets up the LOCAL_FILE cast mode for display after a specific file has been
+   * selected.
+   *
+   * @param {string} fileName The name of the file that has been selected.
+   */
+  onFileDialogSuccess(fileName) {
+    /** @const */ var mode =
+        this.findCastModeByType_(media_router.CastModeType.LOCAL_FILE);
+
+    if (!mode)
+      return;
+
+    this.castModeSelected_(mode);
+    this.headerText =
+        loadTimeData.getStringF('castLocalMediaSelectedFileTitle', fileName);
+
+    this.updateSelectedCastModeMenuItem_();
+  },
+
+  /**
    * Called when a focus event is triggered.
    *
    * @param {!Event} event The event object.
@@ -1710,8 +1866,8 @@ Polymer({
     // handled on the C++ side instead of the JS side on non-mac platforms,
     // which uses toolkit-views. Handle the expected behavior on all platforms
     // here.
-    if (e.key == media_router.KEY_ESC && !e.shiftKey &&
-        !e.ctrlKey && !e.altKey && !e.metaKey) {
+    if (e.key == media_router.KEY_ESC && !e.shiftKey && !e.ctrlKey &&
+        !e.altKey && !e.metaKey) {
       // When searching, allow ESC as a mechanism to leave the filter view.
       if (this.currentView_ == media_router.MediaRouterView.FILTER) {
         // If the user tabbed to an item in the search results, or otherwise has
@@ -1767,6 +1923,17 @@ Polymer({
   },
 
   /**
+   * Called when the connection to the route controller is invalidated. Switches
+   * from route details view to the sink list view.
+   */
+  onRouteControllerInvalidated: function() {
+    if (this.currentView_ == media_router.MediaRouterView.ROUTE_DETAILS) {
+      this.currentRoute_ = null;
+      this.showSinkList_();
+    }
+  },
+
+  /**
    * Called when a sink is clicked.
    *
    * @param {!Event} event The event object.
@@ -1796,7 +1963,6 @@ Polymer({
     var list = this.$$('#sink-list');
     var resultsContainer = this.$$('#search-results-container');
     var view = this.$['sink-list-view'];
-    this.searchUseBottomPadding = true;
     search.style['top'] = '';
     if (resultsContainer) {
       resultsContainer.style['position'] = '';
@@ -1810,7 +1976,9 @@ Polymer({
       view.style['padding-bottom'] = search.offsetHeight + 'px';
       list.style['opacity'] = '';
     } else {
-      deviceMissing.style['margin-bottom'] = search.offsetHeight + 'px';
+      var bottomMargin = 12;
+      deviceMissing.style['margin-bottom'] =
+          (search.offsetHeight + bottomMargin) + 'px';
       search.style['margin-top'] = '';
       view.style['padding-bottom'] = '';
     }
@@ -1840,21 +2008,29 @@ Polymer({
     var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
+    // Set the max height for the results list before it's shown.
+    results.style.maxHeight = this.sinkListMaxHeight_ + 'px';
+
     // If there is a height mismatch between where the animation calculated the
     // height should be and where it is now because the search results changed
     // during the animation, correct it with... another animation.
-    this.searchUseBottomPadding =
-        this.shouldSearchUseBottomPadding_(deviceMissing);
     var resultsPadding = this.computeElementVerticalPadding_(results);
-    var finalHeight = this.computeTotalSearchHeight_(deviceMissing, noMatches,
-        results, search.offsetHeight, this.sinkListMaxHeight_ + resultsPadding);
+    var finalHeight = this.computeTotalSearchHeight_(
+        deviceMissing, noMatches, results, search.offsetHeight,
+        this.sinkListMaxHeight_ + resultsPadding);
     if (finalHeight != view.offsetHeight) {
-      var viewEffect = new KeyframeEffect(view,
-          [{'height': view.offsetHeight + 'px'},
-           {'height': finalHeight + 'px'}],
-          {duration:
-              this.computeAnimationDuration_(finalHeight - view.offsetHeight),
-           easing: 'ease-in-out', fill: 'forwards'});
+      var viewEffect = new KeyframeEffect(
+          view,
+          [
+            {'height': view.offsetHeight + 'px'},
+            {'height': finalHeight + 'px'}
+          ],
+          {
+            duration:
+                this.computeAnimationDuration_(finalHeight - view.offsetHeight),
+            easing: 'ease-in-out',
+            fill: 'forwards'
+          });
       var player = document.timeline.play(viewEffect);
       if (this.heightAdjustmentPlayer_) {
         this.heightAdjustmentPlayer_.cancel();
@@ -1988,6 +2164,7 @@ Polymer({
     var updatedSinkList = this.allSinks.filter(function(sink) {
       return !sink.isPseudoSink;
     }, this);
+
     if (this.pseudoSinkSearchState_) {
       var pendingPseudoSink = this.pseudoSinkSearchState_.getPseudoSink();
       // Here we will treat the pseudo sink that launched the search as a real
@@ -2012,7 +2189,7 @@ Polymer({
     if (this.shownCastModeValue_ != media_router.CastModeType.AUTO) {
       updatedSinkList = updatedSinkList.filter(function(element) {
         return (element.castModes & this.shownCastModeValue_) ||
-              this.sinkToRouteMap_[element.id];
+            this.sinkToRouteMap_[element.id];
       }, this);
     }
 
@@ -2023,7 +2200,8 @@ Polymer({
     if (this.sinksToShow_) {
       for (var i = this.sinksToShow_.length - 1; i >= 0; i--) {
         var index = updatedSinkList.findIndex(function(updatedSink) {
-            return this.sinksToShow_[i].id == updatedSink.id; }.bind(this));
+          return this.sinksToShow_[i].id == updatedSink.id;
+        }.bind(this));
         if (index < 0) {
           // Remove any sinks that are no longer discovered.
           this.sinksToShow_.splice(i, 1);
@@ -2086,6 +2264,7 @@ Polymer({
    * indicating whether or not route creation was successful.
    * Clearing |currentLaunchingSinkId_| hides the spinner indicating there is
    * a route creation in progress and show the device icon instead.
+   * @param {boolean} creationSuccess Whether route creation succeeded.
    *
    * @private
    */
@@ -2093,6 +2272,12 @@ Polymer({
     this.pseudoSinkSearchState_ = null;
     this.currentLaunchingSinkId_ = '';
     this.pendingCreatedRouteId_ = '';
+    // If it was a search that failed we need to refresh the filtered sinks now
+    // that |pseudoSinkSearchState_| is null.
+    if (!creationSuccess &&
+        this.currentView_ == media_router.MediaRouterView.FILTER) {
+      this.filterSinks_(this.searchInputText_);
+    }
 
     this.fire('report-route-creation', {success: creationSuccess});
   },
@@ -2152,6 +2337,15 @@ Polymer({
   },
 
   /**
+   * Fires the command to open a file dialog.
+   *
+   * @private
+   */
+  selectLocalMediaFile_() {
+    this.fire('select-local-media-file');
+  },
+
+  /**
    * Sets various focus and blur event handlers to handle showing search results
    * when the search input is focused.
    * @private
@@ -2200,16 +2394,6 @@ Polymer({
   },
 
   /**
-   * @param {?Element} deviceMissing Device missing message element.
-   * @return {boolean} Whether the search input should use vertical padding as
-   *     if it were the lowest (at the very bottom) item in the dialog.
-   * @private
-   */
-  shouldSearchUseBottomPadding_: function(deviceMissing) {
-    return !deviceMissing.hasAttribute('hidden');
-  },
-
-  /**
    * Shows the cast mode list.
    *
    * @private
@@ -2236,7 +2420,8 @@ Polymer({
       // Allow one launch at a time.
       var selectedCastModeValue =
           this.shownCastModeValue_ == media_router.CastModeType.AUTO ?
-              sink.castModes & -sink.castModes : this.shownCastModeValue_;
+          sink.castModes & -sink.castModes :
+          this.shownCastModeValue_;
       if (sink.isPseudoSink) {
         this.pseudoSinkSearchState_ = new PseudoSinkSearchState(sink);
         this.fire('search-sinks-and-create-route', {
@@ -2278,6 +2463,12 @@ Polymer({
   showRouteDetails_: function(route) {
     this.currentRoute_ = route;
     this.currentView_ = media_router.MediaRouterView.ROUTE_DETAILS;
+    if (route.supportsWebUiController) {
+      media_router.browserApi.onMediaControllerAvailable(route.id);
+    }
+    if (this.$$('route-details')) {
+      this.$$('route-details').onOpened();
+    }
   },
 
   /**
@@ -2349,11 +2540,13 @@ Polymer({
       // element can have a fractional height. So we use getBoundingClientRect()
       // to avoid rounding errors.
       var firstRunFlowHeight = this.$$('#first-run-flow') &&
-          this.$$('#first-run-flow').style.display != 'none' ?
-              this.$$('#first-run-flow').getBoundingClientRect().height : 0;
+              this.$$('#first-run-flow').style.display != 'none' ?
+          this.$$('#first-run-flow').getBoundingClientRect().height :
+          0;
       var issueHeight = this.$$('#issue-banner') &&
-          this.$$('#issue-banner').style.display != 'none' ?
-              this.$$('#issue-banner').offsetHeight : 0;
+              this.$$('#issue-banner').style.display != 'none' ?
+          this.$$('#issue-banner').offsetHeight :
+          0;
       var search = this.$$('#sink-search');
       var hasSearch = this.hasConditionalElement_(search);
       var searchHeight = hasSearch ? search.offsetHeight : 0;
@@ -2365,23 +2558,20 @@ Polymer({
           firstRunFlowHeight + headerHeight + 'px';
 
       var sinkList = this.$$('#sink-list');
-      if (hasSearch && sinkList) {
-        // This would need to be reset to '' if search could be disabled again,
-        // but once it's enabled it can't be disabled again.
-        this.$$('#sink-list-paper-menu').style.paddingBottom = '0';
-      }
       var sinkListPadding =
           sinkList ? this.computeElementVerticalPadding_(sinkList) : 0;
 
       this.sinkListMaxHeight_ = this.dialogHeight_ - headerHeight -
           firstRunFlowHeight - issueHeight - searchHeight + searchPadding -
           sinkListPadding;
-      if (sinkList) {
+
+      // Limit the height of the dialog to five items, including search.
+      var sinkItemHeight = 41;
+      var maxSinkItems = hasSearch ? 4 : 5;
+      this.sinkListMaxHeight_ =
+          Math.min(sinkItemHeight * maxSinkItems, this.sinkListMaxHeight_);
+      if (sinkList)
         sinkList.style.maxHeight = this.sinkListMaxHeight_ + 'px';
-        var searchResults = this.$$('#search-results');
-        if (searchResults)
-          searchResults.style.maxHeight = this.sinkListMaxHeight_ + 'px';
-      }
     });
   },
 
@@ -2394,4 +2584,16 @@ Polymer({
     this.dialogHeight_ = height;
     this.updateElementPositioning_();
   },
+
+  /**
+   * Sets the selected cast mode menu item to be in sync with the current cast
+   * mode.
+   * @private
+   */
+  updateSelectedCastModeMenuItem_: function() {
+    /** @const */ var curIndex =
+        this.findCastModeIndexByType_(this.shownCastModeValue_);
+    if (this.selectedCastModeMenuItem_ != curIndex)
+      this.selectedCastModeMenuItem_ = curIndex;
+  },
 });
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container_interface.js b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container_interface.js
new file mode 100644
index 00000000000..052d81d4811
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_container/media_router_container_interface.js
@@ -0,0 +1,176 @@
+// Copyright 2017 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 Polymer element contains the entire media router interface. It handles
+ * hiding and showing specific components.
+ * @record
+ */
+function MediaRouterContainerInterface() {}
+
+/**
+ * The list of available sinks.
+ * @type {!Array<!media_router.Sink>}
+ */
+MediaRouterContainerInterface.prototype.allSinks;
+
+/**
+ * The list of CastModes to show.
+ * @type {!Array<!media_router.CastMode>|undefined}
+ */
+MediaRouterContainerInterface.prototype.castModeList;
+
+/**
+ * The URL to open when the device missing link is clicked.
+ * @type {string|undefined}
+ */
+MediaRouterContainerInterface.prototype.deviceMissingUrl;
+
+/**
+ * The URL to open when the cloud services pref learn more link is clicked.
+ * @type {string|undefined}
+ */
+MediaRouterContainerInterface.prototype.firstRunFlowCloudPrefLearnMoreUrl;
+
+/**
+ * The URL to open when the first run flow learn more link is clicked.
+ * @type {string|undefined}
+ */
+MediaRouterContainerInterface.prototype.firstRunFlowLearnMoreUrl;
+
+/**
+ * The header element.
+ * @type {!MediaRouterHeaderElement}
+ */
+MediaRouterContainerInterface.prototype.header;
+
+/**
+ * The header text for the sink list.
+ * @type {string|undefined}
+ */
+MediaRouterContainerInterface.prototype.headerText;
+
+/**
+ * The header text tooltip. This would be descriptive of the
+ * source origin, whether a host name, tab URL, etc.
+ * @type {string|undefined}
+ */
+MediaRouterContainerInterface.prototype.headerTextTooltip;
+
+/**
+ * The issue to show.
+ * @type {?media_router.Issue}
+ */
+MediaRouterContainerInterface.prototype.issue;
+
+/**
+ * The list of current routes.
+ * @type {!Array<!media_router.Route>|undefined}
+ */
+MediaRouterContainerInterface.prototype.routeList;
+
+/**
+ * Whether the search input should be padded as if it were at the bottom of
+ * the dialog.
+ * @type {boolean}
+ */
+MediaRouterContainerInterface.prototype.searchUseBottomPadding;
+
+/**
+ * Whether to show the user domain of sinks associated with identity.
+ * @type {boolean|undefined}
+ */
+MediaRouterContainerInterface.prototype.showDomain;
+
+/**
+ * Whether to show the first run flow.
+ * @type {boolean|undefined}
+ */
+MediaRouterContainerInterface.prototype.showFirstRunFlow;
+
+/**
+ * Whether to show the cloud preference setting in the first run flow.
+ * @type {boolean|undefined}
+ */
+MediaRouterContainerInterface.prototype.showFirstRunFlowCloudPref;
+
+/**
+ * Whether the WebUI route controls should be shown instead of the
+ * extensionview in the route details view.
+ * @type {boolean}
+ */
+MediaRouterContainerInterface.prototype.useWebUiRouteControls;
+
+/**
+ * Adds an event listener callback for an event.
+ * @param {string} eventName
+ * @param {function(!Event)} callback
+ */
+MediaRouterContainerInterface.prototype.addEventListener = function(
+    eventName, callback) {};
+
+/**
+ * Fires a 'report-initial-action' event when the user takes their first
+ * action after the dialog opens. Also fires a 'report-initial-action-close'
+ * event if that initial action is to close the dialog.
+ * @param {!media_router.MediaRouterUserAction} initialAction
+ */
+MediaRouterContainerInterface.prototype.maybeReportUserFirstAction = function(
+    initialAction) {};
+
+/**
+ * Updates |currentView_| if the dialog had just opened and there's
+ * only one local route.
+ */
+MediaRouterContainerInterface.prototype.maybeShowRouteDetailsOnOpen =
+    function() {};
+
+/**
+ * Handles response of previous create route attempt.
+ * @param {string} sinkId The ID of the sink to which the Media Route was
+ *     creating a route.
+ * @param {?media_router.Route} route The newly created route that
+ *     corresponds to the sink if route creation succeeded; null otherwise.
+ * @param {boolean} isForDisplay Whether or not |route| is for display.
+ */
+MediaRouterContainerInterface.prototype.onCreateRouteResponseReceived =
+    function(sinkId, route, isForDisplay) {};
+
+/**
+ * Handles the result of a requested file dialog.
+ * @param {string} fileName The name of the file that has been selected.
+ */
+MediaRouterContainerInterface.prototype.onFileDialogSuccess = function(
+    fileName) {};
+
+/**
+ * Called when a search has completed up to route creation. |sinkId|
+ * identifies the sink that should be in |allSinks|, if a sink was found.
+ * @param {string} sinkId The ID of the sink that is the result of the
+ *     currently pending search.
+ */
+MediaRouterContainerInterface.prototype.onReceiveSearchResult = function(
+    sinkId) {};
+
+/**
+ * Called when the connection to the route controller is invalidated. Switches
+ * from route details view to the sink list view.
+ */
+MediaRouterContainerInterface.prototype.onRouteControllerInvalidated =
+    function() {};
+
+/**
+ * Sets the selected cast mode to the one associated with |castModeType|,
+ * and rebuilds sinks to reflect the change.
+ * @param {number} castModeType The type of the selected cast mode.
+ */
+MediaRouterContainerInterface.prototype.selectCastMode = function(
+    castModeType) {};
+
+/**
+ * Update the max dialog height and update the positioning of the elements.
+ * @param {number} height The max height of the Media Router dialog.
+ */
+MediaRouterContainerInterface.prototype.updateMaxDialogHeight = function(
+    height) {};
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js b/chromium/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
index 599c99f86dc..1c375cbb03a 100644
--- a/chromium/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
@@ -99,8 +99,8 @@ Polymer({
   attached: function() {
     // isRTL() only works after i18n_template.js runs to set <html dir>.
     // Set the back button icon based on text direction.
-    this.arrowDropIcon_ = isRTL() ?
-        'media-router:arrow-forward' : 'media-router:arrow-back';
+    this.arrowDropIcon_ =
+        isRTL() ? 'media-router:arrow-forward' : 'media-router:arrow-back';
   },
 
   /**
@@ -110,7 +110,8 @@ Polymer({
    */
   computeArrowDropIcon_: function(view) {
     return view == media_router.MediaRouterView.CAST_MODE_LIST ?
-        'media-router:arrow-drop-up' : 'media-router:arrow-drop-down';
+        'media-router:arrow-drop-up' :
+        'media-router:arrow-drop-down';
   },
 
   /**
@@ -131,7 +132,7 @@ Polymer({
   computeArrowDropTitle_: function(view) {
     return view == media_router.MediaRouterView.CAST_MODE_LIST ?
         this.i18n('viewDeviceListButtonTitle') :
-            this.i18n('viewCastModeListButtonTitle');
+        this.i18n('viewCastModeListButtonTitle');
   },
 
   /**
@@ -205,8 +206,8 @@ Polymer({
 
       this.$$('#header').style.height =
           this.showEmail && !this.isEmptyOrWhitespace_(this.userEmail) ?
-              this.headerWithEmailHeight_ + 'px' :
-                  this.headerWithoutEmailHeight_ + 'px';
+          this.headerWithEmailHeight_ + 'px' :
+          this.headerWithoutEmailHeight_ + 'px';
 
       // Only fire if height actually changed.
       if (currentHeight != this.offsetHeight) {
@@ -225,7 +226,8 @@ Polymer({
   updateHeaderCursorStyle_: function(view) {
     this.$$('#header-text').style.cursor =
         view == media_router.MediaRouterView.SINK_LIST ||
-        view == media_router.MediaRouterView.CAST_MODE_LIST ?
-            'pointer' : 'auto';
+            view == media_router.MediaRouterView.CAST_MODE_LIST ?
+        'pointer' :
+        'auto';
   },
 });
diff --git a/chromium/chrome/browser/resources/media_router/elements/media_router_search_highlighter/media_router_search_highlighter.js b/chromium/chrome/browser/resources/media_router/elements/media_router_search_highlighter/media_router_search_highlighter.js
index a38aa7f9ef6..b3d8e17187e 100644
--- a/chromium/chrome/browser/resources/media_router/elements/media_router_search_highlighter/media_router_search_highlighter.js
+++ b/chromium/chrome/browser/resources/media_router/elements/media_router_search_highlighter/media_router_search_highlighter.js
@@ -65,13 +65,12 @@ Polymer({
     var text = '';
     for (var i = 0; i < data.highlightedText.length; ++i) {
       if (data.plainText[i]) {
-        text +=
-            HTMLEscape(/** @type {!string} */ (data.plainText[i]));
+        text += HTMLEscape(/** @type {!string} */ (data.plainText[i]));
       }
       if (data.highlightedText[i]) {
         text += '<span class="highlight">' +
             HTMLEscape(/** @type {!string} */ (data.highlightedText[i])) +
-                '</span>';
+            '</span>';
       }
     }
     this.$.text.innerHTML = text;
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_controls/compiled_resources2.gyp b/chromium/chrome/browser/resources/media_router/elements/route_controls/compiled_resources2.gyp
new file mode 100644
index 00000000000..cb312aec660
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_controls/compiled_resources2.gyp
@@ -0,0 +1,25 @@
+# Copyright 2017 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.
+{
+  'targets': [
+    {
+      'target_name': 'route_controls',
+      'dependencies': [
+        '../../compiled_resources2.gyp:media_router_browser_api',
+        '../../compiled_resources2.gyp:media_router_data',
+        '../../compiled_resources2.gyp:media_router_ui_interface',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'route_controls_interface',
+      'dependencies': [
+        '../../compiled_resources2.gyp:media_router_data',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.css b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.css
new file mode 100644
index 00000000000..c684eb52a1a
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.css
@@ -0,0 +1,88 @@
+/* Copyright 2017 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. */
+
+#button-holder {
+  float: left;
+}
+
+#current-time {
+  left: 20px;
+  position: absolute;
+}
+
+#duration {
+  position: absolute;
+  right: 20px;
+}
+
+.ellipsis {
+  padding: 0 1%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 90%;
+}
+
+:host-context([dir='rtl']) #play-pause-volume-controls {
+  transform: scaleX(-1);
+}
+
+:host-context([dir='rtl']) #route-play-pause-button {
+  transform: scaleX(-1);
+}
+
+:host-context([dir='rtl']) #route-volume-slider {
+  transform: scaleX(-1);
+}
+
+#media-controls {
+  font-size: 1.25em;
+  margin: 0 8px;
+}
+
+#play-pause-volume-controls {
+  display: block;
+  margin-top: 13px;
+  overflow: hidden;
+}
+
+#route-description {
+  margin: 15px 8px 3px 8px;
+  overflow: hidden;
+}
+
+#route-time-controls {
+  display: block;
+  margin-top: 3px;
+  overflow: hidden;
+}
+
+#route-time-slider {
+  --paper-slider-knob-color: rgb(16, 16, 16);
+  --paper-slider-active-color: rgb(16, 16, 16);
+  --paper-slider-pin-color: rgb(16, 16, 16);
+  width: 100%;
+}
+
+#route-title {
+  color: rgb(125, 125, 125);
+  margin: 3px 8px;
+  overflow: hidden;
+}
+
+#route-volume-slider {
+  --paper-slider-knob-color: rgb(16, 16, 16);
+  --paper-slider-active-color: rgb(33, 150, 243);
+  --paper-slider-pin-color: rgb(16, 16, 16);
+  width: 100%;
+}
+
+#timeline {
+  font-size: 0.75em;
+}
+
+#volume-holder {
+  display: block;
+  overflow: hidden;
+  padding: 0.3em 0;
+}
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.html b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.html
new file mode 100644
index 00000000000..23deb932789
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.html
@@ -0,0 +1,69 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
+<dom-module id="route-controls">
+  <link rel="import" type="css" href="../../media_router_common.css">
+  <link rel="import" type="css" href="route_controls.css">
+  <template>
+    <div id="media-controls">
+      <div class="ellipsis" id="route-description"
+           title="[[displayedDescription_]]">
+        [[displayedDescription_]]
+      </div>
+      <div class="ellipsis" id="route-title" title="[[routeStatus.title]]">
+        [[routeStatus.title]]
+      </div>
+      <div>
+        <div id="route-time-controls" hidden="[[!routeStatus.canSeek]]">
+          <paper-slider
+              dir="ltr"
+              id="route-time-slider"
+              on-change="onSeekComplete_"
+              on-immediate-value-change="onSeekByDragging_"
+              min="0" max="[[routeStatus.duration]]" step="1"
+              title="[[i18n('seekTitle')]]"
+              value="[[displayedCurrentTime_]]"></paper-slider>
+          <div id="timeline">
+            <span id="current-time">
+              [[getFormattedTime_(displayedCurrentTime_)]]
+            </span>
+            <span id="duration">
+              [[getFormattedTime_(routeStatus.duration)]]
+            </span>
+          </div>
+        </div>
+        <div id="play-pause-volume-controls">
+          <span id="button-holder" dir="ltr">
+            <paper-icon-button
+                id="route-play-pause-button"
+                hidden="[[!routeStatus.canPlayPause]]"
+                disabled="[[!routeStatus.canPlayPause]]"
+                icon="[[getPlayPauseIcon_(routeStatus)]]"
+                title="[[getPlayPauseTitle_(routeStatus)]]"
+                on-click="onPlayPause_"></paper-icon-button>
+            <paper-icon-button
+                id="route-volume-button"
+                hidden="[[!routeStatus.canMute]]"
+                disabled="[[!routeStatus.canMute]]"
+                icon="[[getMuteUnmuteIcon_(routeStatus)]]"
+                title="[[getMuteUnmuteTitle_(routeStatus)]]"
+                on-click="onMuteUnmute_"></paper-icon-button>
+          </span>
+          <span id="volume-holder">
+            <paper-slider
+                id="route-volume-slider"
+                hidden="[[!routeStatus.canSetVolume]]"
+                disabled="[[!routeStatus.canSetVolume]]"
+                on-change="onVolumeChangeComplete_"
+                on-immediate-value-change="onVolumeChangeByDragging_"
+                title="[[i18n('volumeTitle')]]"
+                value="[[displayedVolume_]]"
+                min="0" max="1" step="0.01"></paper-slider>
+          </span>
+        </div>
+      </div>
+    </div>
+  </template>
+<script src="route_controls.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.js b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
new file mode 100644
index 00000000000..7dde72952df
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
@@ -0,0 +1,365 @@
+// Copyright 2017 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 Polymer element shows media controls for a route that is currently cast
+ * to a device.
+ * @implements {RouteControlsInterface}
+ */
+Polymer({
+  is: 'route-controls',
+
+  properties: {
+    /**
+     * The current time displayed in seconds, before formatting.
+     * @private {number}
+     */
+    displayedCurrentTime_: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
+     * The media description to display. Uses route description if none is
+     * provided by the route status object.
+     * @private {string}
+     */
+    displayedDescription_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The volume shown in the volume control, between 0 and 1.
+     * @private {number}
+     */
+    displayedVolume_: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
+     * The timestamp for when the initial media status was loaded.
+     * @private {number}
+     */
+    initialLoadTime_: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
+     * Set to true when the user is dragging the seek bar. Updates for the
+     * current time from the browser will be ignored when set to true.
+     * @private {boolean}
+     */
+    isSeeking_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Set to true when the user is dragging the volume bar. Volume updates from
+     * the browser will be ignored when set to true.
+     * @private {boolean}
+     */
+    isVolumeChanging_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * The timestamp for when the controller last submitted a volume change
+     * request for the volume slider being dragged.
+     * @private {boolean}
+     */
+    lastVolumeChangeByDragging_: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
+     * The timestamp for when the route details view was opened.
+     * @type {number}
+     */
+    routeDetailsOpenTime: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
+     * The status of the media route shown.
+     * @type {!media_router.RouteStatus}
+     */
+    routeStatus: {
+      type: Object,
+      observer: 'onRouteStatusChange_',
+      value: new media_router.RouteStatus(),
+    },
+
+    /**
+     * The ID of the timer currently set to increment the current time of the
+     * media, or 0 if the current time is not being incremented.
+     * @private {number}
+     */
+    timeIncrementsTimeoutId_: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  /**
+   * Called by Polymer when the element loads. Registers the element to be
+   * notified of route status updates.
+   */
+  ready: function() {
+    media_router.ui.setRouteControls(
+        /** @type {RouteControlsInterface} */ (this));
+  },
+
+  /**
+   * Current time can be incremented if the media is playing, and either the
+   * duration is 0 or current time is less than the duration.
+   * @return {boolean}
+   * @private
+   */
+  canIncrementCurrentTime_: function() {
+    return this.routeStatus.playState === media_router.PlayState.PLAYING &&
+        (this.routeStatus.duration === 0 ||
+         this.routeStatus.currentTime < this.routeStatus.duration);
+  },
+
+  /**
+   * Converts a number representing an interval of seconds to a string with
+   * HH:MM:SS format.
+   * @param {number} timeInSec Must be non-negative. Intervals longer than 100
+   *     hours get truncated silently.
+   * @return {string}
+   * @private
+   */
+  getFormattedTime_: function(timeInSec) {
+    if (timeInSec < 0) {
+      return '';
+    }
+    var hours = Math.floor(timeInSec / 3600);
+    var minutes = Math.floor(timeInSec / 60) % 60;
+    var seconds = Math.floor(timeInSec) % 60;
+    return ('0' + hours).substr(-2) + ':' + ('0' + minutes).substr(-2) + ':' +
+        ('0' + seconds).substr(-2);
+  },
+
+  /**
+   * @param {!media_router.RouteStatus} routeStatus
+   * @return {string} The value for the icon attribute of the mute/unmute
+   *     button.
+   * @private
+   */
+  getMuteUnmuteIcon_: function(routeStatus) {
+    return routeStatus.isMuted ? 'av:volume-off' : 'av:volume-up';
+  },
+
+  /**
+   * @param {!media_router.RouteStatus} routeStatus
+   * @return {string} Localized title for the mute/unmute button.
+   * @private
+   */
+  getMuteUnmuteTitle_: function(routeStatus) {
+    return routeStatus.isMuted ? this.i18n('unmuteTitle') :
+                                 this.i18n('muteTitle');
+  },
+
+  /**
+   * @param {!media_router.RouteStatus} routeStatus
+   * @return {string}The value for the icon attribute of the play/pause button.
+   * @private
+   */
+  getPlayPauseIcon_: function(routeStatus) {
+    return routeStatus.playState === media_router.PlayState.PAUSED ?
+        'av:play-arrow' :
+        'av:pause';
+  },
+
+  /**
+   * @param {!media_router.RouteStatus} routeStatus
+   * @return {string} Localized title for the play/pause button.
+   * @private
+   */
+  getPlayPauseTitle_: function(routeStatus) {
+    return routeStatus.playState === media_router.PlayState.PAUSED ?
+        this.i18n('playTitle') :
+        this.i18n('pauseTitle');
+  },
+
+  /**
+   * Checks whether the media is still playing, and if so, sends a media status
+   * update incrementing the current time and schedules another call for a
+   * second later.
+   * @private
+   */
+  maybeIncrementCurrentTime_: function() {
+    if (this.canIncrementCurrentTime_()) {
+      this.routeStatus.currentTime++;
+      this.displayedCurrentTime_ = this.routeStatus.currentTime;
+      if (this.routeStatus.duration === 0 ||
+          this.routeStatus.currentTime < this.routeStatus.duration) {
+        this.timeIncrementsTimeoutId_ =
+            setTimeout(() => this.maybeIncrementCurrentTime_(), 1000);
+      }
+    } else {
+      this.timeIncrementsTimeoutId_ = 0;
+    }
+  },
+
+  /**
+   * Called when the user toggles the mute status of the media. Sends a mute or
+   * unmute command to the browser.
+   * @private
+   */
+  onMuteUnmute_: function() {
+    media_router.browserApi.setCurrentMediaMute(!this.routeStatus.isMuted);
+  },
+
+  /**
+   * Called when the user toggles between playing and pausing the media. Sends a
+   * play or pause command to the browser.
+   * @private
+   */
+  onPlayPause_: function() {
+    if (this.routeStatus.playState === media_router.PlayState.PAUSED) {
+      media_router.browserApi.playCurrentMedia();
+    } else {
+      media_router.browserApi.pauseCurrentMedia();
+    }
+  },
+
+  /**
+   * Updates seek and volume bars if the user is not currently dragging on
+   * them.
+   * @param {!media_router.RouteStatus} newRouteStatus
+   * @private
+   */
+  onRouteStatusChange_: function(newRouteStatus) {
+    if (!this.isSeeking_) {
+      this.displayedCurrentTime_ = newRouteStatus.currentTime;
+    }
+    if (!this.isVolumeChanging_) {
+      this.displayedVolume_ = newRouteStatus.volume;
+    }
+    if (newRouteStatus.description !== '') {
+      this.displayedDescription_ = newRouteStatus.description;
+    }
+    if (!this.initialLoadTime_) {
+      this.initialLoadTime_ = Date.now();
+      media_router.browserApi.reportWebUIRouteControllerLoaded(
+          this.initialLoadTime_ - this.routeDetailsOpenTime);
+    }
+    if (this.canIncrementCurrentTime_()) {
+      if (!this.timeIncrementsTimeoutId_) {
+        this.timeIncrementsTimeoutId_ =
+            setTimeout(() => this.maybeIncrementCurrentTime_(), 1000);
+      }
+    } else {
+      this.stopIncrementingCurrentTime_();
+    }
+  },
+
+  /**
+   * Called when the route is updated. Updates the description shown if it has
+   * not been provided by status updates.
+   * @param {?media_router.Route} route
+   */
+  onRouteUpdated: function(route) {
+    if (!route) {
+      this.stopIncrementingCurrentTime_();
+    }
+    if (route && this.routeStatus.description === '') {
+      this.displayedDescription_ =
+          loadTimeData.getStringF('castingActivityStatus', route.description);
+    }
+  },
+
+  /**
+   * Called when the user clicks on or stops dragging the seek bar.
+   * @param {!Event} e
+   * @private
+   */
+  onSeekComplete_: function(e) {
+    this.stopIncrementingCurrentTime_();
+    this.isSeeking_ = false;
+    this.displayedCurrentTime_ = e.target.value;
+    media_router.browserApi.seekCurrentMedia(this.displayedCurrentTime_);
+  },
+
+  /**
+   * Called while the user is dragging the seek bar.
+   * @param {!Event} e
+   * @private
+   */
+  onSeekByDragging_: function(e) {
+    this.isSeeking_ = true;
+    var target = /** @type {{immediateValue: number}} */ (e.target);
+    this.displayedCurrentTime_ = target.immediateValue;
+  },
+
+  /**
+   * Called when the user clicks on or stops dragging the volume bar.
+   * @param {!Event} e
+   * @private
+   */
+  onVolumeChangeComplete_: function(e) {
+    this.volumeSliderValue_ = e.target.value;
+    media_router.browserApi.setCurrentMediaVolume(this.volumeSliderValue_);
+    if (this.isVolumeChanging_) {
+      // Wait for 1 second before applying external volume updates, to prevent
+      // notifications originating from this controller moving the slider knob
+      // around.
+      var that = this;
+      setTimeout(function() {
+        that.isVolumeChanging_ = false;
+      }, 1000);
+    }
+  },
+
+  /**
+   * Called while the user is dragging the volume bar.
+   * @param {!Event} e
+   * @private
+   */
+  onVolumeChangeByDragging_: function(e) {
+    /** @const */ var currentTime = Date.now();
+    // We limit the frequency of volume change requests during dragging to
+    // limit the number of Mojo calls to the component extension.
+    if (currentTime - this.lastVolumeChangeByDragging_ < 300) {
+      return;
+    }
+    this.lastVolumeChangeByDragging_ = currentTime;
+    this.isVolumeChanging_ = true;
+    var target = /** @type {{immediateValue: number}} */ (e.target);
+    this.volumeSliderValue_ = target.immediateValue;
+    media_router.browserApi.setCurrentMediaVolume(this.volumeSliderValue_);
+  },
+
+  /**
+   * Resets the route controls. Called when the route details view is closed.
+   */
+  reset: function() {
+    this.routeStatus = new media_router.RouteStatus();
+    media_router.ui.setRouteControls(null);
+  },
+
+  /**
+   * If it is currently incrementing the current time shown, then stops doing
+   * so.
+   * @private
+   */
+  stopIncrementingCurrentTime_: function() {
+    if (this.timeIncrementsTimeoutId_) {
+      clearTimeout(this.timeIncrementsTimeoutId_);
+      this.timeIncrementsTimeoutId_ = 0;
+    }
+  }
+});
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls_interface.js b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls_interface.js
new file mode 100644
index 00000000000..93aefe5db75
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_controls/route_controls_interface.js
@@ -0,0 +1,27 @@
+// Copyright 2017 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.
+
+/**
+ * Interface for the Polymer element that shows media controls for a route that
+ * is currently cast to a device.
+ * @record
+ */
+function RouteControlsInterface() {}
+
+/**
+ * @type {!media_router.RouteStatus}
+ */
+RouteControlsInterface.prototype.routeStatus;
+
+/**
+ * Resets the route controls. Called when the route details view is closed.
+ */
+RouteControlsInterface.prototype.reset = function() {};
+
+/**
+ * Called when the route is updated. Updates the description shown if it has
+ * not been provided by status updates.
+ * @param {!media_router.Route} route
+ */
+RouteControlsInterface.prototype.onRouteUpdated = function(route) {};
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/compiled_resources2.gyp b/chromium/chrome/browser/resources/media_router/elements/route_details/compiled_resources2.gyp
index 92f14fd00cc..ea2470c0b28 100644
--- a/chromium/chrome/browser/resources/media_router/elements/route_details/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/compiled_resources2.gyp
@@ -6,7 +6,10 @@
     {
       'target_name': 'route_details',
       'dependencies': [
+        'extension_view_wrapper/compiled_resources2.gyp:extension_view_wrapper',
         '../../compiled_resources2.gyp:media_router_data',
+        '../../compiled_resources2.gyp:media_router_ui_interface',
+        '../route_controls/compiled_resources2.gyp:route_controls',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
       ],
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/compiled_resources2.gyp b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/compiled_resources2.gyp
new file mode 100644
index 00000000000..b7d8fe1d144
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/compiled_resources2.gyp
@@ -0,0 +1,14 @@
+# Copyright 2017 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.
+{
+  'targets': [
+    {
+      'target_name': 'extension_view_wrapper',
+      'dependencies': [
+        '../../../compiled_resources2.gyp:media_router_data',
+      ],
+      'includes': ['../../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.css b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.css
new file mode 100644
index 00000000000..bd41df11035
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.css
@@ -0,0 +1,9 @@
+/* Copyright 2017 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. */
+
+#custom-controller {
+  display: inline-block;
+  height: 142px;
+  width: 100%;
+}
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.html b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.html
new file mode 100644
index 00000000000..9b33d90aedd
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.html
@@ -0,0 +1,9 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<dom-module id="extension-view-wrapper">
+  <link rel="import" type="css" href="extension_view_wrapper.css">
+  <template>
+    <extensionview id="custom-controller">
+    </extensionview>
+  </template>
+  <script src="extension_view_wrapper.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.js b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.js
new file mode 100644
index 00000000000..8740e75009f
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/extension_view_wrapper/extension_view_wrapper.js
@@ -0,0 +1,77 @@
+// Copyright 2017 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 Polymer element shows the custom controller for a route using
+// extensionview.
+Polymer({
+  is: 'extension-view-wrapper',
+
+  properties: {
+    /**
+     * Whether the extension view is ready to be shown.
+     * @type {boolean}
+     */
+    isExtensionViewReady: {
+      type: Boolean,
+      value: false,
+      notify: true,
+    },
+
+    /**
+     * The route to show the custom controller for.
+     * @type {?media_router.Route|undefined}
+     */
+    route: {
+      type: Object,
+      observer: 'maybeLoadExtensionView_',
+    },
+
+    /**
+     * The timestamp for when the route details view was opened.
+     * @type {number}
+     */
+    routeDetailsOpenTime: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  /**
+   * @return {?string}
+   */
+  getCustomControllerPath_: function() {
+    if (!this.route || !this.route.customControllerPath) {
+      return null;
+    }
+    return this.route.customControllerPath +
+        '&requestTimestamp=' + this.routeDetailsOpenTime;
+  },
+
+  /**
+   * Loads the custom controller if the controller path for the current route is
+   * valid.
+   */
+  maybeLoadExtensionView_: function() {
+    /** @const */ var extensionview = this.$['custom-controller'];
+    /** @const */ var controllerPath = this.getCustomControllerPath_();
+
+    // Do nothing if the controller path doesn't exist or is already shown in
+    // the extension view.
+    if (!controllerPath || controllerPath == extensionview.src) {
+      return;
+    }
+
+    /** @const */ var that = this;
+    extensionview.load(controllerPath)
+        .then(
+            function() {
+              // Load was successful; show the custom controller.
+              that.isExtensionViewReady = true;
+            },
+            function() {
+              // Load was unsuccessful; fall back to default view.
+              that.isExtensionViewReady = false;
+            });
+  },
+});
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.css b/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.css
index 9f1f1dbf6dd..742647da622 100644
--- a/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.css
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.css
@@ -2,12 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#custom-controller {
-  display: inline-block;
-  height: 142px;
-  width: 100%;
-}
-
 #route-action-buttons {
   @apply(--layout-horizontal);
   @apply(--layout-end-justified);
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.html b/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.html
index 61043b44075..bf90749150e 100644
--- a/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.html
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.html
@@ -1,16 +1,27 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="extension_view_wrapper/extension_view_wrapper.html">
+<link rel="import" href="../route_controls/route_controls.html">
 <dom-module id="route-details">
   <link rel="import" type="css" href="../../media_router_common.css">
   <link rel="import" type="css" href="route_details.css">
   <template>
-    <div id="route-information" hidden$="[[!isCustomControllerHidden_]]">
+    <div id="route-information"
+        hidden$="[[!shouldShowRouteInfoOnly_(controllerType_)]]">
       <span>[[activityStatus_]]</span>
     </div>
-    <extensionview id="custom-controller"
-        hidden$="[[isCustomControllerHidden_]]">
-    </extensionview>
+    <template is="dom-if" if="[[shouldAttemptLoadingExtensionView_(route)]]">
+      <extension-view-wrapper id="extension-view-wrapper" route="[[route]]"
+          route-details-open-time="[[openTime_]]"
+          is-extension-view-ready="{{isExtensionViewReady}}"
+          hidden$="[[!shouldShowExtensionView_(controllerType_)]]">
+      </extension-view-wrapper>
+    </template>
+    <template is="dom-if" if="[[shouldShowWebUiControls_(controllerType_)]]">
+      <route-controls id="route-controls"
+          route-details-open-time="[[openTime_]]"></route-controls>
+    </template>
     <div id="route-action-buttons" class="layout">
       <paper-button flat class="route-button button"
           id="start-casting-to-route-button"
diff --git a/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.js b/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.js
index ae7ebcca5e1..946193590b8 100644
--- a/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.js
+++ b/chromium/chrome/browser/resources/media_router/elements/route_details/route_details.js
@@ -24,7 +24,16 @@ Polymer({
     changeRouteSourceAvailable_: {
       type: Boolean,
       computed: 'computeChangeRouteSourceAvailable_(route, sink,' +
-                    'isAnySinkCurrentlyLaunching, shownCastModeValue)',
+          'isAnySinkCurrentlyLaunching, shownCastModeValue)',
+    },
+
+    /**
+     * An enum value to represent the controller to show.
+     * @private {number}
+     */
+    controllerType_: {
+      type: Number,
+      computed: 'computeControllerType_(route, isExtensionViewReady)',
     },
 
     /**
@@ -37,12 +46,34 @@ Polymer({
     },
 
     /**
+     * Whether the custom controller extensionview is ready to be shown.
+     * @type {boolean}
+     */
+    isExtensionViewReady: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * The timestamp for when the route details view was opened. We initialize
+     * the value in a function so that the value is set when the element is
+     * loaded, rather than at page load.
+     * @private {number}
+     */
+    openTime_: {
+      type: Number,
+      value: function() {
+        return Date.now();
+      },
+    },
+
+    /**
      * The route to show.
      * @type {?media_router.Route|undefined}
      */
     route: {
       type: Object,
-      observer: 'maybeLoadCustomController_',
+      observer: 'onRouteChange_',
     },
 
     /**
@@ -63,17 +94,6 @@ Polymer({
       type: Object,
       value: null,
     },
-
-    /**
-     * Whether the custom controller should be hidden.
-     * A custom controller is shown iff |route| specifies customControllerPath
-     * and the view can be loaded.
-     * @private {boolean}
-     */
-    isCustomControllerHidden_: {
-      type: Boolean,
-      value: true,
-    },
   },
 
   behaviors: [
@@ -130,6 +150,22 @@ Polymer({
   },
 
   /**
+   * @param {?media_router.Route} route
+   * @param {boolean} isExtensionViewReady
+   * @return {number} An enum value to represent the controller to show.
+   * @private
+   */
+  computeControllerType_: function(route, isExtensionViewReady) {
+    if (route && route.supportsWebUiController) {
+      return media_router.ControllerType.WEBUI;
+    }
+    if (isExtensionViewReady) {
+      return media_router.ControllerType.EXTENSION;
+    }
+    return media_router.ControllerType.NONE;
+  },
+
+  /**
    * @param {number} castMode User selected cast mode or AUTO.
    * @param {?media_router.Sink} sink Sink to which we will cast.
    * @return {number} The selected cast mode when |castMode| is selected in the
@@ -155,6 +191,92 @@ Polymer({
   },
 
   /**
+   * Updates |activityStatus_| for the default view.
+   *
+   * @private
+   */
+  updateActivityStatus_: function() {
+    this.activityStatus_ = this.route ?
+        loadTimeData.getStringF(
+            'castingActivityStatus', this.route.description) :
+        '';
+  },
+
+  /**
+   * Called when the route details view is closed. Resets route-controls.
+   */
+  onClosed: function() {
+    if (this.controllerType_ === media_router.ControllerType.WEBUI &&
+        this.$$('route-controls')) {
+      this.$$('route-controls').reset();
+    }
+  },
+
+  /**
+   * Called when the route details view is opened.
+   */
+  onOpened: function() {
+    if (this.controllerType_ === media_router.ControllerType.WEBUI &&
+        this.$$('route-controls')) {
+      media_router.ui.setRouteControls(
+          /** @type {RouteControlsInterface} */ (this.$$('route-controls')));
+    }
+  },
+
+  /**
+   * Updates either the extensionview or the WebUI route controller, depending
+   * on which should be shown.
+   * @param {?media_router.Route} newRoute
+   * @private
+   */
+  onRouteChange_: function(newRoute) {
+    if (this.controllerType_ !== media_router.ControllerType.WEBUI) {
+      this.updateActivityStatus_();
+    } else if (this.$$('route-controls')) {
+      this.$$('route-controls').onRouteUpdated(newRoute);
+    }
+  },
+
+  /**
+   * @param {?media_router.Route} route
+   * @return {boolean}
+   * @private
+   */
+  shouldAttemptLoadingExtensionView_: function(route) {
+    return !!route && !route.supportsWebUiController;
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether the extensionview should be shown instead of the
+   *     default route info element or the WebUI route controller.
+   * @private
+   */
+  shouldShowExtensionView_: function(controllerType) {
+    return controllerType === media_router.ControllerType.EXTENSION;
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether the route info element should be shown instead of
+   *     the extensionview or the WebUI route controller.
+   * @private
+   */
+  shouldShowRouteInfoOnly_: function(controllerType) {
+    return controllerType === media_router.ControllerType.NONE;
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether the WebUI route controller should be shown
+   *     instead of the default route info element or the extensionview.
+   * @private
+   */
+  shouldShowWebUiControls_: function(controllerType) {
+    return controllerType === media_router.ControllerType.WEBUI;
+  },
+
+  /**
    * Fires a join-route-click event if the current route is joinable, otherwise
    * it fires a change-route-source-click event, which changes the source of the
    * current route. This may cause the current route to be closed and a new
@@ -174,41 +296,4 @@ Polymer({
       });
     }
   },
-
-  /**
-   * Loads the custom controller if |route.customControllerPath| exists.
-   * Falls back to the default route details view otherwise, or if load fails.
-   * Updates |activityStatus_| for the default view.
-   *
-   * @private
-   */
-  maybeLoadCustomController_: function() {
-    this.activityStatus_ = this.route ?
-        loadTimeData.getStringF('castingActivityStatus',
-                                this.route.description) :
-        '';
-
-    if (!this.route || !this.route.customControllerPath) {
-      this.isCustomControllerHidden_ = true;
-      return;
-    }
-
-    // Show custom controller
-    var extensionview = this.$['custom-controller'];
-
-    // Do nothing if the url is the same and the view is not hidden.
-    if (this.route.customControllerPath == extensionview.src &&
-        !this.isCustomControllerHidden_)
-      return;
-
-    var that = this;
-    extensionview.load(this.route.customControllerPath)
-    .then(function() {
-      // Load was successful; show the custom controller.
-      that.isCustomControllerHidden_ = false;
-    }, function() {
-      // Load was unsuccessful; fall back to default view.
-      that.isCustomControllerHidden_ = true;
-    });
-  },
 });
diff --git a/chromium/chrome/browser/resources/media_router/icons/media_router_icons.html b/chromium/chrome/browser/resources/media_router/icons/media_router_icons.html
index aad793c7898..5cf41b8e90d 100644
--- a/chromium/chrome/browser/resources/media_router/icons/media_router_icons.html
+++ b/chromium/chrome/browser/resources/media_router/icons/media_router_icons.html
@@ -11,6 +11,7 @@
   <g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></g>
   <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
   <g id="error-outline"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></g>
+  <g id="folder"><path d="M0 0h24v24H0z" fill="none"></path><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></g>
   <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
   <g id="tab"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"></path></g>
 
@@ -26,6 +27,7 @@
   <!-- Icons below are swapped out in branded builds. -->
   <!-- copy of third_party/polymer/v1_0/components-chromium/iron-icons/hardware-icons.html hardware:tv icon -->
   <g id="chromecast"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path></g>
+  <g id="education"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path></g>
   <!-- copy of third_party/polymer/v1_0/components-chromium/iron-icons/hardware-icons.html communication:message icon -->
   <g id="hangout"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></g>
   <g id="meeting"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></g>
diff --git a/chromium/chrome/browser/resources/media_router/media_router.css b/chromium/chrome/browser/resources/media_router/media_router.css
index db8b9c05c05..ad517c4ccee 100644
--- a/chromium/chrome/browser/resources/media_router/media_router.css
+++ b/chromium/chrome/browser/resources/media_router/media_router.css
@@ -16,5 +16,5 @@ body {
   display: flex;
   flex-direction: column;
   margin-bottom: 1px;
-  width: calc(100% - 1px);
+  width: calc(var(--dialog-width) - 1px);
 }
diff --git a/chromium/chrome/browser/resources/media_router/media_router.html b/chromium/chrome/browser/resources/media_router/media_router.html
index 027ff7d0fd9..b3b84392949 100644
--- a/chromium/chrome/browser/resources/media_router/media_router.html
+++ b/chromium/chrome/browser/resources/media_router/media_router.html
@@ -5,6 +5,7 @@
   <title i18n-content="mediaRouterTitle"></title>
 
   <link rel="stylesheet" href="chrome://resources/css/roboto.css">
+  <link rel="stylesheet" href="media_router_common.css">
   <link rel="stylesheet" href="media_router.css">
   <link rel="import" href="chrome://resources/html/cr.html">
   <link rel="import" href="chrome://resources/html/load_time_data.html">
diff --git a/chromium/chrome/browser/resources/media_router/media_router.js b/chromium/chrome/browser/resources/media_router/media_router.js
index d3bc326a771..ef694695d45 100644
--- a/chromium/chrome/browser/resources/media_router/media_router.js
+++ b/chromium/chrome/browser/resources/media_router/media_router.js
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// <include src="media_router_browser_api.js">
 // <include src="media_router_data.js">
 // <include src="media_router_ui_interface.js">
 
@@ -11,7 +12,7 @@ cr.define('media_router', function() {
 
   /**
    * The media-router-container element. Initialized after polymer is ready.
-   * @type {?MediaRouterContainerElement}
+   * @type {?MediaRouterContainerInterface}
    */
   var container = null;
 
@@ -24,41 +25,41 @@ cr.define('media_router', function() {
     if (!cr.isMac)
       onRequestInitialData();
 
-    container = /** @type {!MediaRouterContainerElement} */
+    container = /** @type {!MediaRouterContainerInterface} */
         ($('media-router-container'));
 
-    media_router.ui.setElements(container,
-        /** @type {!MediaRouterHeaderElement} */(container.header));
+    media_router.ui.setElements(container, container.header);
 
-    container.addEventListener('acknowledge-first-run-flow',
-                               onAcknowledgeFirstRunFlow);
+    container.addEventListener(
+        'acknowledge-first-run-flow', onAcknowledgeFirstRunFlow);
     container.addEventListener('back-click', onNavigateToSinkList);
     container.addEventListener('cast-mode-selected', onCastModeSelected);
-    container.addEventListener('change-route-source-click',
-                               onChangeRouteSourceClick);
+    container.addEventListener(
+        'change-route-source-click', onChangeRouteSourceClick);
     container.addEventListener('close-dialog', onCloseDialog);
     container.addEventListener('close-route', onCloseRoute);
     container.addEventListener('create-route', onCreateRoute);
     container.addEventListener('issue-action-click', onIssueActionClick);
     container.addEventListener('join-route-click', onJoinRouteClick);
-    container.addEventListener('navigate-sink-list-to-details',
-                               onNavigateToDetails);
-    container.addEventListener('navigate-to-cast-mode-list',
-                               onNavigateToCastMode);
+    container.addEventListener(
+        'navigate-sink-list-to-details', onNavigateToDetails);
+    container.addEventListener(
+        'navigate-to-cast-mode-list', onNavigateToCastMode);
+    container.addEventListener(
+        'select-local-media-file', onSelectLocalMediaFile);
     container.addEventListener('report-filter', onFilter);
     container.addEventListener('report-initial-action', onInitialAction);
-    container.addEventListener('report-initial-action-close',
-                               onInitialActionClose);
+    container.addEventListener(
+        'report-initial-action-close', onInitialActionClose);
     container.addEventListener('report-route-creation', onReportRouteCreation);
-    container.addEventListener('report-sink-click-time',
-                               onSinkClickTimeReported);
+    container.addEventListener(
+        'report-sink-click-time', onSinkClickTimeReported);
     container.addEventListener('report-sink-count', onSinkCountReported);
-    container.addEventListener('report-resolved-route',
-                               onReportRouteCreationOutcome);
-    container.addEventListener('request-initial-data',
-                               onRequestInitialData);
-    container.addEventListener('search-sinks-and-create-route',
-                               onSearchSinksAndCreateRoute);
+    container.addEventListener(
+        'report-resolved-route', onReportRouteCreationOutcome);
+    container.addEventListener('request-initial-data', onRequestInitialData);
+    container.addEventListener(
+        'search-sinks-and-create-route', onSearchSinksAndCreateRoute);
     container.addEventListener('show-initial-state', onShowInitialState);
     container.addEventListener('sink-click', onSinkClick);
 
@@ -114,6 +115,13 @@ cr.define('media_router', function() {
   }
 
   /**
+   * Sends a request to the browser to select a local file.
+   */
+  function onSelectLocalMediaFile() {
+    media_router.browserApi.selectLocalMediaFile();
+  }
+
+  /**
    * Updates the preference that the user has seen the first run flow.
    * Called when the user clicks on the acknowledgement button on the first run
    * flow.
@@ -200,9 +208,8 @@ cr.define('media_router', function() {
   function onIssueActionClick(event) {
     /** @type {{id: number, actionType: number, helpPageId: number}} */
     var detail = event.detail;
-    media_router.browserApi.actOnIssue(detail.id,
-                                       detail.actionType,
-                                       detail.helpPageId);
+    media_router.browserApi.actOnIssue(
+        detail.id, detail.actionType, detail.helpPageId);
     container.issue = null;
   }
 
@@ -216,10 +223,10 @@ cr.define('media_router', function() {
    *   selectedCastModeValue - cast mode selected by the user.
    */
   function onCreateRoute(event) {
-    /** @type {{sinkId: string, selectedCastModeValue, number}} */
+    /** @type {{sinkId: string, selectedCastModeValue: number}} */
     var detail = event.detail;
-    media_router.browserApi.requestRoute(detail.sinkId,
-                                         detail.selectedCastModeValue);
+    media_router.browserApi.requestRoute(
+        detail.sinkId, detail.selectedCastModeValue);
   }
 
   /**
@@ -289,6 +296,7 @@ cr.define('media_router', function() {
    *   success - whether or not the route creation was successful.
    */
   function onReportRouteCreation(event) {
+    /** @type {{success: boolean}} */
     var detail = event.detail;
     media_router.browserApi.reportRouteCreation(detail.success);
   }
diff --git a/chromium/chrome/browser/resources/media_router/media_router_browser_api.js b/chromium/chrome/browser/resources/media_router/media_router_browser_api.js
new file mode 100644
index 00000000000..ac132fdb0c8
--- /dev/null
+++ b/chromium/chrome/browser/resources/media_router/media_router_browser_api.js
@@ -0,0 +1,335 @@
+// Copyright 2017 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.
+
+// API invoked by this UI to communicate with the browser WebUI message handler.
+cr.define('media_router.browserApi', function() {
+  'use strict';
+
+  /**
+   * Indicates that the user has acknowledged the first run flow.
+   *
+   * @param {boolean} optedIntoCloudServices Whether or not the user opted into
+   *                  cloud services.
+   */
+  function acknowledgeFirstRunFlow(optedIntoCloudServices) {
+    chrome.send('acknowledgeFirstRunFlow', [optedIntoCloudServices]);
+  }
+
+  /**
+   * Acts on the given issue.
+   *
+   * @param {number} issueId
+   * @param {number} actionType Type of action that the user clicked.
+   * @param {?number} helpPageId The numeric help center ID.
+   */
+  function actOnIssue(issueId, actionType, helpPageId) {
+    chrome.send(
+        'actOnIssue',
+        [{issueId: issueId, actionType: actionType, helpPageId: helpPageId}]);
+  }
+
+  /**
+   * Modifies |route| by changing its source to the one identified by
+   * |selectedCastMode|.
+   *
+   * @param {!media_router.Route} route The route being modified.
+   * @param {number} selectedCastMode The value of the cast mode the user
+   *   selected.
+   */
+  function changeRouteSource(route, selectedCastMode) {
+    chrome.send(
+        'requestRoute',
+        [{sinkId: route.sinkId, selectedCastMode: selectedCastMode}]);
+  }
+
+  /**
+   * Closes the dialog.
+   *
+   * @param {boolean} pressEscToClose Whether the user pressed ESC to close the
+   *                  dialog.
+   */
+  function closeDialog(pressEscToClose) {
+    chrome.send('closeDialog', [pressEscToClose]);
+  }
+
+  /**
+   * Closes the given route.
+   *
+   * @param {!media_router.Route} route
+   */
+  function closeRoute(route) {
+    chrome.send('closeRoute', [{routeId: route.id, isLocal: route.isLocal}]);
+  }
+
+  /**
+   * Joins the given route.
+   *
+   * @param {!media_router.Route} route
+   */
+  function joinRoute(route) {
+    chrome.send('joinRoute', [{sinkId: route.sinkId, routeId: route.id}]);
+  }
+
+  /**
+   * Indicates that the initial data has been received.
+   */
+  function onInitialDataReceived() {
+    chrome.send('onInitialDataReceived');
+  }
+
+  /**
+   * Reports that the route details view was closed.
+   */
+  function onMediaControllerClosed() {
+    chrome.send('onMediaControllerClosed');
+  }
+
+  /**
+   * Reports that the route details view was opened for |routeId|.
+   *
+   * @param {string} routeId
+   */
+  function onMediaControllerAvailable(routeId) {
+    chrome.send('onMediaControllerAvailable', [{routeId: routeId}]);
+  }
+
+  /**
+   * Sends a command to pause the route shown in the route details view.
+   */
+  function pauseCurrentMedia() {
+    chrome.send('pauseCurrentMedia');
+  }
+
+  /**
+   * Sends a command to play the route shown in the route details view.
+   */
+  function playCurrentMedia() {
+    chrome.send('playCurrentMedia');
+  }
+
+  /**
+   * Reports when the user clicks outside the dialog.
+   */
+  function reportBlur() {
+    chrome.send('reportBlur');
+  }
+
+  /**
+   * Reports the index of the selected sink.
+   *
+   * @param {number} sinkIndex
+   */
+  function reportClickedSinkIndex(sinkIndex) {
+    chrome.send('reportClickedSinkIndex', [sinkIndex]);
+  }
+
+  /**
+   * Reports that the user used the filter input.
+   */
+  function reportFilter() {
+    chrome.send('reportFilter');
+  }
+
+  /**
+   * Reports the initial dialog view.
+   *
+   * @param {string} view
+   */
+  function reportInitialState(view) {
+    chrome.send('reportInitialState', [view]);
+  }
+
+  /**
+   * Reports the initial action the user took.
+   *
+   * @param {number} action
+   */
+  function reportInitialAction(action) {
+    chrome.send('reportInitialAction', [action]);
+  }
+
+  /**
+   * Reports the navigation to the specified view.
+   *
+   * @param {string} view
+   */
+  function reportNavigateToView(view) {
+    chrome.send('reportNavigateToView', [view]);
+  }
+
+  /**
+   * Reports whether or not a route was created successfully.
+   *
+   * @param {boolean} success
+   */
+  function reportRouteCreation(success) {
+    chrome.send('reportRouteCreation', [success]);
+  }
+
+  /**
+   * Reports the outcome of a create route response.
+   *
+   * @param {number} outcome
+   */
+  function reportRouteCreationOutcome(outcome) {
+    chrome.send('reportRouteCreationOutcome', [outcome]);
+  }
+
+  /**
+   * Reports the cast mode that the user selected.
+   *
+   * @param {number} castModeType
+   */
+  function reportSelectedCastMode(castModeType) {
+    chrome.send('reportSelectedCastMode', [castModeType]);
+  }
+
+  /**
+   * Reports the current number of sinks.
+   *
+   * @param {number} sinkCount
+   */
+  function reportSinkCount(sinkCount) {
+    chrome.send('reportSinkCount', [sinkCount]);
+  }
+
+  /**
+   * Reports the time it took for the user to select a sink after the sink list
+   * is populated and shown.
+   *
+   * @param {number} timeMs
+   */
+  function reportTimeToClickSink(timeMs) {
+    chrome.send('reportTimeToClickSink', [timeMs]);
+  }
+
+  /**
+   * Reports the time, in ms, it took for the user to close the dialog without
+   * taking any other action.
+   *
+   * @param {number} timeMs
+   */
+  function reportTimeToInitialActionClose(timeMs) {
+    chrome.send('reportTimeToInitialActionClose', [timeMs]);
+  }
+
+  /**
+   * Reports the time, in ms, it took the WebUI route controller to load media
+   * status info.
+   *
+   * @param {number} timeMs
+   */
+  function reportWebUIRouteControllerLoaded(timeMs) {
+    chrome.send('reportWebUIRouteControllerLoaded', [timeMs]);
+  }
+
+  /**
+   * Requests data to initialize the WebUI with.
+   * The data will be returned via media_router.ui.setInitialData.
+   */
+  function requestInitialData() {
+    chrome.send('requestInitialData');
+  }
+
+  /**
+   * Requests that a media route be started with the given sink.
+   *
+   * @param {string} sinkId The sink ID.
+   * @param {number} selectedCastMode The value of the cast mode the user
+   *   selected.
+   */
+  function requestRoute(sinkId, selectedCastMode) {
+    chrome.send(
+        'requestRoute', [{sinkId: sinkId, selectedCastMode: selectedCastMode}]);
+  }
+
+  /**
+   * Requests that the media router search all providers for a sink matching
+   * |searchCriteria| that can be used with the media source associated with the
+   * cast mode |selectedCastMode|. If such a sink is found, a route is also
+   * created between the sink and the media source.
+   *
+   * @param {string} sinkId Sink ID of the pseudo sink generating the request.
+   * @param {string} searchCriteria Search criteria for the route providers.
+   * @param {string} domain User's current hosted domain.
+   * @param {number} selectedCastMode The value of the cast mode to be used with
+   *   the sink.
+   */
+  function searchSinksAndCreateRoute(
+      sinkId, searchCriteria, domain, selectedCastMode) {
+    chrome.send('searchSinksAndCreateRoute', [{
+                  sinkId: sinkId,
+                  searchCriteria: searchCriteria,
+                  domain: domain,
+                  selectedCastMode: selectedCastMode
+                }]);
+  }
+
+  /**
+   * Sends a command to seek the route shown in the route details view.
+   *
+   * @param {number} time The new current time in seconds.
+   */
+  function seekCurrentMedia(time) {
+    chrome.send('seekCurrentMedia', [{time: time}]);
+  }
+
+  function selectLocalMediaFile() {
+    chrome.send('selectLocalMediaFile');
+  }
+
+  /**
+   * Sends a command to mute or unmute the route shown in the route details
+   * view.
+   *
+   * @param {boolean} mute Mute the route if true, unmute it if false.
+   */
+  function setCurrentMediaMute(mute) {
+    chrome.send('setCurrentMediaMute', [{mute: mute}]);
+  }
+
+  /**
+   * Sends a command to change the volume of the route shown in the route
+   * details view.
+   *
+   * @param {number} volume The volume between 0 and 1.
+   */
+  function setCurrentMediaVolume(volume) {
+    chrome.send('setCurrentMediaVolume', [{volume: volume}]);
+  }
+
+  return {
+    acknowledgeFirstRunFlow: acknowledgeFirstRunFlow,
+    actOnIssue: actOnIssue,
+    changeRouteSource: changeRouteSource,
+    closeDialog: closeDialog,
+    closeRoute: closeRoute,
+    joinRoute: joinRoute,
+    onInitialDataReceived: onInitialDataReceived,
+    onMediaControllerClosed: onMediaControllerClosed,
+    onMediaControllerAvailable: onMediaControllerAvailable,
+    pauseCurrentMedia: pauseCurrentMedia,
+    playCurrentMedia: playCurrentMedia,
+    reportBlur: reportBlur,
+    reportClickedSinkIndex: reportClickedSinkIndex,
+    reportFilter: reportFilter,
+    reportInitialAction: reportInitialAction,
+    reportInitialState: reportInitialState,
+    reportNavigateToView: reportNavigateToView,
+    reportRouteCreation: reportRouteCreation,
+    reportRouteCreationOutcome: reportRouteCreationOutcome,
+    reportSelectedCastMode: reportSelectedCastMode,
+    reportSinkCount: reportSinkCount,
+    reportTimeToClickSink: reportTimeToClickSink,
+    reportTimeToInitialActionClose: reportTimeToInitialActionClose,
+    reportWebUIRouteControllerLoaded: reportWebUIRouteControllerLoaded,
+    requestInitialData: requestInitialData,
+    requestRoute: requestRoute,
+    searchSinksAndCreateRoute: searchSinksAndCreateRoute,
+    seekCurrentMedia: seekCurrentMedia,
+    selectLocalMediaFile: selectLocalMediaFile,
+    setCurrentMediaMute: setCurrentMediaMute,
+    setCurrentMediaVolume: setCurrentMediaVolume,
+  };
+});
diff --git a/chromium/chrome/browser/resources/media_router/media_router_common.css b/chromium/chrome/browser/resources/media_router/media_router_common.css
index 767fd1ed896..dd22f1cc105 100644
--- a/chromium/chrome/browser/resources/media_router/media_router_common.css
+++ b/chromium/chrome/browser/resources/media_router/media_router_common.css
@@ -5,6 +5,7 @@
 :root {
   --dialog-padding-end: 26px;
   --dialog-padding-start: 16px;
+  --dialog-width: 340px;
   --navigation-icon-button-size: 36px;
   --non-navigation-icon-size: 16px;
 }
diff --git a/chromium/chrome/browser/resources/media_router/media_router_data.js b/chromium/chrome/browser/resources/media_router/media_router_data.js
index 82ec6b3c1f4..8d147a31f49 100644
--- a/chromium/chrome/browser/resources/media_router/media_router_data.js
+++ b/chromium/chrome/browser/resources/media_router/media_router_data.js
@@ -16,11 +16,22 @@ cr.exportPath('media_router');
 media_router.CastModeType = {
   // Note: AUTO mode is only used to configure the sink list container to show
   // all sinks. Individual sinks are configured with a specific cast mode
-  // (DEFAULT, TAB_MIRROR, DESKTOP_MIRROR).
+  // (PRESENTATION, TAB_MIRROR, DESKTOP_MIRROR).
   AUTO: -1,
-  DEFAULT: 0x1,
+  PRESENTATION: 0x1,
   TAB_MIRROR: 0x2,
   DESKTOP_MIRROR: 0x4,
+  LOCAL_FILE: 0x8,
+};
+
+/**
+ * Route controller types that can be shown in the route details view.
+ * @enum {number}
+ */
+media_router.ControllerType = {
+  NONE: 0,
+  WEBUI: 1,
+  EXTENSION: 2,
 };
 
 /**
@@ -75,6 +86,16 @@ media_router.MediaRouterView = {
 media_router.MINIMUM_SINKS_FOR_SEARCH = 20;
 
 /**
+ * The states that media can be in.
+ * @enum {number}
+ */
+media_router.PlayState = {
+  PLAYING: 0,
+  PAUSED: 1,
+  BUFFERING: 2,
+};
+
+/**
  * This corresponds to the C++ MediaSink IconType, and the order must stay in
  * sync.
  * @enum {number}
@@ -85,7 +106,8 @@ media_router.SinkIconType = {
   CAST_AUDIO: 2,
   MEETING: 3,
   HANGOUT: 4,
-  GENERIC: 5,
+  EDUCATION: 5,
+  GENERIC: 6,
 };
 
 /**
@@ -126,9 +148,9 @@ cr.define('media_router', function() {
    * Placeholder object for AUTO cast mode. See comment in CastModeType.
    * @const {!media_router.CastMode}
    */
-  var AUTO_CAST_MODE = new CastMode(media_router.CastModeType.AUTO,
-                                    loadTimeData.getString('autoCastMode'),
-                                    null, false);
+  var AUTO_CAST_MODE = new CastMode(
+      media_router.CastModeType.AUTO, loadTimeData.getString('autoCastMode'),
+      null, false);
 
   /**
    * @param {number} id The ID of this issue.
@@ -143,9 +165,9 @@ cr.define('media_router', function() {
    * @constructor
    * @struct
    */
-  var Issue = function(id, title, message, defaultActionType,
-                       secondaryActionType, routeId, isBlocking,
-                       helpPageId) {
+  var Issue = function(
+      id, title, message, defaultActionType, secondaryActionType, routeId,
+      isBlocking, helpPageId) {
     /** @type {number} */
     this.id = id;
 
@@ -171,7 +193,6 @@ cr.define('media_router', function() {
     this.helpPageId = helpPageId;
   };
 
-
   /**
    * @param {string} id The media route ID.
    * @param {string} sinkId The ID of the media sink running this route.
@@ -185,8 +206,8 @@ cr.define('media_router', function() {
    * @constructor
    * @struct
    */
-  var Route = function(id, sinkId, description, tabId, isLocal, canJoin,
-      customControllerPath) {
+  var Route = function(
+      id, sinkId, description, tabId, isLocal, canJoin, customControllerPath) {
     /** @type {string} */
     this.id = id;
 
@@ -210,8 +231,67 @@ cr.define('media_router', function() {
 
     /** @type {?string} */
     this.customControllerPath = customControllerPath;
+
+    /** @type {boolean} */
+    this.supportsWebUiController = false;
   };
 
+  /**
+   * @param {string} title The title of the route.
+   * @param {string} description A description for the route.
+   * @param {boolean} canPlayPause Whether the route can be played/paused.
+   * @param {boolean} canMute Whether the route can be muted/unmuted.
+   * @param {boolean} canSetVolume Whether the route volume can be changed.
+   * @param {boolean} canSeek Whether the route's playback position can be
+   *     changed.
+   * @param {boolean} isPaused Whether the route is paused.
+   * @param {boolean} isMuted Whether the route is muted.
+   * @param {number} volume The route's volume, between 0 and 1.
+   * @param {number} duration The route's duration in seconds.
+   * @param {number} currentTime The route's current position in seconds.
+   *     Must not be greater than |duration|.
+   * @constructor
+   * @struct
+   */
+  var RouteStatus = function(
+      title = '', description = '', canPlayPause = false, canMute = false,
+      canSetVolume = false, canSeek = false,
+      playState = media_router.PlayState.PLAYING, isPaused = false,
+      isMuted = false, volume = 0, duration = 0, currentTime = 0) {
+
+    /** @type {string} */
+    this.title = title;
+
+    /** @type {string} */
+    this.description = description;
+
+    /** @type {boolean} */
+    this.canPlayPause = canPlayPause;
+
+    /** @type {boolean} */
+    this.canMute = canMute;
+
+    /** @type {boolean} */
+    this.canSetVolume = canSetVolume;
+
+    /** @type {boolean} */
+    this.canSeek = canSeek;
+
+    /** @type {media_router.PlayState} */
+    this.playState = playState;
+
+    /** @type {boolean} */
+    this.isMuted = isMuted;
+
+    /** @type {number} */
+    this.volume = volume;
+
+    /** @type {number} */
+    this.duration = duration;
+
+    /** @type {number} */
+    this.currentTime = currentTime;
+  };
 
   /**
    * @param {string} id The ID of the media sink.
@@ -224,8 +304,8 @@ cr.define('media_router', function() {
    * @constructor
    * @struct
    */
-  var Sink = function(id, name, description, domain, iconType, status,
-      castModes) {
+  var Sink = function(
+      id, name, description, domain, iconType, status, castModes) {
     /** @type {string} */
     this.id = id;
 
@@ -251,7 +331,6 @@ cr.define('media_router', function() {
     this.isPseudoSink = false;
   };
 
-
   /**
    * @param {number} tabId The current tab ID.
    * @param {string} domain The domain of the current tab.
@@ -271,6 +350,7 @@ cr.define('media_router', function() {
     CastMode: CastMode,
     Issue: Issue,
     Route: Route,
+    RouteStatus: RouteStatus,
     Sink: Sink,
     TabInfo: TabInfo,
   };
diff --git a/chromium/chrome/browser/resources/media_router/media_router_ui_interface.js b/chromium/chrome/browser/resources/media_router/media_router_ui_interface.js
index a8ec54461a2..8cd1ca3406d 100644
--- a/chromium/chrome/browser/resources/media_router/media_router_ui_interface.js
+++ b/chromium/chrome/browser/resources/media_router/media_router_ui_interface.js
@@ -13,6 +13,9 @@ cr.define('media_router.ui', function() {
   // The media-router-header element.
   var header = null;
 
+  // The route-controls element. Is null if the route details view isn't open.
+  var routeControls = null;
+
   /**
    * Handles response of previous create route attempt.
    *
@@ -27,6 +30,14 @@ cr.define('media_router.ui', function() {
   }
 
   /**
+   * Called when the route controller for the route that is currently selected
+   * is invalidated.
+   */
+  function onRouteControllerInvalidated() {
+    container.onRouteControllerInvalidated();
+  }
+
+  /**
    * Handles the search response by forwarding |sinkId| to the container.
    *
    * @param {string} sinkId The ID of the sink found by search.
@@ -47,7 +58,7 @@ cr.define('media_router.ui', function() {
   /**
    * Sets |container| and |header|.
    *
-   * @param {!MediaRouterContainerElement} mediaRouterContainer
+   * @param {!MediaRouterContainerInterface} mediaRouterContainer
    * @param {!MediaRouterHeaderElement} mediaRouterHeader
    */
   function setElements(mediaRouterContainer, mediaRouterHeader) {
@@ -75,10 +86,8 @@ cr.define('media_router.ui', function() {
   function setFirstRunFlowData(data) {
     container.firstRunFlowCloudPrefLearnMoreUrl =
         data['firstRunFlowCloudPrefLearnMoreUrl'];
-    container.firstRunFlowLearnMoreUrl =
-        data['firstRunFlowLearnMoreUrl'];
-    container.showFirstRunFlowCloudPref =
-        data['showFirstRunFlowCloudPref'];
+    container.firstRunFlowLearnMoreUrl = data['firstRunFlowLearnMoreUrl'];
+    container.showFirstRunFlowCloudPref = data['showFirstRunFlowCloudPref'];
     // Some users acknowledged the first run flow before the cloud prefs
     // setting was implemented. These users will see the first run flow
     // again.
@@ -102,6 +111,7 @@ cr.define('media_router.ui', function() {
    * Parameters in data:
    *   deviceMissingUrl - url to be opened on "Device missing?" clicked.
    *   sinksAndIdentity - list of sinks to be displayed and user identity.
+   *   useWebUiRouteControls - whether new WebUI route controls should be used.
    *   routes - list of routes that are associated with the sinks.
    *   castModes - list of available cast modes.
    *   useTabMirroring - whether the cast mode should be set to TAB_MIRROR.
@@ -128,6 +138,16 @@ cr.define('media_router.ui', function() {
   }
 
   /**
+   * Sets |routeControls|. The argument may be null if the route details view is
+   * getting closed.
+   *
+   * @param {?RouteControlsInterface} mediaRouterRouteControls
+   */
+  function setRouteControls(mediaRouterRouteControls) {
+    routeControls = mediaRouterRouteControls;
+  }
+
+  /**
    * Sets the list of currently active routes.
    *
    * @param {!Array<!media_router.Route>} routeList
@@ -166,263 +186,35 @@ cr.define('media_router.ui', function() {
     container.updateMaxDialogHeight(height);
   }
 
+  /**
+   * Updates the route status shown in the route controls.
+   *
+   * @param {!media_router.RouteStatus} status
+   */
+  function updateRouteStatus(status) {
+    if (routeControls) {
+      routeControls.routeStatus = status;
+    }
+  }
+
+  function userSelectedLocalMediaFile(fileName) {
+    container.onFileDialogSuccess(fileName);
+  }
+
   return {
     onCreateRouteResponseReceived: onCreateRouteResponseReceived,
+    onRouteControllerInvalidated: onRouteControllerInvalidated,
     receiveSearchResult: receiveSearchResult,
     setCastModeList: setCastModeList,
     setElements: setElements,
     setFirstRunFlowData: setFirstRunFlowData,
     setInitialData: setInitialData,
     setIssue: setIssue,
+    setRouteControls: setRouteControls,
     setRouteList: setRouteList,
     setSinkListAndIdentity: setSinkListAndIdentity,
     updateMaxHeight: updateMaxHeight,
-  };
-});
-
-// API invoked by this UI to communicate with the browser WebUI message handler.
-cr.define('media_router.browserApi', function() {
-  'use strict';
-
-  /**
-   * Indicates that the user has acknowledged the first run flow.
-   *
-   * @param {boolean} optedIntoCloudServices Whether or not the user opted into
-   *                  cloud services.
-   */
-  function acknowledgeFirstRunFlow(optedIntoCloudServices) {
-    chrome.send('acknowledgeFirstRunFlow', [optedIntoCloudServices]);
-  }
-
-  /**
-   * Acts on the given issue.
-   *
-   * @param {number} issueId
-   * @param {number} actionType Type of action that the user clicked.
-   * @param {?number} helpPageId The numeric help center ID.
-   */
-  function actOnIssue(issueId, actionType, helpPageId) {
-    chrome.send('actOnIssue', [{issueId: issueId, actionType: actionType,
-                                helpPageId: helpPageId}]);
-  }
-
-  /**
-   * Modifies |route| by changing its source to the one identified by
-   * |selectedCastMode|.
-   *
-   * @param {!media_router.Route} route The route being modified.
-   * @param {number} selectedCastMode The value of the cast mode the user
-   *   selected.
-   */
-  function changeRouteSource(route, selectedCastMode) {
-    chrome.send('requestRoute',
-                [{sinkId: route.sinkId, selectedCastMode: selectedCastMode}]);
-  }
-
-  /**
-   * Closes the dialog.
-   *
-   * @param {boolean} pressEscToClose Whether the user pressed ESC to close the
-   *                  dialog.
-   */
-  function closeDialog(pressEscToClose) {
-    chrome.send('closeDialog', [pressEscToClose]);
-  }
-
-  /**
-   * Closes the given route.
-   *
-   * @param {!media_router.Route} route
-   */
-  function closeRoute(route) {
-    chrome.send('closeRoute', [{routeId: route.id, isLocal: route.isLocal}]);
-  }
-
-  /**
-   * Joins the given route.
-   *
-   * @param {!media_router.Route} route
-   */
-  function joinRoute(route) {
-    chrome.send('joinRoute', [{sinkId: route.sinkId, routeId: route.id}]);
-  }
-
-  /**
-   * Indicates that the initial data has been received.
-   */
-  function onInitialDataReceived() {
-    chrome.send('onInitialDataReceived');
-  }
-
-  /**
-   * Reports when the user clicks outside the dialog.
-   */
-  function reportBlur() {
-    chrome.send('reportBlur');
-  }
-
-  /**
-   * Reports the index of the selected sink.
-   *
-   * @param {number} sinkIndex
-   */
-  function reportClickedSinkIndex(sinkIndex) {
-    chrome.send('reportClickedSinkIndex', [sinkIndex]);
-  }
-
-  /**
-   * Reports that the user used the filter input.
-   */
-  function reportFilter() {
-    chrome.send('reportFilter');
-  }
-
-  /**
-   * Reports the initial dialog view.
-   *
-   * @param {string} view
-   */
-  function reportInitialState(view) {
-    chrome.send('reportInitialState', [view]);
-  }
-
-  /**
-   * Reports the initial action the user took.
-   *
-   * @param {number} action
-   */
-  function reportInitialAction(action) {
-    chrome.send('reportInitialAction', [action]);
-  }
-
-  /**
-   * Reports the navigation to the specified view.
-   *
-   * @param {string} view
-   */
-  function reportNavigateToView(view) {
-    chrome.send('reportNavigateToView', [view]);
-  }
-
-  /**
-   * Reports whether or not a route was created successfully.
-   *
-   * @param {boolean} success
-   */
-  function reportRouteCreation(success) {
-    chrome.send('reportRouteCreation', [success]);
-  }
-
-  /**
-   * Reports the outcome of a create route response.
-   *
-   * @param {number} outcome
-   */
-  function reportRouteCreationOutcome(outcome) {
-    chrome.send('reportRouteCreationOutcome', [outcome]);
-  }
-
-  /**
-   * Reports the cast mode that the user selected.
-   *
-   * @param {number} castModeType
-   */
-  function reportSelectedCastMode(castModeType) {
-    chrome.send('reportSelectedCastMode', [castModeType]);
-  }
-
-  /**
-   * Reports the current number of sinks.
-   *
-   * @param {number} sinkCount
-   */
-  function reportSinkCount(sinkCount) {
-    chrome.send('reportSinkCount', [sinkCount]);
-  }
-
-  /**
-   * Reports the time it took for the user to select a sink after the sink list
-   * is populated and shown.
-   *
-   * @param {number} timeMs
-   */
-  function reportTimeToClickSink(timeMs) {
-    chrome.send('reportTimeToClickSink', [timeMs]);
-  }
-
-  /**
-   * Reports the time, in ms, it took for the user to close the dialog without
-   * taking any other action.
-   *
-   * @param {number} timeMs
-   */
-  function reportTimeToInitialActionClose(timeMs) {
-    chrome.send('reportTimeToInitialActionClose', [timeMs]);
-  }
-
-  /**
-   * Requests data to initialize the WebUI with.
-   * The data will be returned via media_router.ui.setInitialData.
-   */
-  function requestInitialData() {
-    chrome.send('requestInitialData');
-  }
-
-  /**
-   * Requests that a media route be started with the given sink.
-   *
-   * @param {string} sinkId The sink ID.
-   * @param {number} selectedCastMode The value of the cast mode the user
-   *   selected.
-   */
-  function requestRoute(sinkId, selectedCastMode) {
-    chrome.send('requestRoute',
-                [{sinkId: sinkId, selectedCastMode: selectedCastMode}]);
-  }
-
-  /**
-   * Requests that the media router search all providers for a sink matching
-   * |searchCriteria| that can be used with the media source associated with the
-   * cast mode |selectedCastMode|. If such a sink is found, a route is also
-   * created between the sink and the media source.
-   *
-   * @param {string} sinkId Sink ID of the pseudo sink generating the request.
-   * @param {string} searchCriteria Search criteria for the route providers.
-   * @param {string} domain User's current hosted domain.
-   * @param {number} selectedCastMode The value of the cast mode to be used with
-   *   the sink.
-   */
-  function searchSinksAndCreateRoute(
-      sinkId, searchCriteria, domain, selectedCastMode) {
-    chrome.send('searchSinksAndCreateRoute',
-                [{sinkId: sinkId,
-                  searchCriteria: searchCriteria,
-                  domain: domain,
-                  selectedCastMode: selectedCastMode}]);
-  }
-
-  return {
-    acknowledgeFirstRunFlow: acknowledgeFirstRunFlow,
-    actOnIssue: actOnIssue,
-    changeRouteSource: changeRouteSource,
-    closeDialog: closeDialog,
-    closeRoute: closeRoute,
-    joinRoute: joinRoute,
-    onInitialDataReceived: onInitialDataReceived,
-    reportBlur: reportBlur,
-    reportClickedSinkIndex: reportClickedSinkIndex,
-    reportFilter: reportFilter,
-    reportInitialAction: reportInitialAction,
-    reportInitialState: reportInitialState,
-    reportNavigateToView: reportNavigateToView,
-    reportRouteCreation: reportRouteCreation,
-    reportRouteCreationOutcome: reportRouteCreationOutcome,
-    reportSelectedCastMode: reportSelectedCastMode,
-    reportSinkCount: reportSinkCount,
-    reportTimeToClickSink: reportTimeToClickSink,
-    reportTimeToInitialActionClose: reportTimeToInitialActionClose,
-    requestInitialData: requestInitialData,
-    requestRoute: requestRoute,
-    searchSinksAndCreateRoute: searchSinksAndCreateRoute,
+    updateRouteStatus: updateRouteStatus,
+    userSelectedLocalMediaFile: userSelectedLocalMediaFile,
   };
 });
diff --git a/chromium/chrome/browser/resources/memory_internals.html b/chromium/chrome/browser/resources/memory_internals.html
new file mode 100644
index 00000000000..f6d8665cc74
--- /dev/null
+++ b/chromium/chrome/browser/resources/memory_internals.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html><head>
+<title>Memory Internals</title>
+<style type="text/css">
+  body {
+    font-family: sans-serif;
+  }
+  .procrow {
+    line-height: 250%;
+  }
+  .button {
+    background-color: black;
+    color: white;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 10px;
+  }
+</style>
+</head><body>
+
+<script src="chrome://resources/js/util.js"></script>
+<script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://memory-internals/memory_internals.js"></script>
+
+<h3>Experimental memory internals</h3>
+
+<div id="proclist">
+loading...
+</div>
+
+</body></html>
+
diff --git a/chromium/chrome/browser/resources/memory_internals.js b/chromium/chrome/browser/resources/memory_internals.js
new file mode 100644
index 00000000000..03050e3d30c
--- /dev/null
+++ b/chromium/chrome/browser/resources/memory_internals.js
@@ -0,0 +1,47 @@
+// Copyright 2017 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.
+
+'use strict';
+
+function requestProcessList() {
+  chrome.send('requestProcessList');
+}
+
+function dumpProcess(pid) {
+  chrome.send('dumpProcess', [pid]);
+}
+
+function returnProcessList(processList) {
+  var proclist = $('proclist');
+  proclist.innerText = '';
+  for (let proc of processList) {
+    /** @const */ var row = document.createElement('div');
+    row.className = 'procrow';
+
+    var description = document.createTextNode(proc[1] + ' ');
+    row.appendChild(description);
+
+    var button = document.createElement('button');
+    button.innerText = '[dump]';
+    button.className = 'button';
+    let proc_id = proc[0];
+    button.onclick = () => dumpProcess(proc_id);
+    row.appendChild(button);
+
+    proclist.appendChild(row);
+  }
+}
+
+// Get data and have it displayed upon loading.
+document.addEventListener('DOMContentLoaded', requestProcessList);
+
+/* For manual testing.
+function fakeResults() {
+  returnProcessList([
+    [ 11234, "Process 11234 [Browser]" ],
+    [ 11235, "Process 11235 [Renderer]" ],
+    [ 11236, "Process 11236 [Renderer]" ]]);
+}
+document.addEventListener('DOMContentLoaded', fakeResults);
+*/
diff --git a/chromium/chrome/browser/resources/net_internals/details_view.js b/chromium/chrome/browser/resources/net_internals/details_view.js
index 1b1792f0f8e..adf01841565 100644
--- a/chromium/chrome/browser/resources/net_internals/details_view.js
+++ b/chromium/chrome/browser/resources/net_internals/details_view.js
@@ -62,7 +62,8 @@ var DetailsView = (function() {
 
         var p = addNode(div, 'p');
         addNodeWithText(
-            p, 'h4', sourceEntry.getSourceId() + ': ' +
+            p, 'h4',
+            sourceEntry.getSourceId() + ': ' +
                 sourceEntry.getSourceTypeString());
 
         if (sourceEntry.getDescription())
diff --git a/chromium/chrome/browser/resources/net_internals/log_util.js b/chromium/chrome/browser/resources/net_internals/log_util.js
index 40ac3b2ee3e..f690352a5ca 100644
--- a/chromium/chrome/browser/resources/net_internals/log_util.js
+++ b/chromium/chrome/browser/resources/net_internals/log_util.js
@@ -166,20 +166,29 @@ log_util = (function() {
       }
     }
 
-    // Make sure the loaded log contained an export date. If not we will
-    // synthesize one. This can legitimately happen for dump files created
-    // via command line flag, or for older dump formats (before Chrome 17).
+    // Determine the export date for the loaded log.
+    //
+    // Dumps created from chrome://net-internals (Chrome 17 - Chrome 59) will
+    // have this set in constants.clientInfo.numericDate.
+    //
+    // However more recent dumping mechanisms (chrome://net-export/ and
+    // --log-net-log) write the constants object directly to a file when the
+    // dump is *started* so lack this ability.
+    //
+    // In this case, we will synthesize this field by looking at the timestamp
+    // of the last event logged. In practice this works fine since there tend
+    // to be lots of events logged.
+    //
+    // TODO(eroman): Fix the log format / writers to avoid this problem. Dumps
+    // *should* contain the time when capturing started, and when capturing
+    // ended.
     if (typeof logDump.constants.clientInfo.numericDate != 'number') {
-      errorString += 'The log file is missing clientInfo.numericDate.\n';
-
       if (validEvents.length > 0) {
-        errorString +=
-            'Synthesizing export date as time of last event captured.\n';
         var lastEvent = validEvents[validEvents.length - 1];
         ClientInfo.numericDate =
             timeutil.convertTimeTicksToDate(lastEvent.time).getTime();
       } else {
-        errorString += 'Can\'t guess export date!\n';
+        errorString += 'Can\'t guess export date as there are no events.\n';
         ClientInfo.numericDate = 0;
       }
     }
@@ -271,8 +280,5 @@ log_util = (function() {
   }
 
   // Exports.
-  return {
-    createLogDumpAsync: createLogDumpAsync,
-    loadLogFile: loadLogFile
-  };
+  return {createLogDumpAsync: createLogDumpAsync, loadLogFile: loadLogFile};
 })();
diff --git a/chromium/chrome/browser/resources/net_internals/log_view_painter.js b/chromium/chrome/browser/resources/net_internals/log_view_painter.js
index 54cc6d8ec4a..6210fab747b 100644
--- a/chromium/chrome/browser/resources/net_internals/log_view_painter.js
+++ b/chromium/chrome/browser/resources/net_internals/log_view_painter.js
@@ -10,262 +10,261 @@ var stripPrivacyInfo;
 
 // Start of anonymous namespace.
 (function() {
-  'use strict';
+'use strict';
 
-  function canCollapseBeginWithEnd(beginEntry) {
-    return beginEntry && beginEntry.isBegin() && beginEntry.end &&
-        beginEntry.end.index == beginEntry.index + 1 &&
-        (!beginEntry.orig.params || !beginEntry.end.orig.params);
-  }
-
-  /**
-   * Creates a TablePrinter for use by the above two functions.  baseTime is
-   * the time relative to which other times are displayed.
-   */
-  createLogEntryTablePrinter = function(
-      logEntries, privacyStripping, baseTime, logCreationTime) {
-    var entries = LogGroupEntry.createArrayFrom(logEntries);
-    var tablePrinter = new TablePrinter();
-    var parameterOutputter = new ParameterOutputter(tablePrinter);
-
-    if (entries.length == 0)
-      return tablePrinter;
-
-    var startTime = timeutil.convertTimeTicksToTime(entries[0].orig.time);
-
-    for (var i = 0; i < entries.length; ++i) {
-      var entry = entries[i];
-
-      // Avoid printing the END for a BEGIN that was immediately before, unless
-      // both have extra parameters.
-      if (!entry.isEnd() || !canCollapseBeginWithEnd(entry.begin)) {
-        var entryTime = timeutil.convertTimeTicksToTime(entry.orig.time);
-        addRowWithTime(
-            tablePrinter, entryTime - baseTime, startTime - baseTime);
-
-        for (var j = entry.getDepth(); j > 0; --j)
-          tablePrinter.addCell('  ');
-
-        var eventText = getTextForEvent(entry);
-        // Get the elapsed time, and append it to the event text.
-        if (entry.isBegin()) {
-          var dt = '?';
-          // Definite time.
-          if (entry.end) {
-            dt = entry.end.orig.time - entry.orig.time;
-          } else if (logCreationTime != undefined) {
-            dt = (logCreationTime - entryTime) + '+';
-          }
-          eventText += '  [dt=' + dt + ']';
-        }
+function canCollapseBeginWithEnd(beginEntry) {
+  return beginEntry && beginEntry.isBegin() && beginEntry.end &&
+      beginEntry.end.index == beginEntry.index + 1 &&
+      (!beginEntry.orig.params || !beginEntry.end.orig.params);
+}
 
-        var mainCell = tablePrinter.addCell(eventText);
-        mainCell.allowOverflow = true;
-      }
+/**
+ * Creates a TablePrinter for use by the above two functions.  baseTime is
+ * the time relative to which other times are displayed.
+ */
+createLogEntryTablePrinter = function(
+    logEntries, privacyStripping, baseTime, logCreationTime) {
+  var entries = LogGroupEntry.createArrayFrom(logEntries);
+  var tablePrinter = new TablePrinter();
+  var parameterOutputter = new ParameterOutputter(tablePrinter);
 
-      // Output the extra parameters.
-      if (typeof entry.orig.params == 'object') {
-        // Those 5 skipped cells are: two for "t=", and three for "st=".
-        tablePrinter.setNewRowCellIndent(5 + entry.getDepth());
-        writeParameters(entry.orig, privacyStripping, parameterOutputter);
+  if (entries.length == 0)
+    return tablePrinter;
 
-        tablePrinter.setNewRowCellIndent(0);
+  var startTime = timeutil.convertTimeTicksToTime(entries[0].orig.time);
+
+  for (var i = 0; i < entries.length; ++i) {
+    var entry = entries[i];
+
+    // Avoid printing the END for a BEGIN that was immediately before, unless
+    // both have extra parameters.
+    if (!entry.isEnd() || !canCollapseBeginWithEnd(entry.begin)) {
+      var entryTime = timeutil.convertTimeTicksToTime(entry.orig.time);
+      addRowWithTime(tablePrinter, entryTime - baseTime, startTime - baseTime);
+
+      for (var j = entry.getDepth(); j > 0; --j)
+        tablePrinter.addCell('  ');
+
+      var eventText = getTextForEvent(entry);
+      // Get the elapsed time, and append it to the event text.
+      if (entry.isBegin()) {
+        var dt = '?';
+        // Definite time.
+        if (entry.end) {
+          dt = entry.end.orig.time - entry.orig.time;
+        } else if (logCreationTime != undefined) {
+          dt = (logCreationTime - entryTime) + '+';
+        }
+        eventText += '  [dt=' + dt + ']';
       }
-    }
 
-    // If viewing a saved log file, add row with just the time the log was
-    // created, if the event never completed.
-    var lastEntry = entries[entries.length - 1];
-    // If the last entry has a non-zero depth or is a begin event, the source is
-    // still active.
-    var isSourceActive = lastEntry.getDepth() != 0 || lastEntry.isBegin();
-    if (logCreationTime != undefined && isSourceActive) {
-      addRowWithTime(
-          tablePrinter, logCreationTime - baseTime, startTime - baseTime);
+      var mainCell = tablePrinter.addCell(eventText);
+      mainCell.allowOverflow = true;
     }
 
-    return tablePrinter;
-  };
+    // Output the extra parameters.
+    if (typeof entry.orig.params == 'object') {
+      // Those 5 skipped cells are: two for "t=", and three for "st=".
+      tablePrinter.setNewRowCellIndent(5 + entry.getDepth());
+      writeParameters(entry.orig, privacyStripping, parameterOutputter);
 
-  /**
-   * Adds a new row to the given TablePrinter, and adds five cells containing
-   * information about the time an event occured.
-   * Format is '[t=<time of the event in ms>] [st=<ms since the source
-   * started>]'.
-   * @param {TablePrinter} tablePrinter The table printer to add the cells to.
-   * @param {number} eventTime The time the event occured, in milliseconds,
-   *     relative to some base time.
-   * @param {number} startTime The time the first event for the source occured,
-   *     relative to the same base time as eventTime.
-   */
-  function addRowWithTime(tablePrinter, eventTime, startTime) {
-    tablePrinter.addRow();
-    tablePrinter.addCell('t=');
-    var tCell = tablePrinter.addCell(eventTime);
-    tCell.alignRight = true;
-    tablePrinter.addCell(' [st=');
-    var stCell = tablePrinter.addCell(eventTime - startTime);
-    stCell.alignRight = true;
-    tablePrinter.addCell('] ');
+      tablePrinter.setNewRowCellIndent(0);
+    }
   }
 
-  /**
-   * |hexString| must be a string of hexadecimal characters with no whitespace,
-   * whose length is a multiple of two.  Writes multiple lines to |out| with
-   * the hexadecimal characters from |hexString| on the left, in groups of
-   * two, and their corresponding ASCII characters on the right.
-   *
-   * 16 bytes will be placed on each line of the output string, split into two
-   * columns of 8.
-   */
-  function writeHexString(hexString, out) {
-    var asciiCharsPerLine = 16;
-    // Number of transferred bytes in a line of output.  Length of a
-    // line is roughly 4 times larger.
-    var hexCharsPerLine = 2 * asciiCharsPerLine;
-    for (var i = 0; i < hexString.length; i += hexCharsPerLine) {
-      var hexLine = '';
-      var asciiLine = '';
-      for (var j = i; j < i + hexCharsPerLine && j < hexString.length; j += 2) {
-        // Split into two columns of 8 bytes each.
-        if (j == i + hexCharsPerLine / 2)
-          hexLine += ' ';
-        var hex = hexString.substr(j, 2);
-        hexLine += hex + ' ';
-        var charCode = parseInt(hex, 16);
-        // For ASCII codes 32 though 126, display the corresponding
-        // characters.  Use a space for nulls, and a period for
-        // everything else.
-        if (charCode >= 0x20 && charCode <= 0x7E) {
-          asciiLine += String.fromCharCode(charCode);
-        } else if (charCode == 0x00) {
-          asciiLine += ' ';
-        } else {
-          asciiLine += '.';
-        }
-      }
+  // If viewing a saved log file, add row with just the time the log was
+  // created, if the event never completed.
+  var lastEntry = entries[entries.length - 1];
+  // If the last entry has a non-zero depth or is a begin event, the source is
+  // still active.
+  var isSourceActive = lastEntry.getDepth() != 0 || lastEntry.isBegin();
+  if (logCreationTime != undefined && isSourceActive) {
+    addRowWithTime(
+        tablePrinter, logCreationTime - baseTime, startTime - baseTime);
+  }
 
-      // Make the ASCII text for the last line of output align with the previous
-      // lines.
-      hexLine +=
-          makeRepeatedString(' ', 3 * asciiCharsPerLine + 1 - hexLine.length);
-      out.writeLine('   ' + hexLine + '  ' + asciiLine);
+  return tablePrinter;
+};
+
+/**
+ * Adds a new row to the given TablePrinter, and adds five cells containing
+ * information about the time an event occured.
+ * Format is '[t=<time of the event in ms>] [st=<ms since the source
+ * started>]'.
+ * @param {TablePrinter} tablePrinter The table printer to add the cells to.
+ * @param {number} eventTime The time the event occured, in milliseconds,
+ *     relative to some base time.
+ * @param {number} startTime The time the first event for the source occured,
+ *     relative to the same base time as eventTime.
+ */
+function addRowWithTime(tablePrinter, eventTime, startTime) {
+  tablePrinter.addRow();
+  tablePrinter.addCell('t=');
+  var tCell = tablePrinter.addCell(eventTime);
+  tCell.alignRight = true;
+  tablePrinter.addCell(' [st=');
+  var stCell = tablePrinter.addCell(eventTime - startTime);
+  stCell.alignRight = true;
+  tablePrinter.addCell('] ');
+}
+
+/**
+ * |hexString| must be a string of hexadecimal characters with no whitespace,
+ * whose length is a multiple of two.  Writes multiple lines to |out| with
+ * the hexadecimal characters from |hexString| on the left, in groups of
+ * two, and their corresponding ASCII characters on the right.
+ *
+ * 16 bytes will be placed on each line of the output string, split into two
+ * columns of 8.
+ */
+function writeHexString(hexString, out) {
+  var asciiCharsPerLine = 16;
+  // Number of transferred bytes in a line of output.  Length of a
+  // line is roughly 4 times larger.
+  var hexCharsPerLine = 2 * asciiCharsPerLine;
+  for (var i = 0; i < hexString.length; i += hexCharsPerLine) {
+    var hexLine = '';
+    var asciiLine = '';
+    for (var j = i; j < i + hexCharsPerLine && j < hexString.length; j += 2) {
+      // Split into two columns of 8 bytes each.
+      if (j == i + hexCharsPerLine / 2)
+        hexLine += ' ';
+      var hex = hexString.substr(j, 2);
+      hexLine += hex + ' ';
+      var charCode = parseInt(hex, 16);
+      // For ASCII codes 32 though 126, display the corresponding
+      // characters.  Use a space for nulls, and a period for
+      // everything else.
+      if (charCode >= 0x20 && charCode <= 0x7E) {
+        asciiLine += String.fromCharCode(charCode);
+      } else if (charCode == 0x00) {
+        asciiLine += ' ';
+      } else {
+        asciiLine += '.';
+      }
     }
+
+    // Make the ASCII text for the last line of output align with the previous
+    // lines.
+    hexLine +=
+        makeRepeatedString(' ', 3 * asciiCharsPerLine + 1 - hexLine.length);
+    out.writeLine('   ' + hexLine + '  ' + asciiLine);
   }
+}
 
+/**
+ * Wrapper around a TablePrinter to simplify outputting lines of text for
+ * event
+ * parameters.
+ */
+var ParameterOutputter = (function() {
   /**
-   * Wrapper around a TablePrinter to simplify outputting lines of text for
-   * event
-   * parameters.
+   * @constructor
    */
-  var ParameterOutputter = (function() {
+  function ParameterOutputter(tablePrinter) {
+    this.tablePrinter_ = tablePrinter;
+  }
+
+  ParameterOutputter.prototype = {
     /**
-     * @constructor
+     * Outputs a single line.
      */
-    function ParameterOutputter(tablePrinter) {
-      this.tablePrinter_ = tablePrinter;
-    }
+    writeLine: function(line) {
+      this.tablePrinter_.addRow();
+      var cell = this.tablePrinter_.addCell(line);
+      cell.allowOverflow = true;
+      return cell;
+    },
 
-    ParameterOutputter.prototype = {
-      /**
-       * Outputs a single line.
-       */
-      writeLine: function(line) {
-        this.tablePrinter_.addRow();
-        var cell = this.tablePrinter_.addCell(line);
-        cell.allowOverflow = true;
-        return cell;
-      },
-
-      /**
-       * Outputs a key=value line which looks like:
-       *
-       *   --> key = value
-       */
-      writeArrowKeyValue: function(key, value, link) {
-        var cell = this.writeLine(kArrow + key + ' = ' + value);
-        cell.link = link;
-      },
-
-      /**
-       * Outputs a key= line which looks like:
-       *
-       *   --> key =
-       */
-      writeArrowKey: function(key) {
-        this.writeLine(kArrow + key + ' =');
-      },
-
-      /**
-       * Outputs multiple lines, each indented by numSpaces.
-       * For instance if numSpaces=8 it might look like this:
-       *
-       *         line 1
-       *         line 2
-       *         line 3
-       */
-      writeSpaceIndentedLines: function(numSpaces, lines) {
-        var prefix = makeRepeatedString(' ', numSpaces);
-        for (var i = 0; i < lines.length; ++i)
-          this.writeLine(prefix + lines[i]);
-      },
-
-      /**
-       * Outputs multiple lines such that the first line has
-       * an arrow pointing at it, and subsequent lines
-       * align with the first one. For example:
-       *
-       *   --> line 1
-       *       line 2
-       *       line 3
-       */
-      writeArrowIndentedLines: function(lines) {
-        if (lines.length == 0)
-          return;
-
-        this.writeLine(kArrow + lines[0]);
-
-        for (var i = 1; i < lines.length; ++i)
-          this.writeLine(kArrowIndentation + lines[i]);
-      }
-    };
+    /**
+     * Outputs a key=value line which looks like:
+     *
+     *   --> key = value
+     */
+    writeArrowKeyValue: function(key, value, link) {
+      var cell = this.writeLine(kArrow + key + ' = ' + value);
+      cell.link = link;
+    },
 
-    var kArrow = ' --> ';
-    var kArrowIndentation = '     ';
+    /**
+     * Outputs a key= line which looks like:
+     *
+     *   --> key =
+     */
+    writeArrowKey: function(key) {
+      this.writeLine(kArrow + key + ' =');
+    },
 
-    return ParameterOutputter;
-  })();  // end of ParameterOutputter
+    /**
+     * Outputs multiple lines, each indented by numSpaces.
+     * For instance if numSpaces=8 it might look like this:
+     *
+     *         line 1
+     *         line 2
+     *         line 3
+     */
+    writeSpaceIndentedLines: function(numSpaces, lines) {
+      var prefix = makeRepeatedString(' ', numSpaces);
+      for (var i = 0; i < lines.length; ++i)
+        this.writeLine(prefix + lines[i]);
+    },
 
-  /**
-   * Formats the parameters for |entry| and writes them to |out|.
-   * Certain event types have custom pretty printers. Everything else will
-   * default to a JSON-like format.
-   */
-  function writeParameters(entry, privacyStripping, out) {
-    if (privacyStripping) {
-      // If privacy stripping is enabled, remove data as needed.
-      entry = stripPrivacyInfo(entry);
-    } else {
-      // If headers are in an object, convert them to an array for better
-      // display.
-      entry = reformatHeaders(entry);
-    }
+    /**
+     * Outputs multiple lines such that the first line has
+     * an arrow pointing at it, and subsequent lines
+     * align with the first one. For example:
+     *
+     *   --> line 1
+     *       line 2
+     *       line 3
+     */
+    writeArrowIndentedLines: function(lines) {
+      if (lines.length == 0)
+        return;
 
-    // Use any parameter writer available for this event type.
-    var paramsWriter = getParameterWriterForEventType(entry.type);
-    var consumedParams = {};
-    if (paramsWriter)
-      paramsWriter(entry, out, consumedParams);
+      this.writeLine(kArrow + lines[0]);
 
-    // Write any un-consumed parameters.
-    for (var k in entry.params) {
-      if (consumedParams[k])
-        continue;
-      defaultWriteParameter(k, entry.params[k], out);
+      for (var i = 1; i < lines.length; ++i)
+        this.writeLine(kArrowIndentation + lines[i]);
     }
+  };
+
+  var kArrow = ' --> ';
+  var kArrowIndentation = '     ';
+
+  return ParameterOutputter;
+})();  // end of ParameterOutputter
+
+/**
+ * Formats the parameters for |entry| and writes them to |out|.
+ * Certain event types have custom pretty printers. Everything else will
+ * default to a JSON-like format.
+ */
+function writeParameters(entry, privacyStripping, out) {
+  if (privacyStripping) {
+    // If privacy stripping is enabled, remove data as needed.
+    entry = stripPrivacyInfo(entry);
+  } else {
+    // If headers are in an object, convert them to an array for better
+    // display.
+    entry = reformatHeaders(entry);
   }
 
-  /**
+  // Use any parameter writer available for this event type.
+  var paramsWriter = getParameterWriterForEventType(entry.type);
+  var consumedParams = {};
+  if (paramsWriter)
+    paramsWriter(entry, out, consumedParams);
+
+  // Write any un-consumed parameters.
+  for (var k in entry.params) {
+    if (consumedParams[k])
+      continue;
+    defaultWriteParameter(k, entry.params[k], out);
+  }
+}
+
+/**
  * Finds a writer to format the parameters for events of type |eventType|.
  *
  * @return {function} The returned function "writer" can be invoked
@@ -275,493 +274,492 @@ var stripPrivacyInfo;
  *                    consumed. If no writer is available for |eventType| then
  *                    returns null.
  */
-  function getParameterWriterForEventType(eventType) {
-    switch (eventType) {
-      case EventType.HTTP_TRANSACTION_SEND_REQUEST_HEADERS:
-      case EventType.HTTP_TRANSACTION_SEND_TUNNEL_HEADERS:
-      case EventType.TYPE_HTTP_CACHE_CALLER_REQUEST_HEADERS:
-        return writeParamsForRequestHeaders;
-
-      case EventType.PROXY_CONFIG_CHANGED:
-        return writeParamsForProxyConfigChanged;
-
-      case EventType.CERT_VERIFIER_JOB:
-      case EventType.SSL_CERTIFICATES_RECEIVED:
-        return writeParamsForCertificates;
-      case EventType.CERT_CT_COMPLIANCE_CHECKED:
-      case EventType.EV_CERT_CT_COMPLIANCE_CHECKED:
-        return writeParamsForCheckedCertificates;
-    }
-    return null;
+function getParameterWriterForEventType(eventType) {
+  switch (eventType) {
+    case EventType.HTTP_TRANSACTION_SEND_REQUEST_HEADERS:
+    case EventType.HTTP_TRANSACTION_SEND_TUNNEL_HEADERS:
+    case EventType.TYPE_HTTP_CACHE_CALLER_REQUEST_HEADERS:
+      return writeParamsForRequestHeaders;
+
+    case EventType.PROXY_CONFIG_CHANGED:
+      return writeParamsForProxyConfigChanged;
+
+    case EventType.CERT_VERIFIER_JOB:
+    case EventType.SSL_CERTIFICATES_RECEIVED:
+      return writeParamsForCertificates;
+    case EventType.CERT_CT_COMPLIANCE_CHECKED:
+    case EventType.EV_CERT_CT_COMPLIANCE_CHECKED:
+      return writeParamsForCheckedCertificates;
   }
+  return null;
+}
 
-  /**
-   * Default parameter writer that outputs a visualization of field named |key|
-   * with value |value| to |out|.
-   */
-  function defaultWriteParameter(key, value, out) {
-    if (key == 'headers' && value instanceof Array) {
-      out.writeArrowIndentedLines(value);
-      return;
-    }
-
-    // For transferred bytes, display the bytes in hex and ASCII.
-    if (key == 'hex_encoded_bytes' && typeof value == 'string') {
-      out.writeArrowKey(key);
-      writeHexString(value, out);
-      return;
-    }
-
-    // Handle source_dependency entries - add link and map source type to
-    // string.
-    if (key == 'source_dependency' && typeof value == 'object') {
-      var link = '#events&s=' + value.id;
-      var valueStr = value.id + ' (' + EventSourceTypeNames[value.type] + ')';
-      out.writeArrowKeyValue(key, valueStr, link);
-      return;
-    }
-
-    if (key == 'net_error' && typeof value == 'number') {
-      var valueStr = value + ' (' + netErrorToString(value) + ')';
-      out.writeArrowKeyValue(key, valueStr);
-      return;
-    }
-
-    if (key == 'quic_error' && typeof value == 'number') {
-      var valueStr = value + ' (' + quicErrorToString(value) + ')';
-      out.writeArrowKeyValue(key, valueStr);
-      return;
-    }
+/**
+ * Default parameter writer that outputs a visualization of field named |key|
+ * with value |value| to |out|.
+ */
+function defaultWriteParameter(key, value, out) {
+  if (key == 'headers' && value instanceof Array) {
+    out.writeArrowIndentedLines(value);
+    return;
+  }
 
-    if (key == 'quic_crypto_handshake_message' && typeof value == 'string') {
-      var lines = value.split('\n');
-      out.writeArrowIndentedLines(lines);
-      return;
-    }
+  // For transferred bytes, display the bytes in hex and ASCII.
+  if (key == 'hex_encoded_bytes' && typeof value == 'string') {
+    out.writeArrowKey(key);
+    writeHexString(value, out);
+    return;
+  }
 
-    if (key == 'quic_rst_stream_error' && typeof value == 'number') {
-      var valueStr = value + ' (' + quicRstStreamErrorToString(value) + ')';
-      out.writeArrowKeyValue(key, valueStr);
-      return;
-    }
+  // Handle source_dependency entries - add link and map source type to
+  // string.
+  if (key == 'source_dependency' && typeof value == 'object') {
+    var link = '#events&s=' + value.id;
+    var valueStr = value.id + ' (' + EventSourceTypeNames[value.type] + ')';
+    out.writeArrowKeyValue(key, valueStr, link);
+    return;
+  }
 
-    if (key == 'load_flags' && typeof value == 'number') {
-      var valueStr = value + ' (' + getLoadFlagSymbolicString(value) + ')';
-      out.writeArrowKeyValue(key, valueStr);
-      return;
-    }
+  if (key == 'net_error' && typeof value == 'number') {
+    var valueStr = value + ' (' + netErrorToString(value) + ')';
+    out.writeArrowKeyValue(key, valueStr);
+    return;
+  }
 
-    if (key == 'load_state' && typeof value == 'number') {
-      var valueStr = value + ' (' + getKeyWithValue(LoadState, value) + ')';
-      out.writeArrowKeyValue(key, valueStr);
-      return;
-    }
+  if (key == 'quic_error' && typeof value == 'number') {
+    var valueStr = value + ' (' + quicErrorToString(value) + ')';
+    out.writeArrowKeyValue(key, valueStr);
+    return;
+  }
 
-    if (key == 'sdch_problem_code' && typeof value == 'number') {
-      var valueStr = value + ' (' + sdchProblemCodeToString(value) + ')';
-      out.writeArrowKeyValue(key, valueStr);
-      return;
-    }
+  if (key == 'quic_crypto_handshake_message' && typeof value == 'string') {
+    var lines = value.split('\n');
+    out.writeArrowIndentedLines(lines);
+    return;
+  }
 
-    // Otherwise just default to JSON formatting of the value.
-    out.writeArrowKeyValue(key, JSON.stringify(value));
+  if (key == 'quic_rst_stream_error' && typeof value == 'number') {
+    var valueStr = value + ' (' + quicRstStreamErrorToString(value) + ')';
+    out.writeArrowKeyValue(key, valueStr);
+    return;
   }
 
-  /**
-   * Returns the set of LoadFlags that make up the integer |loadFlag|.
-   * For example: getLoadFlagSymbolicString(
-   */
-  function getLoadFlagSymbolicString(loadFlag) {
-    return getSymbolicString(
-        loadFlag, LoadFlag, getKeyWithValue(LoadFlag, loadFlag));
+  if (key == 'load_flags' && typeof value == 'number') {
+    var valueStr = value + ' (' + getLoadFlagSymbolicString(value) + ')';
+    out.writeArrowKeyValue(key, valueStr);
+    return;
   }
 
-  /**
-   * Returns the set of CertStatusFlags that make up the integer
-   * |certStatusFlag|
-   */
-  function getCertStatusFlagSymbolicString(certStatusFlag) {
-    return getSymbolicString(certStatusFlag, CertStatusFlag, '');
+  if (key == 'load_state' && typeof value == 'number') {
+    var valueStr = value + ' (' + getKeyWithValue(LoadState, value) + ')';
+    out.writeArrowKeyValue(key, valueStr);
+    return;
   }
 
-  /**
-   * Returns a string representing the flags composing the given bitmask.
-   */
-  function getSymbolicString(bitmask, valueToName, zeroName) {
-    var matchingFlagNames = [];
+  if (key == 'sdch_problem_code' && typeof value == 'number') {
+    var valueStr = value + ' (' + sdchProblemCodeToString(value) + ')';
+    out.writeArrowKeyValue(key, valueStr);
+    return;
+  }
 
-    for (var k in valueToName) {
-      if (bitmask & valueToName[k])
-        matchingFlagNames.push(k);
-    }
+  // Otherwise just default to JSON formatting of the value.
+  out.writeArrowKeyValue(key, JSON.stringify(value));
+}
 
-    // If no flags were matched, returns a special value.
-    if (matchingFlagNames.length == 0)
-      return zeroName;
+/**
+ * Returns the set of LoadFlags that make up the integer |loadFlag|.
+ * For example: getLoadFlagSymbolicString(
+ */
+function getLoadFlagSymbolicString(loadFlag) {
+  return getSymbolicString(
+      loadFlag, LoadFlag, getKeyWithValue(LoadFlag, loadFlag));
+}
+
+/**
+ * Returns the set of CertStatusFlags that make up the integer
+ * |certStatusFlag|
+ */
+function getCertStatusFlagSymbolicString(certStatusFlag) {
+  return getSymbolicString(certStatusFlag, CertStatusFlag, '');
+}
 
-    return matchingFlagNames.join(' | ');
-  }
+/**
+ * Returns a string representing the flags composing the given bitmask.
+ */
+function getSymbolicString(bitmask, valueToName, zeroName) {
+  var matchingFlagNames = [];
 
-  /**
-   * TODO(eroman): get rid of this, as it is only used by 1 callsite.
-   *
-   * Indent |lines| by |start|.
-   *
-   * For example, if |start| = ' -> ' and |lines| = ['line1', 'line2', 'line3']
-   * the output will be:
-   *
-   *   " -> line1\n" +
-   *   "    line2\n" +
-   *   "    line3"
-   */
-  function indentLines(start, lines) {
-    return start + lines.join('\n' + makeRepeatedString(' ', start.length));
+  for (var k in valueToName) {
+    if (bitmask & valueToName[k])
+      matchingFlagNames.push(k);
   }
 
-  /**
-   * If entry.param.headers exists and is an object other than an array,
-   * converts
-   * it into an array and returns a new entry.  Otherwise, just returns the
-   * original entry.
-   */
-  function reformatHeaders(entry) {
-    // If there are no headers, or it is not an object other than an array,
-    // return |entry| without modification.
-    if (!entry.params || entry.params.headers === undefined ||
-        typeof entry.params.headers != 'object' ||
-        entry.params.headers instanceof Array) {
-      return entry;
-    }
-
-    // Duplicate the top level object, and |entry.params|, so the original
-    // object
-    // will not be modified.
-    entry = shallowCloneObject(entry);
-    entry.params = shallowCloneObject(entry.params);
+  // If no flags were matched, returns a special value.
+  if (matchingFlagNames.length == 0)
+    return zeroName;
 
-    // Convert headers to an array.
-    var headers = [];
-    for (var key in entry.params.headers)
-      headers.push(key + ': ' + entry.params.headers[key]);
-    entry.params.headers = headers;
+  return matchingFlagNames.join(' | ');
+}
 
+/**
+ * TODO(eroman): get rid of this, as it is only used by 1 callsite.
+ *
+ * Indent |lines| by |start|.
+ *
+ * For example, if |start| = ' -> ' and |lines| = ['line1', 'line2', 'line3']
+ * the output will be:
+ *
+ *   " -> line1\n" +
+ *   "    line2\n" +
+ *   "    line3"
+ */
+function indentLines(start, lines) {
+  return start + lines.join('\n' + makeRepeatedString(' ', start.length));
+}
+
+/**
+ * If entry.param.headers exists and is an object other than an array,
+ * converts
+ * it into an array and returns a new entry.  Otherwise, just returns the
+ * original entry.
+ */
+function reformatHeaders(entry) {
+  // If there are no headers, or it is not an object other than an array,
+  // return |entry| without modification.
+  if (!entry.params || entry.params.headers === undefined ||
+      typeof entry.params.headers != 'object' ||
+      entry.params.headers instanceof Array) {
     return entry;
   }
 
-  /**
-   * Removes a cookie or unencrypted login information from a single HTTP header
-   * line, if present, and returns the modified line.  Otherwise, just returns
-   * the original line.
-   *
-   * Note: this logic should be kept in sync with
-   * net::ElideHeaderValueForNetLog in net/http/http_log_util.cc.
-   */
-  function stripCookieOrLoginInfo(line) {
-    var patterns = [
-      // Cookie patterns
-      /^set-cookie: /i, /^set-cookie2: /i, /^cookie: /i,
-
-      // Unencrypted authentication patterns
-      /^authorization: \S*\s*/i, /^proxy-authorization: \S*\s*/i
-    ];
-
-    // Prefix will hold the first part of the string that contains no private
-    // information.  If null, no part of the string contains private
-    // information.
-    var prefix = null;
-    for (var i = 0; i < patterns.length; i++) {
-      var match = patterns[i].exec(line);
-      if (match != null) {
-        prefix = match[0];
-        break;
-      }
+  // Duplicate the top level object, and |entry.params|, so the original
+  // object
+  // will not be modified.
+  entry = shallowCloneObject(entry);
+  entry.params = shallowCloneObject(entry.params);
+
+  // Convert headers to an array.
+  var headers = [];
+  for (var key in entry.params.headers)
+    headers.push(key + ': ' + entry.params.headers[key]);
+  entry.params.headers = headers;
+
+  return entry;
+}
+
+/**
+ * Removes a cookie or unencrypted login information from a single HTTP header
+ * line, if present, and returns the modified line.  Otherwise, just returns
+ * the original line.
+ *
+ * Note: this logic should be kept in sync with
+ * net::ElideHeaderValueForNetLog in net/http/http_log_util.cc.
+ */
+function stripCookieOrLoginInfo(line) {
+  var patterns = [
+    // Cookie patterns
+    /^set-cookie: /i, /^set-cookie2: /i, /^cookie: /i,
+
+    // Unencrypted authentication patterns
+    /^authorization: \S*\s*/i, /^proxy-authorization: \S*\s*/i
+  ];
+
+  // Prefix will hold the first part of the string that contains no private
+  // information.  If null, no part of the string contains private
+  // information.
+  var prefix = null;
+  for (var i = 0; i < patterns.length; i++) {
+    var match = patterns[i].exec(line);
+    if (match != null) {
+      prefix = match[0];
+      break;
     }
+  }
 
-    // Look for authentication information from data received from the server in
-    // multi-round Negotiate authentication.
-    if (prefix === null) {
-      var challengePatterns =
-          [/^www-authenticate: (\S*)\s*/i, /^proxy-authenticate: (\S*)\s*/i];
-      for (var i = 0; i < challengePatterns.length; i++) {
-        var match = challengePatterns[i].exec(line);
-        if (!match)
-          continue;
-
-        // If there's no data after the scheme name, do nothing.
-        if (match[0].length == line.length)
-          break;
-
-        // Ignore lines with commas, as they may contain lists of schemes, and
-        // the information we want to hide is Base64 encoded, so has no commas.
-        if (line.indexOf(',') >= 0)
-          break;
-
-        // Ignore Basic and Digest authentication challenges, as they contain
-        // public information.
-        if (/^basic$/i.test(match[1]) || /^digest$/i.test(match[1]))
-          break;
-
-        prefix = match[0];
-        break;
-      }
-    }
+  // Look for authentication information from data received from the server in
+  // multi-round Negotiate authentication.
+  if (prefix === null) {
+    var challengePatterns =
+        [/^www-authenticate: (\S*)\s*/i, /^proxy-authenticate: (\S*)\s*/i];
+    for (var i = 0; i < challengePatterns.length; i++) {
+      var match = challengePatterns[i].exec(line);
+      if (!match)
+        continue;
 
-    if (prefix) {
-      var suffix = line.slice(prefix.length);
-      // If private information has already been removed, keep the line as-is.
-      // This is often the case when viewing a loaded log.
-      if (suffix.search(/^\[[0-9]+ bytes were stripped\]$/) == -1) {
-        return prefix + '[' + suffix.length + ' bytes were stripped]';
-      }
-    }
+      // If there's no data after the scheme name, do nothing.
+      if (match[0].length == line.length)
+        break;
 
-    return line;
-  }
+      // Ignore lines with commas, as they may contain lists of schemes, and
+      // the information we want to hide is Base64 encoded, so has no commas.
+      if (line.indexOf(',') >= 0)
+        break;
 
-  /**
-   * Remove debug data from HTTP/2 GOAWAY frame due to privacy considerations,
-   * see
-   * https://httpwg.github.io/specs/rfc7540.html#GOAWAY.
-   *
-   * Note: this logic should be kept in sync with
-   * net::ElideGoAwayDebugDataForNetLog in net/http/http_log_util.cc.
-   */
-  function stripGoAwayDebugData(value) {
-    return '[' + value.length + ' bytes were stripped]';
-  }
+      // Ignore Basic and Digest authentication challenges, as they contain
+      // public information.
+      if (/^basic$/i.test(match[1]) || /^digest$/i.test(match[1]))
+        break;
 
-  /**
-   * If |entry| has headers, returns a copy of |entry| with all cookie and
-   * unencrypted login text removed.  Otherwise, returns original |entry|
-   * object.
-   * This is needed so that JSON log dumps can be made without affecting the
-   * source data.  Converts headers stored in objects to arrays.
-   */
-  stripPrivacyInfo = function(entry) {
-    if (!entry.params) {
-      return entry;
+      prefix = match[0];
+      break;
     }
+  }
 
-    if (entry.type == EventType.HTTP2_SESSION_GOAWAY &&
-        entry.params.debug_data != undefined) {
-      // Duplicate the top level object, and |entry.params|.  All other fields
-      // are
-      // just pointers to the original values, as they won't be modified, other
-      // than |entry.params.debug_data|.
-      entry = shallowCloneObject(entry);
-      entry.params = shallowCloneObject(entry.params);
-      entry.params.debug_data = stripGoAwayDebugData(entry.params.debug_data);
-      return entry;
+  if (prefix) {
+    var suffix = line.slice(prefix.length);
+    // If private information has already been removed, keep the line as-is.
+    // This is often the case when viewing a loaded log.
+    if (suffix.search(/^\[[0-9]+ bytes were stripped\]$/) == -1) {
+      return prefix + '[' + suffix.length + ' bytes were stripped]';
     }
+  }
 
-    if (entry.params.headers === undefined ||
-        !(entry.params.headers instanceof Object)) {
-      return entry;
-    }
+  return line;
+}
 
-    // Make sure entry's headers are in an array.
-    entry = reformatHeaders(entry);
+/**
+ * Remove debug data from HTTP/2 GOAWAY frame due to privacy considerations,
+ * see
+ * https://httpwg.github.io/specs/rfc7540.html#GOAWAY.
+ *
+ * Note: this logic should be kept in sync with
+ * net::ElideGoAwayDebugDataForNetLog in net/http/http_log_util.cc.
+ */
+function stripGoAwayDebugData(value) {
+  return '[' + value.length + ' bytes were stripped]';
+}
+
+/**
+ * If |entry| has headers, returns a copy of |entry| with all cookie and
+ * unencrypted login text removed.  Otherwise, returns original |entry|
+ * object.
+ * This is needed so that JSON log dumps can be made without affecting the
+ * source data.  Converts headers stored in objects to arrays.
+ */
+stripPrivacyInfo = function(entry) {
+  if (!entry.params) {
+    return entry;
+  }
 
-    // Duplicate the top level object, and |entry.params|.  All other fields are
+  if (entry.type == EventType.HTTP2_SESSION_GOAWAY &&
+      entry.params.debug_data != undefined) {
+    // Duplicate the top level object, and |entry.params|.  All other fields
+    // are
     // just pointers to the original values, as they won't be modified, other
-    // than
-    // |entry.params.headers|.
+    // than |entry.params.debug_data|.
     entry = shallowCloneObject(entry);
     entry.params = shallowCloneObject(entry.params);
+    entry.params.debug_data = stripGoAwayDebugData(entry.params.debug_data);
+    return entry;
+  }
 
-    entry.params.headers = entry.params.headers.map(stripCookieOrLoginInfo);
+  if (entry.params.headers === undefined ||
+      !(entry.params.headers instanceof Object)) {
     return entry;
-  };
+  }
 
-  /**
-   * Outputs the request header parameters of |entry| to |out|.
-   */
-  function writeParamsForRequestHeaders(entry, out, consumedParams) {
-    var params = entry.params;
+  // Make sure entry's headers are in an array.
+  entry = reformatHeaders(entry);
 
-    if (!(typeof params.line == 'string') ||
-        !(params.headers instanceof Array)) {
-      // Unrecognized params.
-      return;
-    }
+  // Duplicate the top level object, and |entry.params|.  All other fields are
+  // just pointers to the original values, as they won't be modified, other
+  // than
+  // |entry.params.headers|.
+  entry = shallowCloneObject(entry);
+  entry.params = shallowCloneObject(entry.params);
 
-    // Strip the trailing CRLF that params.line contains.
-    var lineWithoutCRLF = params.line.replace(/\r\n$/g, '');
-    out.writeArrowIndentedLines([lineWithoutCRLF].concat(params.headers));
+  entry.params.headers = entry.params.headers.map(stripCookieOrLoginInfo);
+  return entry;
+};
 
-    consumedParams.line = true;
-    consumedParams.headers = true;
-  }
+/**
+ * Outputs the request header parameters of |entry| to |out|.
+ */
+function writeParamsForRequestHeaders(entry, out, consumedParams) {
+  var params = entry.params;
 
-  function writeCertificateParam(
-      certs_container, out, consumedParams, paramName) {
-    if (certs_container.certificates instanceof Array) {
-      var certs =
-          certs_container.certificates.reduce(function(previous, current) {
-            return previous.concat(current.split('\n'));
-          }, new Array());
-      out.writeArrowKey(paramName);
-      out.writeSpaceIndentedLines(8, certs);
-      consumedParams[paramName] = true;
-    }
+  if (!(typeof params.line == 'string') || !(params.headers instanceof Array)) {
+    // Unrecognized params.
+    return;
   }
 
-  /**
-   * Outputs the certificate parameters of |entry| to |out|.
-   */
-  function writeParamsForCertificates(entry, out, consumedParams) {
-    writeCertificateParam(entry.params, out, consumedParams, 'certificates');
-
-    if (typeof(entry.params.verified_cert) == 'object')
-      writeCertificateParam(
-          entry.params.verified_cert, out, consumedParams, 'verified_cert');
-
-    if (typeof(entry.params.cert_status) == 'number') {
-      var valueStr = entry.params.cert_status + ' (' +
-          getCertStatusFlagSymbolicString(entry.params.cert_status) + ')';
-      out.writeArrowKeyValue('cert_status', valueStr);
-      consumedParams.cert_status = true;
-    }
+  // Strip the trailing CRLF that params.line contains.
+  var lineWithoutCRLF = params.line.replace(/\r\n$/g, '');
+  out.writeArrowIndentedLines([lineWithoutCRLF].concat(params.headers));
+
+  consumedParams.line = true;
+  consumedParams.headers = true;
+}
+
+function writeCertificateParam(
+    certs_container, out, consumedParams, paramName) {
+  if (certs_container.certificates instanceof Array) {
+    var certs =
+        certs_container.certificates.reduce(function(previous, current) {
+          return previous.concat(current.split('\n'));
+        }, new Array());
+    out.writeArrowKey(paramName);
+    out.writeSpaceIndentedLines(8, certs);
+    consumedParams[paramName] = true;
   }
+}
 
-  function writeParamsForCheckedCertificates(entry, out, consumedParams) {
-    if (typeof(entry.params.certificate) == 'object')
-      writeCertificateParam(
-          entry.params.certificate, out, consumedParams, 'certificate');
+/**
+ * Outputs the certificate parameters of |entry| to |out|.
+ */
+function writeParamsForCertificates(entry, out, consumedParams) {
+  writeCertificateParam(entry.params, out, consumedParams, 'certificates');
+
+  if (typeof(entry.params.verified_cert) == 'object')
+    writeCertificateParam(
+        entry.params.verified_cert, out, consumedParams, 'verified_cert');
+
+  if (typeof(entry.params.cert_status) == 'number') {
+    var valueStr = entry.params.cert_status + ' (' +
+        getCertStatusFlagSymbolicString(entry.params.cert_status) + ')';
+    out.writeArrowKeyValue('cert_status', valueStr);
+    consumedParams.cert_status = true;
   }
+}
 
-  function writeParamsForProxyConfigChanged(entry, out, consumedParams) {
-    var params = entry.params;
-
-    if (typeof params.new_config != 'object') {
-      // Unrecognized params.
-      return;
-    }
+function writeParamsForCheckedCertificates(entry, out, consumedParams) {
+  if (typeof(entry.params.certificate) == 'object')
+    writeCertificateParam(
+        entry.params.certificate, out, consumedParams, 'certificate');
+}
 
-    if (typeof params.old_config == 'object') {
-      var oldConfigString = proxySettingsToString(params.old_config);
-      // The previous configuration may not be present in the case of
-      // the initial proxy settings fetch.
-      out.writeArrowKey('old_config');
+function writeParamsForProxyConfigChanged(entry, out, consumedParams) {
+  var params = entry.params;
 
-      out.writeSpaceIndentedLines(8, oldConfigString.split('\n'));
-
-      consumedParams.old_config = true;
-    }
-
-    var newConfigString = proxySettingsToString(params.new_config);
-    out.writeArrowKey('new_config');
-    out.writeSpaceIndentedLines(8, newConfigString.split('\n'));
-
-    consumedParams.new_config = true;
+  if (typeof params.new_config != 'object') {
+    // Unrecognized params.
+    return;
   }
 
-  function getTextForEvent(entry) {
-    var text = '';
+  if (typeof params.old_config == 'object') {
+    var oldConfigString = proxySettingsToString(params.old_config);
+    // The previous configuration may not be present in the case of
+    // the initial proxy settings fetch.
+    out.writeArrowKey('old_config');
 
-    if (entry.isBegin() && canCollapseBeginWithEnd(entry)) {
-      // Don't prefix with '+' if we are going to collapse the END event.
-      text = ' ';
-    } else if (entry.isBegin()) {
-      text = '+' + text;
-    } else if (entry.isEnd()) {
-      text = '-' + text;
-    } else {
-      text = ' ';
-    }
+    out.writeSpaceIndentedLines(8, oldConfigString.split('\n'));
 
-    text += EventTypeNames[entry.orig.type];
-    return text;
+    consumedParams.old_config = true;
   }
 
-  proxySettingsToString = function(config) {
-    if (!config)
-      return '';
-
-    // TODO(eroman): if |config| has unexpected properties, print it as JSON
-    //               rather than hide them.
+  var newConfigString = proxySettingsToString(params.new_config);
+  out.writeArrowKey('new_config');
+  out.writeSpaceIndentedLines(8, newConfigString.split('\n'));
+
+  consumedParams.new_config = true;
+}
+
+function getTextForEvent(entry) {
+  var text = '';
+
+  if (entry.isBegin() && canCollapseBeginWithEnd(entry)) {
+    // Don't prefix with '+' if we are going to collapse the END event.
+    text = ' ';
+  } else if (entry.isBegin()) {
+    text = '+' + text;
+  } else if (entry.isEnd()) {
+    text = '-' + text;
+  } else {
+    text = ' ';
+  }
 
-    function getProxyListString(proxies) {
-      // Older versions of Chrome would set these values as strings, whereas
-      // newer
-      // logs use arrays.
-      // TODO(eroman): This behavior changed in M27. Support for older logs can
-      //               safely be removed circa M29.
-      if (Array.isArray(proxies)) {
-        var listString = proxies.join(', ');
-        if (proxies.length > 1)
-          return '[' + listString + ']';
-        return listString;
-      }
-      return proxies;
-    }
+  text += EventTypeNames[entry.orig.type];
+  return text;
+}
+
+proxySettingsToString = function(config) {
+  if (!config)
+    return '';
+
+  // TODO(eroman): if |config| has unexpected properties, print it as JSON
+  //               rather than hide them.
+
+  function getProxyListString(proxies) {
+    // Older versions of Chrome would set these values as strings, whereas
+    // newer
+    // logs use arrays.
+    // TODO(eroman): This behavior changed in M27. Support for older logs can
+    //               safely be removed circa M29.
+    if (Array.isArray(proxies)) {
+      var listString = proxies.join(', ');
+      if (proxies.length > 1)
+        return '[' + listString + ']';
+      return listString;
+    }
+    return proxies;
+  }
 
-    // The proxy settings specify up to three major fallback choices
-    // (auto-detect, custom pac url, or manual settings).
-    // We enumerate these to a list so we can later number them.
-    var modes = [];
-
-    // Output any automatic settings.
-    if (config.auto_detect)
-      modes.push(['Auto-detect']);
-    if (config.pac_url)
-      modes.push(['PAC script: ' + config.pac_url]);
-
-    // Output any manual settings.
-    if (config.single_proxy || config.proxy_per_scheme) {
-      var lines = [];
-
-      if (config.single_proxy) {
-        lines.push('Proxy server: ' + getProxyListString(config.single_proxy));
-      } else if (config.proxy_per_scheme) {
-        for (var urlScheme in config.proxy_per_scheme) {
-          if (urlScheme != 'fallback') {
-            lines.push(
-                'Proxy server for ' + urlScheme.toUpperCase() + ': ' +
-                getProxyListString(config.proxy_per_scheme[urlScheme]));
-          }
-        }
-        if (config.proxy_per_scheme.fallback) {
+  // The proxy settings specify up to three major fallback choices
+  // (auto-detect, custom pac url, or manual settings).
+  // We enumerate these to a list so we can later number them.
+  var modes = [];
+
+  // Output any automatic settings.
+  if (config.auto_detect)
+    modes.push(['Auto-detect']);
+  if (config.pac_url)
+    modes.push(['PAC script: ' + config.pac_url]);
+
+  // Output any manual settings.
+  if (config.single_proxy || config.proxy_per_scheme) {
+    var lines = [];
+
+    if (config.single_proxy) {
+      lines.push('Proxy server: ' + getProxyListString(config.single_proxy));
+    } else if (config.proxy_per_scheme) {
+      for (var urlScheme in config.proxy_per_scheme) {
+        if (urlScheme != 'fallback') {
           lines.push(
-              'Proxy server for everything else: ' +
-              getProxyListString(config.proxy_per_scheme.fallback));
+              'Proxy server for ' + urlScheme.toUpperCase() + ': ' +
+              getProxyListString(config.proxy_per_scheme[urlScheme]));
         }
       }
+      if (config.proxy_per_scheme.fallback) {
+        lines.push(
+            'Proxy server for everything else: ' +
+            getProxyListString(config.proxy_per_scheme.fallback));
+      }
+    }
 
-      // Output any proxy bypass rules.
-      if (config.bypass_list) {
-        if (config.reverse_bypass) {
-          lines.push('Reversed bypass list: ');
-        } else {
-          lines.push('Bypass list: ');
-        }
-
-        for (var i = 0; i < config.bypass_list.length; ++i)
-          lines.push('  ' + config.bypass_list[i]);
+    // Output any proxy bypass rules.
+    if (config.bypass_list) {
+      if (config.reverse_bypass) {
+        lines.push('Reversed bypass list: ');
+      } else {
+        lines.push('Bypass list: ');
       }
 
-      modes.push(lines);
+      for (var i = 0; i < config.bypass_list.length; ++i)
+        lines.push('  ' + config.bypass_list[i]);
     }
 
-    var result = [];
-    if (modes.length < 1) {
-      // If we didn't find any proxy settings modes, we are using DIRECT.
-      result.push('Use DIRECT connections.');
-    } else if (modes.length == 1) {
-      // If there was just one mode, don't bother numbering it.
-      result.push(modes[0].join('\n'));
-    } else {
-      // Otherwise concatenate all of the modes into a numbered list
-      // (which correspond with the fallback order).
-      for (var i = 0; i < modes.length; ++i)
-        result.push(indentLines('(' + (i + 1) + ') ', modes[i]));
-    }
+    modes.push(lines);
+  }
 
-    if (config.source != undefined && config.source != 'UNKNOWN')
-      result.push('Source: ' + config.source);
+  var result = [];
+  if (modes.length < 1) {
+    // If we didn't find any proxy settings modes, we are using DIRECT.
+    result.push('Use DIRECT connections.');
+  } else if (modes.length == 1) {
+    // If there was just one mode, don't bother numbering it.
+    result.push(modes[0].join('\n'));
+  } else {
+    // Otherwise concatenate all of the modes into a numbered list
+    // (which correspond with the fallback order).
+    for (var i = 0; i < modes.length; ++i)
+      result.push(indentLines('(' + (i + 1) + ') ', modes[i]));
+  }
 
-    return result.join('\n');
-  };
+  if (config.source != undefined && config.source != 'UNKNOWN')
+    result.push('Source: ' + config.source);
+
+  return result.join('\n');
+};
 
-  // End of anonymous namespace.
+// End of anonymous namespace.
 })();
diff --git a/chromium/chrome/browser/resources/net_internals/main.js b/chromium/chrome/browser/resources/net_internals/main.js
index dbe70a9e335..2ab766d6d75 100644
--- a/chromium/chrome/browser/resources/net_internals/main.js
+++ b/chromium/chrome/browser/resources/net_internals/main.js
@@ -226,7 +226,7 @@ var MainView = (function() {
       if (!parsed)
         return;
 
-      if (parsed.tabHash == "#export") {
+      if (parsed.tabHash == '#export') {
         // The #export tab was removed in M60, after having been
         // deprecated since M58. In case anyone *still* has URLs
         // bookmarked to this, inform them and redirect.
@@ -237,10 +237,10 @@ var MainView = (function() {
         // page load (confirm() is synchronous).
         setTimeout(() => {
           var navigateToNetExport = confirm(
-              "#export was removed\nDo you want to navigate to " +
-              "chrome://net-export/ instead?");
+              '#export was removed\nDo you want to navigate to ' +
+              'chrome://net-export/ instead?');
           if (navigateToNetExport) {
-            window.location.href = "chrome://net-export";
+            window.location.href = 'chrome://net-export';
             return;
           }
         });
diff --git a/chromium/chrome/browser/resources/net_internals/modules_view.js b/chromium/chrome/browser/resources/net_internals/modules_view.js
index dbb0b9cbb2f..48cd50a306e 100644
--- a/chromium/chrome/browser/resources/net_internals/modules_view.js
+++ b/chromium/chrome/browser/resources/net_internals/modules_view.js
@@ -104,10 +104,10 @@ var ModulesView = (function() {
   /**
    * Returns protocol type of a layered service provider as a string.
    */
-  ModulesView.getLayeredServiceProviderProtocolType =
-      function(serviceProvider) {
+  ModulesView.getLayeredServiceProviderProtocolType = function(
+      serviceProvider) {
     return tryGetValueWithKey(PROTOCOL_TYPE, serviceProvider.socket_protocol);
-  }
+  };
 
   var NAMESPACE_PROVIDER_PTYPE = {
     '12': 'NS_DNS',
diff --git a/chromium/chrome/browser/resources/net_internals/quic_view.html b/chromium/chrome/browser/resources/net_internals/quic_view.html
index f116c2bd264..887adb9eb27 100644
--- a/chromium/chrome/browser/resources/net_internals/quic_view.html
+++ b/chromium/chrome/browser/resources/net_internals/quic_view.html
@@ -95,6 +95,9 @@
       </tr><tr>
         <td>Origins To Force QUIC On</td>
         <td><span jscontent="$this.origins_to_force_quic_on || ''"></span></td>
+      </tr><tr>
+        <td>Server Push Cancellation</td>
+        <td><span jscontent="!!$this.server_push_cancellation"></span></td>
       </tr>
     </tbody>
   </table>
diff --git a/chromium/chrome/browser/resources/network_speech_synthesis/tts_extension.js b/chromium/chrome/browser/resources/network_speech_synthesis/tts_extension.js
index 38f22010058..727b1fb7fc1 100644
--- a/chromium/chrome/browser/resources/network_speech_synthesis/tts_extension.js
+++ b/chromium/chrome/browser/resources/network_speech_synthesis/tts_extension.js
@@ -30,8 +30,7 @@ TtsExtension.prototype = {
    * @const
    * @private
    */
-  SPEECH_SERVER_URL_:
-      'https://www.google.com/speech-api/v2/synthesize?' +
+  SPEECH_SERVER_URL_: 'https://www.google.com/speech-api/v2/synthesize?' +
       'enc=mpeg&client=chromium',
 
   /**
@@ -147,39 +146,37 @@ TtsExtension.prototype = {
       var voiceName = this.LANG_AND_GENDER_TO_VOICE_NAME_[key];
 
       var url = this.SPEECH_SERVER_URL_;
-      chrome.systemPrivate.getApiKey((function(key) {
-        url += '&key=' + key;
-        url += '&text=' + encodeURIComponent(utterance);
-        url += '&lang=' + lang.toLowerCase();
-
-        if (voiceName)
-          url += '&name=' + voiceName;
-
-        if (options.rate) {
-          // Input rate is between 0.1 and 10.0 with a default of 1.0.
-          // Output speed is between 0.0 and 1.0 with a default of 0.5.
-          url += '&speed=' + (options.rate / 2.0);
-        }
-
-        if (options.pitch) {
-          // Input pitch is between 0.0 and 2.0 with a default of 1.0.
-          // Output pitch is between 0.0 and 1.0 with a default of 0.5.
-          url += '&pitch=' + (options.pitch / 2.0);
-        }
-
-        // This begins loading the audio but does not play it.
-        // When enough of the audio has loaded to begin playback,
-        // the 'canplaythrough' handler will call this.onStart_,
-        // which sends a start event to the ttsEngine callback and
-        // then begins playing audio.
-        this.audioElement_.src = url;
-      }).bind(this));
+      chrome.systemPrivate.getApiKey(
+          (function(key) {
+            url += '&key=' + key;
+            url += '&text=' + encodeURIComponent(utterance);
+            url += '&lang=' + lang.toLowerCase();
+
+            if (voiceName)
+              url += '&name=' + voiceName;
+
+            if (options.rate) {
+              // Input rate is between 0.1 and 10.0 with a default of 1.0.
+              // Output speed is between 0.0 and 1.0 with a default of 0.5.
+              url += '&speed=' + (options.rate / 2.0);
+            }
+
+            if (options.pitch) {
+              // Input pitch is between 0.0 and 2.0 with a default of 1.0.
+              // Output pitch is between 0.0 and 1.0 with a default of 0.5.
+              url += '&pitch=' + (options.pitch / 2.0);
+            }
+
+            // This begins loading the audio but does not play it.
+            // When enough of the audio has loaded to begin playback,
+            // the 'canplaythrough' handler will call this.onStart_,
+            // which sends a start event to the ttsEngine callback and
+            // then begins playing audio.
+            this.audioElement_.src = url;
+          }).bind(this));
     } catch (err) {
       console.error(String(err));
-      callback({
-        'type': 'error',
-        'errorMessage': String(err)
-      });
+      callback({'type': 'error', 'errorMessage': String(err)});
       this.currentUtterance_ = null;
     }
   },
@@ -220,10 +217,7 @@ TtsExtension.prototype = {
         this.audioElement_.volume = this.currentUtterance_.options.volume;
       }
       this.audioElement_.play();
-      this.currentUtterance_.callback({
-          'type': 'start',
-          'charIndex': 0
-      });
+      this.currentUtterance_.callback({'type': 'start', 'charIndex': 0});
     }
   },
 
diff --git a/chromium/chrome/browser/resources/ntp4/apps_page.js b/chromium/chrome/browser/resources/ntp4/apps_page.js
index 270dfecea5d..b7679ce9ef3 100644
--- a/chromium/chrome/browser/resources/ntp4/apps_page.js
+++ b/chromium/chrome/browser/resources/ntp4/apps_page.js
@@ -21,7 +21,7 @@ cr.define('ntp', function() {
     SAME_APPS_PANE: 0,
     OTHER_APPS_PANE: 1,
     MOST_VISITED_PANE: 2,  // Deprecated.
-    BOOKMARKS_PANE: 3,  // Deprecated.
+    BOOKMARKS_PANE: 3,     // Deprecated.
     OUTSIDE_NTP: 4
   };
   var DRAG_SOURCE_LIMIT = DRAG_SOURCE.OUTSIDE_NTP + 1;
@@ -56,8 +56,8 @@ cr.define('ntp', function() {
 
       var self = this;
       this.forAllLaunchTypes_(function(launchTypeButton, id) {
-        launchTypeButton.addEventListener('activate',
-            self.onLaunchTypeChanged_.bind(self));
+        launchTypeButton.addEventListener(
+            'activate', self.onLaunchTypeChanged_.bind(self));
       });
 
       this.launchTypeMenuSeparator_ = cr.ui.MenuItem.createSeparator();
@@ -67,18 +67,18 @@ cr.define('ntp', function() {
 
       if (loadTimeData.getBoolean('canShowAppInfoDialog')) {
         this.appinfo_ = this.appendMenuItem_('appinfodialog');
-        this.appinfo_.addEventListener('activate',
-                                       this.onShowAppInfo_.bind(this));
+        this.appinfo_.addEventListener(
+            'activate', this.onShowAppInfo_.bind(this));
       } else {
         this.details_ = this.appendMenuItem_('appdetails');
-        this.details_.addEventListener('activate',
-                                       this.onShowDetails_.bind(this));
+        this.details_.addEventListener(
+            'activate', this.onShowDetails_.bind(this));
       }
 
-      this.options_.addEventListener('activate',
-                                     this.onShowOptions_.bind(this));
-      this.uninstall_.addEventListener('activate',
-                                       this.onUninstall_.bind(this));
+      this.options_.addEventListener(
+          'activate', this.onShowOptions_.bind(this));
+      this.uninstall_.addEventListener(
+          'activate', this.onUninstall_.bind(this));
 
       if (!cr.isChromeOS) {
         this.createShortcutSeparator_ =
@@ -115,10 +115,10 @@ cr.define('ntp', function() {
      */
     forAllLaunchTypes_: function(f) {
       // Order matters: index matches launchType id.
-      var launchTypes = [this.launchPinnedTab_,
-                         this.launchRegularTab_,
-                         this.launchFullscreen_,
-                         this.launchNewWindow_];
+      var launchTypes = [
+        this.launchPinnedTab_, this.launchRegularTab_, this.launchFullscreen_,
+        this.launchNewWindow_
+      ];
 
       for (var i = 0; i < launchTypes.length; ++i) {
         if (!launchTypes[i])
@@ -152,7 +152,8 @@ cr.define('ntp', function() {
              launchTypeButton == launchTypeWindow) ||
             (loadTimeData.getBoolean('enableNewBookmarkApps') &&
              launchTypeButton != launchTypeWindow);
-        if (!launchTypeButton.hidden) hasLaunchType = true;
+        if (!launchTypeButton.hidden)
+          hasLaunchType = true;
       });
 
       this.launchTypeMenuSeparator_.hidden =
@@ -189,7 +190,8 @@ cr.define('ntp', function() {
       // open as window and open as tab.
       if (loadTimeData.getBoolean('enableNewBookmarkApps')) {
         targetLaunchType = this.launchNewWindow_.checked ?
-            this.launchRegularTab_ : this.launchNewWindow_;
+            this.launchRegularTab_ :
+            this.launchNewWindow_;
       }
       this.forAllLaunchTypes_(function(launchTypeButton, id) {
         if (launchTypeButton == targetLaunchType) {
@@ -262,8 +264,8 @@ cr.define('ntp', function() {
       this.appContents_.id = '';
       this.appendChild(this.appContents_);
 
-      this.appImgContainer_ = /** @type {HTMLElement} */(
-          this.querySelector('.app-img-container'));
+      this.appImgContainer_ =
+          /** @type {HTMLElement} */ (this.querySelector('.app-img-container'));
       this.appImg_ = this.appImgContainer_.querySelector('img');
       this.setIcon();
 
@@ -272,7 +274,7 @@ cr.define('ntp', function() {
 
       // The app's full name is shown in the tooltip, whereas the short name
       // is used for the label.
-      var appSpan = /** @type {HTMLElement} */(
+      var appSpan = /** @type {HTMLElement} */ (
           this.appContents_.querySelector('.title'));
       appSpan.textContent = this.appData_.title;
       appSpan.title = this.appData_.full_name;
@@ -289,8 +291,8 @@ cr.define('ntp', function() {
       });
 
       if (!this.appData_.kioskMode) {
-        this.appContents_.addEventListener('contextmenu',
-                                           cr.ui.contextMenuHandler);
+        this.appContents_.addEventListener(
+            'contextmenu', cr.ui.contextMenuHandler);
       }
 
       this.addEventListener('mousedown', this.onMousedown_, true);
@@ -373,12 +375,13 @@ cr.define('ntp', function() {
      * @private
      */
     onClick_: function(e) {
-      if (/** @type {MouseEvent} */(e).button > 1)
+      if (/** @type {MouseEvent} */ (e).button > 1)
         return;
 
-      chrome.send('launchApp',
-                  [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, 'chrome-ntp-icon',
-                   e.button, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey]);
+      chrome.send('launchApp', [
+        this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, 'chrome-ntp-icon', e.button,
+        e.altKey, e.ctrlKey, e.metaKey, e.shiftKey
+      ]);
 
       // Don't allow the click to trigger a link or anything
       e.preventDefault();
@@ -391,9 +394,10 @@ cr.define('ntp', function() {
      */
     onKeydown_: function(e) {
       if (e.key == 'Enter') {
-        chrome.send('launchApp',
-                    [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, '',
-                     0, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey]);
+        chrome.send('launchApp', [
+          this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, '', 0, e.altKey, e.ctrlKey,
+          e.metaKey, e.shiftKey
+        ]);
         e.preventDefault();
         e.stopPropagation();
       }
@@ -429,8 +433,8 @@ cr.define('ntp', function() {
         e.preventDefault();
 
       if (e.button == 2 ||
-          !findAncestorByClass(/** @type {Element} */(e.target),
-                               'launch-click-target')) {
+          !findAncestorByClass(
+              /** @type {Element} */ (e.target), 'launch-click-target')) {
         this.appContents_.classList.add('suppress-active');
       } else {
         this.appContents_.classList.remove('suppress-active');
@@ -455,11 +459,17 @@ cr.define('ntp', function() {
      * The data and preferences for this app.
      * @type {Object}
      */
-    set appData(data) { this.appData_ = data; },
-    get appData() { return this.appData_; },
+    set appData(data) {
+      this.appData_ = data;
+    },
+    get appData() {
+      return this.appData_;
+    },
 
     /** @type {string} */
-    get appId() { return this.appData_.id; },
+    get appId() {
+      return this.appData_.id;
+    },
 
     /**
      * Returns a pointer to the context menu for this app. All apps share the
@@ -478,7 +488,9 @@ cr.define('ntp', function() {
      * the user can drag it onto the trash and expect something to happen).
      * @return {boolean} True if the app can be uninstalled.
      */
-    canBeRemoved: function() { return this.appData_.mayDisable; },
+    canBeRemoved: function() {
+      return this.appData_.mayDisable;
+    },
 
     /**
      * Uninstalls the app after it's been dropped on the trash.
@@ -630,8 +642,8 @@ cr.define('ntp', function() {
         return true;
       if (!e.dataTransfer || !e.dataTransfer.types)
         return false;
-      return Array.prototype.indexOf.call(e.dataTransfer.types,
-                                          'text/uri-list') != -1;
+      return Array.prototype.indexOf.call(
+                 e.dataTransfer.types, 'text/uri-list') != -1;
     },
 
     /** @override */
@@ -645,8 +657,8 @@ cr.define('ntp', function() {
           var samePageDrag = originalPage == this;
           sourceId = samePageDrag ? DRAG_SOURCE.SAME_APPS_PANE :
                                     DRAG_SOURCE.OTHER_APPS_PANE;
-          this.tileGrid_.insertBefore(currentlyDraggingTile,
-                                      this.tileElements_[index]);
+          this.tileGrid_.insertBefore(
+              currentlyDraggingTile, this.tileElements_[index]);
           this.tileMoved(currentlyDraggingTile);
           if (!samePageDrag) {
             originalPage.fireRemovedEvent(currentlyDraggingTile, index, true);
@@ -659,7 +671,8 @@ cr.define('ntp', function() {
       }
 
       assert(sourceId != -1);
-      chrome.send('metricsHandler:recordInHistogram',
+      chrome.send(
+          'metricsHandler:recordInHistogram',
           ['NewTabPage.AppsPageDragSource', sourceId, DRAG_SOURCE_LIMIT]);
     },
 
diff --git a/chromium/chrome/browser/resources/ntp4/dot_list.js b/chromium/chrome/browser/resources/ntp4/dot_list.js
index 779dcdaf5d9..df9c0d37789 100644
--- a/chromium/chrome/browser/resources/ntp4/dot_list.js
+++ b/chromium/chrome/browser/resources/ntp4/dot_list.js
@@ -73,7 +73,5 @@ cr.define('ntp', function() {
     }
   };
 
-  return {
-    DotList: DotList
-  };
+  return {DotList: DotList};
 });
diff --git a/chromium/chrome/browser/resources/ntp4/md_incognito_tab.js b/chromium/chrome/browser/resources/ntp4/md_incognito_tab.js
index 4a36703026a..4b246225fb8 100644
--- a/chromium/chrome/browser/resources/ntp4/md_incognito_tab.js
+++ b/chromium/chrome/browser/resources/ntp4/md_incognito_tab.js
@@ -13,7 +13,7 @@ function recomputeLayoutWidth() {
   var fontSize = window.getComputedStyle(document.body).fontSize;
   var maxWidth = localStorage[fontSize] ||
       (bulletpoints[0].offsetWidth + bulletpoints[1].offsetWidth +
-           40 /* margin */ + 2 /* offsetWidths may be rounded down */);
+       40 /* margin */ + 2 /* offsetWidths may be rounded down */);
 
   // Save the data for quicker access when the NTP is reloaded. Note that since
   // we're in the Incognito mode, the local storage is ephemeral and the data
@@ -29,7 +29,7 @@ function recomputeLayoutWidth() {
   if (tooWide)
     maxWidth = MAX_ALLOWED_WIDTH;
 
-  content.style.maxWidth = maxWidth + "px";
+  content.style.maxWidth = maxWidth + 'px';
 }
 
 window.addEventListener('load', recomputeLayoutWidth);
@@ -44,8 +44,8 @@ var ntp = {
 
   /** @param {!{hasCustomBackground: boolean}} themeData */
   themeChanged: function(themeData) {
-    document.documentElement.setAttribute('hascustombackground',
-                                          themeData.hasCustomBackground);
+    document.documentElement.setAttribute(
+        'hascustombackground', themeData.hasCustomBackground);
     $('incognitothemecss').href =
         'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now();
   },
diff --git a/chromium/chrome/browser/resources/ntp4/nav_dot.js b/chromium/chrome/browser/resources/ntp4/nav_dot.js
index 9c7e8535bf8..86b47e59104 100644
--- a/chromium/chrome/browser/resources/ntp4/nav_dot.js
+++ b/chromium/chrome/browser/resources/ntp4/nav_dot.js
@@ -60,8 +60,8 @@ cr.define('ntp', function() {
       this.addEventListener('transitionend', this.onTransitionEnd_);
 
       this.input_.addEventListener('blur', this.onInputBlur_.bind(this));
-      this.input_.addEventListener('mousedown',
-                                   this.onInputMouseDown_.bind(this));
+      this.input_.addEventListener(
+          'mousedown', this.onInputMouseDown_.bind(this));
       this.input_.addEventListener('keydown', this.onInputKeyDown_.bind(this));
 
       if (animate) {
diff --git a/chromium/chrome/browser/resources/ntp4/new_tab.html b/chromium/chrome/browser/resources/ntp4/new_tab.html
index 513b4d268f0..1a64328004f 100644
--- a/chromium/chrome/browser/resources/ntp4/new_tab.html
+++ b/chromium/chrome/browser/resources/ntp4/new_tab.html
@@ -1,10 +1,9 @@
 <!doctype html>
-<html class="starting-up" i18n-values="dir:textdirection;
-                                       bookmarkbarattached:bookmarkbarattached;
-                                       lang:language">
+<html class="starting-up" dir="$i18n{textdirection}"
+    bookmarkbarattached="$i18n{bookmarkbarattached}" lang="$i18n{language}">
 <head>
 <meta charset="utf-8">
-<title i18n-content="title"></title>
+<title>$i18n{title}</title>
 <!-- Don't scale the viewport in either portrait or landscape mode.
      Note that this means apps will be reflowed when rotated (like iPad).
      If we wanted to maintain position we could remove 'maximum-scale' so
@@ -74,16 +73,16 @@ document.write('<link id="themecss" rel="stylesheet" ' +
         tabindex="2" hidden>›
     </button>
     <div id="attribution">
-      <span i18n-content="attributionintro"></span>
+      <span>$i18n{attributionintro}</span>
       <img id="attribution-img">
     </div>
   </div>
 
   <div id="app-launcher-promo" hidden>
-    <div class="apps-promo-text" i18n-content="appsPromoTitle"></div>
+    <div class="apps-promo-text">$i18n{appsPromoTitle}</div>
     <a href="https://chrome.google.com/webstore/launcher"
-       id="apps-promo-learn-more" class="apps-promo-learn-more"
-       i18n-content="learn_more">
+        id="apps-promo-learn-more" class="apps-promo-learn-more">
+      $i18n{learn_more}
     </a>
     <img src="app_launcher_promo.png">
     <button class="close-button custom-appearance"
@@ -103,15 +102,14 @@ document.write('<link id="themecss" rel="stylesheet" ' +
 
       <div id="footer-menu-container" class="menu-container">
         <a id="chrome-web-store-link">
-          <span id="chrome-web-store-title" i18n-content="webStoreTitleShort">
-          </span>
+          <span id="chrome-web-store-title">$i18n{webStoreTitleShort}</span>
         </a>
       </div>
 
       <div id="trash" class="trash">
         <span class="lid"></span>
         <span class="can"></span>
-        <span class="trash-text" i18n-content="appuninstall"></span>
+        <span class="trash-text">$i18n{appuninstall}</span>
       </div>
     </div>
   </div>
@@ -130,17 +128,17 @@ document.write('<link id="themecss" rel="stylesheet" ' +
 <!-- Login status bubble -->
 <div id="login-status-bubble-contents">
   <div id="login-status-message-container">
-    <span i18n-content="login_status_message"></span>
-    <a id="login-status-learn-more" i18n-content="learn_more"
-        i18n-values="href:login_status_url" target="_blank"></a>
+    <span>$i18n{login_status_message}</span>
+    <a id="login-status-learn-more" href="$i18nRaw{login_status_url}"
+        target="_blank">$i18n{learn_more}</a>
   </div>
   <div class="login-status-row">
     <div id="login-status-advanced-container">
-      <a is="action-link" id="login-status-advanced"
-          i18n-content="login_status_advanced"></a>
+      <a is="action-link" id="login-status-advanced">
+        $i18n{login_status_advanced}
+      </a>
     </div>
-    <button id="login-status-dismiss" i18n-content="login_status_dismiss">
-    </button>
+    <button id="login-status-dismiss">$i18n{login_status_dismiss}</button>
   </div>
 </div>
 
diff --git a/chromium/chrome/browser/resources/ntp4/new_tab.js b/chromium/chrome/browser/resources/ntp4/new_tab.js
index 708f25627a9..8fdb477f1ff 100644
--- a/chromium/chrome/browser/resources/ntp4/new_tab.js
+++ b/chromium/chrome/browser/resources/ntp4/new_tab.js
@@ -58,16 +58,15 @@ cr.define('ntp', function() {
     var pageSwitcherStart;
     var pageSwitcherEnd;
     if (loadTimeData.getValue('showApps')) {
-      pageSwitcherStart = /** @type {!ntp.PageSwitcher} */(
+      pageSwitcherStart = /** @type {!ntp.PageSwitcher} */ (
           getRequiredElement('page-switcher-start'));
-      pageSwitcherEnd = /** @type {!ntp.PageSwitcher} */(
+      pageSwitcherEnd = /** @type {!ntp.PageSwitcher} */ (
           getRequiredElement('page-switcher-end'));
     }
-    this.initialize(getRequiredElement('page-list'),
-                    getRequiredElement('dot-list'),
-                    getRequiredElement('card-slider-frame'),
-                    getRequiredElement('trash'),
-                    pageSwitcherStart, pageSwitcherEnd);
+    this.initialize(
+        getRequiredElement('page-list'), getRequiredElement('dot-list'),
+        getRequiredElement('card-slider-frame'), getRequiredElement('trash'),
+        pageSwitcherStart, pageSwitcherEnd);
   }
 
   // TODO(dbeam): NewTabView is now the only extender of PageListView; these
@@ -82,10 +81,13 @@ cr.define('ntp', function() {
     if (loadTimeData.getBoolean('showApps')) {
       sectionsToWaitFor++;
       if (loadTimeData.getBoolean('showAppLauncherPromo')) {
-        $('app-launcher-promo-close-button').addEventListener('click',
-            function() { chrome.send('stopShowingAppLauncherPromo'); });
-        $('apps-promo-learn-more').addEventListener('click',
-            function() { chrome.send('onLearnMore'); });
+        $('app-launcher-promo-close-button')
+            .addEventListener('click', function() {
+              chrome.send('stopShowingAppLauncherPromo');
+            });
+        $('apps-promo-learn-more').addEventListener('click', function() {
+          chrome.send('onLearnMore');
+        });
       }
     }
     measureNavDots();
@@ -101,10 +103,10 @@ cr.define('ntp', function() {
       var webStoreLink = loadTimeData.getString('webStoreLink');
       var url = appendParam(webStoreLink, 'utm_source', 'chrome-ntp-launcher');
       $('chrome-web-store-link').href = url;
-      $('chrome-web-store-link').addEventListener('auxclick',
-          onChromeWebStoreButtonClick);
-      $('chrome-web-store-link').addEventListener('click',
-          onChromeWebStoreButtonClick);
+      $('chrome-web-store-link')
+          .addEventListener('auxclick', onChromeWebStoreButtonClick);
+      $('chrome-web-store-link')
+          .addEventListener('click', onChromeWebStoreButtonClick);
     }
 
     // We need to wait for all the footer menu setup to be completed before
@@ -158,10 +160,10 @@ cr.define('ntp', function() {
    */
   function onChromeWebStoreButtonClick(e) {
     if (e.button > 1)
-      return; // Ignore buttons other than left and middle.
-    chrome.send('recordAppLaunchByURL',
-                [encodeURIComponent(this.href),
-                 ntp.APP_LAUNCH.NTP_WEBSTORE_FOOTER]);
+      return;  // Ignore buttons other than left and middle.
+    chrome.send(
+        'recordAppLaunchByURL',
+        [encodeURIComponent(this.href), ntp.APP_LAUNCH.NTP_WEBSTORE_FOOTER]);
   }
 
   /**
@@ -302,8 +304,8 @@ cr.define('ntp', function() {
    */
   function showSyncLoginUI(e) {
     var rect = e.currentTarget.getBoundingClientRect();
-    chrome.send('showSyncLoginUI',
-                [rect.left, rect.top, rect.width, rect.height]);
+    chrome.send(
+        'showSyncLoginUI', [rect.left, rect.top, rect.width, rect.height]);
   }
 
   /**
diff --git a/chromium/chrome/browser/resources/ntp4/page_list_view.js b/chromium/chrome/browser/resources/ntp4/page_list_view.js
index 64a0a73a972..ceb69d59f98 100644
--- a/chromium/chrome/browser/resources/ntp4/page_list_view.js
+++ b/chromium/chrome/browser/resources/ntp4/page_list_view.js
@@ -49,8 +49,7 @@ cr.define('ntp', function() {
    * @constructor
    * @extends {Object}
    */
-  function PageListView() {
-  }
+  function PageListView() {}
 
   PageListView.prototype = {
     /**
@@ -138,8 +137,9 @@ cr.define('ntp', function() {
      * @param {!ntp.PageSwitcher|undefined} opt_pageSwitcherEnd Optional end
      *     page switcher button.
      */
-    initialize: function(pageList, dotList, cardSliderFrame, opt_trash,
-                         opt_pageSwitcherStart, opt_pageSwitcherEnd) {
+    initialize: function(
+        pageList, dotList, cardSliderFrame, opt_trash, opt_pageSwitcherStart,
+        opt_pageSwitcherEnd) {
       this.pageList = pageList;
 
       this.dotList = dotList;
@@ -174,8 +174,8 @@ cr.define('ntp', function() {
 
       // Initialize the cardSlider without any cards at the moment.
       this.sliderFrame = cardSliderFrame;
-      this.cardSlider = new cr.ui.CardSlider(this.sliderFrame, this.pageList,
-          this.sliderFrame.offsetWidth);
+      this.cardSlider = new cr.ui.CardSlider(
+          this.sliderFrame, this.pageList, this.sliderFrame.offsetWidth);
 
       // Prevent touch events from triggering any sort of native scrolling if
       // there are multiple cards in the slider frame.
@@ -192,7 +192,7 @@ cr.define('ntp', function() {
       // because it needs to be called before the card slider's handler.
       cardSliderFrame.addEventListener('mousewheel', function(e) {
         if (cardSlider.currentCardValue.handleMouseWheel(e)) {
-          e.preventDefault();  // Prevent default scroll behavior.
+          e.preventDefault();            // Prevent default scroll behavior.
           e.stopImmediatePropagation();  // Prevent horizontal card flipping.
         }
       });
@@ -201,21 +201,21 @@ cr.define('ntp', function() {
           loadTimeData.getBoolean('isSwipeTrackingFromScrollEventsEnabled'));
 
       // Handle events from the card slider.
-      this.pageList.addEventListener('cardSlider:card_changed',
-                                     this.onCardChanged_.bind(this));
-      this.pageList.addEventListener('cardSlider:card_added',
-                                     this.onCardAdded_.bind(this));
-      this.pageList.addEventListener('cardSlider:card_removed',
-                                     this.onCardRemoved_.bind(this));
+      this.pageList.addEventListener(
+          'cardSlider:card_changed', this.onCardChanged_.bind(this));
+      this.pageList.addEventListener(
+          'cardSlider:card_added', this.onCardAdded_.bind(this));
+      this.pageList.addEventListener(
+          'cardSlider:card_removed', this.onCardRemoved_.bind(this));
 
       // Ensure the slider is resized appropriately with the window.
       window.addEventListener('resize', this.onWindowResize_.bind(this));
 
       // Update apps when online state changes.
-      window.addEventListener('online',
-          this.updateOfflineEnabledApps_.bind(this));
-      window.addEventListener('offline',
-          this.updateOfflineEnabledApps_.bind(this));
+      window.addEventListener(
+          'online', this.updateOfflineEnabledApps_.bind(this));
+      window.addEventListener(
+          'offline', this.updateOfflineEnabledApps_.bind(this));
     },
 
     /**
@@ -238,13 +238,13 @@ cr.define('ntp', function() {
       }
 
       // If we're appending an AppsPage and it's a temporary page, animate it.
-      var animate = page instanceof ntp.AppsPage &&
-                    page.classList.contains('temporary');
+      var animate =
+          page instanceof ntp.AppsPage && page.classList.contains('temporary');
       // Make a deep copy of the dot template to add a new one.
       var newDot = new ntp.NavDot(page, title, titleIsEditable, animate);
       page.navigationDot = newDot;
-      this.dotList.insertBefore(newDot,
-                                opt_refNode ? opt_refNode.navigationDot : null);
+      this.dotList.insertBefore(
+          newDot, opt_refNode ? opt_refNode.navigationDot : null);
       // Set a tab index on the first dot.
       if (this.dotList.dots.length == 1)
         newDot.tabIndex = 3;
@@ -260,7 +260,7 @@ cr.define('ntp', function() {
     appMoved: function(appData) {
       assert(loadTimeData.getBoolean('showApps'));
 
-      var app = /** @type {ntp.App} */($(appData.id));
+      var app = /** @type {ntp.App} */ ($(appData.id));
       assert(app, 'trying to move an app that doesn\'t exist');
       app.remove(false);
 
@@ -279,7 +279,7 @@ cr.define('ntp', function() {
     appRemoved: function(appData, isUninstall, fromPage) {
       assert(loadTimeData.getBoolean('showApps'));
 
-      var app = /** @type {ntp.App} */($(appData.id));
+      var app = /** @type {ntp.App} */ ($(appData.id));
       assert(app, 'trying to remove an app that doesn\'t exist');
 
       if (!isUninstall)
@@ -350,8 +350,9 @@ cr.define('ntp', function() {
 
       // Sort by launch ordinal
       apps.sort(function(a, b) {
-        return a.app_launch_ordinal > b.app_launch_ordinal ? 1 :
-          a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0;
+        return a.app_launch_ordinal > b.app_launch_ordinal ?
+            1 :
+            a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0;
       });
 
       // An app to animate (in case it was just installed).
@@ -359,11 +360,14 @@ cr.define('ntp', function() {
 
       // If there are any pages after the apps, add new pages before them.
       var lastAppsPage = (this.appsPages.length > 0) ?
-          this.appsPages[this.appsPages.length - 1] : null;
+          this.appsPages[this.appsPages.length - 1] :
+          null;
       var lastAppsPageIndex = (lastAppsPage != null) ?
-          Array.prototype.indexOf.call(this.tilePages, lastAppsPage) : -1;
+          Array.prototype.indexOf.call(this.tilePages, lastAppsPage) :
+          -1;
       var nextPageAfterApps = lastAppsPageIndex != -1 ?
-          this.tilePages[lastAppsPageIndex + 1] : null;
+          this.tilePages[lastAppsPageIndex + 1] :
+          null;
 
       // Add the apps, creating pages as necessary
       for (var i = 0; i < apps.length; i++) {
@@ -375,12 +379,12 @@ cr.define('ntp', function() {
             pageName = pageNames[this.appsPages.length];
 
           var origPageCount = this.appsPages.length;
-          this.appendTilePage(new ntp.AppsPage(), pageName, true,
-                              nextPageAfterApps);
+          this.appendTilePage(
+              new ntp.AppsPage(), pageName, true, nextPageAfterApps);
           // Confirm that appsPages is a live object, updated when a new page is
           // added (otherwise we'd have an infinite loop)
-          assert(this.appsPages.length == origPageCount + 1,
-                 'expected new page');
+          assert(
+              this.appsPages.length == origPageCount + 1, 'expected new page');
         }
 
         if (app.id == this.highlightAppId)
@@ -427,9 +431,9 @@ cr.define('ntp', function() {
 
       if (pageIndex >= this.appsPages.length) {
         while (pageIndex >= this.appsPages.length) {
-          this.appendTilePage(new ntp.AppsPage(),
-                              loadTimeData.getString('appDefaultPageName'),
-                              true);
+          this.appendTilePage(
+              new ntp.AppsPage(), loadTimeData.getString('appDefaultPageName'),
+              true);
         }
         this.updateSliderCards();
       }
@@ -489,14 +493,13 @@ cr.define('ntp', function() {
      * the Slider knows about the new elements.
      */
     updateSliderCards: function() {
-      var pageNo = Math.max(0, Math.min(this.cardSlider.currentCard,
-                                        this.tilePages.length - 1));
-      this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages),
-                               pageNo);
+      var pageNo = Math.max(
+          0, Math.min(this.cardSlider.currentCard, this.tilePages.length - 1));
+      this.cardSlider.setCards(
+          Array.prototype.slice.call(this.tilePages), pageNo);
       if (loadTimeData.getBoolean('showApps')) {
-        this.cardSlider.selectCardByValue(
-            this.appsPages[Math.min(this.shownPageIndex,
-                                    this.appsPages.length - 1)]);
+        this.cardSlider.selectCardByValue(this.appsPages[Math.min(
+            this.shownPageIndex, this.appsPages.length - 1)]);
       }
     },
 
@@ -525,7 +528,7 @@ cr.define('ntp', function() {
      * Invoked whenever some app is released
      */
     leaveRearrangeMode: function() {
-      var tempPage = /** @type {ntp.AppsPage} */(
+      var tempPage = /** @type {ntp.AppsPage} */ (
           document.querySelector('.tile-page.temporary'));
       if (tempPage) {
         var dot = tempPage.navigationDot;
@@ -534,8 +537,8 @@ cr.define('ntp', function() {
           this.removeTilePageAndDot_(tempPage, true);
         } else {
           tempPage.classList.remove('temporary');
-          this.saveAppPageName(tempPage,
-                               loadTimeData.getString('appDefaultPageName'));
+          this.saveAppPageName(
+              tempPage, loadTimeData.getString('appDefaultPageName'));
         }
       }
 
@@ -568,21 +571,20 @@ cr.define('ntp', function() {
 
       var page = this.cardSlider.currentCardValue;
 
-      this.pageSwitcherStart.hidden = !page ||
-          (this.cardSlider.currentCard == 0);
+      this.pageSwitcherStart.hidden =
+          !page || (this.cardSlider.currentCard == 0);
       this.pageSwitcherEnd.hidden = !page ||
           (this.cardSlider.currentCard == this.cardSlider.cardCount - 1);
 
       if (!page)
         return;
 
-      var pageSwitcherLeft = isRTL() ? this.pageSwitcherEnd :
-                                       this.pageSwitcherStart;
-      var pageSwitcherRight = isRTL() ? this.pageSwitcherStart :
-                                        this.pageSwitcherEnd;
+      var pageSwitcherLeft =
+          isRTL() ? this.pageSwitcherEnd : this.pageSwitcherStart;
+      var pageSwitcherRight =
+          isRTL() ? this.pageSwitcherStart : this.pageSwitcherEnd;
       var scrollbarWidth = page.scrollbarWidth;
-      pageSwitcherLeft.style.width =
-          (page.sideMargin + 13) + 'px';
+      pageSwitcherLeft.style.width = (page.sideMargin + 13) + 'px';
       pageSwitcherLeft.style.left = '0';
       pageSwitcherRight.style.width =
           (page.sideMargin - scrollbarWidth + 13) + 'px';
@@ -736,9 +738,9 @@ cr.define('ntp', function() {
       else
         return;
 
-      var cardIndex =
-          (this.cardSlider.currentCard + direction +
-           this.cardSlider.cardCount) % this.cardSlider.cardCount;
+      var cardIndex = (this.cardSlider.currentCard + direction +
+                       this.cardSlider.cardCount) %
+          this.cardSlider.cardCount;
       this.cardSlider.selectCard(cardIndex, true);
 
       e.stopPropagation();
@@ -766,7 +768,5 @@ cr.define('ntp', function() {
     },
   };
 
-  return {
-    PageListView: PageListView
-  };
+  return {PageListView: PageListView};
 });
diff --git a/chromium/chrome/browser/resources/ntp4/page_switcher.js b/chromium/chrome/browser/resources/ntp4/page_switcher.js
index 5babba48ce6..f32f6edca3e 100644
--- a/chromium/chrome/browser/resources/ntp4/page_switcher.js
+++ b/chromium/chrome/browser/resources/ntp4/page_switcher.js
@@ -13,8 +13,7 @@ cr.define('ntp', function() {
    * @constructor
    * @extends {HTMLButtonElement}
    */
-  function PageSwitcher() {
-  }
+  function PageSwitcher() {}
 
   PageSwitcher.prototype = {
     __proto__: HTMLButtonElement.prototype,
@@ -72,7 +71,8 @@ cr.define('ntp', function() {
       var currentPageTitle = currentDot.displayTitle;
       var nextPageTitle = nextDot.displayTitle;
       var msgName = (currentPageTitle == nextPageTitle) ?
-          'page_switcher_same_title' : 'page_switcher_change_title';
+          'page_switcher_same_title' :
+          'page_switcher_change_title';
       var ariaLabel = loadTimeData.getStringF(msgName, nextPageTitle);
       this.setAttribute('aria-label', ariaLabel);
     },
diff --git a/chromium/chrome/browser/resources/ntp4/tile_page.js b/chromium/chrome/browser/resources/ntp4/tile_page.js
index d1cead7c3af..3c48c36198b 100644
--- a/chromium/chrome/browser/resources/ntp4/tile_page.js
+++ b/chromium/chrome/browser/resources/ntp4/tile_page.js
@@ -120,14 +120,14 @@ cr.define('ntp', function() {
       this.dragClone.style.right = '';
       this.dragClone.classList.add('drag-representation');
       $('card-slider-frame').appendChild(this.dragClone);
-      this.eventTracker.add(this.dragClone, 'transitionend',
-                            this.onDragCloneTransitionEnd_.bind(this));
+      this.eventTracker.add(
+          this.dragClone, 'transitionend',
+          this.onDragCloneTransitionEnd_.bind(this));
 
       this.classList.add('dragging');
       // offsetLeft is mirrored in RTL. Un-mirror it.
-      var offsetLeft = isRTL() ?
-          this.parentNode.clientWidth - this.offsetLeft :
-          this.offsetLeft;
+      var offsetLeft = isRTL() ? this.parentNode.clientWidth - this.offsetLeft :
+                                 this.offsetLeft;
       this.dragOffsetX = e.x - offsetLeft - this.parentNode.offsetLeft;
       this.dragOffsetY = e.y - this.offsetTop -
           // Unlike offsetTop, this value takes scroll position into account.
@@ -180,17 +180,15 @@ cr.define('ntp', function() {
           this.dragClone.hidden = false;
           // The tile's contents may have moved following the respositioning;
           // adjust for that.
-          var contentDiffX = this.dragClone.firstChild.offsetLeft -
-              this.firstChild.offsetLeft;
-          var contentDiffY = this.dragClone.firstChild.offsetTop -
-              this.firstChild.offsetTop;
+          var contentDiffX =
+              this.dragClone.firstChild.offsetLeft - this.firstChild.offsetLeft;
+          var contentDiffY =
+              this.dragClone.firstChild.offsetTop - this.firstChild.offsetTop;
           this.dragClone.style.left =
-              toCssPx(this.gridX + this.parentNode.offsetLeft -
-                         contentDiffX);
-          this.dragClone.style.top =
-              toCssPx(this.gridY +
-                         this.parentNode.getBoundingClientRect().top -
-                         contentDiffY);
+              toCssPx(this.gridX + this.parentNode.offsetLeft - contentDiffX);
+          this.dragClone.style.top = toCssPx(
+              this.gridY + this.parentNode.getBoundingClientRect().top -
+              contentDiffY);
         } else if (this.dragClone.hidden) {
           this.finalizeDrag_();
         } else {
@@ -238,8 +236,8 @@ cr.define('ntp', function() {
       if (isRTL())
         x *= -1;
 
-      this.doppleganger_.style.transform = 'translate(' + x + 'px, ' +
-                                                          y + 'px)';
+      this.doppleganger_.style.transform =
+          'translate(' + x + 'px, ' + y + 'px)';
     },
 
     /**
@@ -378,25 +376,20 @@ cr.define('ntp', function() {
   TilePage.initGridValues = function(grid) {
     // The amount of space we need to display a narrow grid (all narrow grids
     // are this size).
-    grid.narrowWidth =
-        grid.minTileWidth * tileWidthFraction(grid.minColCount,
-                                              grid.tileSpacingFraction);
+    grid.narrowWidth = grid.minTileWidth *
+        tileWidthFraction(grid.minColCount, grid.tileSpacingFraction);
     // The minimum amount of space we need to display a wide grid.
-    grid.minWideWidth =
-        grid.minTileWidth * tileWidthFraction(grid.maxColCount,
-                                              grid.tileSpacingFraction);
+    grid.minWideWidth = grid.minTileWidth *
+        tileWidthFraction(grid.maxColCount, grid.tileSpacingFraction);
     // The largest we will ever display a wide grid.
-    grid.maxWideWidth =
-        grid.maxTileWidth * tileWidthFraction(grid.maxColCount,
-                                              grid.tileSpacingFraction);
+    grid.maxWideWidth = grid.maxTileWidth *
+        tileWidthFraction(grid.maxColCount, grid.tileSpacingFraction);
     // Tile-related pixel values for the narrow display.
-    grid.narrowTileValues = tileValuesForGrid(grid.narrowWidth,
-                                              grid.minColCount,
-                                              grid.tileSpacingFraction);
+    grid.narrowTileValues = tileValuesForGrid(
+        grid.narrowWidth, grid.minColCount, grid.tileSpacingFraction);
     // Tile-related pixel values for the minimum narrow display.
-    grid.wideTileValues = tileValuesForGrid(grid.minWideWidth,
-                                            grid.maxColCount,
-                                            grid.tileSpacingFraction);
+    grid.wideTileValues = tileValuesForGrid(
+        grid.minWideWidth, grid.maxColCount, grid.tileSpacingFraction);
   };
 
   TilePage.prototype = {
@@ -431,7 +424,8 @@ cr.define('ntp', function() {
       this.tileGrid_.className = 'tile-grid';
       this.tileGrid_.style.minWidth = this.gridValues_.narrowWidth + 'px';
       this.tileGrid_.setAttribute('role', 'menu');
-      this.tileGrid_.setAttribute('aria-label',
+      this.tileGrid_.setAttribute(
+          'aria-label',
           loadTimeData.getString(
               'tile_grid_screenreader_accessible_description'));
 
@@ -453,8 +447,8 @@ cr.define('ntp', function() {
       this.eventTracker = new EventTracker();
       this.eventTracker.add(window, 'resize', this.onResize_.bind(this));
 
-      this.addEventListener('DOMNodeInsertedIntoDocument',
-                            this.onNodeInsertedIntoDocument_);
+      this.addEventListener(
+          'DOMNodeInsertedIntoDocument', this.onNodeInsertedIntoDocument_);
 
       this.content_.addEventListener('scroll', this.onScroll_.bind(this));
 
@@ -522,8 +516,9 @@ cr.define('ntp', function() {
       // |opt_animate| argument, but that's not necesarilly applicable to
       // removing a tilePage. Selecting a different card in an animated way and
       // deleting the card afterward is probably a better choice.
-      assert(typeof arguments[0] != 'boolean',
-             'This function takes no |opt_animate| argument.');
+      assert(
+          typeof arguments[0] != 'boolean',
+          'This function takes no |opt_animate| argument.');
       this.tearDown_();
       this.parentNode.removeChild(this);
     },
@@ -680,15 +675,14 @@ cr.define('ntp', function() {
      * @private
      */
     handleMouseDown_: function(e) {
-      var focusable = findAncestorByClass(/** @type {Element} */(e.target),
-                                          'focusable');
+      var focusable =
+          findAncestorByClass(/** @type {Element} */ (e.target), 'focusable');
       if (focusable) {
         this.focusElementIndex_ =
-            Array.prototype.indexOf.call(this.focusableElements_,
-                                         focusable);
+            Array.prototype.indexOf.call(this.focusableElements_, focusable);
         this.updateFocusElement_();
       }
-  },
+    },
 
     /**
      * Handle arrow key focus nav.
@@ -717,9 +711,8 @@ cr.define('ntp', function() {
           // Look through all focusable elements. Find the first one that is
           // in the same column.
           var direction = e.key == 'ArrowUp' ? -1 : 1;
-          var currentIndex =
-              Array.prototype.indexOf.call(this.focusableElements_,
-                                           this.currentFocusElement_);
+          var currentIndex = Array.prototype.indexOf.call(
+              this.focusableElements_, this.currentFocusElement_);
           var newFocusIdx = wrap(currentIndex + direction);
           var tile = this.currentFocusElement_.parentNode;
           for (;; newFocusIdx = wrap(newFocusIdx + direction)) {
@@ -754,8 +747,8 @@ cr.define('ntp', function() {
         return;
       }
 
-      this.focusElementIndex_ = Math.min(this.focusableElements_.length - 1,
-                                         this.focusElementIndex_);
+      this.focusElementIndex_ =
+          Math.min(this.focusableElements_.length - 1, this.focusElementIndex_);
       this.focusElementIndex_ = Math.max(0, this.focusElementIndex_);
 
       var newFocusElement = this.focusableElements_[this.focusElementIndex_];
@@ -800,17 +793,16 @@ cr.define('ntp', function() {
       var numRowTiles = wide ? grid.maxColCount : grid.minColCount;
 
       var effectiveGridWidth = wide ?
-          Math.min(Math.max(availableSpace, grid.minWideWidth),
-                   grid.maxWideWidth) :
+          Math.min(
+              Math.max(availableSpace, grid.minWideWidth), grid.maxWideWidth) :
           grid.narrowWidth;
-      var realTileValues = tileValuesForGrid(effectiveGridWidth, numRowTiles,
-                                             grid.tileSpacingFraction);
+      var realTileValues = tileValuesForGrid(
+          effectiveGridWidth, numRowTiles, grid.tileSpacingFraction);
 
       // leftMargin centers the grid within the avaiable space.
       var minMargin = wide ? MIN_WIDE_MARGIN : 0;
-      var leftMargin =
-          Math.max(minMargin,
-                   (this.tileGrid_.clientWidth - effectiveGridWidth) / 2);
+      var leftMargin = Math.max(
+          minMargin, (this.tileGrid_.clientWidth - effectiveGridWidth) / 2);
 
       var rowHeight = this.heightForWidth(realTileValues.tileWidth) +
           realTileValues.interTileSpacing;
@@ -873,19 +865,19 @@ cr.define('ntp', function() {
       var realY = row * layout.rowHeight;
 
       // Calculate the portion of the tile's position that should be animated.
-      var animatedTileValues = layout.wide ?
-          grid.wideTileValues : grid.narrowTileValues;
+      var animatedTileValues =
+          layout.wide ? grid.wideTileValues : grid.narrowTileValues;
       // Animate the difference between three-wide and six-wide.
       var animatedLeftMargin = this.getAnimatedLeftMargin_();
       var animatedX = col * animatedTileValues.offsetX + animatedLeftMargin;
-      var animatedY = row * (this.heightForWidth(animatedTileValues.tileWidth) +
-                             animatedTileValues.interTileSpacing);
+      var animatedY = row *
+          (this.heightForWidth(animatedTileValues.tileWidth) +
+           animatedTileValues.interTileSpacing);
 
       var tile = this.tileElements_[index];
       tile.setGridPosition(animatedX, animatedY);
-      tile.firstChild.setBounds(layout.tileWidth,
-                                realX - animatedX,
-                                realY - animatedY);
+      tile.firstChild.setBounds(
+          layout.tileWidth, realX - animatedX, realY - animatedY);
 
       // This code calculates whether the tile needs to show a clone of itself
       // wrapped around the other side of the tile grid.
@@ -894,8 +886,9 @@ cr.define('ntp', function() {
       var offTheLeft = col == -1 || (col == 0 && tile.hasDoppleganger());
       if (this.isCurrentDragTarget && (offTheRight || offTheLeft)) {
         var sign = offTheRight ? 1 : -1;
-        tile.showDoppleganger(-layout.numRowTiles * layout.colWidth * sign,
-                              layout.rowHeight * sign);
+        tile.showDoppleganger(
+            -layout.numRowTiles * layout.colWidth * sign,
+            layout.rowHeight * sign);
       } else {
         tile.clearDoppleganger();
       }
@@ -923,8 +916,8 @@ cr.define('ntp', function() {
       var layout = this.layoutValues_;
 
       var gridClientRect = this.tileGrid_.getBoundingClientRect();
-      var col = Math.floor((x - gridClientRect.left - layout.leftMargin) /
-                           layout.colWidth);
+      var col = Math.floor(
+          (x - gridClientRect.left - layout.leftMargin) / layout.colWidth);
       if (col < 0 || col >= layout.numRowTiles)
         return -1;
 
@@ -969,22 +962,21 @@ cr.define('ntp', function() {
 
       var leftMargin = this.layoutValues_.leftMargin;
       // The fade distance is the space between tiles.
-      var fadeDistance = (this.gridValues_.tileSpacingFraction *
-          this.layoutValues_.tileWidth);
+      var fadeDistance =
+          (this.gridValues_.tileSpacingFraction * this.layoutValues_.tileWidth);
       fadeDistance = Math.min(leftMargin, fadeDistance);
       // On Skia we don't use any fade because it works very poorly. See
       // http://crbug.com/99373
       if (!cr.isMac)
         fadeDistance = 1;
-      var gradient =
-          '-webkit-linear-gradient(left,' +
-              'transparent, ' +
-              'transparent ' + (leftMargin - fadeDistance) + 'px, ' +
-              'black ' + leftMargin + 'px, ' +
-              'black ' + (this.tileGrid_.clientWidth - leftMargin) + 'px, ' +
-              'transparent ' + (this.tileGrid_.clientWidth - leftMargin +
-                                fadeDistance) + 'px, ' +
-              'transparent)';
+      var gradient = '-webkit-linear-gradient(left,' +
+          'transparent, ' +
+          'transparent ' + (leftMargin - fadeDistance) + 'px, ' +
+          'black ' + leftMargin + 'px, ' +
+          'black ' + (this.tileGrid_.clientWidth - leftMargin) + 'px, ' +
+          'transparent ' +
+          (this.tileGrid_.clientWidth - leftMargin + fadeDistance) + 'px, ' +
+          'transparent)';
       this.tileGrid_.style.WebkitMaskBoxImage = gradient;
     },
 
@@ -1096,8 +1088,8 @@ cr.define('ntp', function() {
       if (this.scrollbarUpdate_)
         return;
 
-      this.scrollbarUpdate_ = window.setTimeout(
-          this.doUpdateScrollbars_.bind(this), 0);
+      this.scrollbarUpdate_ =
+          window.setTimeout(this.doUpdateScrollbars_.bind(this), 0);
     },
 
     /**
@@ -1122,8 +1114,8 @@ cr.define('ntp', function() {
 
       var thumbTop = content.offsetTop +
           content.scrollTop / adjustedScrollHeight * content.clientHeight;
-      var thumbHeight = content.clientHeight / adjustedScrollHeight *
-          this.clientHeight;
+      var thumbHeight =
+          content.clientHeight / adjustedScrollHeight * this.clientHeight;
 
       this.scrollbar_.style.top = thumbTop + 'px';
       this.scrollbar_.style.height = thumbHeight + 'px';
@@ -1158,8 +1150,8 @@ cr.define('ntp', function() {
 
       this.classList.add('animating-tile-page');
       this.withinPageDrag_ = this.contains(currentlyDraggingTile);
-      this.dragItemIndex_ = this.withinPageDrag_ ?
-          currentlyDraggingTile.index : this.tileElements_.length;
+      this.dragItemIndex_ = this.withinPageDrag_ ? currentlyDraggingTile.index :
+                                                   this.tileElements_.length;
       this.currentDropIndex_ = this.dragItemIndex_;
 
       // The new tile may change the number of rows, hence the top margin
@@ -1189,16 +1181,15 @@ cr.define('ntp', function() {
       var index = this.currentDropIndex_;
       // Only change data if this was not a 'null drag'.
       if (!((index == this.dragItemIndex_) && this.withinPageDrag_)) {
-        var adjustedIndex = this.currentDropIndex_ +
-            (index > this.dragItemIndex_ ? 1 : 0);
+        var adjustedIndex =
+            this.currentDropIndex_ + (index > this.dragItemIndex_ ? 1 : 0);
         if (this.withinPageDrag_) {
           this.tileGrid_.insertBefore(
-              currentlyDraggingTile,
-              this.tileElements_[adjustedIndex]);
+              currentlyDraggingTile, this.tileElements_[adjustedIndex]);
           this.tileMoved(currentlyDraggingTile, this.dragItemIndex_);
         } else {
-          var originalPage = currentlyDraggingTile ?
-              currentlyDraggingTile.tilePage : null;
+          var originalPage =
+              currentlyDraggingTile ? currentlyDraggingTile.tilePage : null;
           this.addDragData(e.dataTransfer, adjustedIndex);
           if (originalPage)
             originalPage.cleanupDrag();
@@ -1301,8 +1292,7 @@ cr.define('ntp', function() {
      * @param {Node} draggedTile The tile that was dropped.
      * @param {number} prevIndex The previous index of the tile.
      */
-    tileMoved: function(draggedTile, prevIndex) {
-    },
+    tileMoved: function(draggedTile, prevIndex) {},
 
     /**
      * Sets the drop effect on |dataTransfer| to the desired value (e.g.
diff --git a/chromium/chrome/browser/resources/offline_pages/offline_internals.css b/chromium/chrome/browser/resources/offline_pages/offline_internals.css
index b37a1dc9b0a..534ae985fa9 100644
--- a/chromium/chrome/browser/resources/offline_pages/offline_internals.css
+++ b/chromium/chrome/browser/resources/offline_pages/offline_internals.css
@@ -50,3 +50,8 @@ li:nth-child(2n) {
 #current-status {
   font-size: 15px;
 }
+
+.dump {
+  font-family: monospace;
+  white-space: pre-wrap;
+}
diff --git a/chromium/chrome/browser/resources/offline_pages/offline_internals.html b/chromium/chrome/browser/resources/offline_pages/offline_internals.html
index b045ae6fbea..7220e63acbb 100644
--- a/chromium/chrome/browser/resources/offline_pages/offline_internals.html
+++ b/chromium/chrome/browser/resources/offline_pages/offline_internals.html
@@ -35,6 +35,11 @@
         <button id="log-request-on">Enable</button>
         <button id="log-request-off">Disable</button>
       </div>
+      <div>
+        Prefetching Log: <span id="prefetch-status"></span>
+        <button id="log-prefetch-on">Enable</button>
+        <button id="log-prefetch-off">Disable</button>
+      </div>
       <ul id="logs"></ul>
     </div>
 
@@ -55,7 +60,7 @@
       </thead>
       <tbody id="stored-pages"> </tbody>
     </table>
-    <div id="page-actions-info"></div>
+    <div id="page-actions-info" class="dump"></div>
 
     <h2>Request Queue</h2>
     <div>
@@ -73,7 +78,7 @@
       </thead>
       <tbody id="request-queue"> </tbody>
     </table>
-    <div id="request-queue-actions-info"></div>
+    <div id="request-queue-actions-info" class="dump"></div>
     <input id="url" type="url"
         placeholder="http://www.url1.com, http://www.url2.com, ...">
     <button id="add-to-queue">Load in background</button>
@@ -85,6 +90,21 @@
         <button id="schedule-nwake">Schedule NWake</button>
         <button id="cancel-nwake">Cancel NWake</button>
       </div>
+      <div>
+        <input id="generate-urls" type="text"
+            placeholder="http://www.url1.com, http://www.url2.com, ...">
+        <button id="generate-page-bundle">Generate Page Bundle</button>
+      </div>
+      <div>
+        <input id="operation-name" type="text"
+            placeholder="operations/1234-5678">
+        <button id="get-operation">Get Operation</button>
+      </div>
+      <div>
+        <input id="download-name" type="text" placeholder="us/page/1234-5678">
+        <button id="download-archive">Download</button>
+      </div>
     </div>
+    <div id="prefetch-actions-info" class="dump"></div>
   </body>
 </html>
diff --git a/chromium/chrome/browser/resources/offline_pages/offline_internals.js b/chromium/chrome/browser/resources/offline_pages/offline_internals.js
index c2e16169493..5acddb52f5e 100644
--- a/chromium/chrome/browser/resources/offline_pages/offline_internals.js
+++ b/chromium/chrome/browser/resources/offline_pages/offline_internals.js
@@ -16,6 +16,15 @@ cr.define('offlineInternals', function() {
       offlineInternals.OfflineInternalsBrowserProxyImpl.getInstance();
 
   /**
+   * Helper to fill enabled labels based on boolean value.
+   * @param {boolean} enabled Whether the text should show on or off.
+   * @return {string}
+   */
+  function getTextLabel(enabled) {
+    return enabled ? 'On' : 'Off';
+  }
+
+  /**
    * Fill stored pages table.
    * @param {!Array<OfflinePage>} pages An array object representing
    *     stored offline pages.
@@ -170,18 +179,24 @@ cr.define('offlineInternals', function() {
   }
 
   /**
+   * Callback for prefetch actions.
+   * @param {string} info The result of performing the prefetch actions.
+   */
+  function setPrefetchResult(info) {
+    $('prefetch-actions-info').textContent = info;
+  }
+
+  /**
    * Downloads all the stored page and request queue information into a file.
    * TODO(chili): Create a CSV writer that can abstract out the line joining.
    */
   function download() {
-    var json = JSON.stringify({
-      offlinePages: offlinePages,
-      savePageRequests: savePageRequests
-    }, null, 2);
+    var json = JSON.stringify(
+        {offlinePages: offlinePages, savePageRequests: savePageRequests}, null,
+        2);
 
     window.open(
-        'data:application/json,' + encodeURIComponent(json),
-        'dump.json');
+        'data:application/json,' + encodeURIComponent(json), 'dump.json');
   }
 
   /**
@@ -189,8 +204,10 @@ cr.define('offlineInternals', function() {
    * @param {!IsLogging} logStatus Status of logging.
    */
   function updateLogStatus(logStatus) {
-    $('model-status').textContent = logStatus.modelIsLogging ? 'On' : 'Off';
-    $('request-status').textContent = logStatus.queueIsLogging ? 'On' : 'Off';
+    $('model-status').textContent = getTextLabel(logStatus.modelIsLogging);
+    $('request-status').textContent = getTextLabel(logStatus.queueIsLogging);
+    $('prefetch-status').textContent =
+        getTextLabel(logStatus.prefetchIsLogging);
   }
 
   /**
@@ -233,19 +250,30 @@ cr.define('offlineInternals', function() {
 
   function initialize() {
     /**
-     * @param {!boolean} enabled Whether to enable Logging.
+     * @param {boolean} enabled Whether to enable Logging. If the
+     * OfflinePageModlel does not exist in this context, the action is ignored.
      */
     function togglePageModelLog(enabled) {
       browserProxy.setRecordPageModel(enabled);
-      $('model-status').textContent = enabled ? 'On' : 'Off';
+      $('model-status').textContent = getTextLabel(enabled);
     }
 
     /**
-     * @param {!boolean} enabled Whether to enable Logging.
+     * @param {boolean} enabled Whether to enable Logging. If the
+     * OfflinePageModlel does not exist in this context, the action is ignored.
      */
     function toggleRequestQueueLog(enabled) {
       browserProxy.setRecordRequestQueue(enabled);
-      $('request-status').textContent = enabled ? 'On' : 'Off';
+      $('request-status').textContent = getTextLabel(enabled);
+    }
+
+    /**
+     * @param {boolean} enabled Whether to enable Logging. If the
+     * OfflinePageModlel does not exist in this context, the action is ignored.
+     */
+    function togglePrefetchServiceLog(enabled) {
+      browserProxy.setRecordPrefetchService(enabled);
+      $('prefetch-status').textContent = getTextLabel(enabled);
     }
 
     var incognito = loadTimeData.getBoolean('isIncognito');
@@ -269,34 +297,46 @@ cr.define('offlineInternals', function() {
     $('log-model-off').onclick = togglePageModelLog.bind(this, false);
     $('log-request-on').onclick = toggleRequestQueueLog.bind(this, true);
     $('log-request-off').onclick = toggleRequestQueueLog.bind(this, false);
+    $('log-prefetch-on').onclick = togglePrefetchServiceLog.bind(this, true);
+    $('log-prefetch-off').onclick = togglePrefetchServiceLog.bind(this, false);
     $('refresh-logs').onclick = refreshLog;
     $('add-to-queue').onclick = function() {
       var saveUrls = $('url').value.split(',');
       var counter = saveUrls.length;
       $('save-url-state').textContent = '';
       for (let i = 0; i < saveUrls.length; i++) {
-        browserProxy.addToRequestQueue(saveUrls[i])
-            .then(function(state) {
-              if (state) {
-                $('save-url-state').textContent +=
-                    saveUrls[i] + ' has been added to queue.\n';
-                $('url').value = '';
-                counter--;
-                if (counter == 0) {
-                  browserProxy.getRequestQueue().then(fillRequestQueue);
-                }
-              } else {
-                $('save-url-state').textContent +=
-                    saveUrls[i] + ' failed to be added to queue.\n';
-              }
-            });
+        browserProxy.addToRequestQueue(saveUrls[i]).then(function(state) {
+          if (state) {
+            $('save-url-state').textContent +=
+                saveUrls[i] + ' has been added to queue.\n';
+            $('url').value = '';
+            counter--;
+            if (counter == 0) {
+              browserProxy.getRequestQueue().then(fillRequestQueue);
+            }
+          } else {
+            $('save-url-state').textContent +=
+                saveUrls[i] + ' failed to be added to queue.\n';
+          }
+        });
       }
     };
     $('schedule-nwake').onclick = function() {
-      browserProxy.scheduleNwake();
+      browserProxy.scheduleNwake().then(setPrefetchResult);
     };
     $('cancel-nwake').onclick = function() {
-      browserProxy.cancelNwake();
+      browserProxy.cancelNwake().then(setPrefetchResult);
+    };
+    $('generate-page-bundle').onclick = function() {
+      browserProxy.generatePageBundle($('generate-urls').value)
+          .then(setPrefetchResult);
+    };
+    $('get-operation').onclick = function() {
+      browserProxy.getOperation($('operation-name').value)
+          .then(setPrefetchResult);
+    };
+    $('download-archive').onclick = function() {
+      browserProxy.downloadArchive($('download-name').value);
     };
     if (!incognito)
       refreshAll();
diff --git a/chromium/chrome/browser/resources/offline_pages/offline_internals_browser_proxy.js b/chromium/chrome/browser/resources/offline_pages/offline_internals_browser_proxy.js
index 45d87ae6048..81d58c117b8 100644
--- a/chromium/chrome/browser/resources/offline_pages/offline_internals_browser_proxy.js
+++ b/chromium/chrome/browser/resources/offline_pages/offline_internals_browser_proxy.js
@@ -32,7 +32,8 @@ var SavePageRequest;
 /**
  * @typedef {{
  *   modelIsLogging: boolean,
- *   queueIsLogging: boolean
+ *   queueIsLogging: boolean,
+ *   prefetchIsLogging: boolean
  * }}
  */
 var IsLogging;
@@ -85,6 +86,12 @@ cr.define('offlineInternals', function() {
     setRecordRequestQueue: function(shouldLog) {},
 
     /**
+     * Sets whether to record logs for prefetching.
+     * @param {boolean} shouldLog True if logging should be enabled.
+     */
+    setRecordPrefetchService: function(shouldLog) {},
+
+    /**
      * Gets the currently recorded logs.
      * @return {!Promise<!Array<string>>} A promise firing when the
      *     logs are retrieved.
@@ -124,6 +131,26 @@ cr.define('offlineInternals', function() {
      * @return {!Promise} A promise firing when the task has been cancelled.
      */
     cancelNwake: function() {},
+
+    /**
+     * Sends and processes a request to generate page bundle.
+     * @param {string} urls A list of comma-separated URLs.
+     * @return {!Promise<string>} A string describing the result.
+     */
+    generatePageBundle: function(urls) {},
+
+    /**
+     * Sends and processes a request to get operation.
+     * @param {string} name Name of operation.
+     * @return {!Promise<string>} A string describing the result.
+     */
+    getOperation: function(name) {},
+
+    /**
+     * Downloads an archive.
+     * @param {string} name Name of archive to download.
+     */
+    downloadArchive: function(name) {},
   };
 
   /**
@@ -165,6 +192,11 @@ cr.define('offlineInternals', function() {
     },
 
     /** @override */
+    setRecordPrefetchService: function(shouldLog) {
+      chrome.send('setRecordPrefetchService', [shouldLog]);
+    },
+
+    /** @override */
     getEventLogs: function() {
       return cr.sendWithPromise('getEventLogs');
     },
@@ -193,6 +225,21 @@ cr.define('offlineInternals', function() {
     cancelNwake: function() {
       return cr.sendWithPromise('cancelNwake');
     },
+
+    /** @override */
+    generatePageBundle: function(urls) {
+      return cr.sendWithPromise('generatePageBundle', urls);
+    },
+
+    /** @override */
+    getOperation: function(name) {
+      return cr.sendWithPromise('getOperation', name);
+    },
+
+    /** @override */
+    downloadArchive: function(name) {
+      chrome.send('downloadArchive', [name]);
+    },
   };
 
   return {
diff --git a/chromium/chrome/browser/resources/omnibox/omnibox.html b/chromium/chrome/browser/resources/omnibox/omnibox.html
index aff0ab51204..3f34ae2d779 100644
--- a/chromium/chrome/browser/resources/omnibox/omnibox.html
+++ b/chromium/chrome/browser/resources/omnibox/omnibox.html
@@ -6,7 +6,9 @@
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   <link rel="stylesheet" href="omnibox.css">
   <script src="chrome://resources/js/cr.js"></script>
+  <script src="chrome://resources/js/mojo_bindings.js"></script>
   <script src="chrome://resources/js/util.js"></script>
+  <script src="chrome/browser/ui/webui/omnibox/omnibox.mojom.js"></script>
   <script src="omnibox.js"></script>
 </head>
 <body>
diff --git a/chromium/chrome/browser/resources/omnibox/omnibox.js b/chromium/chrome/browser/resources/omnibox/omnibox.js
index 2570deb46d9..f97d788bf64 100644
--- a/chromium/chrome/browser/resources/omnibox/omnibox.js
+++ b/chromium/chrome/browser/resources/omnibox/omnibox.js
@@ -18,435 +18,428 @@
  */
 
 (function() {
-  /**
-   * Register our event handlers.
-   */
-  function initialize() {
-    $('omnibox-input-form').addEventListener(
-        'submit', startOmniboxQuery, false);
-    $('prevent-inline-autocomplete').addEventListener(
-        'change', startOmniboxQuery);
-    $('prefer-keyword').addEventListener('change', startOmniboxQuery);
-    $('page-classification').addEventListener('change', startOmniboxQuery);
-    $('show-details').addEventListener('change', refresh);
-    $('show-incomplete-results').addEventListener('change', refresh);
-    $('show-all-providers').addEventListener('change', refresh);
-  }
+/**
+ * Register our event handlers.
+ */
+function initialize() {
+  $('omnibox-input-form').addEventListener('submit', startOmniboxQuery, false);
+  $('prevent-inline-autocomplete')
+      .addEventListener('change', startOmniboxQuery);
+  $('prefer-keyword').addEventListener('change', startOmniboxQuery);
+  $('page-classification').addEventListener('change', startOmniboxQuery);
+  $('show-details').addEventListener('change', refresh);
+  $('show-incomplete-results').addEventListener('change', refresh);
+  $('show-all-providers').addEventListener('change', refresh);
+}
 
-  /**
-   * @type {OmniboxResultMojo} an array of all autocomplete results we've seen
-   *     for this query.  We append to this list once for every call to
-   *     handleNewAutocompleteResult.  See omnibox.mojom for details..
-   */
-  var progressiveAutocompleteResults = [];
+/**
+ * @type {OmniboxResultMojo} an array of all autocomplete results we've seen
+ *     for this query.  We append to this list once for every call to
+ *     handleNewAutocompleteResult.  See omnibox.mojom for details..
+ */
+var progressiveAutocompleteResults = [];
 
-  /**
-   * @type {number} the value for cursor position we sent with the most
-   *     recent request.  We need to remember this in order to display it
-   *     in the output; otherwise it's hard or impossible to determine
-   *     from screen captures or print-to-PDFs.
-   */
-  var cursorPositionUsed = -1;
+/**
+ * @type {number} the value for cursor position we sent with the most
+ *     recent request.  We need to remember this in order to display it
+ *     in the output; otherwise it's hard or impossible to determine
+ *     from screen captures or print-to-PDFs.
+ */
+var cursorPositionUsed = -1;
 
-  /**
-   * Extracts the input text from the text field and sends it to the
-   * C++ portion of chrome to handle.  The C++ code will iteratively
-   * call handleNewAutocompleteResult as results come in.
-   */
-  function startOmniboxQuery(event) {
-    // First, clear the results of past calls (if any).
-    progressiveAutocompleteResults = [];
-    // Then, call chrome with a five-element list:
-    // - first element: the value in the text box
-    // - second element: the location of the cursor in the text box
-    // - third element: the value of prevent-inline-autocomplete
-    // - forth element: the value of prefer-keyword
-    // - fifth element: the value of page-classification
-    cursorPositionUsed = $('input-text').selectionEnd;
-    browserProxy.startOmniboxQuery(
-        $('input-text').value,
-        cursorPositionUsed,
-        $('prevent-inline-autocomplete').checked,
-        $('prefer-keyword').checked,
-        parseInt($('page-classification').value));
-    // Cancel the submit action.  i.e., don't submit the form.  (We handle
-    // display the results solely with Javascript.)
-    event.preventDefault();
-  }
+/**
+ * Extracts the input text from the text field and sends it to the
+ * C++ portion of chrome to handle.  The C++ code will iteratively
+ * call handleNewAutocompleteResult as results come in.
+ */
+function startOmniboxQuery(event) {
+  // First, clear the results of past calls (if any).
+  progressiveAutocompleteResults = [];
+  // Then, call chrome with a five-element list:
+  // - first element: the value in the text box
+  // - second element: the location of the cursor in the text box
+  // - third element: the value of prevent-inline-autocomplete
+  // - forth element: the value of prefer-keyword
+  // - fifth element: the value of page-classification
+  cursorPositionUsed = $('input-text').selectionEnd;
+  browserProxy.startOmniboxQuery(
+      $('input-text').value, cursorPositionUsed,
+      $('prevent-inline-autocomplete').checked, $('prefer-keyword').checked,
+      parseInt($('page-classification').value));
+  // Cancel the submit action.  i.e., don't submit the form.  (We handle
+  // display the results solely with Javascript.)
+  event.preventDefault();
+}
 
-  /**
-   * Returns a simple object with information about how to display an
-   * autocomplete result data field.
-   * @param {string} header the label for the top of the column/table.
-   * @param {string} urlLabelForHeader the URL that the header should point
-   *     to (if non-empty).
-   * @param {string} propertyName the name of the property in the autocomplete
-   *     result record that we lookup.
-   * @param {boolean} displayAlways whether the property should be displayed
-   *     regardless of whether we're in detailed more.
-   * @param {string} tooltip a description of the property that will be
-   *     presented as a tooltip when the mouse is hovered over the column title.
-   * @constructor
-   */
-  function PresentationInfoRecord(header, url, propertyName, displayAlways,
-                                  tooltip) {
-    this.header = header;
-    this.urlLabelForHeader = url;
-    this.propertyName = propertyName;
-    this.displayAlways = displayAlways;
-    this.tooltip = tooltip;
-  }
+/**
+ * Returns a simple object with information about how to display an
+ * autocomplete result data field.
+ * @param {string} header the label for the top of the column/table.
+ * @param {string} urlLabelForHeader the URL that the header should point
+ *     to (if non-empty).
+ * @param {string} propertyName the name of the property in the autocomplete
+ *     result record that we lookup.
+ * @param {boolean} displayAlways whether the property should be displayed
+ *     regardless of whether we're in detailed more.
+ * @param {string} tooltip a description of the property that will be
+ *     presented as a tooltip when the mouse is hovered over the column title.
+ * @constructor
+ */
+function PresentationInfoRecord(
+    header, url, propertyName, displayAlways, tooltip) {
+  this.header = header;
+  this.urlLabelForHeader = url;
+  this.propertyName = propertyName;
+  this.displayAlways = displayAlways;
+  this.tooltip = tooltip;
+}
 
-  /**
-   * A constant that's used to decide what autocomplete result
-   * properties to output in what order.  This is an array of
-   * PresentationInfoRecord() objects; for details see that
-   * function.
-   * @type {Array<Object>}
-   * @const
-   */
-  var PROPERTY_OUTPUT_ORDER = [
-    new PresentationInfoRecord('Provider', '', 'provider_name', true,
-        'The AutocompleteProvider suggesting this result.'),
-    new PresentationInfoRecord('Type', '', 'type', true,
-        'The type of the result.'),
-    new PresentationInfoRecord('Relevance', '', 'relevance', true,
-        'The result score. Higher is more relevant.'),
-    new PresentationInfoRecord('Contents', '', 'contents', true,
-        'The text that is presented identifying the result.'),
-    new PresentationInfoRecord(
-        'Can Be Default', '', 'allowed_to_be_default_match', false,
-        'A green checkmark indicates that the result can be the default ' +
-        'match (i.e., can be the match that pressing enter in the omnibox ' +
-        'navigates to).'),
-    new PresentationInfoRecord('Starred', '', 'starred', false,
-        'A green checkmark indicates that the result has been bookmarked.'),
-    new PresentationInfoRecord('Description', '', 'description', false,
-        'The page title of the result.'),
-    new PresentationInfoRecord('URL', '', 'destination_url', true,
-        'The URL for the result.'),
-    new PresentationInfoRecord('Fill Into Edit', '', 'fill_into_edit', false,
-        'The text shown in the omnibox when the result is selected.'),
-    new PresentationInfoRecord(
-        'Inline Autocompletion', '', 'inline_autocompletion', false,
-        'The text shown in the omnibox as a blue highlight selection ' +
-        'following the cursor, if this match is shown inline.'),
-    new PresentationInfoRecord('Del', '', 'deletable', false,
-        'A green checkmark indicates that the result can be deleted from ' +
-        'the visit history.'),
-    new PresentationInfoRecord('Prev', '', 'from_previous', false, ''),
-    new PresentationInfoRecord(
-        'Tran',
-        'http://code.google.com/codesearch#OAMlx_jo-ck/src/content/public/' +
-        'common/page_transition_types.h&exact_package=chromium&l=24',
-        'transition', false,
-        'How the user got to the result.'),
-    new PresentationInfoRecord(
-        'Done', '', 'provider_done', false,
-        'A green checkmark indicates that the provider is done looking for ' +
-        'more results.'),
-    new PresentationInfoRecord(
-        'Associated Keyword', '', 'associated_keyword', false,
-        'If non-empty, a "press tab to search" hint will be shown and will ' +
-        'engage this keyword.'),
-    new PresentationInfoRecord(
-        'Keyword', '', 'keyword', false,
-        'The keyword of the search engine to be used.'),
-    new PresentationInfoRecord(
-        'Duplicates', '', 'duplicates', false,
-        'The number of matches that have been marked as duplicates of this ' +
-        'match.'),
-    new PresentationInfoRecord(
-        'Additional Info', '', 'additional_info', false,
-        'Provider-specific information about the result.')
-  ];
+/**
+ * A constant that's used to decide what autocomplete result
+ * properties to output in what order.  This is an array of
+ * PresentationInfoRecord() objects; for details see that
+ * function.
+ * @type {Array<Object>}
+ * @const
+ */
+var PROPERTY_OUTPUT_ORDER = [
+  new PresentationInfoRecord(
+      'Provider', '', 'providerName', true,
+      'The AutocompleteProvider suggesting this result.'),
+  new PresentationInfoRecord(
+      'Type', '', 'type', true, 'The type of the result.'),
+  new PresentationInfoRecord(
+      'Relevance', '', 'relevance', true,
+      'The result score. Higher is more relevant.'),
+  new PresentationInfoRecord(
+      'Contents', '', 'contents', true,
+      'The text that is presented identifying the result.'),
+  new PresentationInfoRecord(
+      'Can Be Default', '', 'allowedToBeDefaultMatch', false,
+      'A green checkmark indicates that the result can be the default ' +
+          'match (i.e., can be the match that pressing enter in the omnibox ' +
+          'navigates to).'),
+  new PresentationInfoRecord(
+      'Starred', '', 'starred', false,
+      'A green checkmark indicates that the result has been bookmarked.'),
+  new PresentationInfoRecord(
+      'Description', '', 'description', false, 'The page title of the result.'),
+  new PresentationInfoRecord(
+      'URL', '', 'destinationUrl', true, 'The URL for the result.'),
+  new PresentationInfoRecord(
+      'Fill Into Edit', '', 'fillIntoEdit', false,
+      'The text shown in the omnibox when the result is selected.'),
+  new PresentationInfoRecord(
+      'Inline Autocompletion', '', 'inlineAutocompletion', false,
+      'The text shown in the omnibox as a blue highlight selection ' +
+          'following the cursor, if this match is shown inline.'),
+  new PresentationInfoRecord(
+      'Del', '', 'deletable', false,
+      'A green checkmark indicates that the result can be deleted from ' +
+          'the visit history.'),
+  new PresentationInfoRecord('Prev', '', 'fromPrevious', false, ''),
+  new PresentationInfoRecord(
+      'Tran',
+      'http://code.google.com/codesearch#OAMlx_jo-ck/src/content/public/' +
+          'common/page_transition_types.h&exact_package=chromium&l=24',
+      'transition', false, 'How the user got to the result.'),
+  new PresentationInfoRecord(
+      'Done', '', 'providerDone', false,
+      'A green checkmark indicates that the provider is done looking for ' +
+          'more results.'),
+  new PresentationInfoRecord(
+      'Associated Keyword', '', 'associatedKeyword', false,
+      'If non-empty, a "press tab to search" hint will be shown and will ' +
+          'engage this keyword.'),
+  new PresentationInfoRecord(
+      'Keyword', '', 'keyword', false,
+      'The keyword of the search engine to be used.'),
+  new PresentationInfoRecord(
+      'Duplicates', '', 'duplicates', false,
+      'The number of matches that have been marked as duplicates of this ' +
+          'match.'),
+  new PresentationInfoRecord(
+      'Additional Info', '', 'additionalInfo', false,
+      'Provider-specific information about the result.')
+];
 
-  /**
-   * Returns an HTML Element of type table row that contains the
-   * headers we'll use for labeling the columns.  If we're in
-   * detailed_mode, we use all the headers.  If not, we only use ones
-   * marked displayAlways.
-   */
-  function createAutocompleteResultTableHeader() {
-    var row = document.createElement('tr');
-    var inDetailedMode = $('show-details').checked;
-    for (var i = 0; i < PROPERTY_OUTPUT_ORDER.length; i++) {
-      if (inDetailedMode || PROPERTY_OUTPUT_ORDER[i].displayAlways) {
-        var headerCell = document.createElement('th');
-        if (PROPERTY_OUTPUT_ORDER[i].urlLabelForHeader != '') {
-          // Wrap header text in URL.
-          var linkNode = document.createElement('a');
-          linkNode.href = PROPERTY_OUTPUT_ORDER[i].urlLabelForHeader;
-          linkNode.textContent = PROPERTY_OUTPUT_ORDER[i].header;
-          headerCell.appendChild(linkNode);
-        } else {
-          // Output header text without a URL.
-          headerCell.textContent = PROPERTY_OUTPUT_ORDER[i].header;
-          headerCell.className = 'table-header';
-          headerCell.title = PROPERTY_OUTPUT_ORDER[i].tooltip;
-        }
-        row.appendChild(headerCell);
+/**
+ * Returns an HTML Element of type table row that contains the
+ * headers we'll use for labeling the columns.  If we're in
+ * detailedMode, we use all the headers.  If not, we only use ones
+ * marked displayAlways.
+ */
+function createAutocompleteResultTableHeader() {
+  var row = document.createElement('tr');
+  var inDetailedMode = $('show-details').checked;
+  for (var i = 0; i < PROPERTY_OUTPUT_ORDER.length; i++) {
+    if (inDetailedMode || PROPERTY_OUTPUT_ORDER[i].displayAlways) {
+      var headerCell = document.createElement('th');
+      if (PROPERTY_OUTPUT_ORDER[i].urlLabelForHeader != '') {
+        // Wrap header text in URL.
+        var linkNode = document.createElement('a');
+        linkNode.href = PROPERTY_OUTPUT_ORDER[i].urlLabelForHeader;
+        linkNode.textContent = PROPERTY_OUTPUT_ORDER[i].header;
+        headerCell.appendChild(linkNode);
+      } else {
+        // Output header text without a URL.
+        headerCell.textContent = PROPERTY_OUTPUT_ORDER[i].header;
+        headerCell.className = 'table-header';
+        headerCell.title = PROPERTY_OUTPUT_ORDER[i].tooltip;
       }
+      row.appendChild(headerCell);
     }
-    return row;
   }
+  return row;
+}
 
-  /**
-   * @param {AutocompleteMatchMojo} autocompleteSuggestion the particular
-   *     autocomplete suggestion we're in the process of displaying.
-   * @param {string} propertyName the particular property of the autocomplete
-   *     suggestion that should go in this cell.
-   * @return {HTMLTableCellElement} that contains the value within this
-   *     autocompleteSuggestion associated with propertyName.
-   */
-  function createCellForPropertyAndRemoveProperty(autocompleteSuggestion,
-                                                  propertyName) {
-    var cell = document.createElement('td');
-    if (propertyName in autocompleteSuggestion) {
-      if (propertyName == 'additional_info') {
-        // |additional_info| embeds a two-column table of provider-specific data
-        // within this cell. |additional_info| is an array of
-        // AutocompleteAdditionalInfo.
-        var additionalInfoTable = document.createElement('table');
-        for (var i = 0; i < autocompleteSuggestion[propertyName].length; i++) {
-          var additionalInfo = autocompleteSuggestion[propertyName][i];
-          var additionalInfoRow = document.createElement('tr');
-
-          // Set the title (name of property) cell text.
-          var propertyCell = document.createElement('td');
-          propertyCell.textContent = additionalInfo.key + ':';
-          propertyCell.className = 'additional-info-property';
-          additionalInfoRow.appendChild(propertyCell);
-
-          // Set the value of the property cell text.
-          var valueCell = document.createElement('td');
-          valueCell.textContent = additionalInfo.value;
-          valueCell.className = 'additional-info-value';
-          additionalInfoRow.appendChild(valueCell);
-
-          additionalInfoTable.appendChild(additionalInfoRow);
-        }
-        cell.appendChild(additionalInfoTable);
-      } else if (typeof autocompleteSuggestion[propertyName] == 'boolean') {
-        // If this is a boolean, display a checkmark or an X instead of
-        // the strings true or false.
-        if (autocompleteSuggestion[propertyName]) {
-          cell.className = 'check-mark';
-          cell.textContent = '✔';
-        } else {
-          cell.className = 'x-mark';
-          cell.textContent = '✗';
-        }
+/**
+ * @param {AutocompleteMatchMojo} autocompleteSuggestion the particular
+ *     autocomplete suggestion we're in the process of displaying.
+ * @param {string} propertyName the particular property of the autocomplete
+ *     suggestion that should go in this cell.
+ * @return {HTMLTableCellElement} that contains the value within this
+ *     autocompleteSuggestion associated with propertyName.
+ */
+function createCellForPropertyAndRemoveProperty(
+    autocompleteSuggestion, propertyName) {
+  var cell = document.createElement('td');
+  if (propertyName in autocompleteSuggestion) {
+    if (propertyName == 'additionalInfo') {
+      // |additionalInfo| embeds a two-column table of provider-specific data
+      // within this cell. |additionalInfo| is an array of
+      // AutocompleteAdditionalInfo.
+      var additionalInfoTable = document.createElement('table');
+      for (var i = 0; i < autocompleteSuggestion[propertyName].length; i++) {
+        var additionalInfo = autocompleteSuggestion[propertyName][i];
+        var additionalInfoRow = document.createElement('tr');
+
+        // Set the title (name of property) cell text.
+        var propertyCell = document.createElement('td');
+        propertyCell.textContent = additionalInfo.key + ':';
+        propertyCell.className = 'additional-info-property';
+        additionalInfoRow.appendChild(propertyCell);
+
+        // Set the value of the property cell text.
+        var valueCell = document.createElement('td');
+        valueCell.textContent = additionalInfo.value;
+        valueCell.className = 'additional-info-value';
+        additionalInfoRow.appendChild(valueCell);
+
+        additionalInfoTable.appendChild(additionalInfoRow);
+      }
+      cell.appendChild(additionalInfoTable);
+    } else if (typeof autocompleteSuggestion[propertyName] == 'boolean') {
+      // If this is a boolean, display a checkmark or an X instead of
+      // the strings true or false.
+      if (autocompleteSuggestion[propertyName]) {
+        cell.className = 'check-mark';
+        cell.textContent = '✔';
       } else {
-        var text = String(autocompleteSuggestion[propertyName]);
-        // If it's a URL wrap it in an href.
-        var re = /^(http|https|ftp|chrome|file):\/\//;
-        if (re.test(text)) {
-          var aCell = document.createElement('a');
-          aCell.textContent = text;
-          aCell.href = text;
-          cell.appendChild(aCell);
-        } else {
-          // All other data types (integer, strings, etc.) display their
-          // normal toString() output.
-          cell.textContent = autocompleteSuggestion[propertyName];
-        }
+        cell.className = 'x-mark';
+        cell.textContent = '✗';
       }
-    }  // else: if propertyName is undefined, we leave the cell blank
-    return cell;
-  }
-
-  /**
-   * Appends some human-readable information about the provided
-   * autocomplete result to the HTML node with id omnibox-debug-text.
-   * The current human-readable form is a few lines about general
-   * autocomplete result statistics followed by a table with one line
-   * for each autocomplete match.  The input parameter is an OmniboxResultMojo.
-   */
-  function addResultToOutput(result) {
-    var output = $('omnibox-debug-text');
-    var inDetailedMode = $('show-details').checked;
-    var showIncompleteResults = $('show-incomplete-results').checked;
-    var showPerProviderResults = $('show-all-providers').checked;
-
-    // Always output cursor position.
-    var p = document.createElement('p');
-    p.textContent = 'cursor position = ' + cursorPositionUsed;
-    output.appendChild(p);
-
-    // Output the result-level features in detailed mode and in
-    // show incomplete results mode.  We do the latter because without
-    // these result-level features, one can't make sense of each
-    // batch of results.
-    if (inDetailedMode || showIncompleteResults) {
-      var p1 = document.createElement('p');
-      p1.textContent = 'elapsed time = ' +
-          result.time_since_omnibox_started_ms + 'ms';
-      output.appendChild(p1);
-      var p2 = document.createElement('p');
-      p2.textContent = 'all providers done = ' + result.done;
-      output.appendChild(p2);
-      var p3 = document.createElement('p');
-      p3.textContent = 'host = ' + result.host;
-      if ('is_typed_host' in result) {
-        // Only output the is_typed_host information if available.  (It may
-        // be missing if the history database lookup failed.)
-        p3.textContent = p3.textContent + ' has is_typed_host = ' +
-            result.is_typed_host;
+    } else {
+      var text = String(autocompleteSuggestion[propertyName]);
+      // If it's a URL wrap it in an href.
+      var re = /^(http|https|ftp|chrome|file):\/\//;
+      if (re.test(text)) {
+        var aCell = document.createElement('a');
+        aCell.textContent = text;
+        aCell.href = text;
+        cell.appendChild(aCell);
+      } else {
+        // All other data types (integer, strings, etc.) display their
+        // normal toString() output.
+        cell.textContent = autocompleteSuggestion[propertyName];
       }
-      output.appendChild(p3);
     }
+  }  // else: if propertyName is undefined, we leave the cell blank
+  return cell;
+}
 
-    // Combined results go after the lines below.
-    var group = document.createElement('a');
-    group.className = 'group-separator';
-    group.textContent = 'Combined results.';
-    output.appendChild(group);
+/**
+ * Appends some human-readable information about the provided
+ * autocomplete result to the HTML node with id omnibox-debug-text.
+ * The current human-readable form is a few lines about general
+ * autocomplete result statistics followed by a table with one line
+ * for each autocomplete match.  The input parameter is an OmniboxResultMojo.
+ */
+function addResultToOutput(result) {
+  var output = $('omnibox-debug-text');
+  var inDetailedMode = $('show-details').checked;
+  var showIncompleteResults = $('show-incomplete-results').checked;
+  var showPerProviderResults = $('show-all-providers').checked;
+
+  // Always output cursor position.
+  var p = document.createElement('p');
+  p.textContent = 'cursor position = ' + cursorPositionUsed;
+  output.appendChild(p);
+
+  // Output the result-level features in detailed mode and in
+  // show incomplete results mode.  We do the latter because without
+  // these result-level features, one can't make sense of each
+  // batch of results.
+  if (inDetailedMode || showIncompleteResults) {
+    var p1 = document.createElement('p');
+    p1.textContent =
+        'elapsed time = ' + result.timeSinceOmniboxStartedMs + 'ms';
+    output.appendChild(p1);
+    var p2 = document.createElement('p');
+    p2.textContent = 'all providers done = ' + result.done;
+    output.appendChild(p2);
+    var p3 = document.createElement('p');
+    p3.textContent = 'host = ' + result.host;
+    if ('isTypedHost' in result) {
+      // Only output the isTypedHost information if available.  (It may
+      // be missing if the history database lookup failed.)
+      p3.textContent =
+          p3.textContent + ' has isTypedHost = ' + result.isTypedHost;
+    }
+    output.appendChild(p3);
+  }
 
-    // Add combined/merged result table.
-    var p = document.createElement('p');
-    p.appendChild(addResultTableToOutput(result.combined_results));
-    output.appendChild(p);
+  // Combined results go after the lines below.
+  var group = document.createElement('a');
+  group.className = 'group-separator';
+  group.textContent = 'Combined results.';
+  output.appendChild(group);
 
-    // Move forward only if you want to display per provider results.
-    if (!showPerProviderResults) {
-      return;
-    }
+  // Add combined/merged result table.
+  var p = document.createElement('p');
+  p.appendChild(addResultTableToOutput(result.combinedResults));
+  output.appendChild(p);
 
-    // Individual results go after the lines below.
-    var group = document.createElement('a');
-    group.className = 'group-separator';
-    group.textContent = 'Results for individual providers.';
-    output.appendChild(group);
+  // Move forward only if you want to display per provider results.
+  if (!showPerProviderResults) {
+    return;
+  }
 
-    // Add the per-provider result tables with labels. We do not append the
-    // combined/merged result table since we already have the per provider
-    // results.
-    for (var i = 0; i < result.results_by_provider.length; i++) {
-      var providerResults = result.results_by_provider[i];
-      // If we have no results we do not display anything.
-      if (providerResults.results.length == 0) {
-        continue;
-      }
-      var p = document.createElement('p');
-      p.appendChild(addResultTableToOutput(providerResults.results));
-      output.appendChild(p);
+  // Individual results go after the lines below.
+  var group = document.createElement('a');
+  group.className = 'group-separator';
+  group.textContent = 'Results for individual providers.';
+  output.appendChild(group);
+
+  // Add the per-provider result tables with labels. We do not append the
+  // combined/merged result table since we already have the per provider
+  // results.
+  for (var i = 0; i < result.resultsByProvider.length; i++) {
+    var providerResults = result.resultsByProvider[i];
+    // If we have no results we do not display anything.
+    if (providerResults.results.length == 0) {
+      continue;
     }
+    var p = document.createElement('p');
+    p.appendChild(addResultTableToOutput(providerResults.results));
+    output.appendChild(p);
   }
+}
 
-  /**
-   * @param {Object} result an array of AutocompleteMatchMojos.
-   * @return {HTMLTableCellElement} that is a user-readable HTML
-   *     representation of this object.
-   */
-  function addResultTableToOutput(result) {
-    var inDetailedMode = $('show-details').checked;
-    // Create a table to hold all the autocomplete items.
-    var table = document.createElement('table');
-    table.className = 'autocomplete-results-table';
-    table.appendChild(createAutocompleteResultTableHeader());
-    // Loop over every autocomplete item and add it as a row in the table.
-    for (var i = 0; i < result.length; i++) {
-      var autocompleteSuggestion = result[i];
-      var row = document.createElement('tr');
-      // Loop over all the columns/properties and output either them
-      // all (if we're in detailed mode) or only the ones marked displayAlways.
-      // Keep track of which properties we displayed.
-      var displayedProperties = {};
-      for (var j = 0; j < PROPERTY_OUTPUT_ORDER.length; j++) {
-        if (inDetailedMode || PROPERTY_OUTPUT_ORDER[j].displayAlways) {
-          row.appendChild(createCellForPropertyAndRemoveProperty(
-              autocompleteSuggestion, PROPERTY_OUTPUT_ORDER[j].propertyName));
-          displayedProperties[PROPERTY_OUTPUT_ORDER[j].propertyName] = true;
-        }
+/**
+ * @param {Object} result an array of AutocompleteMatchMojos.
+ * @return {HTMLTableCellElement} that is a user-readable HTML
+ *     representation of this object.
+ */
+function addResultTableToOutput(result) {
+  var inDetailedMode = $('show-details').checked;
+  // Create a table to hold all the autocomplete items.
+  var table = document.createElement('table');
+  table.className = 'autocomplete-results-table';
+  table.appendChild(createAutocompleteResultTableHeader());
+  // Loop over every autocomplete item and add it as a row in the table.
+  for (var i = 0; i < result.length; i++) {
+    var autocompleteSuggestion = result[i];
+    var row = document.createElement('tr');
+    // Loop over all the columns/properties and output either them
+    // all (if we're in detailed mode) or only the ones marked displayAlways.
+    // Keep track of which properties we displayed.
+    var displayedProperties = {};
+    for (var j = 0; j < PROPERTY_OUTPUT_ORDER.length; j++) {
+      if (inDetailedMode || PROPERTY_OUTPUT_ORDER[j].displayAlways) {
+        row.appendChild(createCellForPropertyAndRemoveProperty(
+            autocompleteSuggestion, PROPERTY_OUTPUT_ORDER[j].propertyName));
+        displayedProperties[PROPERTY_OUTPUT_ORDER[j].propertyName] = true;
       }
+    }
 
-      // Now, if we're in detailed mode, add all the properties that
-      // haven't already been output.  (We know which properties have
-      // already been output because we delete the property when we output
-      // it.  The only way we have properties left at this point if
-      // we're in detailed mode and we're getting back properties
-      // not listed in PROPERTY_OUTPUT_ORDER.  Perhaps someone added
-      // something to the C++ code but didn't bother to update this
-      // Javascript?  In any case, we want to display them.)
-      if (inDetailedMode) {
-        for (var key in autocompleteSuggestion) {
-          if (!displayedProperties[key] &&
-              typeof autocompleteSuggestion[key] != 'function') {
-            var cell = document.createElement('td');
-            cell.textContent = key + '=' + autocompleteSuggestion[key];
-            row.appendChild(cell);
-          }
+    // Now, if we're in detailed mode, add all the properties that
+    // haven't already been output.  (We know which properties have
+    // already been output because we delete the property when we output
+    // it.  The only way we have properties left at this point if
+    // we're in detailed mode and we're getting back properties
+    // not listed in PROPERTY_OUTPUT_ORDER.  Perhaps someone added
+    // something to the C++ code but didn't bother to update this
+    // Javascript?  In any case, we want to display them.)
+    if (inDetailedMode) {
+      for (var key in autocompleteSuggestion) {
+        if (!displayedProperties[key] &&
+            typeof autocompleteSuggestion[key] != 'function') {
+          var cell = document.createElement('td');
+          cell.textContent = key + '=' + autocompleteSuggestion[key];
+          row.appendChild(cell);
         }
       }
-
-      table.appendChild(row);
     }
-    return table;
-  }
 
-  /* Repaints the page based on the contents of the array
-   * progressiveAutocompleteResults, which represents consecutive
-   * autocomplete results.  We only display the last (most recent)
-   * entry unless we're asked to display incomplete results.  For an
-   * example of the output, play with chrome://omnibox/
-   */
-  function refresh() {
-    // Erase whatever is currently being displayed.
-    var output = $('omnibox-debug-text');
-    output.innerHTML = '';
-
-    if (progressiveAutocompleteResults.length > 0) {  // if we have results
-      // Display the results.
-      var showIncompleteResults = $('show-incomplete-results').checked;
-      var startIndex = showIncompleteResults ? 0 :
-          progressiveAutocompleteResults.length - 1;
-      for (var i = startIndex; i < progressiveAutocompleteResults.length; i++) {
-        addResultToOutput(progressiveAutocompleteResults[i]);
-      }
-    }
+    table.appendChild(row);
   }
+  return table;
+}
+
+/* Repaints the page based on the contents of the array
+ * progressiveAutocompleteResults, which represents consecutive
+ * autocomplete results.  We only display the last (most recent)
+ * entry unless we're asked to display incomplete results.  For an
+ * example of the output, play with chrome://omnibox/
+ */
+function refresh() {
+  // Erase whatever is currently being displayed.
+  var output = $('omnibox-debug-text');
+  output.innerHTML = '';
 
-  // NOTE: Need to keep a global reference to the |pageImpl| such that it is not
-  // garbage collected, which causes the pipe to close and future calls from C++
-  // to JS to get dropped.
-  var pageImpl = null;
-  var browserProxy = null;
-
-  function initializeProxies() {
-    return importModules([
-      'mojo/public/js/bindings',
-      'chrome/browser/ui/webui/omnibox/omnibox.mojom',
-      'content/public/renderer/frame_interfaces',
-    ]).then(function(modules) {
-      var bindings = modules[0];
-      var mojom = modules[1];
-      var frameInterfaces = modules[2];
-
-      browserProxy = new mojom.OmniboxPageHandlerPtr(
-          frameInterfaces.getInterface(mojom.OmniboxPageHandler.name));
-
-      /** @constructor */
-      var OmniboxPageImpl = function() {
-        this.binding = new bindings.Binding(mojom.OmniboxPage, this);
-      };
-
-      OmniboxPageImpl.prototype = {
-        /** @override */
-        handleNewAutocompleteResult: function(result) {
-          progressiveAutocompleteResults.push(result);
-          refresh();
-        },
-      };
-
-      pageImpl = new OmniboxPageImpl();
-      browserProxy.setClientPage(pageImpl.binding.createInterfacePtrAndBind());
-    });
+  if (progressiveAutocompleteResults.length > 0) {  // if we have results
+    // Display the results.
+    var showIncompleteResults = $('show-incomplete-results').checked;
+    var startIndex =
+        showIncompleteResults ? 0 : progressiveAutocompleteResults.length - 1;
+    for (var i = startIndex; i < progressiveAutocompleteResults.length; i++) {
+      addResultToOutput(progressiveAutocompleteResults[i]);
+    }
   }
-
-  document.addEventListener('DOMContentLoaded', function() {
-    return initializeProxies().then(function() {
-      initialize();
-    });
-  });
+}
+
+// NOTE: Need to keep a global reference to the |pageImpl| such that it is not
+// garbage collected, which causes the pipe to close and future calls from C++
+// to JS to get dropped.
+var pageImpl = null;
+var browserProxy = null;
+
+function initializeProxies() {
+  browserProxy = new mojom.OmniboxPageHandlerPtr;
+  Mojo.bindInterface(
+      mojom.OmniboxPageHandler.name, mojo.makeRequest(browserProxy).handle);
+
+  /** @constructor */
+  var OmniboxPageImpl = function(request) {
+    this.binding_ = new mojo.Binding(mojom.OmniboxPage, this, request);
+  };
+
+  OmniboxPageImpl.prototype = {
+    /** @override */
+    handleNewAutocompleteResult: function(result) {
+      progressiveAutocompleteResults.push(result);
+      refresh();
+    },
+  };
+
+  var client = new mojom.OmniboxPagePtr;
+  pageImpl = new OmniboxPageImpl(mojo.makeRequest(client));
+  browserProxy.setClientPage(client);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  initializeProxies();
+  initialize();
+});
 })();
diff --git a/chromium/chrome/browser/resources/options/autofill_edit_address_overlay.html b/chromium/chrome/browser/resources/options/autofill_edit_address_overlay.html
index 0deecad894d..980d9ba82a0 100644
--- a/chromium/chrome/browser/resources/options/autofill_edit_address_overlay.html
+++ b/chromium/chrome/browser/resources/options/autofill_edit_address_overlay.html
@@ -7,7 +7,7 @@
 
     <div class="settings-row">
       <label>
-        <div i18n-content="autofillCountryLabel"></div>
+        <div>$i18n{autofillCountryLabel}</div>
         <select class="country" field="country"></select>
       </label>
     </div>
@@ -15,14 +15,14 @@
     <div class="input-group settings-row">
       <div>
         <label>
-          <div i18n-content="autofillPhoneLabel"></div>
+          <div>$i18n{autofillPhoneLabel}</div>
           <input class="short" field="phone"></input>
         </label>
       </div>
 
       <div>
         <label>
-          <div i18n-content="autofillEmailLabel"></div>
+          <div>$i18n{autofillEmailLabel}</div>
           <input class="short" field="email"></input>
         </label>
       </div>
@@ -31,9 +31,12 @@
   </div>
 
   <div class="action-area button-strip">
-    <button id="autofill-edit-address-cancel-button" type="reset"
-        i18n-content="cancel"></button>
+    <button id="autofill-edit-address-cancel-button" type="reset">
+      $i18n{cancel}
+    </button>
     <button id="autofill-edit-address-apply-button" type="submit"
-        class="default-button" i18n-content="ok" disabled></button>
+        class="default-button" disabled>
+      $i18n{ok}
+    </button>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html b/chromium/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
index 3c5b07f5a57..9b2c5f8d6d0 100644
--- a/chromium/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
+++ b/chromium/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
@@ -3,18 +3,19 @@
   <h1 id="autofill-credit-card-title"></h1>
   <div class="content-area">
     <label class="settings-row">
-      <div i18n-content="nameOnCardLabel"></div>
+      <div>$i18n{nameOnCardLabel}</div>
       <input id="name-on-card" type="text">
     </label>
 
     <label class="settings-row">
-      <div i18n-content="creditCardNumberLabel"></div>
+      <div>$i18n{creditCardNumberLabel}</div>
       <input id="credit-card-number" type="text">
     </label>
 
     <div class="settings-row">
-      <div id="creditCardExpirationLabel"
-          i18n-content="creditCardExpirationDateLabel"></div>
+      <div id="creditCardExpirationLabel">
+        $i18n{creditCardExpirationDateLabel}
+      </div>
       <select id="expiration-month" aria-labelledby="creditCardExpirationLabel">
       </select>
       <select id="expiration-year" aria-labelledby="creditCardExpirationLabel">
@@ -23,9 +24,12 @@
   </div>
 
   <div class="action-area button-strip">
-    <button id="autofill-edit-credit-card-cancel-button" type="reset"
-        i18n-content="cancel"></button>
+    <button id="autofill-edit-credit-card-cancel-button" type="reset">
+      $i18n{cancel}
+    </button>
     <button id="autofill-edit-credit-card-apply-button" type="submit"
-        class="default-button" i18n-content="ok" disabled></button>
+        class="default-button" disabled>
+      $i18n{ok}
+    </button>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/autofill_options.html b/chromium/chrome/browser/resources/options/autofill_options.html
index ab3931bf41f..d820ebee144 100644
--- a/chromium/chrome/browser/resources/options/autofill_options.html
+++ b/chromium/chrome/browser/resources/options/autofill_options.html
@@ -1,18 +1,18 @@
 <div id="autofill-options" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="autofillOptionsPage"></h1>
+  <h1>$i18n{autofillOptionsPage}</h1>
   <div class="content-area">
     <div class="autofill-section-header">
-      <h3 i18n-content="autofillAddresses"></h3>
-      <button id="autofill-add-address" i18n-content="autofillAddAddress">
-      </button>
+      <h3>$i18n{autofillAddresses}</h3>
+      <button id="autofill-add-address">$i18n{autofillAddAddress}</button>
     </div>
     <div class="settings-list">
       <list id="address-list"></list>
     </div>
     <div class="autofill-section-header">
-      <h3 i18n-content="autofillCreditCards"></h3>
-      <button id="autofill-add-creditcard" i18n-content="autofillAddCreditCard">
+      <h3>$i18n{autofillCreditCards}</h3>
+      <button id="autofill-add-creditcard">
+        $i18n{autofillAddCreditCard}
       </button>
     </div>
     <div class="settings-list">
@@ -21,13 +21,13 @@
   </div>
 
   <div class="action-area">
-    <a id="autofill-help" target="_blank" i18n-values="href:helpUrl"
-        i18n-content="helpButton">
-    </a>
+    <a id="autofill-help" target="_blank"
+        href="$i18nRaw{helpUrl}">$i18n{helpButton}</a>
     <div class="spacer-div"></div>
     <div class="button-strip">
-      <button id="autofill-options-confirm" class="default-button"
-          i18n-content="done"></button>
+      <button id="autofill-options-confirm" class="default-button">
+        $i18n{done}
+      </button>
     </div>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/automatic_settings_reset_banner.html b/chromium/chrome/browser/resources/options/automatic_settings_reset_banner.html
index 4af723bdbc9..fcb16c40176 100644
--- a/chromium/chrome/browser/resources/options/automatic_settings_reset_banner.html
+++ b/chromium/chrome/browser/resources/options/automatic_settings_reset_banner.html
@@ -4,16 +4,16 @@
     <div class="badge"></div>
     <div class="text">
       <p>
-        <span i18n-values=".innerHTML:automaticSettingsResetBannerText">
-        </span>
+        <span>$i18nRaw{automaticSettingsResetBannerText}</span>
         <a id="automatic-settings-reset-learn-more" class="nowrap"
-           i18n-values="href:automaticSettingsResetLearnMoreUrl"
-           i18n-content="learnMore" target="_blank"></a>
+            href="$i18nRaw{automaticSettingsResetLearnMoreUrl}"
+            target="_blank">$i18n{learnMore}</a>
       </p>
     </div>
     <div class="button-area">
-      <button id="automatic-settings-reset-banner-activate-reset"
-          i18n-content="automaticSettingsResetBannerResetButtonText"></button>
+      <button id="automatic-settings-reset-banner-activate-reset">
+        $i18n{automaticSettingsResetBannerResetButtonText}
+      </button>
     </div>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/browser_options.html b/chromium/chrome/browser/resources/options/browser_options.html
index b5706ea2015..3d2ce964293 100644
--- a/chromium/chrome/browser/resources/options/browser_options.html
+++ b/chromium/chrome/browser/resources/options/browser_options.html
@@ -3,16 +3,16 @@
 </if>
 <div id="settings" class="page" hidden>
   <header>
-    <h1 i18n-content="settingsTitle"></h1>
+    <h1>$i18n{settingsTitle}</h1>
   </header>
   <include src="automatic_settings_reset_banner.html">
 <if expr="chromeos">
-  <link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
-  <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+  <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
+  <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
   <include src="secondary_user_banner.html">
   <section id="network-section-cros">
     <div id="network-section-header" class="section-header">
-      <h3 i18n-content="sectionTitleInternet"></h3>
+      <h3>$i18n{sectionTitleInternet}</h3>
       <span class="controlled-setting-indicator" plural></span>
     </div>
     <div id="network-settings">
@@ -22,7 +22,7 @@
           <input id="use-shared-proxies" type="checkbox"
               metric="Options_NetworkUseSharedProxies"
               pref="settings.use_shared_proxies">
-          <span i18n-content="useSharedProxies"></span>
+          <span>$i18n{useSharedProxies}</span>
         </label>
       </div>
       <div id="network-menus"></div>
@@ -34,29 +34,28 @@
   <include src="startup_section.html">
 </if>
   <section id="proxy-section" hidden>
-    <h3 i18n-content="sectionTitleProxy"></h3>
+    <h3>$i18n{sectionTitleProxy}</h3>
     <div id="proxy-section-content"></div>
   </section>
 
   <section id="appearance-section">
-    <h3 i18n-content="sectionTitleAppearance"></h3>
+    <h3>$i18n{sectionTitleAppearance}</h3>
     <div class="settings-row">
 <if expr="chromeos">
-      <button id="set-wallpaper" i18n-content="setWallpaper"
-          guest-visibility="disabled"></button>
+      <button id="set-wallpaper" guest-visibility="disabled">
+        $i18n{setWallpaper}
+      </button>
       <span id="wallpaper-indicator" class="controlled-setting-indicator">
       </span>
 </if>
 <if expr="not chromeos and is_posix and not is_macosx">
-      <button id="themes-gallery" i18n-content="themesGallery"></button>
-      <button id="themes-native-button"
-          i18n-content="themesNativeButton"></button>
-      <button id="themes-reset"
-          i18n-content="themesSetClassic"></button>
+      <button id="themes-gallery">$i18n{themesGallery}</button>
+      <button id="themes-native-button">$i18n{themesNativeButton}</button>
+      <button id="themes-reset">$i18n{themesSetClassic}</button>
 </if>
 <if expr="chromeos or is_win or is_macosx">
-      <button id="themes-gallery" i18n-content="themesGallery"></button>
-      <button id="themes-reset" i18n-content="themesReset"></button>
+      <button id="themes-gallery">$i18n{themesGallery}</button>
+      <button id="themes-reset">$i18n{themesReset}</button>
 </if>
     </div>
     <div class="checkbox controlled-setting-with-label"
@@ -66,7 +65,7 @@
             pref="browser.show_home_button"
             metric="Options_Homepage_HomeButton">
         <span>
-          <span i18n-content="homePageShowHomeButton"></span>
+          <span>$i18n{homePageShowHomeButton}</span>
           <span class="controlled-setting-indicator"
               pref="browser.show_home_button"></span>
         </span>
@@ -74,11 +73,11 @@
     </div>
     <div id="change-home-page-section" hidden>
       <div id="change-home-page-section-container" guest-visibility="disabled">
-        <span id="home-page-ntp" class="home-page-label"
-            i18n-content="homePageNtp"></span>
+        <span id="home-page-ntp" class="home-page-label">
+          $i18n{homePageNtp}
+        </span>
         <span id="home-page-url" class="home-page-label"></span>
-        <a is="action-link" id="change-home-page" i18n-content="changeHomePage">
-        </a>
+        <a is="action-link" id="change-home-page">$i18n{changeHomePage}</a>
         <div id="extension-controlled-container"></div>
       </div>
     </div>
@@ -89,7 +88,7 @@
             pref="bookmark_bar.show_on_all_tabs"
             metric="Options_ShowBookmarksBar">
         <span>
-          <span i18n-content="toolbarShowBookmarksBar"></span>
+          <span>$i18n{toolbarShowBookmarksBar}</span>
           <span class="controlled-setting-indicator"
               pref="bookmark_bar.show_on_all_tabs"></span>
         </span>
@@ -100,77 +99,81 @@
         <input id="show-window-decorations" type="checkbox"
             pref="browser.custom_chrome_frame" metric="Options_CustomFrame"
             inverted_pref>
-        <span i18n-content="showWindowDecorations"></span>
+        <span>$i18n{showWindowDecorations}</span>
     </label></div>
 </if>
   </section>
 <if expr="chromeos">
   <section id="device-section">
-    <h3 i18n-content="sectionTitleDevice"></h3>
+    <h3>$i18n{sectionTitleDevice}</h3>
     <div>
-      <span i18n-content="deviceGroupDescription"></span>
+      <span>$i18n{deviceGroupDescription}</span>
       <div id="touchpad-settings" class="settings-row" hidden>
-        <span id="touchpad-speed-label" class="option-name"
-            i18n-content="touchpadSpeed"></span>
+        <span id="touchpad-speed-label" class="option-name">
+          $i18n{touchpadSpeed}
+        </span>
         <input id="touchpad-sensitivity-range" type="range" min="1" max="5"
             pref="settings.touchpad.sensitivity2" class="touch-slider"
             aria-labelledby="touchpad-speed-label">
       </div>
       <div id="mouse-settings" class="settings-row" hidden>
-        <span id="mouse-speed-label" class="option-name"
-            i18n-content="mouseSpeed"></span>
+        <span id="mouse-speed-label" class="option-name">
+          $i18n{mouseSpeed}
+        </span>
         <input id="mouse-sensitivity-range" type="range" min="1" max="5"
             pref="settings.mouse.sensitivity2" class="touch-slider"
             aria-labelledby="mouse-speed-label">
       </div>
-      <div id="no-pointing-devices" i18n-content="noPointingDevices"
-          class="settings-row" hidden>
+      <div id="no-pointing-devices" class="settings-row" hidden>
+        $i18n{noPointingDevices}
       </div>
       <div class="settings-row">
         <button id="pointer-settings-button" hidden>
         </button>
-        <button id="keyboard-settings-button"
-            i18n-content="keyboardSettingsButtonTitle">
+        <button id="keyboard-settings-button">
+          $i18n{keyboardSettingsButtonTitle}
         </button>
         <span id="display-options-section">
-          <button id="display-options" i18n-content="displayOptions" disabled>
-          </button>
+          <button id="display-options" disabled>$i18n{displayOptions}</button>
         </span>
-        <button id="storage-manager-button"
-            i18n-content="storageManagerButtonTitle">
+        <button id="storage-manager-button">
+          $i18n{storageManagerButtonTitle}
         </button>
       </div>
       <div id="stylus-row" hidden>
-        <a is="action-link" id="stylus-settings-link"
-            i18n-content="stylusSettingsButtonTitle"></a>
+        <a is="action-link" id="stylus-settings-link">
+          $i18n{stylusSettingsButtonTitle}
+        </a>
       </div>
       <div id="power-row" hidden>
-        <a is="action-link" id="power-settings-link"
-            i18n-content="powerSettingsButton"></a>
+        <a is="action-link" id="power-settings-link">
+          $i18n{powerSettingsButton}
+        </a>
       </div>
     </div>
   </section>
 </if>
   <section id="search-section">
-    <h3 i18n-content="sectionTitleSearch"></h3>
+    <h3>$i18n{sectionTitleSearch}</h3>
       <div id="search-section-content">
-        <span id="default-search-engine-label"
-            i18n-values=".innerHTML:defaultSearchGroupLabel"></span>
+        <span id="default-search-engine-label">
+          $i18nRaw{defaultSearchGroupLabel}
+        </span>
         <div class="settings-row">
           <select id="default-search-engine" class="weakrtl"
               aria-labelledby="default-search-engine-label"></select>
           <span class="controlled-setting-indicator"
               pref="default_search_provider_data.template_url_data">
           </span>
-          <button id="manage-default-search-engines"
-              i18n-content="defaultSearchManageEngines">
+          <button id="manage-default-search-engines">
+            $i18n{defaultSearchManageEngines}
           </button>
         </div>
         <div id="google-now-launcher" hidden>
           <div class="checkbox">
             <label>
               <input pref="google_now_launcher.enabled" type="checkbox">
-              <span i18n-content="googleNowLauncherEnable"></span>
+              <span>$i18n{googleNowLauncherEnable}</span>
             </label>
           </div>
         </div>
@@ -179,20 +182,20 @@
             <label>
               <input id="hotword-always-on-search-checkbox"
                   pref="hotword.always_on_search_enabled" type="checkbox">
-              <span i18n-content="hotwordSearchEnable"></span>
+              <span>$i18n{hotwordSearchEnable}</span>
             </label>
             <a target="_blank" class="hotword-link"
-                i18n-content="learnMore"
-                i18n-values="href:hotwordLearnMoreURL">
+                href="$i18nRaw{hotwordLearnMoreURL}">
+              $i18n{learnMore}
             </a>
             <span id="hotword-always-on-search-setting-indicator"
                 pref="hotword.always_on_search_enabled" dialog-pref></span>
             <div>
-              <span class="setting-extra-description"
-                  i18n-content="hotwordAlwaysOnDesc">
+              <span class="setting-extra-description">
+                $i18n{hotwordAlwaysOnDesc}
               </span>
-              <a id="hotword-retrain-link" is="action-link"
-                  i18n-content="hotwordRetrainLink" hidden>
+              <a id="hotword-retrain-link" is="action-link" hidden>
+                $i18n{hotwordRetrainLink}
               </a>
             </div>
           </div>
@@ -202,17 +205,17 @@
             <label>
               <input id="hotword-no-dsp-search-checkbox"
                   pref="hotword.search_enabled_2" type="checkbox">
-              <span i18n-content="hotwordSearchEnable"></span>
+              <span>$i18n{hotwordSearchEnable}</span>
             </label>
             <a target="_blank" class="hotword-link"
-                i18n-content="learnMore"
-                i18n-values="href:hotwordLearnMoreURL">
+                href="$i18nRaw{hotwordLearnMoreURL}">
+              $i18n{learnMore}
             </a>
             <span id="hotword-no-dsp-search-setting-indicator"
                 pref="hotword.search_enabled_2" dialog-pref></span>
             <div>
-              <span class="setting-extra-description"
-                  i18n-content="hotwordNoDSPDesc">
+              <span class="setting-extra-description">
+                $i18n{hotwordNoDSPDesc}
               </span>
             </div>
           </div>
@@ -223,13 +226,13 @@
               <span id="audio-history-label"></span>
             </label>
             <a target="_blank" class="hotword-link"
-               i18n-content="hotwordAudioHistoryManage"
-               i18n-values="href:hotwordManageAudioHistoryURL">
+                href="$i18nRaw{hotwordManageAudioHistoryURL}">
+              $i18n{hotwordAudioHistoryManage}
             </a>
           </div>
           <div class="settings-row" id="audio-history-always-on-description">
-            <span class="setting-extra-description"
-                  i18n-content="hotwordAlwaysOnAudioHistoryDescription">
+            <span class="setting-extra-description">
+              $i18n{hotwordAlwaysOnAudioHistoryDescription}
             </span>
           </div>
         </div>
@@ -237,21 +240,23 @@
   </section>
 <if expr="chromeos">
   <section id="android-apps-section" hidden>
-    <h3 i18n-content="androidAppsTitle"></h3>
+    <h3>$i18n{androidAppsTitle}</h3>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input id="android-apps-enabled" pref="arc.enabled"
             metric="Options_AndroidApps" type="checkbox" dialog-pref>
         <span>
-          <span i18n-content="androidAppsEnabled"></span>
+          <span>$i18n{androidAppsEnabled}</span>
           <span class="controlled-setting-indicator"
                 pref="arc.enabled"></span>
         </span>
       </label>
-      <a target="_blank" i18n-content="learnMore"
-          href="http://support.google.com/chromebook?p=playapps"></a>
+      <a target="_blank" href="http://support.google.com/chromebook?p=playapps">
+        $i18n{learnMore}
+      </a>
     </div>
-    <div id="android-apps-settings" class="controlled-setting-with-label" hidden>
+    <div id="android-apps-settings" class="controlled-setting-with-label"
+        hidden>
       <label>
         <span id="android-apps-settings-label"></span>
       </label>
@@ -259,14 +264,14 @@
   </section>
 </if>
   <section id="sync-users-section" guest-visibility="hidden">
-    <h3 i18n-content="sectionTitleUsers"></h3>
+    <h3>$i18n{sectionTitleUsers}</h3>
 <if expr="chromeos">
     <include src="sync_section.html">
 </if>
     <div id="profiles-section" hidden>
       <list id="profiles-list" class="settings-list" hidden></list>
-      <div id="profiles-single-message" class="settings-row"
-          i18n-content="profilesSingleUser">
+      <div id="profiles-single-message" class="settings-row">
+        $i18n{profilesSingleUser}
       </div>
 <if expr="not chromeos">
       <div id="profiles-enable-guest" class="checkbox">
@@ -274,7 +279,7 @@
           <input pref="profile.browser_guest_enabled"
                  type="checkbox"
                  metric="Options_BrowserGuestEnabled">
-          <span i18n-content="profileBrowserGuestEnable"></span>
+          <span>$i18n{profileBrowserGuestEnable}</span>
         </label>
       </div>
       <div id="profiles-enable-add-person" class="checkbox">
@@ -282,33 +287,31 @@
           <input pref="profile.add_person_enabled"
                  type="checkbox"
                  metric="Options_AddPersonEnabled">
-          <span i18n-content="profileAddPersonEnable"></span>
+          <span>$i18n{profileAddPersonEnable}</span>
         </label>
       </div>
 </if>
       <div id="profiles-buttons">
-        <button id="profiles-create" i18n-content="profilesCreate"></button>
-        <button id="profiles-manage" i18n-content="profilesManage" disabled>
-        </button>
-        <button id="profiles-delete" i18n-content="profilesDelete"></button>
+        <button id="profiles-create">$i18n{profilesCreate}</button>
+        <button id="profiles-manage" disabled>$i18n{profilesManage}</button>
+        <button id="profiles-delete">$i18n{profilesDelete}</button>
 <if expr="not chromeos">
-        <button id="import-data" i18n-content="importData"></button>
+        <button id="import-data">$i18n{importData}</button>
 </if>
       </div>
     </div>
-    <div id="profiles-supervised-dashboard-tip"
-        i18n-values=".innerHTML:profilesSupervisedDashboardTip" hidden>
+    <div id="profiles-supervised-dashboard-tip" hidden>
+      $i18nRaw{profilesSupervisedDashboardTip}
     </div>
   </section>
 <if expr="not chromeos">
   <section id="set-default-browser-section">
-    <h3 i18n-content="sectionTitleDefaultBrowser"></h3>
+    <h3>$i18n{sectionTitleDefaultBrowser}</h3>
     <div>
-      <button id="set-as-default-browser"
-          i18n-content="defaultBrowserUseAsDefault" hidden>
+      <button id="set-as-default-browser" hidden>
+        $i18n{defaultBrowserUseAsDefault}
       </button>
-      <div id="default-browser-state" i18n-content="defaultBrowserUnknown">
-      </div>
+      <div id="default-browser-state">$i18n{defaultBrowserUnknown}</div>
     </div>
   </section>
 </if>  <!-- not chromeos -->
@@ -316,11 +319,12 @@
 <div id="advanced-settings-container">
 <if expr="chromeos">
   <section id="date-time-section">
-    <h3 i18n-content="datetimeTitle"></h3>
+    <h3>$i18n{datetimeTitle}</h3>
     <div class="option-control-table">
       <div guest-visibility="disabled">
-        <span id="timezone-value-label" class="option-name"
-            i18n-content="timezone"></span>
+        <span id="timezone-value-label" class="option-name">
+          $i18n{timezone}
+        </span>
         <div id="timezone-value">
           <select class="control"
               id="timezone-value-select"
@@ -336,36 +340,38 @@
             <input id="resolve-timezone-by-geolocation"
                 pref="settings.resolve_timezone_by_geolocation"
                 metric="Options_ResolveTimezoneByGeoLocation" type="checkbox">
-            <span i18n-content="resolveTimezoneByGeoLocation"></span>
+            <span>$i18n{resolveTimezoneByGeoLocation}</span>
           </label>
         </div>
         <label>
           <input id="use-24hour-clock" pref="settings.clock.use_24hour_clock"
               metric="Options_Use24HourClockCheckbox" type="checkbox">
-          <span i18n-content="use24HourClock"></span>
+          <span>$i18n{use24HourClock}</span>
         </label>
       </div>
       <div id="set-time" class="settings-row" hidden>
-        <button id="set-time-button"
-            i18n-content="setTimeButton"></button>
+        <button id="set-time-button">$i18n{setTimeButton}</button>
       </div>
     </div>
   </section>
 </if>
   <section id="privacy-section">
-    <h3 i18n-content="advancedSectionTitlePrivacy"></h3>
+    <h3>$i18n{advancedSectionTitlePrivacy}</h3>
     <div>
       <div class="settings-row">
-        <button id="privacyContentSettingsButton"
-            i18n-content="privacyContentSettingsButton"></button>
-        <button id="privacyClearDataButton"
-            i18n-content="privacyClearDataButton"></button>
+        <button id="privacyContentSettingsButton">
+          $i18n{privacyContentSettingsButton}
+        </button>
+        <button id="privacyClearDataButton">
+          $i18n{privacyClearDataButton}
+        </button>
       </div>
       <p id="privacy-explanation" class="settings-row">
-        <span i18n-content="improveBrowsingExperience"></span>
-        <span i18n-content="disableWebServices"></span>
-        <a target="_blank" i18n-content="learnMore"
-            i18n-values="href:privacyLearnMoreURL"></a>
+        <span>$i18n{improveBrowsingExperience}</span>
+        <span>$i18n{disableWebServices}</span>
+        <a target="_blank" href="$i18nRaw{privacyLearnMoreURL}">
+          $i18n{learnMore}
+        </a>
       </p>
       <div class="checkbox controlled-setting-with-label">
         <label>
@@ -373,7 +379,7 @@
               pref="alternate_error_pages.enabled"
               metric="Options_LinkDoctorCheckbox" type="checkbox">
           <span>
-            <span i18n-content="linkDoctorPref"></span>
+            <span>$i18n{linkDoctorPref}</span>
             <span class="controlled-setting-indicator"
                 pref="alternate_error_pages.enabled"></span>
           </span>
@@ -385,7 +391,7 @@
           <input pref="search.suggest_enabled"
               metric="Options_UseSuggestCheckbox" type="checkbox">
           <span>
-            <span i18n-content="suggestPref"></span>
+            <span>$i18n{suggestPref}</span>
             <span class="controlled-setting-indicator"
                 pref="search.suggest_enabled"></span>
           </span>
@@ -397,7 +403,7 @@
             <input id="networkPredictionOptions"
                 metric="Options_DnsPrefetchCheckbox" type="checkbox">
             <span>
-              <span i18n-content="networkPredictionEnabledDescription"></span>
+              <span>$i18n{networkPredictionEnabledDescription}</span>
               <span class="controlled-setting-indicator"
                   pref="net.network_prediction_options"></span>
             </span>
@@ -411,7 +417,7 @@
               metric="Options_SafeBrowsingExtendedReportingCheckbox"
               type="checkbox">
           <span>
-            <span i18n-content="safeBrowsingEnableExtendedReporting"></span>
+            <span>$i18n{safeBrowsingEnableExtendedReporting}</span>
             <span class="controlled-setting-indicator"></span>
           </span>
         </label>
@@ -421,7 +427,7 @@
           <input pref="safebrowsing.enabled"
               metric="Options_SafeBrowsingCheckbox" type="checkbox">
           <span>
-            <span i18n-content="safeBrowsingEnableProtection"></span>
+            <span>$i18n{safeBrowsingEnableProtection}</span>
             <span class="controlled-setting-indicator"
                 pref="safebrowsing.enabled"></span>
           </span>
@@ -434,7 +440,7 @@
               metric="Options_SpellingServiceCheckbox"
               pref="spellcheck.use_spelling_service" dialog-pref>
           <span>
-            <span i18n-content="spellingPref"></span>
+            <span>$i18n{spellingPref}</span>
             <span id="spelling-enabled-indicator"
                 class="controlled-setting-indicator"
                 pref="spellcheck.use_spelling_service" dialog-pref>
@@ -447,7 +453,7 @@
         <label>
           <input id="metrics-reporting-enabled" type="checkbox">
           <span>
-            <span i18n-content="enableLogging"></span>
+            <span>$i18n{enableLogging}</span>
             <span id="metrics-reporting-disabled-icon"
                 class="controlled-setting-indicator"></span>
           </span>
@@ -465,7 +471,7 @@
         <label>
           <input id="do-not-track-enabled" pref="enable_do_not_track"
               metric="Options_DoNotTrackCheckbox" type="checkbox" dialog-pref>
-          <span i18n-content="doNotTrack"></span>
+          <span>$i18n{doNotTrack}</span>
         </label>
       </div>
 <if expr="chromeos">
@@ -474,14 +480,15 @@
           <input id="content-protection-attestation-enabled" type="checkbox"
               pref="cros.device.attestation_for_content_protection_enabled">
           <span>
-            <span i18n-content="enableContentProtectionAttestation"></span>
+            <span>$i18n{enableContentProtectionAttestation}</span>
             <span class="controlled-setting-indicator"
                 pref="cros.device.attestation_for_content_protection_enabled">
             </span>
           </span>
         </label>
-        <a target="_blank" i18n-content="learnMore"
-            i18n-values="href:contentProtectionAttestationLearnMoreURL">
+        <a target="_blank"
+            href="$i18nRaw{contentProtectionAttestationLearnMoreURL}">
+          $i18n{learnMore}
         </a>
       </div>
 </if>
@@ -491,7 +498,7 @@
             <input id="hotword-search-enable" pref="hotword.search_enabled_2"
                 metric="Options_HotwordCheckbox" type="checkbox" dialog-pref>
             <span>
-              <span i18n-values=".innerHTML:hotwordSearchEnable"></span>
+              <span>$i18nRaw{hotwordSearchEnable}</span>
               <span id="hotword-search-setting-indicator"
                   pref="hotword.search_enabled_2" dialog-pref></span>
             </span>
@@ -506,7 +513,7 @@
               metric="Options_WakeOnWifiSsid"
               pref="settings.internet.wake_on_wifi_darkconnect">
           <span>
-            <span i18n-content="wakeOnWifiLabel"></span>
+            <span>$i18n{wakeOnWifiLabel}</span>
             <span id="wake-on-wifi-indicator"
                 class="controlled-setting-indicator"
                 pref="settings.internet.wake_on_wifi_darkconnect"></span>
@@ -520,14 +527,14 @@
   <!-- By default, the bluetooth section is hidden.  It is only visible if a
        bluetooth adapter is discovered -->
   <section id="bluetooth-devices" hidden>
-    <h3 i18n-content="bluetooth"></h3>
+    <h3>$i18n{bluetooth}</h3>
     <div id="bluetooth-options-div">
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input type="checkbox" id="enable-bluetooth"
                  metric="Options_BluetoothEnabled">
           <span>
-            <span i18n-content="enableBluetooth"></span>
+            <span>$i18n{enableBluetooth}</span>
             <span id="bluetooth-controlled-setting-indicator"
                   class="controlled-setting-indicator"
                   pref="cros.device.allow_bluetooth"
@@ -540,32 +547,35 @@
         <list id="bluetooth-paired-devices-list"></list>
         <div id="bluetooth-paired-devices-list-empty-placeholder"
             class="bluetooth-empty-list-label" hidden>
-          <span i18n-content="bluetoothNoDevices"></span>
+          <span>$i18n{bluetoothNoDevices}</span>
         </div>
       </div>
       <div id="bluetooth-button-group">
-        <button id="bluetooth-add-device"
-            i18n-content="addBluetoothDevice" hidden></button>
-        <button id="bluetooth-reconnect-device"
-            i18n-content="bluetoothConnectDevice" disabled hidden></button>
+        <button id="bluetooth-add-device" hidden>
+          $i18n{addBluetoothDevice}
+        </button>
+        <button id="bluetooth-reconnect-device" disabled hidden>
+          $i18n{bluetoothConnectDevice}
+        </button>
       </div>
     </div>
   </section>
 </if>
   <section id="passwords-and-autofill-section">
-    <h3 i18n-content="passwordsAndAutofillGroupName"></h3>
+    <h3>$i18n{passwordsAndAutofillGroupName}</h3>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input id="autofill-enabled" pref="autofill.enabled"
             metric="Options_FormAutofill" type="checkbox">
         <span>
-          <span i18n-content="autofillEnabled"></span>
+          <span>$i18n{autofillEnabled}</span>
           <span class="controlled-setting-indicator" pref="autofill.enabled">
           </span>
         </span>
       </label>
-      <a is="action-link" id="autofill-settings"
-          i18n-content="manageAutofillSettings"></a>
+      <a is="action-link" id="autofill-settings">
+        $i18n{manageAutofillSettings}
+      </a>
     </div>
     <div class="checkbox controlled-setting-with-label">
       <label>
@@ -573,75 +583,67 @@
             pref="credentials_enable_service"
             metric="Options_PasswordManager" type="checkbox">
         <span>
-          <span i18n-content="passwordManagerEnabled"></span>
+          <span>$i18n{passwordManagerEnabled}</span>
           <span class="controlled-setting-indicator"
               pref="credentials_enable_service"></span>
         </span>
       </label>
-      <a is="action-link" id="manage-passwords" i18n-content="managePasswords">
-      </a>
+      <a is="action-link" id="manage-passwords">$i18n{managePasswords}</a>
     </div>
 <if expr="is_macosx">
-    <div id="mac-passwords-warning" i18n-content="macPasswordsWarning" hidden>
-    </div>
+    <div id="mac-passwords-warning" hidden>$i18n{macPasswordsWarning}</div>
 </if>
   </section>
   <section id="easy-unlock-section" guest-visibility="hidden" hidden>
-    <h3 i18n-content="easyUnlockSectionTitle"></h3>
+    <h3>$i18n{easyUnlockSectionTitle}</h3>
     <!-- Options shown when the user has not set up Easy Unlock -->
     <div id="easy-unlock-disabled" hidden>
       <div class="settings-row">
-        <span i18n-content="easyUnlockSetupIntro"></span>
-        <a target="_blank" i18n-content="learnMore"
-            i18n-values="href:easyUnlockLearnMoreURL"></a>
+        <span>$i18n{easyUnlockSetupIntro}</span>
+        <a target="_blank" href="$i18nRaw{easyUnlockLearnMoreURL}">
+          $i18n{learnMore}
+        </a>
       </div>
-      <button id="easy-unlock-setup-button"
-          i18n-content="easyUnlockSetupButton"></button>
+      <button id="easy-unlock-setup-button">
+        $i18n{easyUnlockSetupButton}
+      </button>
     </div>
     <!-- Options shown when the user has set up Easy Unlock -->
     <div id="easy-unlock-enabled" hidden>
       <div class="settings-row">
-        <span i18n-content="easyUnlockDescription"></span>
-        <a target="_blank" i18n-content="learnMore"
-            i18n-values="href:easyUnlockLearnMoreURL"></a>
-        <div id="easy-unlock-enable-proximity-detection" class="checkbox"
-            hidden>
-          <label>
-            <input type="checkbox"
-                metric="Options_EasyUnlockRequireProximity"
-                pref="easy_unlock.proximity_required">
-            <span i18n-content="easyUnlockRequireProximityLabel"></span>
-          </label>
-        </div>
+        <span>$i18n{easyUnlockDescription}</span>
+        <a target="_blank" href="$i18nRaw{easyUnlockLearnMoreURL}">
+          $i18n{learnMore}
+        </a>
       </div>
-      <button id="easy-unlock-turn-off-button"
-          i18n-content="easyUnlockTurnOffButton"></button>
+      <button id="easy-unlock-turn-off-button">
+        $i18n{easyUnlockTurnOffButton}
+      </button>
     </div>
   </section>
   <section id="web-content-section">
-    <h3 i18n-content="advancedSectionTitleContent"></h3>
+    <h3>$i18n{advancedSectionTitleContent}</h3>
     <div>
       <div class="settings-row">
         <label class="web-content-select-label">
-          <span i18n-content="defaultFontSizeLabel"></span>
+          <span>$i18n{defaultFontSizeLabel}</span>
           <select id="defaultFontSize">
-            <option value="9" i18n-content="fontSizeLabelVerySmall">
-            </option>
-            <option value="12" i18n-content="fontSizeLabelSmall"></option>
-            <option value="16" i18n-content="fontSizeLabelMedium"></option>
-            <option value="20" i18n-content="fontSizeLabelLarge"></option>
-            <option value="24" i18n-content="fontSizeLabelVeryLarge">
-            </option>
+            <option value="9">$i18n{fontSizeLabelVerySmall}</option>
+            <option value="12">$i18n{fontSizeLabelSmall}</option>
+            <option value="16">$i18n{fontSizeLabelMedium}</option>
+            <option value="20">$i18n{fontSizeLabelLarge}</option>
+            <option value="24">$i18n{fontSizeLabelVeryLarge}</option>
           </select>
         </label>
         <span id="font-size-indicator"
             class="controlled-setting-indicator"></span>
-        <button id="fontSettingsCustomizeFontsButton"
-            i18n-content="fontSettingsCustomizeFontsButton"></button>
+        <button id="fontSettingsCustomizeFontsButton">
+          $i18n{fontSettingsCustomizeFontsButton}
+        </button>
       </div>
       <div class="settings-row" guest-visibility="disabled">
         <label class="web-content-select-label">
-          <span i18n-content="defaultZoomFactorLabel"></span>
+          <span>$i18n{defaultZoomFactorLabel}</span>
           <select id="defaultZoomFactor" dataType="double"></select>
         </label>
       </div>
@@ -650,7 +652,7 @@
         <label>
           <input id="tabsToLinksPref" pref="webkit.webprefs.tabs_to_links"
               metric="Options_TabsToLinks" type="checkbox">
-          <span i18n-content="tabsToLinksPref"></span>
+          <span>$i18n{tabsToLinksPref}</span>
         </label>
       </div>
 </if>
@@ -658,57 +660,59 @@
   </section>
 <if expr="not chromeos">
   <section id="network-section">
-    <h3 i18n-content="advancedSectionTitleNetwork"></h3>
+    <h3>$i18n{advancedSectionTitleNetwork}</h3>
     <div>
-      <span id="proxiesLabel"
-            class="settings-row"
-            i18n-content="proxiesLabelSystem"></span>
+      <span id="proxiesLabel" class="settings-row">
+        $i18n{proxiesLabelSystem}
+      </span>
       <div class="settings-row">
-        <button id="proxiesConfigureButton"
-            i18n-content="proxiesConfigureButton"></button>
+        <button id="proxiesConfigureButton">
+          $i18n{proxiesConfigureButton}
+        </button>
         <span class="controlled-setting-indicator" pref="proxy" plural></span>
       </div>
     </div>
   </section>
 </if>
   <section id="languages-section">
-    <h3 i18n-content="advancedSectionTitleLanguages"></h3>
+    <h3>$i18n{advancedSectionTitleLanguages}</h3>
     <div class="settings-row">
-      <span i18n-content="languageSectionLabel"></span>
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:languagesLearnMoreURL"></a>
+      <span>$i18n{languageSectionLabel}</span>
+      <a target="_blank" href="$i18nRaw{languagesLearnMoreURL}">
+        $i18n{learnMore}
+      </a>
     </div>
     <div class="settings-row">
-      <button id="language-button"
-          i18n-content="languageAndSpellCheckSettingsButton"></button>
+      <button id="language-button">
+        $i18n{languageAndSpellCheckSettingsButton}
+      </button>
     </div>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input pref="translate.enabled"
             metric="Options_Translate" type="checkbox">
         <span>
-          <span i18n-content="translateEnableTranslate"></span>
+          <span>$i18n{translateEnableTranslate}</span>
           <span class="controlled-setting-indicator" pref="translate.enabled">
           </span>
         </span>
       </label>
-      <a is="action-link" id="manage-languages" i18n-content="manageLanguages">
-      </a>
+      <a is="action-link" id="manage-languages">$i18n{manageLanguages}</a>
     </div>
   </section>
   <section id="downloads-section">
-    <h3 i18n-content="downloadLocationGroupName"></h3>
+    <h3>$i18n{downloadLocationGroupName}</h3>
     <div>
       <div class="settings-row">
         <label>
-          <span id="download-location-label"
-              i18n-content="downloadLocationBrowseTitle">
+          <span id="download-location-label">
+            $i18n{downloadLocationBrowseTitle}
           </span>
           <input id="downloadLocationPath" class="weakrtl" type="text"
               size="36" readonly>
         </label>
-        <button id="downloadLocationChangeButton"
-            i18n-content="downloadLocationChangeButton">
+        <button id="downloadLocationChangeButton">
+          $i18n{downloadLocationChangeButton}
         </button>
         <span class="controlled-setting-indicator"
           pref="download.default_directory">
@@ -720,7 +724,7 @@
               pref="download.prompt_for_download"
               metric="Options_AskForSaveLocation">
           <span>
-            <span i18n-content="downloadLocationAskForSaveLocation"></span>
+            <span>$i18n{downloadLocationAskForSaveLocation}</span>
             <span class="controlled-setting-indicator"
                 pref="download.prompt_for_download"></span>
           </span>
@@ -734,7 +738,7 @@
               pref="gdata.disabled"
               metric="Options_DisableGData">
           <span>
-            <span i18n-content="disableGData"></span>
+            <span>$i18n{disableGData}</span>
             <span class="controlled-setting-indicator" pref="gdata.disabled">
             </span>
           </span>
@@ -743,53 +747,59 @@
 </if>
       <div id="auto-open-file-types-section" hidden>
         <div id="auto-open-file-types-container">
-          <div id="auto-open-file-types-label" class="settings-row"
-              i18n-content="autoOpenFileTypesInfo"></div>
+          <div id="auto-open-file-types-label" class="settings-row">
+            $i18n{autoOpenFileTypesInfo}
+          </div>
           <div class="settings-row">
-            <button id="autoOpenFileTypesResetToDefault"
-                i18n-content="autoOpenFileTypesResetToDefault"></button>
+            <button id="autoOpenFileTypesResetToDefault">
+              $i18n{autoOpenFileTypesResetToDefault}
+            </button>
             </div>
         </div>
       </div>
     </div>
   </section>
   <section id="certificates-section">
-      <h3 i18n-content="advancedSectionTitleCertificates"></h3>
+      <h3>$i18n{advancedSectionTitleCertificates}</h3>
       <div>
 <if expr="use_nss_certs or is_win or is_macosx">
         <div class="settings-row">
-          <button id="certificatesManageButton"
-              i18n-content="certificatesManageButton"></button>
+          <button id="certificatesManageButton">
+            $i18n{certificatesManageButton}
+          </button>
         </div>
 </if>
       </div>
   </section>
 <if expr="chromeos">
   <section id="cups-printers-section" hidden>
-    <h3 i18n-content="advancedSectionTitleCupsPrint"></h3>
+    <h3>$i18n{advancedSectionTitleCupsPrint}</h3>
     <div class="settings-row">
-      <span i18n-content="cupsPrintOptionLabel"></span>
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:cupsPrintLearnMoreURL">
+      <span>$i18n{cupsPrintOptionLabel}</span>
+      <a target="_blank" href="$i18nRaw{cupsPrintLearnMoreURL}">
+        $i18n{learnMore}
       </a>
     </div>
     <div class="settings-row">
-      <button id="cupsPrintersManageButton"
-          i18n-content="cupsPrintersManageButton"></button>
+      <button id="cupsPrintersManageButton">
+        $i18n{cupsPrintersManageButton}
+      </button>
     </div>
   </section>
 </if>
 <if expr="enable_service_discovery">
     <section id="cloudprint-options-mdns">
-      <h3 i18n-content="advancedSectionTitleCloudPrint"></h3>
+      <h3>$i18n{advancedSectionTitleCloudPrint}</h3>
       <div class="settings-row">
-        <span i18n-content="cloudPrintOptionLabel"></span>
-        <a target="_blank" i18n-content="learnMore"
-           i18n-values="href:cloudPrintLearnMoreURL"></a>
+        <span>$i18n{cloudPrintOptionLabel}</span>
+        <a target="_blank" href="$i18nRaw{cloudPrintLearnMoreURL}">
+          $i18n{learnMore}
+        </a>
       </div>
       <div class="settings-row">
-        <button id="cloudPrintDevicesPageButton"
-            i18n-content="cloudPrintDevicesPageButton"></button>
+        <button id="cloudPrintDevicesPageButton">
+          $i18n{cloudPrintDevicesPageButton}
+        </button>
       </div>
 
       <div class="settings-row checkbox controlled-setting-with-label"
@@ -800,7 +810,7 @@
               type="checkbox"
               metric="LocalDiscoveryNotificationsDisabled_Settings">
           <span>
-            <span i18n-content="cloudPrintEnableNotificationsLabel"></span>
+            <span>$i18n{cloudPrintEnableNotificationsLabel}</span>
             <span class="controlled-setting-indicator"
                   pref="local_discovery.notifications_enabled"></span>
           </span>
@@ -814,21 +824,23 @@
 </if>
 
 <section id="a11y-section">
-  <h3 i18n-content="accessibilityTitle"></h3>
+  <h3>$i18n{accessibilityTitle}</h3>
 
   <div>
     <a href="https://chrome.google.com/webstore/category/collection/accessibility"
-        id="accessibility-features" target="_blank"
-        i18n-content="accessibilityFeaturesLink"></a>
+        id="accessibility-features" target="_blank">
+      $i18n{accessibilityFeaturesLink}
+    </a>
   </div>
 
 <if expr="chromeos">
   <div class="option-control-table">
     <p id="accessibility-explanation" class="settings-row">
-      <span i18n-content="accessibilityExplanation"></span>
+      <span>$i18n{accessibilityExplanation}</span>
       <a id="accessibility-learn-more" target="_blank"
-          i18n-values="href:accessibilityLearnMoreURL"
-          i18n-content="learnMore"></a>
+          href="$i18nRaw{accessibilityLearnMoreURL}">
+        $i18n{learnMore}
+      </a>
     </p>
     <div class="option-name">
       <div class="checkbox controlled-setting-with-label">
@@ -837,7 +849,7 @@
               pref="settings.a11y.enable_menu" type="checkbox"
               metric="Options_AccessibilitySystemMenu">
           <span>
-            <span i18n-content="accessibilityAlwaysShowMenu"></span>
+            <span>$i18n{accessibilityAlwaysShowMenu}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.enable_menu"></span>
           </span>
@@ -851,7 +863,7 @@
               pref="settings.a11y.large_cursor_enabled" type="checkbox"
               metric="Options_AccessibilityLargeMouseCursor">
           <span>
-            <span i18n-content="accessibilityLargeCursor"></span>
+            <span>$i18n{accessibilityLargeCursor}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.large_cursor_enabled"></span>
           </span>
@@ -865,7 +877,7 @@
               pref="settings.a11y.high_contrast_enabled" type="checkbox"
               metric="Options_AccessibilityHighContrastMode">
           <span>
-            <span i18n-content="accessibilityHighContrast"></span>
+            <span>$i18n{accessibilityHighContrast}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.high_contrast_enabled"></span>
           </span>
@@ -879,7 +891,7 @@
               pref="settings.a11y.sticky_keys_enabled" type="checkbox"
               metric="Options_AccessibilityStickyKeys">
           <span>
-            <span i18n-content="accessibilityStickyKeys"></span>
+            <span>$i18n{accessibilityStickyKeys}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.sticky_keys_enabled"></span>
           </span>
@@ -893,16 +905,18 @@
               pref="settings.accessibility" type="checkbox"
               metric="Options_AccessibilitySpokenFeedback">
           <span>
-            <span i18n-content="accessibilitySpokenFeedback"></span>
+            <span>$i18n{accessibilitySpokenFeedback}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.accessibility"></span>
           </span>
         </label>
         <div id="accessibility-settings" hidden>
-          <button id="accessibility-settings-button"
-            i18n-content="accessibilitySettings"></button>
-          <button id="talkback-settings-button"
-            i18n-content="accessibilityTalkBackSettings"></button>
+          <button id="accessibility-settings-button">
+            $i18n{accessibilitySettings}
+          </button>
+          <button id="talkback-settings-button">
+            $i18n{accessibilityTalkBackSettings}
+          </button>
         </div>
       </div>
     </div>
@@ -914,7 +928,7 @@
               pref="settings.a11y.screen_magnifier" type="checkbox"
               metric="Options_AccessibilityScreenMagnifier">
           <span>
-            <span i18n-content="accessibilityScreenMagnifier"></span>
+            <span>$i18n{accessibilityScreenMagnifier}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.screen_magnifier"></span>
           </span>
@@ -929,7 +943,7 @@
               pref="settings.a11y.screen_magnifier_center_focus" type="checkbox"
               metric="Options_AccessibilityScreenMagnifierCenterFocus">
           <span>
-            <span i18n-content="accessibilityScreenMagnifierCenterFocus"></span>
+            <span>$i18n{accessibilityScreenMagnifierCenterFocus}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.screen_magnifier_center_focus"></span>
           </span>
@@ -942,7 +956,7 @@
           <input id="accessibility-tap-dragging-check"
               pref="settings.touchpad.enable_tap_dragging" type="checkbox"
               metric="Options_AccessibilityTapDragging">
-          <span i18n-content="accessibilityTapDragging"></span>
+          <span>$i18n{accessibilityTapDragging}</span>
         </label>
       </div>
     </div>
@@ -952,7 +966,7 @@
           <input id="accessibility-autoclick-check"
               pref="settings.a11y.autoclick" type="checkbox">
           <span>
-            <span i18n-content="accessibilityAutoclick"></span>
+            <span>$i18n{accessibilityAutoclick}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.autoclick"></span>
           </span>
@@ -960,26 +974,22 @@
       </div>
       <div class="checkbox">
         <!-- No whitespace between elements. -->
-        <input type="checkbox" class="spacer-checkbox"><span
-            id="accessibility-autoclick-label"
-            i18n-content="accessibilityAutoclickDropdown">
-        </span><select id="accessibility-autoclick-dropdown" class="control"
+        <input type="checkbox" class="spacer-checkbox">
+          <span id="accessibility-autoclick-label">
+            $i18n{accessibilityAutoclickDropdown}
+          </span>
+        <select id="accessibility-autoclick-dropdown" class="control"
             data-type="number"
             aria-labelledby="accessibility-autoclick-label"
             pref="settings.a11y.autoclick_delay_ms">
           <!-- i18n strings contain the autoclick duration; if the autoclick
                timing gets changed, then the i18n strings also needs to be
                updated. -->
-          <option value="600"
-              i18n-content="autoclickDelayExtremelyShort"></option>
-          <option value="800"
-              i18n-content="autoclickDelayVeryShort"></option>
-          <option value="1000" i18n-content="autoclickDelayShort">
-          </option>
-          <option value="2000" i18n-content="autoclickDelayLong">
-          </option>
-          <option value="4000"
-              i18n-content="autoclickDelayVeryLong"></option>
+          <option value="600">$i18n{autoclickDelayExtremelyShort}</option>
+          <option value="800">$i18n{autoclickDelayVeryShort}</option>
+          <option value="1000">$i18n{autoclickDelayShort}</option>
+          <option value="2000">$i18n{autoclickDelayLong}</option>
+          <option value="4000">$i18n{autoclickDelayVeryLong}</option>
         </select>
         <span class="controlled-setting-indicator"
             pref="settings.a11y.autoclick_delay_ms"></span>
@@ -991,7 +1001,7 @@
           <input pref="settings.a11y.virtual_keyboard" type="checkbox"
               metric="Options_AccessibilityOnScreenKeyboard">
           <span>
-            <span i18n-content="accessibilityVirtualKeyboard"></span>
+            <span>$i18n{accessibilityVirtualKeyboard}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.virtual_keyboard"></span>
           </span>
@@ -1004,7 +1014,7 @@
           <input pref="settings.a11y.mono_audio" type="checkbox"
               metric="Options_AccessibilityMonoAudio">
           <span>
-            <span i18n-content="accessibilityMonoAudio"></span>
+            <span>$i18n{accessibilityMonoAudio}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.mono_audio"></span>
           </span>
@@ -1017,7 +1027,7 @@
           <input pref="settings.a11y.caret_highlight" type="checkbox"
               metric="Options_AccessibilityCaretHighlight">
           <span>
-            <span i18n-content="accessibilityCaretHighlight"></span>
+            <span>$i18n{accessibilityCaretHighlight}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.caret_highlight"></span>
           </span>
@@ -1030,7 +1040,7 @@
           <input pref="settings.a11y.cursor_highlight" type="checkbox"
               metric="Options_AccessibilityCursorHighlight">
           <span>
-            <span i18n-content="accessibilityCursorHighlight"></span>
+            <span>$i18n{accessibilityCursorHighlight}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.cursor_highlight"></span>
           </span>
@@ -1043,7 +1053,7 @@
           <input pref="settings.a11y.focus_highlight" type="checkbox"
               metric="Options_AccessibilityFocusHighlight">
           <span>
-            <span i18n-content="accessibilityFocusHighlight"></span>
+            <span>$i18n{accessibilityFocusHighlight}</span>
             <span class="controlled-setting-indicator"
                 pref="settings.a11y.focus_highlight"></span>
           </span>
@@ -1057,7 +1067,7 @@
             <input pref="settings.a11y.select_to_speak" type="checkbox"
                 metric="Options_AccessibilitySelectToSpeak">
             <span>
-              <span i18n-content="accessibilitySelectToSpeak"></span>
+              <span>$i18n{accessibilitySelectToSpeak}</span>
               <span class="controlled-setting-indicator"
                   pref="settings.a11y.select_to_speak"></span>
             </span>
@@ -1070,7 +1080,7 @@
             <input pref="settings.a11y.switch_access" type="checkbox"
                 metric="Options_AccessibilitySwitchAccess">
             <span>
-              <span i18n-content="accessibilitySwitchAccess"></span>
+              <span>$i18n{accessibilitySwitchAccess}</span>
               <span class="controlled-setting-indicator"
                   pref="settings.a11y.switch_access"></span>
             </span>
@@ -1085,26 +1095,23 @@
 
 <if expr="chromeos">
   <section id="factory-reset-section" hidden>
-    <h3 i18n-content="factoryResetTitle"></h3>
+    <h3>$i18n{factoryResetTitle}</h3>
     <div>
-      <span class="settings-row" i18n-content="factoryResetDescription">
-      </span>
-      <button id="factory-reset-restart"
-          i18n-content="factoryResetRestart">
-      </button>
+      <span class="settings-row">$i18n{factoryResetDescription}</span>
+      <button id="factory-reset-restart">$i18n{factoryResetRestart}</button>
     </div>
   </section>
 </if>
 <if expr="not chromeos">
   <section id="system-section">
-    <h3 i18n-content="advancedSectionTitleSystem"></h3>
+    <h3>$i18n{advancedSectionTitleSystem}</h3>
 <if expr="not is_macosx">
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input pref="background_mode.enabled"
             type="checkbox">
         <span>
-          <span i18n-content="backgroundModeCheckbox"></span>
+          <span>$i18n{backgroundModeCheckbox}</span>
           <span class="controlled-setting-indicator"
               pref="background_mode.enabled"></span>
         </span>
@@ -1116,29 +1123,27 @@
         <input id="gpu-mode-checkbox"
             pref="hardware_acceleration_mode.enabled" type="checkbox">
         <span>
-          <span i18n-content="gpuModeCheckbox"></span>
+          <span>$i18n{gpuModeCheckbox}</span>
           <span class="controlled-setting-indicator"
               pref="hardware_acceleration_mode.enabled"></span>
         </span>
       </label>
-      <span id="gpu-mode-reset-restart"
-          i18n-values=".innerHTML:gpuModeResetRestart"></span>
+      <span id="gpu-mode-reset-restart">$i18nRaw{gpuModeResetRestart}</span>
     </div>
   </section>
 </if>
   <section id="reset-profile-settings-section">
-    <h3 i18n-content="resetProfileSettingsSectionTitle"></h3>
+    <h3>$i18n{resetProfileSettingsSectionTitle}</h3>
     <div>
-      <span class="settings-row" i18n-content="resetProfileSettingsDescription">
-      </span>
-      <button id="reset-profile-settings" i18n-content="resetProfileSettings">
-      </button>
+      <span class="settings-row">$i18n{resetProfileSettingsDescription}</span>
+      <button id="reset-profile-settings">$i18n{resetProfileSettings}</button>
     </div>
   </section>
   </div>  <!-- advanced-settings-container -->
   </div>  <!-- advanced-settings -->
   <footer id="advanced-settings-footer">
-    <a is="action-link" id="advanced-settings-expander"
-        i18n-content="showAdvancedSettings"></a>
+    <a is="action-link" id="advanced-settings-expander">
+      $i18n{showAdvancedSettings}
+    </a>
   </footer>
 </div>
diff --git a/chromium/chrome/browser/resources/options/browser_options.js b/chromium/chrome/browser/resources/options/browser_options.js
index 2266bdbe0b6..011ef0ce10d 100644
--- a/chromium/chrome/browser/resources/options/browser_options.js
+++ b/chromium/chrome/browser/resources/options/browser_options.js
@@ -661,8 +661,6 @@ cr.define('options', function() {
           PageManager.showPageByName('easyUnlockTurnOffOverlay');
         };
       }
-      $('easy-unlock-enable-proximity-detection').hidden =
-          !loadTimeData.getBoolean('easyUnlockProximityDetectionAllowed');
 
       // Web Content section.
       $('fontSettingsCustomizeFontsButton').onclick = function(event) {
@@ -724,12 +722,10 @@ cr.define('options', function() {
 
       // CUPS Print section (CrOS only).
       if (cr.isChromeOS) {
-        if (!loadTimeData.getBoolean('cupsPrintDisabled')) {
-          $('cups-printers-section').hidden = false;
-          $('cupsPrintersManageButton').onclick = function() {
-            chrome.send('showCupsPrintDevicesPage');
-          };
-        }
+        $('cups-printers-section').hidden = false;
+        $('cupsPrintersManageButton').onclick = function() {
+          chrome.send('showCupsPrintDevicesPage');
+        };
       }
 
       if (loadTimeData.getBoolean('cloudPrintShowMDnsOptions')) {
diff --git a/chromium/chrome/browser/resources/options/certificate_backup_overlay.html b/chromium/chrome/browser/resources/options/certificate_backup_overlay.html
index ded4f5e149b..92601efb5c8 100644
--- a/chromium/chrome/browser/resources/options/certificate_backup_overlay.html
+++ b/chromium/chrome/browser/resources/options/certificate_backup_overlay.html
@@ -1,19 +1,21 @@
 <div id="certificateBackupOverlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="certificateExportPasswordDescription"></h1>
+  <h1>$i18n{certificateExportPasswordDescription}</h1>
   <div class="content-area">
     <table>
       <tr>
-        <td id="certificate-backup-password-label"
-            i18n-content="certificatePasswordLabel"></td>
+        <td id="certificate-backup-password-label">
+          $i18n{certificatePasswordLabel}
+        </td>
         <td>
           <input id="certificateBackupPassword" type="password"
               aria-labelledby="certificate-backup-password-label">
         </td>
       </tr>
       <tr>
-        <td id="certificate-backup-password-2-label"
-            i18n-content="certificateConfirmPasswordLabel"></td>
+        <td id="certificate-backup-password-2-label">
+          $i18n{certificateConfirmPasswordLabel}
+        </td>
         <td>
           <input id="certificateBackupPassword2" type="password"
               aria-labelledby="certificate-backup-password-2-label">
@@ -21,15 +23,17 @@
       </tr>
     </table>
     <p>
-      <span i18n-content="certificateExportPasswordHelp"></span>
+      <span>$i18n{certificateExportPasswordHelp}</span>
     </p>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="certificateBackupCancelButton" type="reset"
-          i18n-content="cancel"></button>
+      <button id="certificateBackupCancelButton" type="reset">
+        $i18n{cancel}
+      </button>
       <button id="certificateBackupOkButton" class="default-button"
-          type="submit" i18n-content="ok" disabled>
+          type="submit" disabled>
+        $i18n{ok}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/certificate_edit_ca_trust_overlay.html b/chromium/chrome/browser/resources/options/certificate_edit_ca_trust_overlay.html
index 4dabea286a8..198002dd621 100644
--- a/chromium/chrome/browser/resources/options/certificate_edit_ca_trust_overlay.html
+++ b/chromium/chrome/browser/resources/options/certificate_edit_ca_trust_overlay.html
@@ -1,38 +1,40 @@
 <div id="certificateEditCaTrustOverlay" class="page" hidden>
-  <h1><span i18n-content="certificateEditCaTitle"></span></h1>
+  <h1><span>$i18n{certificateEditCaTitle}</span></h1>
   <div class="close-button"></div>
   <div class="content-area">
     <div>
       <span id="certificateEditCaTrustDescription"></span>
     </div>
     <section>
-      <h3><span i18n-content="certificateEditTrustLabel"></span></h3>
+      <h3><span>$i18n{certificateEditTrustLabel}</span></h3>
       <div class="checkbox">
         <label id="certificateCaTrustSSLLabel">
           <input id="certificateCaTrustSSLCheckbox" type="checkbox">
-          <span i18n-content="certificateCaTrustSSLLabel"></span>
+          <span>$i18n{certificateCaTrustSSLLabel}</span>
         </label>
       </div>
       <div class="checkbox">
         <label id="certificateCaTrustEmailLabel">
           <input id="certificateCaTrustEmailCheckbox" type="checkbox">
-          <span i18n-content="certificateCaTrustEmailLabel"></span>
+          <span>$i18n{certificateCaTrustEmailLabel}</span>
         </label>
       </div>
       <div class="checkbox">
         <label id="certificateCaTrustObjSignLabel">
           <input id="certificateCaTrustObjSignCheckbox" type="checkbox">
-          <span i18n-content="certificateCaTrustObjSignLabel"></span>
+          <span>$i18n{certificateCaTrustObjSignLabel}</span>
         </label>
       </div>
     </section>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="certificateEditCaTrustCancelButton" type="reset"
-          i18n-content="cancel"></button>
+      <button id="certificateEditCaTrustCancelButton" type="reset">
+        $i18n{cancel}
+      </button>
       <button id="certificateEditCaTrustOkButton" class="default-button"
-          type="submit" i18n-content="ok">
+          type="submit">
+        $i18n{ok}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/certificate_import_error_overlay.html b/chromium/chrome/browser/resources/options/certificate_import_error_overlay.html
index b36d4db0b83..c468b019878 100644
--- a/chromium/chrome/browser/resources/options/certificate_import_error_overlay.html
+++ b/chromium/chrome/browser/resources/options/certificate_import_error_overlay.html
@@ -8,7 +8,8 @@
   <div class="action-area">
     <div class="button-strip">
       <button id="certificateImportErrorOverlayOk" class="default-button"
-          type="submit" i18n-content="done">
+          type="submit">
+        $i18n{done}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/certificate_manager.html b/chromium/chrome/browser/resources/options/certificate_manager.html
index 30fe9dc620a..b619dd81421 100644
--- a/chromium/chrome/browser/resources/options/certificate_manager.html
+++ b/chromium/chrome/browser/resources/options/certificate_manager.html
@@ -1,28 +1,25 @@
 <div id="certificateManagerPage" class="page" hidden>
   <div class="close-button"></div>
-  <h1 id='cert-manager-header' i18n-content="certificateManagerPage"></h1>
+  <h1 id='cert-manager-header'>$i18n{certificateManagerPage}</h1>
   <div id="certificate-manager-content-area" class="content-area">
     <!-- Navigation tabs -->
     <div class="subpages-nav-tabs">
       <span id="personal-certs-nav-tab" class="tab"
           tab-contents="personalCertsTab">
-        <span class="tab-label" i18n-content="personalCertsTabTitle"></span>
-        <span class="active-tab-label" i18n-content="personalCertsTabTitle">
-        </span>
+        <span class="tab-label">$i18n{personalCertsTabTitle}</span>
+        <span class="active-tab-label">$i18n{personalCertsTabTitle}</span>
       </span>
       <span id="server-certs-nav-tab" class="tab" tab-contents="serverCertsTab">
-        <span class="tab-label" i18n-content="serverCertsTabTitle"></span>
-        <span class="active-tab-label" i18n-content="serverCertsTabTitle">
-        </span>
+        <span class="tab-label">$i18n{serverCertsTabTitle}</span>
+        <span class="active-tab-label">$i18n{serverCertsTabTitle}</span>
       </span>
       <span id="ca-certs-nav-tab" class="tab" tab-contents="caCertsTab">
-        <span class="tab-label" i18n-content="caCertsTabTitle"></span>
-        <span class="active-tab-label" i18n-content="caCertsTabTitle"></span>
+        <span class="tab-label">$i18n{caCertsTabTitle}</span>
+        <span class="active-tab-label">$i18n{caCertsTabTitle}</span>
       </span>
       <span id="other-certs-nav-tab" class="tab" tab-contents="otherCertsTab">
-        <span class="tab-label" i18n-content="otherCertsTabTitle"></span>
-        <span class="active-tab-label" i18n-content="otherCertsTabTitle">
-        </span>
+        <span class="tab-label">$i18n{otherCertsTabTitle}</span>
+        <span class="active-tab-label">$i18n{otherCertsTabTitle}</span>
       </span>
     </div>
     <!-- TODO(mattm): get rid of use of tables -->
@@ -30,7 +27,7 @@
     <div id="personalCertsTab" class="subpages-tab-contents">
       <table class="certificate-tree-table">
         <tr><td>
-          <span i18n-content="personalCertsTabDescription"></span>
+          <span>$i18n{personalCertsTabDescription}</span>
         </td></tr>
         <tr><td>
           <tree id="personalCertsTab-tree" class="certificate-tree"
@@ -38,22 +35,22 @@
           </tree>
         </td></tr>
         <tr><td>
-          <button id="personalCertsTab-view" i18n-content="view_certificate"
-              disabled>
+          <button id="personalCertsTab-view" disabled>
+            $i18n{view_certificate}
           </button>
-          <button id="personalCertsTab-import"
-              i18n-content="import_certificate" disabled>
+          <button id="personalCertsTab-import" disabled>
+            $i18n{import_certificate}
           </button>
 <if expr="chromeos">
-          <button id="personalCertsTab-import-and-bind"
-              i18n-content="importAndBindCertificate" disabled>
+          <button id="personalCertsTab-import-and-bind" disabled>
+            $i18n{importAndBindCertificate}
           </button>
 </if>
-          <button id="personalCertsTab-backup" i18n-content="export_certificate"
-              disabled>
+          <button id="personalCertsTab-backup" disabled>
+            $i18n{export_certificate}
           </button>
-          <button id="personalCertsTab-delete" i18n-content="delete_certificate"
-              disabled>
+          <button id="personalCertsTab-delete" disabled>
+            $i18n{delete_certificate}
           </button>
         </td></tr>
       </table>
@@ -61,7 +58,7 @@
     <div id="serverCertsTab" class="subpages-tab-contents">
       <table class="certificate-tree-table">
         <tr><td>
-          <span i18n-content="serverCertsTabDescription"></span>
+          <span>$i18n{serverCertsTabDescription}</span>
         </td></tr>
         <tr><td>
           <tree id="serverCertsTab-tree" class="certificate-tree"
@@ -69,17 +66,17 @@
           </tree>
         </td></tr>
         <tr><td>
-          <button id="serverCertsTab-view" i18n-content="view_certificate"
-              disabled>
+          <button id="serverCertsTab-view" disabled>
+            $i18n{view_certificate}
           </button>
-          <button id="serverCertsTab-import" i18n-content="import_certificate"
-              disabled>
+          <button id="serverCertsTab-import" disabled>
+            $i18n{import_certificate}
           </button>
-          <button id="serverCertsTab-export" i18n-content="export_certificate"
-              disabled>
+          <button id="serverCertsTab-export" disabled>
+            $i18n{export_certificate}
           </button>
-          <button id="serverCertsTab-delete" i18n-content="delete_certificate"
-              disabled>
+          <button id="serverCertsTab-delete" disabled>
+            $i18n{delete_certificate}
           </button>
         </td></tr>
       </table>
@@ -87,7 +84,7 @@
     <div id="caCertsTab" class="subpages-tab-contents">
       <table class="certificate-tree-table">
         <tr><td>
-          <span i18n-content="caCertsTabDescription"></span>
+          <span>$i18n{caCertsTabDescription}</span>
         </td></tr>
         <tr><td>
           <tree id="caCertsTab-tree" class="certificate-tree"
@@ -95,19 +92,20 @@
           </tree>
         </td></tr>
         <tr><td>
-          <button id="caCertsTab-view" i18n-content="view_certificate"
-              disabled>
+          <button id="caCertsTab-view" disabled>
+            $i18n{view_certificate}
           </button>
-          <button id="caCertsTab-edit" i18n-content="edit_certificate"
-              disabled>
+          <button id="caCertsTab-edit" disabled>
+            $i18n{edit_certificate}
           </button>
-          <button id="caCertsTab-import" i18n-content="import_certificate"
-              disabled></button>
-          <button id="caCertsTab-export" i18n-content="export_certificate"
-              disabled>
+          <button id="caCertsTab-import" disabled>
+            $i18n{import_certificate}
           </button>
-          <button id="caCertsTab-delete" i18n-content="delete_certificate"
-              disabled>
+          <button id="caCertsTab-export" disabled>
+            $i18n{export_certificate}
+          </button>
+          <button id="caCertsTab-delete" disabled>
+            $i18n{delete_certificate}
           </button>
         </td></tr>
       </table>
@@ -115,21 +113,21 @@
     <div id="otherCertsTab" class="subpages-tab-contents">
       <table class="certificate-tree-table">
         <tr><td>
-          <span i18n-content="otherCertsTabDescription"></span>
+          <span>$i18n{otherCertsTabDescription}</span>
         </td></tr>
         <tr><td>
           <tree id="otherCertsTab-tree" class="certificate-tree"
               icon-visibility="parent"></tree>
         </td></tr>
         <tr><td>
-          <button id="otherCertsTab-view" i18n-content="view_certificate"
-              disabled>
+          <button id="otherCertsTab-view" disabled>
+            $i18n{view_certificate}
           </button>
-          <button id="otherCertsTab-export" i18n-content="export_certificate"
-              disabled>
+          <button id="otherCertsTab-export" disabled>
+            $i18n{export_certificate}
           </button>
-          <button id="otherCertsTab-delete" i18n-content="delete_certificate"
-              disabled>
+          <button id="otherCertsTab-delete" disabled>
+            $i18n{delete_certificate}
           </button>
         </td></tr>
       </table>
@@ -137,8 +135,8 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="certificate-confirm" class="default-button"
-          i18n-content="done">
+      <button id="certificate-confirm" class="default-button">
+        $i18n{done}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/certificate_manager.js b/chromium/chrome/browser/resources/options/certificate_manager.js
index 8e9cad61158..14470082432 100644
--- a/chromium/chrome/browser/resources/options/certificate_manager.js
+++ b/chromium/chrome/browser/resources/options/certificate_manager.js
@@ -202,6 +202,13 @@ cr.define('options', function() {
       this.caTab = new CertificateManagerTab('caCertsTab', this.isKiosk_);
       this.otherTab = new CertificateManagerTab('otherCertsTab', this.isKiosk_);
 
+      if (this.isKiosk_) {
+        // No "Servers" and "Authorities" tab in kiosk mode.
+        // See http://crbug.com/719907 for details.
+        $('server-certs-nav-tab').hidden = true;
+        $('ca-certs-nav-tab').hidden = true;
+      }
+
       this.addEventListener('visibleChange', this.handleVisibleChange_);
 
       $('certificate-confirm').onclick = function() {
diff --git a/chromium/chrome/browser/resources/options/certificate_restore_overlay.html b/chromium/chrome/browser/resources/options/certificate_restore_overlay.html
index d68fafb4fee..f238cbca73b 100644
--- a/chromium/chrome/browser/resources/options/certificate_restore_overlay.html
+++ b/chromium/chrome/browser/resources/options/certificate_restore_overlay.html
@@ -1,18 +1,20 @@
 <div id="certificateRestoreOverlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="certificateRestorePasswordDescription"></h1>
+  <h1>$i18n{certificateRestorePasswordDescription}</h1>
   <div class="content-area">
     <label id="certificateRestorePasswordLabel">
-      <span i18n-content="certificatePasswordLabel"></span>
+      <span>$i18n{certificatePasswordLabel}</span>
       <input id="certificateRestorePassword" type="password">
     </label>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="certificateRestoreCancelButton" type="reset"
-          i18n-content="cancel"></button>
+      <button id="certificateRestoreCancelButton" type="reset">
+        $i18n{cancel}
+      </button>
       <button id="certificateRestoreOkButton" class="default-button"
-          type="submit" i18n-content="ok">
+          type="submit">
+        $i18n{ok}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/clear_browser_data_history_notice_overlay.html b/chromium/chrome/browser/resources/options/clear_browser_data_history_notice_overlay.html
index 5de4a326bf0..f77e4b55704 100644
--- a/chromium/chrome/browser/resources/options/clear_browser_data_history_notice_overlay.html
+++ b/chromium/chrome/browser/resources/options/clear_browser_data_history_notice_overlay.html
@@ -1,12 +1,12 @@
 <div id="clear-browser-data-history-notice" class="page" hidden>
-  <h1 i18n-content="clearBrowserDataHistoryNoticeTitle"></h1>
+  <h1>$i18n{clearBrowserDataHistoryNoticeTitle}</h1>
   <div class="content-area">
-    <p i18n-values=".innerHTML:clearBrowserDataHistoryNotice"></p>
+    <p>$i18nRaw{clearBrowserDataHistoryNotice}</p>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="clear-browser-data-history-notice-ok" class="default-button"
-          i18n-content="clearBrowserDataHistoryNoticeOk">
+      <button id="clear-browser-data-history-notice-ok" class="default-button">
+        $i18n{clearBrowserDataHistoryNoticeOk}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/clear_browser_data_overlay.html b/chromium/chrome/browser/resources/options/clear_browser_data_overlay.html
index a36ef9069db..ec5faefa27a 100644
--- a/chromium/chrome/browser/resources/options/clear_browser_data_overlay.html
+++ b/chromium/chrome/browser/resources/options/clear_browser_data_overlay.html
@@ -1,11 +1,11 @@
 <div id="clear-browser-data-overlay" class="page not-resizable" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="clearBrowserDataOverlay"></h1>
+  <h1>$i18n{clearBrowserDataOverlay}</h1>
   <!-- NOTE: Make sure there's not whitespace between <div></div> for
        #clear-browser-data-info-banner as it's styled with :empty. -->
   <div id="clear-browser-data-info-banner"></div>
   <div id="cbd-content-area" class="content-area">
-    <span i18n-content="clearBrowserDataLabel"></span>
+    <span>$i18n{clearBrowserDataLabel}</span>
     <select id="clear-browser-data-time-period"
         i18n-options="clearBrowserDataTimeList"
         pref="browser.clear_data.time_period"
@@ -18,7 +18,7 @@
               pref="browser.clear_data.browsing_history" type="checkbox"
               aria-controls="delete-browsing-history-counter">
           <span>
-            <span i18n-content="deleteBrowsingHistoryCheckbox"></span>
+            <span>$i18n{deleteBrowsingHistoryCheckbox}</span>
             <span class="controlled-setting-indicator"
                 pref="history.deleting_enabled">
             </span>
@@ -31,7 +31,7 @@
         <label>
           <input id="delete-download-history-checkbox"
               pref="browser.clear_data.download_history" type="checkbox">
-          <span i18n-content="deleteDownloadHistoryCheckbox"></span>
+          <span>$i18n{deleteDownloadHistoryCheckbox}</span>
           <span class="controlled-setting-indicator"
               pref="history.deleting_enabled">
           </span>
@@ -41,10 +41,12 @@
         <label>
           <input id="delete-cookies-checkbox"
               pref="browser.clear_data.cookies" type="checkbox">
-          <span i18n-content="deleteCookiesFlashCheckbox"
-              class="clear-plugin-lso-data-enabled"></span>
-          <span i18n-content="deleteCookiesCheckbox"
-              class="clear-plugin-lso-data-disabled"></span>
+          <span class="clear-plugin-lso-data-enabled">
+            $i18n{deleteCookiesFlashCheckbox}
+          </span>
+          <span class="clear-plugin-lso-data-disabled">
+            $i18n{deleteCookiesCheckbox}
+          </span>
         </label>
       </div>
       <div id="delete-cache-container" class="checkbox">
@@ -53,7 +55,7 @@
               pref="browser.clear_data.cache" type="checkbox"
               aria-controls="delete-cache-counter">
           <span>
-            <span i18n-content="deleteCacheCheckbox"></span>
+            <span>$i18n{deleteCacheCheckbox}</span>
             <span class="clear-browser-data-counter" role="note"
                 aria-live="polite" id="delete-cache-counter"></span>
           </span>
@@ -65,7 +67,7 @@
               pref="browser.clear_data.passwords" type="checkbox"
               aria-controls="delete-passwords-counter">
           <span>
-            <span i18n-content="deletePasswordsCheckbox"></span>
+            <span>$i18n{deletePasswordsCheckbox}</span>
             <span class="clear-browser-data-counter" role="note"
                 aria-live="polite" id="delete-passwords-counter"></span>
           </span>
@@ -77,7 +79,7 @@
               pref="browser.clear_data.form_data" type="checkbox"
               aria-controls="delete-form-data-counter">
           <span>
-            <span i18n-content="deleteFormDataCheckbox"></span>
+            <span>$i18n{deleteFormDataCheckbox}</span>
             <span class="clear-browser-data-counter" role="note"
                 aria-live="polite" id="delete-form-data-counter"></span>
           </span>
@@ -87,7 +89,7 @@
         <label>
           <input id="delete-hosted-apps-data-checkbox"
               pref="browser.clear_data.hosted_apps_data" type="checkbox">
-          <span i18n-content="deleteHostedAppsDataCheckbox"></span>
+          <span>$i18n{deleteHostedAppsDataCheckbox}</span>
         </label>
       </div>
       <div id="delete-media-licenses-container" class="checkbox">
@@ -96,7 +98,7 @@
               pref="browser.clear_data.media_licenses" type="checkbox"
               aria-controls="delete-media-licenses-counter">
           <span>
-            <span i18n-content="deleteMediaLicensesCheckbox"></span>
+            <span>$i18n{deleteMediaLicensesCheckbox}</span>
             <span class="clear-browser-data-counter" role="note"
                 aria-live="polite" id="delete-media-licenses-counter"></span>
           </span>
@@ -104,34 +106,33 @@
       </div>
     </div>
     <div id="flash-storage-settings" class="flash-plugin-area">
-      <a target="_blank" i18n-content="flashStorageSettings"
-          i18n-values="href:flashStorageUrl"></a>
+      <a target="_blank"
+          href="$i18nRaw{flashStorageUrl}">$i18n{flashStorageSettings}</a>
     </div>
   </div>
   <div class="action-area">
     <div class="hbox stretch">
-      <a id="clear-browser-data-old-learn-more-link" hidden
-          target="_blank" i18n-content="learnMore"
-          i18n-values="href:clearBrowsingDataLearnMoreUrl"></a>
+      <a id="clear-browser-data-old-learn-more-link" hidden target="_blank"
+          href="$i18nRaw{clearBrowsingDataLearnMoreUrl}">$i18n{learnMore}</a>
     </div>
     <div class="action-area-right">
       <div id="cbd-throbber" class="throbber"></div>
       <div class="button-strip">
-        <button id="clear-browser-data-dismiss" i18n-content="cancel"></button>
-        <button id="clear-browser-data-commit" class="default-button"
-            i18n-content="clearBrowserDataCommit">
+        <button id="clear-browser-data-dismiss">$i18n{cancel}</button>
+        <button id="clear-browser-data-commit" class="default-button">
+          $i18n{clearBrowserDataCommit}
         </button>
       </div>
     </div>
   </div>
   <div id="some-stuff-remains-footer" class="gray-bottom-bar">
-    <p id="clear-browser-data-history-footer"
-        i18n-values=".innerHTML:clearBrowserDataHistoryFooter" hidden></p>
+    <p id="clear-browser-data-history-footer" hidden>
+      $i18nRaw{clearBrowserDataHistoryFooter}
+    </p>
     <p id="clear-browser-data-general-footer">
       <span><!--This is filled by JavaScript--></span>
-      <a id="clear-browser-data-footer-learn-more-link" hidden
-          target="_blank" i18n-content="learnMore"
-          i18n-values="href:clearBrowsingDataLearnMoreUrl"></a>
+      <a id="clear-browser-data-footer-learn-more-link" hidden target="_blank"
+          href="$i18nRaw{clearBrowsingDataLearnMoreUrl}">$i18n{learnMore}</a>
     </p>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/compiled_resources2.gyp b/chromium/chrome/browser/resources/options/compiled_resources2.gyp
index cd965d9c6dc..50ff2da5f97 100644
--- a/chromium/chrome/browser/resources/options/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/options/compiled_resources2.gyp
@@ -18,7 +18,7 @@
           '<(DEPTH)/third_party/jstemplate/util.js',
           '<(DEPTH)/third_party/jstemplate/jsevalcontext.js',
           '<(DEPTH)/third_party/jstemplate/jstemplate.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_onc_types.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js',
           '<(DEPTH)/ui/webui/resources/js/action_link.js',
           '<(DEPTH)/ui/webui/resources/js/cr.js',
           '<(DEPTH)/ui/webui/resources/js/cr/event_target.js',
@@ -57,6 +57,7 @@
           '../chromeos/keyboard/keyboard_utils.js',
           '<(DEPTH)/ui/webui/resources/js/i18n_behavior.js',
           '<(DEPTH)/ui/webui/resources/js/web_ui_listener_behavior.js',
+          '../settings/page_visibility.js',
           '../settings/route.js',
           '../settings/people_page/easy_unlock_browser_proxy.js',
           '../settings/people_page/fingerprint_browser_proxy.js',
@@ -90,7 +91,7 @@
           '<(DEPTH)/third_party/closure_compiler/externs/networking_private.js',
           '<(DEPTH)/third_party/closure_compiler/externs/chrome_send.js',
           '<(DEPTH)/third_party/closure_compiler/externs/web_animations.js',
-          '<(DEPTH)/ui/webui/resources/cr_elements/network/cr_network_icon_externs.js',
+          '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon_externs.js',
           'options_bundle.js',
         ],
       },
diff --git a/chromium/chrome/browser/resources/options/content_settings.html b/chromium/chrome/browser/resources/options/content_settings.html
index c66fc23e19a..db5099486cf 100644
--- a/chromium/chrome/browser/resources/options/content_settings.html
+++ b/chromium/chrome/browser/resources/options/content_settings.html
@@ -1,16 +1,16 @@
 <div id="content-settings-page" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="contentSettingsPage"></h1>
+  <h1>$i18n{contentSettingsPage}</h1>
   <div class="content-area">
     <!-- Cookie filter tab contents -->
     <section>
-      <h3 i18n-content="cookiesTabLabel"></h3>
+      <h3>$i18n{cookiesTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="cookies" value="allow">
             <span>
-              <span i18n-content="cookiesAllow"></span>
+              <span>$i18n{cookiesAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="cookies" value="allow"></span>
             </span>
@@ -20,7 +20,7 @@
           <label>
             <input type="radio" name="cookies" value="session_only">
             <span>
-              <span i18n-content="cookiesSessionOnly"></span>
+              <span>$i18n{cookiesSessionOnly}</span>
               <span class="controlled-setting-indicator"
                   content-setting="cookies" value="session_only"></span>
             </span>
@@ -30,7 +30,7 @@
           <label>
             <input type="radio" name="cookies" value="block">
             <span>
-              <span i18n-content="cookiesBlock"></span>
+              <span>$i18n{cookiesBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="cookies" value="block"></span>
             </span>
@@ -40,28 +40,28 @@
           <label>
             <input pref="profile.block_third_party_cookies" type="checkbox">
             <span>
-              <span i18n-content="cookiesBlock3rdParty"></span>
+              <span>$i18n{cookiesBlock3rdParty}</span>
               <span class="controlled-setting-indicator"
                   pref="profile.block_third_party_cookies"></span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="cookies"
-              i18n-content="manageExceptions"></button>
-          <button id="show-cookies-button"
-              i18n-content="cookiesShowCookies"></button>
+          <button class="exceptions-list-button" contentType="cookies">
+            $i18n{manageExceptions}
+          </button>
+          <button id="show-cookies-button">$i18n{cookiesShowCookies}</button>
         </div>
      </div>
     </section>
     <!-- Image filter -->
     <section>
-      <h3 i18n-content="imagesTabLabel"></h3>
+      <h3>$i18n{imagesTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="images" value="allow">
             <span>
-              <span i18n-content="imagesAllow"></span>
+              <span>$i18n{imagesAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="images" value="allow"></span>
             </span>
@@ -71,27 +71,28 @@
           <label>
             <input type="radio" name="images" value="block">
             <span>
-              <span i18n-content="imagesBlock"></span>
+              <span>$i18n{imagesBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="images" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="images"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="images">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- JavaScript filter -->
     <section>
-      <h3 i18n-content="javascriptTabLabel"></h3>
+      <h3>$i18n{javascriptTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="javascript" value="allow">
             <span>
-              <span i18n-content="javascriptAllow"></span>
+              <span>$i18n{javascriptAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="javascript" value="allow"></span>
             </span>
@@ -101,52 +102,54 @@
           <label>
             <input type="radio" name="javascript" value="block">
             <span>
-              <span i18n-content="javascriptBlock"></span>
+              <span>$i18n{javascriptBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="javascript" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="javascript"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="javascript">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Handlers settings -->
     <section id="handlers-section">
-      <h3 i18n-content="handlersTabLabel"></h3>
+      <h3>$i18n{handlersTabLabel}</h3>
       <div>
         <div class="radio">
           <label>
             <input type="radio" name="handlers" value="allow"
                 class="handler-radio">
-            <span i18n-content="handlersAllow"></span>
+            <span>$i18n{handlersAllow}</span>
           </label>
         </div>
         <div class="radio">
           <label>
             <input type="radio" name="handlers" value="block"
                 class="handler-radio">
-            <span i18n-content="handlersBlock"></span>
+            <span>$i18n{handlersBlock}</span>
           </label>
         </div>
         <div class="settings-row">
-          <button id="manage-handlers-button" contentType="handlers"
-              i18n-content="manageHandlers"></button>
+          <button id="manage-handlers-button" contentType="handlers">
+            $i18n{manageHandlers}
+          </button>
         </div>
       </div>
     </section>
     <!-- Plugins filter -->
     <section>
-      <h3 i18n-content="pluginsTabLabel"></h3>
+      <h3>$i18n{pluginsTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input id="plugins-allow-radio" type="radio" name="plugins"
                    value="allow">
             <span>
-              <span i18n-content="pluginsAllow"></span>
+              <span>$i18n{pluginsAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="plugins" value="allow"></span>
             </span>
@@ -156,9 +159,10 @@
           <label>
             <input type="radio" name="plugins" value="detect_important_content">
             <span>
-              <span i18n-content="pluginsDetectImportantContent"></span>
+              <span>$i18n{pluginsDetectImportantContent}</span>
               <span class="controlled-setting-indicator"
-                  content-setting="plugins" value="detect_important_content"></span>
+                  content-setting="plugins" value="detect_important_content">
+              </span>
             </span>
           </label>
         </div>
@@ -166,27 +170,28 @@
           <label>
             <input type="radio" name="plugins" value="block">
             <span>
-              <span i18n-content="pluginsBlock"></span>
+              <span>$i18n{pluginsBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="plugins" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="plugins"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="plugins">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Pop-ups filter -->
     <section>
-      <h3 i18n-content="popupsTabLabel" class="content-settings-header"></h3>
+      <h3 class="content-settings-header">$i18n{popupsTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="popups" value="allow">
             <span>
-              <span i18n-content="popupsAllow"></span>
+              <span>$i18n{popupsAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="popups" value="allow"></span>
             </span>
@@ -196,27 +201,28 @@
           <label>
             <input type="radio" name="popups" value="block">
             <span>
-              <span i18n-content="popupsBlock"></span>
+              <span>$i18n{popupsBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="popups" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="popups"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="popups">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Location filter -->
     <section>
-      <h3 i18n-content="locationTabLabel"></h3>
+      <h3>$i18n{locationTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="location" value="allow">
             <span>
-              <span i18n-content="locationAllow"></span>
+              <span>$i18n{locationAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="location" value="allow"></span>
             </span>
@@ -226,7 +232,7 @@
           <label>
             <input type="radio" name="location" value="ask">
             <span>
-              <span i18n-content="locationAsk"></span>
+              <span>$i18n{locationAsk}</span>
               <span class="controlled-setting-indicator"
                   content-setting="location" value="ask"></span>
             </span>
@@ -237,7 +243,7 @@
             <input type="radio" name="location"
                 value="block">
             <span>
-              <span i18n-content="locationBlock"></span>
+              <span>$i18n{locationBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="location" value="block"></span>
             </span>
@@ -251,7 +257,7 @@
                 metric="Options_GoogleGeolocationAccessCheckbox"
                 type="checkbox">
             <span>
-              <span i18n-content="googleGeolocationAccessEnable"></span>
+              <span>$i18n{googleGeolocationAccessEnable}</span>
               <span class="controlled-setting-indicator"
                   pref="googlegeolocationaccess.enabled"></span>
             </span>
@@ -259,20 +265,21 @@
         </div>
 </if>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="location"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="location">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Notifications filter tab contents -->
     <section id="notifications-section">
-      <h3 i18n-content="notificationsTabLabel"></h3>
+      <h3>$i18n{notificationsTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="notifications" value="allow">
             <span>
-              <span i18n-content="notificationsAllow"></span>
+              <span>$i18n{notificationsAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="notifications" value="allow"></span>
             </span>
@@ -282,7 +289,7 @@
           <label>
             <input type="radio" name="notifications" value="ask">
             <span>
-              <span i18n-content="notificationsAsk"></span>
+              <span>$i18n{notificationsAsk}</span>
               <span class="controlled-setting-indicator"
                   content-setting="notifications" value="ask"></span>
             </span>
@@ -292,64 +299,65 @@
           <label>
             <input type="radio" name="notifications" value="block">
             <span>
-              <span i18n-content="notificationsBlock"></span>
+              <span>$i18n{notificationsBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="notifications" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="notifications"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="notifications">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Protected Content filter -->
     <section guest-visibility="disabled">
-      <h3 i18n-content="protectedContentTabLabel"
-          class="content-settings-header"></h3>
+      <h3 class="content-settings-header">$i18n{protectedContentTabLabel}</h3>
       <div>
         <div class="checkbox">
           <label>
             <input pref="webkit.webprefs.encrypted_media_enabled"
                 type="checkbox">
-            <span i18n-content="protectedContentEnableCheckbox"></span>
+            <span>$i18n{protectedContentEnableCheckbox}</span>
           </label>
         </div>
 <if expr="chromeos or is_win">
         <div class="settings-row">
-          <p i18n-content="protectedContentInfo"></p>
+          <p>$i18n{protectedContentInfo}</p>
         </div>
         <div class="checkbox">
           <label>
             <input pref="settings.privacy.drm_enabled" type="checkbox">
-            <span i18n-content="protectedContentEnableIdentifiersCheckbox">
-            </span>
+            <span>$i18n{protectedContentEnableIdentifiersCheckbox}</span>
           </label>
         </div>
 </if>
 <if expr="chromeos">
         <div class="settings-row">
           <button id="protected-content-exceptions"
-              class="exceptions-list-button" contentType="protectedContent"
-              i18n-content="manageExceptions"></button>
+              class="exceptions-list-button" contentType="protectedContent">
+            $i18n{manageExceptions}
+          </button>
         </div>
 </if>
       </div>
     </section>
     <!-- Microphone filter -->
     <section id="media-stream-mic">
-      <h3 i18n-content="mediaStreamMicTabLabel"></h3>
+      <h3>$i18n{mediaStreamMicTabLabel}</h3>
       <div>
-        <span id="media-select-mic-label"
-            i18n-content="mediaSelectMicLabel" hidden></span>
+        <span id="media-select-mic-label" hidden>
+          $i18n{mediaSelectMicLabel}
+        </span>
         <select id="media-select-mic" class="weakrtl media-device-control"
             aria-labelledby="media-select-mic-label"></select>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="media-stream-mic" value="ask">
             <span>
-              <span i18n-content="mediaStreamMicAsk"></span>
+              <span>$i18n{mediaStreamMicAsk}</span>
               <span class="controlled-setting-indicator"
                   content-setting="media-stream-mic" value="ask"></span>
             </span>
@@ -359,36 +367,39 @@
           <label>
             <input type="radio" name="media-stream-mic" value="block">
             <span>
-              <span i18n-content="mediaStreamMicBlock"></span>
+              <span>$i18n{mediaStreamMicBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="media-stream-mic" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="media-stream-mic"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="media-stream-mic">
+            $i18n{manageExceptions}
+          </button>
         </div>
         <div id="media-pepper-flash-default-mic" class="pepper-flash-settings">
-          <span i18n-content="mediaPepperFlashMicDefaultDivergedLabel"></span>
-          <a target="_blank" i18n-content="mediaPepperFlashChangeLink"
-              i18n-values="href:mediaPepperFlashGlobalPrivacyURL"></a>
+          <span>$i18n{mediaPepperFlashMicDefaultDivergedLabel}</span>
+          <a target="_blank" href="$i18nRaw{mediaPepperFlashGlobalPrivacyURL}">
+            $i18n{mediaPepperFlashChangeLink}
+          </a>
         </div>
       </div>
     </section>
     <!-- Camera filter -->
     <section id="media-stream-camera">
-      <h3 i18n-content="mediaStreamCameraTabLabel"></h3>
+      <h3>$i18n{mediaStreamCameraTabLabel}</h3>
       <div>
-        <span id="media-select-camera-label"
-            i18n-content="mediaSelectCameraLabel" hidden></span>
+        <span id="media-select-camera-label" hidden>
+          $i18n{mediaSelectCameraLabel}
+        </span>
         <select id="media-select-camera" class="weakrtl media-device-control"
             aria-labelledby="media-select-camera-label"></select>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="media-stream-camera" value="ask">
             <span>
-              <span i18n-content="mediaStreamCameraAsk"></span>
+              <span>$i18n{mediaStreamCameraAsk}</span>
               <span class="controlled-setting-indicator"
                   content-setting="media-stream-camera" value="ask"></span>
             </span>
@@ -398,7 +409,7 @@
           <label>
             <input type="radio" name="media-stream-camera" value="block">
             <span>
-              <span i18n-content="mediaStreamCameraBlock"></span>
+              <span>$i18n{mediaStreamCameraBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="media-stream-camera" value="block"></span>
             </span>
@@ -406,27 +417,28 @@
         </div>
         <div class="settings-row">
           <button class="exceptions-list-button"
-              contentType="media-stream-camera" i18n-content="manageExceptions">
+              contentType="media-stream-camera">
+            $i18n{manageExceptions}
           </button>
         </div>
         <div id="media-pepper-flash-default-camera"
             class="pepper-flash-settings">
-          <span i18n-content="mediaPepperFlashCameraDefaultDivergedLabel">
-          </span>
-          <a target="_blank" i18n-content="mediaPepperFlashChangeLink"
-              i18n-values="href:mediaPepperFlashGlobalPrivacyURL"></a>
+          <span>$i18n{mediaPepperFlashCameraDefaultDivergedLabel}</span>
+          <a target="_blank" href="$i18nRaw{mediaPepperFlashGlobalPrivacyURL}">
+            $i18n{mediaPepperFlashChangeLink}
+          </a>
         </div>
       </div>
     </section>
     <!-- PPAPI broker -->
     <section>
-      <h3 i18n-content="ppapiBrokerTabLabel"></h3>
+      <h3>$i18n{ppapiBrokerTabLabel}</h3>
       <div>
         <div class="radio">
           <label>
             <input type="radio" name="ppapi-broker" value="allow">
             <span>
-              <span i18n-content="ppapiBrokerAllow"></span>
+              <span>$i18n{ppapiBrokerAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="ppapi-broker" value="allow"></span>
             </span>
@@ -436,7 +448,7 @@
           <label>
             <input type="radio" name="ppapi-broker" value="ask">
             <span>
-              <span i18n-content="ppapiBrokerAsk"></span>
+              <span>$i18n{ppapiBrokerAsk}</span>
               <span class="controlled-setting-indicator"
                   content-setting="ppapi-broker" value="ask"></span>
             </span>
@@ -446,28 +458,29 @@
           <label>
             <input type="radio" name="ppapi-broker" value="block">
             <span>
-              <span i18n-content="ppapiBrokerBlock"></span>
+              <span>$i18n{ppapiBrokerBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="ppapi-broker" value="block"></span>
             </span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="ppapi-broker"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="ppapi-broker">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Automatic Downloads filter -->
     <section>
-      <h3 i18n-content="multipleAutomaticDownloadsTabLabel"></h3>
+      <h3>$i18n{multipleAutomaticDownloadsTabLabel}</h3>
       <div>
         <div class="radio controlled-setting-with-label">
           <label>
             <input type="radio" name="multiple-automatic-downloads"
                 value="allow">
             <span>
-              <span i18n-content="multipleAutomaticDownloadsAllow"></span>
+              <span>$i18n{multipleAutomaticDownloadsAllow}</span>
               <span class="controlled-setting-indicator"
                   content-setting="multiple-automatic-downloads" value="allow">
               </span>
@@ -478,7 +491,7 @@
           <label>
             <input type="radio" name="multiple-automatic-downloads" value="ask">
             <span>
-              <span i18n-content="multipleAutomaticDownloadsAsk"></span>
+              <span>$i18n{multipleAutomaticDownloadsAsk}</span>
               <span class="controlled-setting-indicator"
                   content-setting="multiple-automatic-downloads" value="ask">
               </span>
@@ -490,7 +503,7 @@
             <input type="radio" name="multiple-automatic-downloads"
                 value="block">
             <span>
-              <span i18n-content="multipleAutomaticDownloadsBlock"></span>
+              <span>$i18n{multipleAutomaticDownloadsBlock}</span>
               <span class="controlled-setting-indicator"
                   content-setting="multiple-automatic-downloads" value="block">
               </span>
@@ -499,118 +512,124 @@
         </div>
         <div class="settings-row">
           <button class="exceptions-list-button"
-              contentType="multiple-automatic-downloads"
-              i18n-content="manageExceptions"></button>
+              contentType="multiple-automatic-downloads">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- MIDI system exclusive messages filter -->
     <section>
-      <h3 i18n-content="midiSysexHeader"></h3>
+      <h3>$i18n{midiSysexHeader}</h3>
       <div>
         <div class="radio">
           <label>
             <input type="radio" name="midi-sysex" value="allow">
-            <span i18n-content="midiSysExAllow"></span>
+            <span>$i18n{midiSysExAllow}</span>
           </label>
         </div>
         <div class="radio">
           <label>
             <input type="radio" name="midi-sysex" value="ask">
-            <span i18n-content="midiSysExAsk"></span>
+            <span>$i18n{midiSysExAsk}</span>
           </label>
         </div>
         <div class="radio">
           <label>
             <input type="radio" name="midi-sysex" value="block">
-            <span i18n-content="midiSysExBlock"></span>
+            <span>$i18n{midiSysExBlock}</span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="midi-sysex"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="midi-sysex">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Push messaging filter -->
     <section id="experimental-push-messaging-settings" hidden="true">
-      <h3 i18n-content="pushMessagingHeader"></h3>
+      <h3>$i18n{pushMessagingHeader}</h3>
       <div>
         <div class="radio">
           <label>
             <input type="radio" name="push-messaging" value="allow">
-            <span i18n-content="pushMessagingAllow"></span>
+            <span>$i18n{pushMessagingAllow}</span>
           </label>
         </div>
         <div class="radio">
           <label>
             <input type="radio" name="push-messaging" value="ask">
-            <span i18n-content="pushMessagingAsk"></span>
+            <span>$i18n{pushMessagingAsk}</span>
           </label>
         </div>
         <div class="radio">
           <label>
             <input type="radio" name="push-messaging" value="block">
-            <span i18n-content="pushMessagingBlock"></span>
+            <span>$i18n{pushMessagingBlock}</span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="push-messaging"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="push-messaging">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- USB devices -->
     <section>
-      <h3 i18n-content="usbDevicesHeader"></h3>
+      <h3>$i18n{usbDevicesHeader}</h3>
       <div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="usb-devices"
-              i18n-content="usbDevicesManage"></button>
+          <button class="exceptions-list-button" contentType="usb-devices">
+            $i18n{usbDevicesManage}
+          </button>
         </div>
       </div>
     </section>
     <!-- Background sync -->
     <section>
-      <h3 i18n-content="backgroundSyncHeader"></h3>
+      <h3>$i18n{backgroundSyncHeader}</h3>
       <div>
         <div class="radio">
           <label>
             <input type="radio" name="background-sync" value="allow">
-            <span i18n-content="backgroundSyncAllow"></span>
+            <span>$i18n{backgroundSyncAllow}</span>
           </label>
         </div>
         <div class="radio">
           <label>
             <input type="radio" name="background-sync" value="block">
-            <span i18n-content="backgroundSyncBlock"></span>
+            <span>$i18n{backgroundSyncBlock}</span>
           </label>
         </div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="background-sync"
-              i18n-content="manageExceptions"></button>
+          <button class="exceptions-list-button" contentType="background-sync">
+            $i18n{manageExceptions}
+          </button>
         </div>
       </div>
     </section>
     <!-- Page zoom levels -->
     <section id="page-zoom-levels">
-      <h3 i18n-content="zoomlevelsHeader"></h3>
+      <h3>$i18n{zoomlevelsHeader}</h3>
       <div>
         <div class="settings-row">
-          <button class="exceptions-list-button" contentType="zoomlevels"
-              i18n-content="zoomLevelsManage"></button>
+          <button class="exceptions-list-button" contentType="zoomlevels">
+            $i18n{zoomLevelsManage}
+          </button>
         </div>
       </div>
     </section>
     <!-- PDF Plugin filter -->
     <section id="pdf-section">
-      <h3 i18n-content="pdfTabLabel" class="content-settings-header"></h3>
+      <h3 class="content-settings-header">$i18n{pdfTabLabel}</h3>
       <div>
         <div class="checkbox">
           <label>
             <input pref="plugins.always_open_pdf_externally" type="checkbox">
             <span>
-              <span i18n-content="pdfEnable"></span>
+              <span>$i18n{pdfEnable}</span>
               <span class="controlled-setting-indicator"
                   pref="plugins.always_open_pdf_externally">
               </span>
@@ -622,8 +641,8 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="content-settings-overlay-confirm" class="default-button"
-          i18n-content="done">
+      <button id="content-settings-overlay-confirm" class="default-button">
+        $i18n{done}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/content_settings_exceptions_area.html b/chromium/chrome/browser/resources/options/content_settings_exceptions_area.html
index 079080f2c77..c6b5efdf08e 100644
--- a/chromium/chrome/browser/resources/options/content_settings_exceptions_area.html
+++ b/chromium/chrome/browser/resources/options/content_settings_exceptions_area.html
@@ -3,63 +3,56 @@
   <h1></h1>
   <div class="content-area">
     <div id="exception-column-headers">
-      <div id="exception-pattern-column" i18n-content="exceptionPatternHeader">
+      <div id="exception-pattern-column">$i18n{exceptionPatternHeader}</div>
+      <div id="exception-behavior-column" class="exception-value-column-header">
+        $i18n{exceptionBehaviorHeader}
       </div>
-      <div id="exception-behavior-column"
-          i18n-content="exceptionBehaviorHeader"
-          class="exception-value-column-header">
-      </div>
-      <div id="exception-zoom-column"
-          i18n-content="exceptionZoomHeader"
-          class="exception-value-column-header" hidden>
+      <div id="exception-zoom-column" class="exception-value-column-header"
+          hidden>
+        $i18n{exceptionZoomHeader}
       </div>
       <div id="exception-usb-device-column"
-          i18n-content="exceptionUsbDeviceHeader"
           class="exception-value-column-header" hidden>
+        $i18n{exceptionUsbDeviceHeader}
       </div>
     </div>
     <div contentType="cookies">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
       <div class="flash-plugin-area">
-        <a i18n-values="href:flashStorageUrl" target="_blank"
-            i18n-content="flashStorageSettings">
+        <a href="$i18nRaw{flashStorageUrl}" target="_blank">
+          $i18n{flashStorageSettings}
         </a>
       </div>
     </div>
     <div contentType="images">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
     <div contentType="javascript">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
     <div contentType="plugins">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
     <div contentType="popups">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
@@ -72,44 +65,41 @@
     <div contentType="protectedContent">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
     <div contentType="media-stream-mic">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
       <div id="media-pepper-flash-exceptions-mic" class="pepper-flash-settings">
-        <span i18n-content="mediaPepperFlashMicExceptionsDivergedLabel"></span>
-        <a target="_blank" i18n-content="mediaPepperFlashChangeLink"
-            i18n-values="href:mediaPepperFlashWebsitePrivacyURL"></a>
+        <span>$i18n{mediaPepperFlashMicExceptionsDivergedLabel}</span>
+        <a target="_blank" href="$i18nRaw{mediaPepperFlashWebsitePrivacyURL}">
+          $i18n{mediaPepperFlashChangeLink}
+        </a>
       </div>
     </div>
     <div contentType="media-stream-camera">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
       <div id="media-pepper-flash-exceptions-camera"
           class="pepper-flash-settings">
-        <span i18n-content="mediaPepperFlashCameraExceptionsDivergedLabel">
-        </span>
-        <a target="_blank" i18n-content="mediaPepperFlashChangeLink"
-            i18n-values="href:mediaPepperFlashWebsitePrivacyURL"></a>
+        <span>$i18n{mediaPepperFlashCameraExceptionsDivergedLabel}</span>
+        <a target="_blank" href="$i18nRaw{mediaPepperFlashWebsitePrivacyURL}">
+          $i18n{mediaPepperFlashChangeLink}
+        </a>
       </div>
     </div>
     <div contentType="ppapi-broker">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
@@ -119,24 +109,21 @@
     <div contentType="midi-sysex">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
     <div contentType="push-messaging">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
     <div contentType="usb-devices">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
@@ -146,21 +133,21 @@
     <div contentType="zoomlevels">
       <list mode="normal"></list>
       <div>
-        <span class="otr-explanation" i18n-content="otrExceptionsExplanation">
-        </span>
+        <span class="otr-explanation">$i18n{otrExceptionsExplanation}</span>
         <list mode="otr"></list>
       </div>
     </div>
   </div>
   <div class="action-area">
     <div class="hbox stretch">
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:exceptionsLearnMoreUrl"></a>
+      <a target="_blank"
+          href="$i18nRaw{exceptionsLearnMoreUrl}">$i18n{learnMore}</a>
     </div>
     <div class="action-area-right">
       <div class="button-strip">
         <button id="content-settings-exceptions-overlay-confirm"
-            class="default-button" i18n-content="done">
+            class="default-button">
+          $i18n{done}
         </button>
       </div>
     </div>
diff --git a/chromium/chrome/browser/resources/options/cookies_view.html b/chromium/chrome/browser/resources/options/cookies_view.html
index 0cc136b6630..8176c3b0b19 100644
--- a/chromium/chrome/browser/resources/options/cookies_view.html
+++ b/chromium/chrome/browser/resources/options/cookies_view.html
@@ -1,27 +1,28 @@
 <div id="cookies-view-page" class="page cookies-view-page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="cookiesViewPage"></h1>
+  <h1>$i18n{cookiesViewPage}</h1>
   <div class="content-area cookies-list-content-area">
     <div class="cookies-column-headers">
       <div class="cookies-site-column">
-        <h3 i18n-content="cookie_domain"></h3>
+        <h3>$i18n{cookie_domain}</h3>
       </div>
       <div class="cookies-data-column">
-        <h3 i18n-content="cookie_local_data"></h3>
+        <h3>$i18n{cookie_local_data}</h3>
       </div>
       <div class="cookies-header-controls">
-        <button class="remove-all-cookies-button"
-            i18n-content="remove_all_cookie"></button>
+        <button class="remove-all-cookies-button">
+          $i18n{remove_all_cookie}
+        </button>
         <input type="search" class="cookies-search-box"
-            i18n-values="placeholder:search_cookies" incremental>
+            placeholder="$i18n{search_cookies}" incremental>
       </div>
     </div>
     <list id="cookies-list" class="cookies-list"></list>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button class="cookies-view-overlay-confirm default-button"
-          i18n-content="done">
+      <button class="cookies-view-overlay-confirm default-button">
+        $i18n{done}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/do_not_track_confirm_overlay.html b/chromium/chrome/browser/resources/options/do_not_track_confirm_overlay.html
index 666865f48be..311696822cb 100644
--- a/chromium/chrome/browser/resources/options/do_not_track_confirm_overlay.html
+++ b/chromium/chrome/browser/resources/options/do_not_track_confirm_overlay.html
@@ -1,24 +1,21 @@
 <div id="do-not-track-confirm-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="doNotTrackConfirmOverlay"></h1>
+  <h1>$i18n{doNotTrackConfirmOverlay}</h1>
   <div class="content-area">
-    <span id="do-not-track-confirm-text"
-        i18n-content="doNotTrackConfirmMessage">
-    </span>
+    <span id="do-not-track-confirm-text">$i18n{doNotTrackConfirmMessage}</span>
   </div>
   <div class="action-area">
     <div class="hbox stretch">
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:doNotTrackLearnMoreURL">
-      </a>
+      <a target="_blank"
+          href="$i18nRaw{doNotTrackLearnMoreURL}">$i18n{learnMore}</a>
     </div>
     <div class="action-area-right">
       <div class="button-strip">
-        <button id="do-not-track-confirm-cancel"
-            i18n-content="doNotTrackConfirmDisable">
+        <button id="do-not-track-confirm-cancel">
+          $i18n{doNotTrackConfirmDisable}
         </button>
-        <button id="do-not-track-confirm-ok" class="default-button"
-            i18n-content="doNotTrackConfirmEnable">
+        <button id="do-not-track-confirm-ok" class="default-button">
+          $i18n{doNotTrackConfirmEnable}
         </button>
       </div>
     </div>
diff --git a/chromium/chrome/browser/resources/options/easy_unlock_turn_off_overlay.html b/chromium/chrome/browser/resources/options/easy_unlock_turn_off_overlay.html
index 84d921800f2..8a2db2ed43a 100644
--- a/chromium/chrome/browser/resources/options/easy_unlock_turn_off_overlay.html
+++ b/chromium/chrome/browser/resources/options/easy_unlock_turn_off_overlay.html
@@ -1,16 +1,15 @@
 <div id="easy-unlock-turn-off-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 id="easy-unlock-turn-off-title"
-      i18n-content="easyUnlockTurnOffTitle"></h1>
+  <h1 id="easy-unlock-turn-off-title">$i18n{easyUnlockTurnOffTitle}</h1>
   <div class="content-area">
-    <p id="easy-unlock-turn-off-messagee" class="settings-row"
-        i18n-content="easyUnlockTurnOffDescription"></p>
+    <p id="easy-unlock-turn-off-messagee" class="settings-row">
+      $i18n{easyUnlockTurnOffDescription}
+    </p>
   </div>
   <div class="action-area button-strip">
-    <button id="easy-unlock-turn-off-dismiss" i18n-content="cancel">
-    </button>
-    <button id="easy-unlock-turn-off-confirm" class="default-button"
-        i18n-content="easyUnlockTurnOffButton">
+    <button id="easy-unlock-turn-off-dismiss">$i18n{cancel}</button>
+    <button id="easy-unlock-turn-off-confirm" class="default-button">
+      $i18n{easyUnlockTurnOffButton}
     </button>
     <div class="stretch"></div>
     <div id="easy-unlock-turn-off-spinner" class="spinner" hidden></div>
diff --git a/chromium/chrome/browser/resources/options/factory_reset_overlay.html b/chromium/chrome/browser/resources/options/factory_reset_overlay.html
index 21df28f9403..3c0a0f0a27b 100644
--- a/chromium/chrome/browser/resources/options/factory_reset_overlay.html
+++ b/chromium/chrome/browser/resources/options/factory_reset_overlay.html
@@ -1,16 +1,15 @@
 <div id="factory-reset-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="factoryResetHeading"></h1>
+  <h1>$i18n{factoryResetHeading}</h1>
   <div class="content-area">
-    <span i18n-content="factoryResetWarning"></span>
-    <a i18n-values="href:factoryResetHelpUrl"
-        i18n-content="errorLearnMore" target="_blank"></a>
+    <span>$i18n{factoryResetWarning}</span>
+    <a href="$i18nRaw{factoryResetHelpUrl}"
+        target="_blank">$i18n{errorLearnMore}</a>
   </div>
   <div class="action-area button-strip">
-    <button id="factory-reset-data-dismiss" i18n-content="cancel">
-    </button>
-    <button id="factory-reset-data-restart" class="default-button"
-        i18n-content="factoryResetDataRestart">
+    <button id="factory-reset-data-dismiss">$i18n{cancel}</button>
+    <button id="factory-reset-data-restart" class="default-button">
+      $i18n{factoryResetDataRestart}
     </button>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/font_settings.html b/chromium/chrome/browser/resources/options/font_settings.html
index 6da0cefa8d7..f22c3dc4287 100644
--- a/chromium/chrome/browser/resources/options/font_settings.html
+++ b/chromium/chrome/browser/resources/options/font_settings.html
@@ -1,9 +1,9 @@
 <div id="font-settings" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="fontSettingsPage"></h1>
+  <h1>$i18n{fontSettingsPage}</h1>
   <div class="content-area">
     <section>
-      <h3 i18n-content="fontSettingsStandard"></h3>
+      <h3>$i18n{fontSettingsStandard}</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <div>
@@ -16,9 +16,9 @@
             <input id="standard-font-size" type="range" min="0" max="24"
                 pref="webkit.webprefs.default_font_size">
             <div>
-              <span i18n-content="fontSettingsSizeTiny"></span>
-              <span i18n-content="fontSettingsSizeHuge"
-                  class="font-settings-huge">
+              <span>$i18n{fontSettingsSizeTiny}</span>
+              <span class="font-settings-huge">
+                $i18n{fontSettingsSizeHuge}
               </span>
             </div>
           </div>
@@ -27,7 +27,7 @@
       </div>
     </section>
     <section>
-      <h3 i18n-content="fontSettingsSerif"></h3>
+      <h3>$i18n{fontSettingsSerif}</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <div>
@@ -41,7 +41,7 @@
       </div>
     </section>
     <section>
-      <h3 i18n-content="fontSettingsSansSerif"></h3>
+      <h3>$i18n{fontSettingsSansSerif}</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <div>
@@ -55,7 +55,7 @@
       </div>
     </section>
     <section>
-      <h3 i18n-content="fontSettingsFixedWidth"></h3>
+      <h3>$i18n{fontSettingsFixedWidth}</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <div>
@@ -69,16 +69,16 @@
       </div>
     </section>
     <section>
-      <h3 i18n-content="fontSettingsMinimumSize"></h3>
+      <h3>$i18n{fontSettingsMinimumSize}</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <div>
             <input id="minimum-font-size" type="range" min="0" max="15"
                 pref="webkit.webprefs.minimum_font_size">
             <div>
-              <span i18n-content="fontSettingsSizeTiny"></span>
-              <span i18n-content="fontSettingsSizeHuge"
-                  class="font-settings-huge">
+              <span>$i18n{fontSettingsSizeTiny}</span>
+              <span class="font-settings-huge">
+                $i18n{fontSettingsSizeHuge}
               </span>
             </div>
           </div>
@@ -89,13 +89,15 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <span id="advanced-font-settings-install" hidden
-          i18n-values=".innerHTML:advancedFontSettingsInstall"></span>
-      <a is="action-link" id="advanced-font-settings-options"
-          i18n-content="advancedFontSettingsOptions" hidden></a>
+      <span id="advanced-font-settings-install" hidden>
+        $i18nRaw{advancedFontSettingsInstall}
+      </span>
+      <a is="action-link" id="advanced-font-settings-options" hidden>
+        $i18n{advancedFontSettingsOptions}
+      </a>
       <span class="spacer"></span>
-      <button id="font-settings-confirm" class="default-button"
-          i18n-content="done">
+      <button id="font-settings-confirm" class="default-button">
+        $i18n{done}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/handler_options.html b/chromium/chrome/browser/resources/options/handler_options.html
index bfe856baffc..fb4f576e2d8 100644
--- a/chromium/chrome/browser/resources/options/handler_options.html
+++ b/chromium/chrome/browser/resources/options/handler_options.html
@@ -1,27 +1,27 @@
 <div id="handler-options" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="handlersPage"></h1>
+  <h1>$i18n{handlersPage}</h1>
   <div class="content-area">
-    <h3 i18n-content="handlersActiveHeading"></h3>
+    <h3>$i18n{handlersActiveHeading}</h3>
     <div class="handlers-column-headers">
       <div class="handlers-type-column">
-        <div i18n-content="handlersTypeColumnHeader"></div>
+        <div>$i18n{handlersTypeColumnHeader}</div>
       </div>
       <div class="handlers-site-column">
-        <div i18n-content="handlersSiteColumnHeader"></div>
+        <div>$i18n{handlersSiteColumnHeader}</div>
       </div>
       <div class="handlers-remove-column"></div>
     </div>
     <list id="handlers-list"></list>
 
     <div id="ignored-handlers-section">
-      <h3 i18n-content="handlersIgnoredHeading"></h3>
+      <h3>$i18n{handlersIgnoredHeading}</h3>
       <div class="handlers-column-headers">
         <div class="handlers-type-column">
-          <h3 i18n-content="handlersTypeColumnHeader"></h3>
+          <h3>$i18n{handlersTypeColumnHeader}</h3>
         </div>
         <div class="handlers-site-column">
-          <h3 i18n-content="handlersSiteColumnHeader"></h3>
+          <h3>$i18n{handlersSiteColumnHeader}</h3>
         </div>
         <div class="handlers-remove-column"></div>
       </div>
@@ -30,13 +30,13 @@
   </div>
   <div class="action-area">
     <div class="hbox stretch">
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:handlersLearnMoreUrl"></a>
+      <a target="_blank"
+          href="$i18nRaw{handlersLearnMoreUrl}">$i18n{learnMore}</a>
     </div>
     <div class="action-area-right">
       <div class="button-strip">
-        <button id="handler-options-overlay-confirm" class="default-button"
-            i18n-content="done">
+        <button id="handler-options-overlay-confirm" class="default-button">
+          $i18n{done}
         </button>
       </div>
     </div>
diff --git a/chromium/chrome/browser/resources/options/home_page_overlay.html b/chromium/chrome/browser/resources/options/home_page_overlay.html
index b1b6edd672d..d73b0f5b113 100644
--- a/chromium/chrome/browser/resources/options/home_page_overlay.html
+++ b/chromium/chrome/browser/resources/options/home_page_overlay.html
@@ -1,6 +1,6 @@
 <div id="home-page-overlay" class="page" role="dialog" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="homePageOverlay"></h1>
+  <h1>$i18n{homePageOverlay}</h1>
   <div class="content-area">
     <div class="radio controlled-setting-with-label">
       <label>
@@ -8,7 +8,7 @@
             pref="homepage_is_newtabpage" value="true"
             metric="Options_Homepage_IsNewTabPage" dialog-pref>
         <span>
-          <span i18n-content="homePageUseNewTab"></span>
+          <span>$i18n{homePageUseNewTab}</span>
           <span class="controlled-setting-indicator"
               pref="homepage_is_newtabpage" value="true" dialog-pref></span>
         </span>
@@ -20,8 +20,7 @@
             pref="homepage_is_newtabpage" value="false"
             metric="Options_Homepage_IsNewTabPage" dialog-pref>
         <span>
-          <span id="homepage-use-url-label" i18n-content="homePageUseURL">
-          </span>
+          <span id="homepage-use-url-label">$i18n{homePageUseURL}</span>
           <span class="controlled-setting-indicator"
               pref="homepage_is_newtabpage" value="false" dialog-pref></span>
         </span>
@@ -39,11 +38,8 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="home-page-cancel" type="reset" i18n-content="cancel">
-      </button>
-      <button id="home-page-confirm" class="default-button"
-          i18n-content="ok">
-      </button>
+      <button id="home-page-cancel" type="reset">$i18n{cancel}</button>
+      <button id="home-page-confirm" class="default-button">$i18n{ok}</button>
     </div>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/hotword_confirm_overlay.html b/chromium/chrome/browser/resources/options/hotword_confirm_overlay.html
index 11103ef8ce3..5733921fbb7 100644
--- a/chromium/chrome/browser/resources/options/hotword_confirm_overlay.html
+++ b/chromium/chrome/browser/resources/options/hotword_confirm_overlay.html
@@ -1,23 +1,21 @@
 <div id="hotword-confirm-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="hotwordConfirmOverlay"></h1>
+  <h1>$i18n{hotwordConfirmOverlay}</h1>
   <div class="content-area">
-    <span id="hotword-confirm-text" i18n-content="hotwordConfirmMessage">
-    </span>
+    <span id="hotword-confirm-text">$i18n{hotwordConfirmMessage}</span>
   </div>
   <div class="action-area">
     <div class="hbox stretch">
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:hotwordLearnMoreURL">
-      </a>
+      <a target="_blank"
+          href="$i18nRaw{hotwordLearnMoreURL}">$i18n{learnMore}</a>
     </div>
     <div class="action-area-right">
       <div class="button-strip">
-        <button id="hotword-confirm-cancel"
-            i18n-content="hotwordConfirmDisable">
+        <button id="hotword-confirm-cancel">
+          $i18n{hotwordConfirmDisable}
         </button>
-        <button id="hotword-confirm-ok" class="default-button"
-            i18n-content="hotwordConfirmEnable">
+        <button id="hotword-confirm-ok" class="default-button">
+          $i18n{hotwordConfirmEnable}
         </button>
       </div>
     </div>
@@ -28,7 +26,7 @@
           pref="hotword.audio_logging_enabled"
           metric="Options_Hotword_AudioLogging_Checkbox"
           type="checkbox" dialog-pref checked>
-      <span i18n-content="hotwordAudioLoggingEnable"></span>
+      <span>$i18n{hotwordAudioLoggingEnable}</span>
     </label>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/import_data_overlay.html b/chromium/chrome/browser/resources/options/import_data_overlay.html
index 7524577dc9d..7d604146bfd 100644
--- a/chromium/chrome/browser/resources/options/import_data_overlay.html
+++ b/chromium/chrome/browser/resources/options/import_data_overlay.html
@@ -1,23 +1,23 @@
 <div id="import-data-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="importDataOverlay"></h1>
+  <h1>$i18n{importDataOverlay}</h1>
   <div class="content-area">
     <div class="import-data-configure">
       <div id="import-from-div">
-        <span i18n-content="importFromLabel"></span>
+        <span>$i18n{importFromLabel}</span>
         <select id="import-browsers">
-          <option i18n-content="importLoading"></option>
+          <option>$i18n{importLoading}</option>
         </select>
       </div>
       <div id="import-checkboxes">
-        <div i18n-content="importDescription"></div>
+        <div>$i18n{importDescription}</div>
         <div class="checkbox controlled-setting-with-label"
               id="import-history-with-label">
           <label>
             <input id="import-history" type="checkbox"
                 pref="import_dialog_history">
             <span>
-              <span i18n-content="importHistory"></span>
+              <span>$i18n{importHistory}</span>
               <span class="controlled-setting-indicator"
                   pref="import_dialog_history">
               </span>
@@ -30,7 +30,7 @@
             <input id="import-favorites" type="checkbox"
                 pref="import_dialog_bookmarks">
             <span>
-              <span i18n-content="importFavorites"></span>
+              <span>$i18n{importFavorites}</span>
               <span class="controlled-setting-indicator"
                   pref="import_dialog_bookmarks"></span>
             </span>
@@ -42,7 +42,7 @@
             <input id="import-passwords" type="checkbox"
                 pref="import_dialog_saved_passwords">
             <span>
-              <span i18n-content="importPasswords"></span>
+              <span>$i18n{importPasswords}</span>
               <span class="controlled-setting-indicator"
                   pref="import_dialog_saved_passwords"></span>
             </span>
@@ -54,7 +54,7 @@
             <input id="import-search" type="checkbox"
                 pref="import_dialog_search_engine">
             <span>
-              <span i18n-content="importSearch"></span>
+              <span>$i18n{importSearch}</span>
               <span class="controlled-setting-indicator"
                   pref="import_dialog_search_engine"></span>
             </span>
@@ -65,7 +65,7 @@
           <label>
             <input id="import-autofill-form-data" type="checkbox"
                 pref="import_dialog_autofill_form_data">
-            <span i18n-content="importAutofillFormData"></span>
+            <span>$i18n{importAutofillFormData}</span>
           </label>
           <span class="controlled-setting-indicator"
               pref="import_dialog_autofill_form_data"></span>
@@ -74,18 +74,18 @@
     </div>
     <div class="import-data-success" hidden>
       <div id="import-success-header">
-        <strong i18n-content="importSucceeded"></strong>
+        <strong>$i18n{importSucceeded}</strong>
       </div>
       <div id="import-success-image"></div>
       <div id="import-find-your-bookmarks">
-        <span i18n-content="findYourImportedBookmarks"></span>
+        <span>$i18n{findYourImportedBookmarks}</span>
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input id="import-data-show-bookmarks-bar"
                 pref="bookmark_bar.show_on_all_tabs"
                 metric="Options_ShowBookmarksBar" type="checkbox">
             <span>
-              <span i18n-content="toolbarShowBookmarksBar"></span>
+              <span>$i18n{toolbarShowBookmarksBar}</span>
               <span class="controlled-setting-indicator"
                   pref="bookmark_bar.show_on_all_tabs"></span>
             </span>
@@ -99,11 +99,10 @@
       <div class="action-area-right">
         <div id="import-throbber" class="throbber"></div>
         <div class="button-strip">
-          <button id="import-data-cancel" i18n-content="cancel"></button>
-          <button id="import-choose-file" i18n-content="importChooseFile">
-          </button>
-          <button id="import-data-commit" class="default-button"
-              i18n-content="importCommit">
+          <button id="import-data-cancel">$i18n{cancel}</button>
+          <button id="import-choose-file">$i18n{importChooseFile}</button>
+          <button id="import-data-commit" class="default-button">
+            $i18n{importCommit}
           </button>
         </div>
       </div>
@@ -111,8 +110,8 @@
     <div class="import-data-success" hidden>
       <div class="action-area-right">
         <div class="button-strip">
-          <button id="import-data-confirm" class="default-button"
-              i18n-content="done">
+          <button id="import-data-confirm" class="default-button">
+            $i18n{done}
           </button>
         </div>
       </div>
diff --git a/chromium/chrome/browser/resources/options/language_add_language_overlay.html b/chromium/chrome/browser/resources/options/language_add_language_overlay.html
index 0cbf1b60b8a..c95a56ac435 100644
--- a/chromium/chrome/browser/resources/options/language_add_language_overlay.html
+++ b/chromium/chrome/browser/resources/options/language_add_language_overlay.html
@@ -1,17 +1,17 @@
 <div id="add-language-overlay-page" class="page" role="dialog" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="addLanguageTitle"></h1>
+  <h1>$i18n{addLanguageTitle}</h1>
   <div class="content-area">
-    <label id="add-language-overlay-language-list-label"
-        i18n-content="addLanguageSelectLabel"></label>
+    <label id="add-language-overlay-language-list-label">
+      $i18n{addLanguageSelectLabel}
+    </label>
     <select id="add-language-overlay-language-list"
         aria-labelledby="add-language-overlay-language-list-label"></select>
   </div>
   <div class="action-area button-strip">
-    <button id="add-language-overlay-cancel-button" i18n-content="cancel">
-    </button>
-    <button id="add-language-overlay-ok-button" class="default-button"
-        i18n-content="ok">
+    <button id="add-language-overlay-cancel-button">$i18n{cancel}</button>
+    <button id="add-language-overlay-ok-button" class="default-button">
+      $i18n{ok}
     </button>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/language_dictionary_overlay.html b/chromium/chrome/browser/resources/options/language_dictionary_overlay.html
index 34b64055c2e..9e1a67f13aa 100644
--- a/chromium/chrome/browser/resources/options/language_dictionary_overlay.html
+++ b/chromium/chrome/browser/resources/options/language_dictionary_overlay.html
@@ -1,20 +1,21 @@
 <div id="language-dictionary-overlay-page" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="languageDictionaryOverlayTitle"></h1>
+  <h1>$i18n{languageDictionaryOverlayTitle}</h1>
   <input id="language-dictionary-overlay-search-field" type="search"
-      i18n-values="placeholder:languageDictionaryOverlaySearchPlaceholder;
-                   aria-label:languageDictionaryOverlaySearchPlaceholder"
+      placeholder="$i18n{languageDictionaryOverlaySearchPlaceholder}"
+      aria-label="$i18n{languageDictionaryOverlaySearchPlaceholder}"
       incremental>
   <div class="content-area">
     <div class="settings-list">
-      <p id="language-dictionary-overlay-no-matches"
-          i18n-content="languageDictionaryOverlayNoMatches" hidden></p>
+      <p id="language-dictionary-overlay-no-matches" hidden>
+        $i18n{languageDictionaryOverlayNoMatches}
+      </p>
       <list id="language-dictionary-overlay-word-list"></list>
     </div>
   </div>
   <div class="action-area button-strip">
-    <button id="language-dictionary-overlay-done-button" class="default-button"
-        i18n-content="done">
+    <button id="language-dictionary-overlay-done-button" class="default-button">
+      $i18n{done}
     </button>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/language_options.html b/chromium/chrome/browser/resources/options/language_options.html
index 83ede8fb5a7..7f9f33a1f7b 100644
--- a/chromium/chrome/browser/resources/options/language_options.html
+++ b/chromium/chrome/browser/resources/options/language_options.html
@@ -1,27 +1,25 @@
 <div id="languagePage" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="languagePage"></h1>
+  <h1>$i18n{languagePage}</h1>
   <div class="content-area">
     <div id="notification">
       <span>&nbsp;</span>
       <span class="link"><span class="link-color"></span></span>
     </div>
     <div class="language-options-header">
-      <span i18n-content="addLanguageInstructions"></span>
+      <span>$i18n{addLanguageInstructions}</span>
 <if expr="chromeos">
-      <span i18n-content="inputMethodInstructions"></span>
+      <span>$i18n{inputMethodInstructions}</span>
 </if>
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:languagesLearnMoreURL"></a>
+      <a target="_blank"
+          href="$i18nRaw{languagesLearnMoreURL}">$i18n{learnMore}</a>
     </div>
     <div class="language-options">
       <div id="language-options-languages">
-        <h3 i18n-content="languages"></h3>
+        <h3>$i18n{languages}</h3>
         <list id="language-options-list"></list>
         <div class="language-options-lower-left">
-          <button id="language-options-add-button"
-            i18n-content="addButton">
-          </button>
+          <button id="language-options-add-button">$i18n{addButton}</button>
         </div>
         <div id="language-options-list-dropmarker"></div>
       </div>
@@ -30,8 +28,8 @@
 <if expr="os == 'win32' or chromeos">
         <div id="language-options-ui-language-section"
              class="language-options-contents">
-          <button id="language-options-ui-language-button"
-              i18n-content="displayInThisLanguage">
+          <button id="language-options-ui-language-button">
+            $i18n{displayInThisLanguage}
           </button>
           <span class="controlled-setting-indicator"></span>
           <span id="language-options-ui-language-message" hidden></span>
@@ -44,30 +42,31 @@
           <div class="checkbox" id="spellcheck-language-checkbox-container">
             <label>
               <input type="checkbox" id="spellcheck-language-checkbox">
-              <span i18n-content="useThisForSpellChecking"></span>
+              <span>$i18n{useThisForSpellChecking}</span>
             </label>
           </div>
           <span id="spellcheck-language-message" hidden></span>
-          <span id="language-options-dictionary-downloading-message"
-              i18n-content="downloadingDictionary" hidden>
+          <span id="language-options-dictionary-downloading-message" hidden>
+            $i18n{downloadingDictionary}
           </span>
         </div>
         <div id="language-options-dictionary-download-failed-message"
             class="language-options-notification" hidden>
-          <div i18n-content="downloadFailed"></div>
+          <div>$i18n{downloadFailed}</div>
           <div id="language-options-dictionary-download-fail-help-message"
-              i18n-content="downloadFailHelp" hidden>
+              hidden>
+            $i18n{downloadFailHelp}
           </div>
-          <button id="dictionary-download-retry-button"
-              i18n-content="retryButton">
+          <button id="dictionary-download-retry-button">
+            $i18n{retryButton}
           </button>
         </div>
         <div id="language-options-ui-notification-bar"
             class="language-options-notification" hidden>
-          <div i18n-content="restartRequired"></div>
+          <div>$i18n{restartRequired}</div>
 <if expr="chromeos">
-          <button id="language-options-ui-restart-button"
-              i18n-content="restartButton">
+          <button id="language-options-ui-restart-button">
+            $i18n{restartButton}
           </button>
 </if>
         </div>
@@ -77,15 +76,17 @@
           <div class="checkbox">
             <label>
               <input type="checkbox" id="offer-to-translate-in-this-language">
-              <span class="offer-to-translate-label"
-                  i18n-content="offerToTranslateInThisLanguage"></span>
+              <span class="offer-to-translate-label">
+                $i18n{offerToTranslateInThisLanguage}
+              </span>
             </label>
           </div>
-          <span id="cannot-translate-in-this-language"
-               i18n-content="cannotTranslateInThisLanguage" hidden></span>
+          <span id="cannot-translate-in-this-language" hidden>
+            $i18n{cannotTranslateInThisLanguage}
+          </span>
         </div>
 <if expr="chromeos">
-        <h3 i18n-content="inputMethod"></h3>
+        <h3>$i18n{inputMethod}</h3>
         <div id="language-options-input-method-template" class="input-method"
             hidden>
           <div class="checkbox">
@@ -97,8 +98,8 @@
         </div>
         <div id="language-options-input-method-list"
              class="language-options-contents">
-          <span id="language-options-input-method-none"
-              i18n-content="noInputMethods" hidden>
+          <span id="language-options-input-method-none" hidden>
+            $i18n{noInputMethods}
           </span>
         </div>
 </if>
@@ -106,15 +107,16 @@
     </div>
     <div class="language-options-footer">
 <if expr="chromeos">
-      <div i18n-content="switchInputMethodsHint"></div>
-      <div i18n-content="selectPreviousInputMethodHint"></div>
+      <div>$i18n{switchInputMethodsHint}</div>
+      <div>$i18n{selectPreviousInputMethodHint}</div>
       <a is="action-link" id="edit-custom-dictionary-button"
-          class="standalone-action-link"
-          i18n-content="languageDictionaryOverlayTitle"></a>
+          class="standalone-action-link">
+        $i18n{languageDictionaryOverlayTitle}
+      </a>
       <div id="language-options-ime-menu-template" class="checkbox" hidden>
         <label>
           <input type="checkbox" id="activate-ime-menu">
-          <span i18n-content="activateImeMenu"></span>
+          <span>$i18n{activateImeMenu}</span>
         </label>
       </div>
 </if>
@@ -123,18 +125,18 @@
         <label id="enable-spellcheck-container">
           <input id="enable-spellcheck" pref="browser.enable_spellchecking"
               metric="Options_SpellCheck" type="checkbox">
-          <span i18n-content="enableSpellCheck"></span>
+          <span>$i18n{enableSpellCheck}</span>
         </label>
-        <a is="action-link" id="edit-custom-dictionary-button"
-            i18n-content="languageDictionaryOverlayTitle" hidden></a>
+        <a is="action-link" id="edit-custom-dictionary-button" hidden>
+          $i18n{languageDictionaryOverlayTitle}
+        </a>
       </div>
 </if>
     </div>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="language-confirm" class="default-button" i18n-content="done">
-      </button>
+      <button id="language-confirm" class="default-button">$i18n{done}</button>
     </div>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/manage_profile_overlay.html b/chromium/chrome/browser/resources/options/manage_profile_overlay.html
index 688d2496ae0..f72093c014a 100644
--- a/chromium/chrome/browser/resources/options/manage_profile_overlay.html
+++ b/chromium/chrome/browser/resources/options/manage_profile_overlay.html
@@ -2,15 +2,13 @@
   <div class="close-button"></div>
   <!-- Dialog for managing profiles. -->
   <div id="manage-profile-overlay-manage" hidden>
-    <h1 i18n-content="manageProfile"></h1>
+    <h1>$i18n{manageProfile}</h1>
     <div id="manage-profile-content" class="content-area">
-      <div id="manage-profile-icon-label"
-          i18n-content="manageProfilesIconLabel">
-      </div>
+      <div id="manage-profile-icon-label">$i18n{manageProfilesIconLabel}</div>
       <grid id="manage-profile-icon-grid"></grid>
       <div id="manage-profile-name-input-container">
         <label>
-          <span i18n-content="manageProfilesNameLabel"></span>
+          <span>$i18n{manageProfilesNameLabel}</span>
           <input id="manage-profile-name" type="text" pattern=".*\S.*" required>
         </label>
       </div>
@@ -18,71 +16,75 @@
     </div>
     <div class="action-area">
       <div class="action-area-shortcut-container">
-        <button id="remove-shortcut-button"
-            i18n-content="removeProfileShortcutButton" hidden>
+        <button id="remove-shortcut-button" hidden>
+          $i18n{removeProfileShortcutButton}
         </button>
-        <button id="add-shortcut-button"
-            i18n-content="createProfileShortcutButton" hidden>
+        <button id="add-shortcut-button" hidden>
+          $i18n{createProfileShortcutButton}
         </button>
       </div>
       <div class="button-strip">
-        <button id="manage-profile-cancel" i18n-content="cancel"></button>
-        <button id="manage-profile-ok" i18n-content="manageProfilesConfirm"
-            class="default-button"></button>
+        <button id="manage-profile-cancel">$i18n{cancel}</button>
+        <button id="manage-profile-ok" class="default-button">
+          $i18n{manageProfilesConfirm}
+        </button>
       </div>
     </div>
   </div>
   <!-- Dialog for deleting profiles. -->
   <div id="manage-profile-overlay-delete" hidden>
-    <h1 i18n-content="deleteProfileTitle"></h1>
+    <h1>$i18n{deleteProfileTitle}</h1>
     <div class="content-area">
       <div id="delete-profile-message">
         <img id="delete-profile-icon" class="profile-icon">
         <div id="delete-profile-text"></div>
       </div>
-      <div id="delete-supervised-profile-addendum"
-          i18n-values=".innerHTML:deleteSupervisedProfileAddendum" hidden>
+      <div id="delete-supervised-profile-addendum" hidden>
+        $i18nRaw{deleteSupervisedProfileAddendum}
       </div>
     </div>
     <div class="action-area button-strip">
-      <button id="delete-profile-ok" i18n-content="deleteProfileOK"></button>
-      <button id="delete-profile-cancel" i18n-content="cancel"
-          class="default-button"></button>
+      <button id="delete-profile-ok">$i18n{deleteProfileOK}</button>
+      <button id="delete-profile-cancel" class="default-button">
+        $i18n{cancel}
+      </button>
     </div>
   </div>
   <!-- Dialog for disconnecting enterprise managed profiles. -->
   <div id="manage-profile-overlay-disconnect-managed" hidden>
-    <h1 i18n-content="disconnectManagedProfileTitle"></h1>
+    <h1>$i18n{disconnectManagedProfileTitle}</h1>
     <div class="content-area"
-        id="disconnect-managed-profile-domain-information"
-        i18n-values=".innerHTML:disconnectManagedProfileDomainInformation">
+        id="disconnect-managed-profile-domain-information">
+      $i18nRaw{disconnectManagedProfileDomainInformation}
     </div>
     <div class="content-area">
       <div id="disconnect-managed-profile-message">
-        <div id="disconnect-managed-profile-text"
-            i18n-values=".innerHTML:disconnectManagedProfileText">
+        <div id="disconnect-managed-profile-text">
+          $i18nRaw{disconnectManagedProfileText}
         </div>
       </div>
     </div>
     <div class="action-area">
       <div class="button-strip">
-        <button id="disconnect-managed-profile-ok"
-            i18n-content="disconnectManagedProfileOK"></button>
-        <button id="disconnect-managed-profile-cancel" class="default-button"
-            i18n-content="cancel"></button>
+        <button id="disconnect-managed-profile-ok">
+          $i18n{disconnectManagedProfileOK}
+        </button>
+        <button id="disconnect-managed-profile-cancel" class="default-button">
+          $i18n{cancel}
+        </button>
       </div>
     </div>
   </div>
   <!-- Dialog for creating profiles. -->
   <div id="manage-profile-overlay-create" hidden>
-    <h1 i18n-content="createProfileTitle"></h1>
+    <h1>$i18n{createProfileTitle}</h1>
     <div id="create-profile-content" class="content-area">
       <div id="create-profile-instructions"></div>
       <grid id="create-profile-icon-grid"></grid>
       <div id="create-profile-name-input-container">
         <label>
-          <span id="create-profile-name-label"
-              i18n-content="manageProfilesNameLabel">
+          <span id="create-profile-name-label">
+            $i18n{manageProfilesNameLabel}
           </span>
           <input id="create-profile-name" type="text" pattern=".*\S.*" required>
         </label>
@@ -92,7 +94,7 @@
       <div id="create-shortcut-container" class="checkbox" hidden>
         <label>
           <input id="create-shortcut" type="checkbox">
-          <span i18n-content="createProfileShortcutCheckbox"></span>
+          <span>$i18n{createProfileShortcutCheckbox}</span>
         </label>
       </div>
       <div id="create-profile-supervised-container" class="checkbox">
@@ -100,19 +102,21 @@
           <input id="create-profile-supervised" type="checkbox">
           <span id="create-profile-supervised-signed-in">
             <span id="create-profile-supervised-signed-in-label"></span>
-            <span id="create-profile-supervised-account-details-out-of-date-label"
+            <span
+                id="create-profile-supervised-account-details-out-of-date-label"
                 hidden>
             </span>
             <a id="create-profile-supervised-signed-in-learn-more-link"
-                is="action-link" i18n-content="learnMore"></a>
+                is="action-link">
+              $i18n{learnMore}
+            </a>
             <a id="create-profile-supervised-sign-in-again-link"
-                is="action-link"
-                i18n-content="manageProfilesSupervisedSignInAgainLink"
-                hidden></a>
+                is="action-link" hidden>
+              $i18n{manageProfilesSupervisedSignInAgainLink}
+            </a>
           </span>
-          <span id="create-profile-supervised-not-signed-in"
-              i18n-values=".innerHTML:manageProfilesSupervisedNotSignedIn"
-              hidden>
+          <span id="create-profile-supervised-not-signed-in" hidden>
+            $i18nRaw{manageProfilesSupervisedNotSignedIn}
           </span>
         </label>
         <span id="create-profile-supervised-indicator"
@@ -123,12 +127,13 @@
     </div>
     <div class="action-area">
       <div id="create-profile-throbber" class="throbber"></div>
-      <a is="action-link" id="import-existing-supervised-user-link"
-          i18n-content="importExistingSupervisedUserLink" hidden></a>
+      <a is="action-link" id="import-existing-supervised-user-link" hidden>
+        $i18n{importExistingSupervisedUserLink}
+      </a>
       <div class="button-strip">
-        <button id="create-profile-cancel" i18n-content="cancel"></button>
-        <button id="create-profile-ok" i18n-content="createProfileConfirm"
-            class="default-button">
+        <button id="create-profile-cancel">$i18n{cancel}</button>
+        <button id="create-profile-ok" class="default-button">
+          $i18n{createProfileConfirm}
         </button>
       </div>
     </div>
diff --git a/chromium/chrome/browser/resources/options/options.html b/chromium/chrome/browser/resources/options/options.html
index 948096d1530..95936d53545 100644
--- a/chromium/chrome/browser/resources/options/options.html
+++ b/chromium/chrome/browser/resources/options/options.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<html id="t" i18n-values="dir:textdirection;lang:language">
+<html id="t" dir="$i18n{textdirection}" lang="$i18n{language}">
 <head>
 <meta charset="utf-8">
-<title i18n-content="optionsPageTitle"></title>
+<title>$i18n{optionsPageTitle}</title>
 <link rel="stylesheet" href="chrome://resources/css/bubble.css">
 <link rel="stylesheet" href="chrome://resources/css/bubble_button.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
@@ -183,17 +183,19 @@
     <div class="controlled-setting-bubble-extension-name"></div>
   </div>
   <div class="controlled-setting-bubble-content-row">
-    <a is="action-link" class="controlled-setting-bubble-extension-manage-link"
-        i18n-content="controlledSettingManageExtension"></a>
-    <button class='controlled-setting-bubble-extension-disable-button'
-        i18n-content="controlledSettingDisableExtension"></button>
+    <a is="action-link" class="controlled-setting-bubble-extension-manage-link">
+      $i18n{controlledSettingManageExtension}
+    </a>
+    <button class='controlled-setting-bubble-extension-disable-button'>
+      $i18n{controlledSettingDisableExtension}
+    </button>
   </div>
 </div>
 
 <div id="extension-controlled-warning-template"
      class="extension-controlled-warning-box settings-row" hidden>
   <div class="extension-controlled-warning"></div>
-  <button i18n-content="extensionDisable"></button>
+  <button>$i18n{extensionDisable}</button>
 </div>
 
 <div id="main-content"
diff --git a/chromium/chrome/browser/resources/options/options_polymer.html b/chromium/chrome/browser/resources/options/options_polymer.html
index e20838d1826..afbf9fd4885 100644
--- a/chromium/chrome/browser/resources/options/options_polymer.html
+++ b/chromium/chrome/browser/resources/options/options_polymer.html
@@ -8,5 +8,4 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://settings-frame/people_page/lock_screen.html">
diff --git a/chromium/chrome/browser/resources/options/password_manager.html b/chromium/chrome/browser/resources/options/password_manager.html
index 6bc11a67312..c128a3be325 100644
--- a/chromium/chrome/browser/resources/options/password_manager.html
+++ b/chromium/chrome/browser/resources/options/password_manager.html
@@ -1,65 +1,67 @@
 <div id="password-manager" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="passwordsPage"></h1>
+  <h1>$i18n{passwordsPage}</h1>
   <div class="content-area">
     <div class="password-manager-home">
       <div id="auto-signin-block" class="checkbox">
         <label>
           <input pref="credentials_enable_autosignin" type="checkbox">
-          <span i18n-content="autoSigninTitle"></span>
+          <span>$i18n{autoSigninTitle}</span>
         </label>
         <div class="setting-extra-description">
-          <span i18n-content="autoSigninDescription"></span>
+          <span>$i18n{autoSigninDescription}</span>
         </div>
       </div>
       <div id="password-list-headers">
         <div id="passwords-title">
-          <h3 i18n-content="savedPasswordsTitle"></h3>
+          <h3>$i18n{savedPasswordsTitle}</h3>
         </div>
         <div id="password-search-column">
           <input id="password-search-box" type="search"
-              i18n-values="placeholder:passwordSearchPlaceholder" incremental>
+              placeholder="$i18n{passwordSearchPlaceholder}" incremental>
         </div>
       </div>
       <list id="saved-passwords-list" class="settings-list"></list>
       <div id="saved-passwords-list-empty-placeholder"
            class="settings-list-empty" hidden>
-        <span i18n-content="passwordsNoPasswordsDescription"></span>
-        <a target="_blank" i18n-content="learnMore"
-           i18n-values="href:passwordManagerLearnMoreURL"></a>
+        <span>$i18n{passwordsNoPasswordsDescription}</span>
+        <a target="_blank"
+            href="$i18nRaw{passwordManagerLearnMoreURL}">$i18n{learnMore}</a>
       </div>
       <div id="password-manager-import-export" class="action-area" hidden>
         <div class="button-strip">
-          <button id="password-manager-import" class="password-manager-home"
-              i18n-content="passwordManagerImportPasswordButtonText">
+          <button id="password-manager-import" class="password-manager-home">
+            $i18n{passwordManagerImportPasswordButtonText}
           </button>
-          <button id="password-manager-export" class="password-manager-home"
-              i18n-content="passwordManagerExportPasswordButtonText">
+          <button id="password-manager-export" class="password-manager-home">
+            $i18n{passwordManagerExportPasswordButtonText}
           </button>
         </div>
       </div>
-      <h3 i18n-content="passwordExceptionsTitle"></h3>
+      <h3>$i18n{passwordExceptionsTitle}</h3>
       <list id="password-exceptions-list" class="settings-list"></list>
       <div id="password-exceptions-list-empty-placeholder" hidden
            class="settings-list-empty">
-        <span i18n-content="passwordsNoExceptionsDescription"></span>
-        <a id="exceptions-learn-more" target="_blank" i18n-content="learnMore"
-           i18n-values="href:passwordManagerLearnMoreURL"></a>
+        <span>$i18n{passwordsNoExceptionsDescription}</span>
+        <a id="exceptions-learn-more" target="_blank"
+            href="$i18nRaw{passwordManagerLearnMoreURL}">$i18n{learnMore}</a>
       </div>
     </div>
   </div>
   <div class="action-area">
     <span id="manage-passwords-span">
-      <span i18n-content="passwordsManagePasswordsBeforeLinkText"></span>
+      <span>$i18n{passwordsManagePasswordsBeforeLinkText}</span>
       <a id="manage-passwords-link" target="_blank"
-         i18n-content="passwordsManagePasswordsLinkText"
-         i18n-values="href:passwordsManagePasswordsLink"></a>
-      <span i18n-content="passwordsManagePasswordsAfterLinkText"></span>
+          href="$i18nRaw{passwordsManagePasswordsLink}">
+        $i18n{passwordsManagePasswordsLinkText}
+      </a>
+      <span>$i18n{passwordsManagePasswordsAfterLinkText}</span>
     </span>
     <div class="spacer-div"></div>
     <div class="button-strip">
-      <button id="password-manager-confirm" class="password-manager-home"
-          i18n-content="done"></button>
+      <button id="password-manager-confirm" class="password-manager-home">
+        $i18n{done}
+      </button>
     </div>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/reset_profile_settings_overlay.html b/chromium/chrome/browser/resources/options/reset_profile_settings_overlay.html
index 504661f7bf5..07ba37200bb 100644
--- a/chromium/chrome/browser/resources/options/reset_profile_settings_overlay.html
+++ b/chromium/chrome/browser/resources/options/reset_profile_settings_overlay.html
@@ -8,17 +8,15 @@
   </div>
   <div class="action-area">
     <div class="hbox stretch">
-      <a target="_blank" i18n-content="learnMore"
-          i18n-values="href:resetProfileSettingsLearnMoreUrl">
-      </a>
+      <a target="_blank"
+          href="$i18nRaw{resetProfileSettingsLearnMoreUrl}">$i18n{learnMore}</a>
     </div>
     <div class="action-area-right">
       <div id="reset-profile-settings-throbber" class="throbber"></div>
       <div class="button-strip">
-        <button id="reset-profile-settings-dismiss" i18n-content="cancel">
-        </button>
-        <button id="reset-profile-settings-commit"
-            i18n-content="resetProfileSettingsCommit">
+        <button id="reset-profile-settings-dismiss">$i18n{cancel}</button>
+        <button id="reset-profile-settings-commit">
+          $i18n{resetProfileSettingsCommit}
         </button>
       </div>
     </div>
@@ -28,7 +26,7 @@
     <label>
       <input id="send-settings" type="checkbox" checked>
       <span>
-        <span i18n-content="resetProfileSettingsFeedback"></span>
+        <span>$i18n{resetProfileSettingsFeedback}</span>
         <span id="expand-feedback"></span>
       </span>
     </label>
diff --git a/chromium/chrome/browser/resources/options/search_box.html b/chromium/chrome/browser/resources/options/search_box.html
index d723885e57b..854538e5b55 100644
--- a/chromium/chrome/browser/resources/options/search_box.html
+++ b/chromium/chrome/browser/resources/options/search_box.html
@@ -2,11 +2,10 @@
   <header >
     <span id="browser-options-search-field-container"
         class="search-field-container">
-      <a is="action-link" id="about-button" i18n-content="aboutButton"
-          hidden></a>
+      <a is="action-link" id="about-button" hidden>$i18n{aboutButton}</a>
       <input id="search-field" type="search"
-          i18n-values="placeholder:searchPlaceholder;
-                       aria-label:searchPlaceholder" incremental>
+          placeholder="$i18n{searchPlaceholder}"
+          aria-label="$i18n{searchPlaceholder}" incremental>
     </span>
   </header>
 </div>
diff --git a/chromium/chrome/browser/resources/options/search_engine_manager.html b/chromium/chrome/browser/resources/options/search_engine_manager.html
index 0f9d8566d69..9d76000730d 100644
--- a/chromium/chrome/browser/resources/options/search_engine_manager.html
+++ b/chromium/chrome/browser/resources/options/search_engine_manager.html
@@ -1,16 +1,17 @@
 <div id="search-engine-manager-page" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="searchEngineManagerPage"></h1>
+  <h1>$i18n{searchEngineManagerPage}</h1>
   <div class="content-area">
-    <h3 i18n-content="defaultSearchEngineListTitle"></h3>
+    <h3>$i18n{defaultSearchEngineListTitle}</h3>
     <list id="default-search-engine-list"
         class="search-engine-list settings-list"></list>
-    <h3 i18n-content="otherSearchEngineListTitle"></h3>
+    <h3>$i18n{otherSearchEngineListTitle}</h3>
     <list id="other-search-engine-list"
         class="search-engine-list settings-list"></list>
     <div id="extension-keyword-div" hidden>
-      <h3 id="extension-keyword-list-title"
-          i18n-content="extensionKeywordsListTitle"></h3>
+      <h3 id="extension-keyword-list-title">
+        $i18n{extensionKeywordsListTitle}
+      </h3>
       <list id="extension-keyword-list"
           class="search-engine-list settings-list"></list>
     </div>
@@ -18,7 +19,8 @@
   <div class="action-area">
     <div class="button-strip">
       <button id="search-engine-manager-confirm" type="submit"
-          class="default-button" i18n-content="done">
+          class="default-button">
+        $i18n{done}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/search_page.html b/chromium/chrome/browser/resources/options/search_page.html
index 073c505d9f7..dcc9ed70751 100644
--- a/chromium/chrome/browser/resources/options/search_page.html
+++ b/chromium/chrome/browser/resources/options/search_page.html
@@ -1,12 +1,12 @@
 <div id="searchPage" class="page" hidden>
   <header>
-    <h1 i18n-content="searchPage"></h1>
+    <h1>$i18n{searchPage}</h1>
   </header>
   <div id="searchPageNoMatches" hidden>
-    <p i18n-content="searchPageNoMatches"></p>
-    <p><span i18n-content="searchPageHelpLabel"></span>
-      <a target="_blank" i18n-content="searchPageHelpTitle"
-          i18n-values="href:searchPageHelpURL"></a>
+    <p>$i18n{searchPageNoMatches}</p>
+    <p><span>$i18n{searchPageHelpLabel}</span>
+      <a target="_blank"
+          href="$i18nRaw{searchPageHelpURL}">$i18n{searchPageHelpTitle}</a>
     </p>
   </div>
 </div>
diff --git a/chromium/chrome/browser/resources/options/secondary_user_banner.html b/chromium/chrome/browser/resources/options/secondary_user_banner.html
index 84da4273451..f609d07953d 100644
--- a/chromium/chrome/browser/resources/options/secondary_user_banner.html
+++ b/chromium/chrome/browser/resources/options/secondary_user_banner.html
@@ -3,8 +3,7 @@
     <div class="badge"></div>
     <div class="text">
       <p>
-        <span i18n-values=".innerHTML:secondaryUserBannerText">
-        </span>
+        <span>$i18nRaw{secondaryUserBannerText}</span>
       </p>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/spelling_confirm_overlay.html b/chromium/chrome/browser/resources/options/spelling_confirm_overlay.html
index b4070dfd0e7..a8c977a0774 100644
--- a/chromium/chrome/browser/resources/options/spelling_confirm_overlay.html
+++ b/chromium/chrome/browser/resources/options/spelling_confirm_overlay.html
@@ -1,18 +1,18 @@
 <div id="spelling-confirm-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="spellingConfirmOverlay"></h1>
+  <h1>$i18n{spellingConfirmOverlay}</h1>
   <div class="content-area">
-    <span id="spelling-confirm-text" i18n-content="spellingConfirmMessage">
-    </span>
-    <a id="spelling-confirm-learn-more" target="_blank" i18n-content="learnMore"
-        i18n-values="href:privacyLearnMoreURL"></a>
+    <span id="spelling-confirm-text">$i18n{spellingConfirmMessage}</span>
+    <a id="spelling-confirm-learn-more" target="_blank"
+        href="$i18nRaw{privacyLearnMoreURL}">$i18n{learnMore}</a>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="spelling-confirm-cancel"
-          i18n-content="spellingConfirmDisable"></button>
-      <button id="spelling-confirm-ok" class="default-button"
-          i18n-content="spellingConfirmEnable">
+      <button id="spelling-confirm-cancel">
+        $i18n{spellingConfirmDisable}
+      </button>
+      <button id="spelling-confirm-ok" class="default-button">
+        $i18n{spellingConfirmEnable}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/startup_overlay.html b/chromium/chrome/browser/resources/options/startup_overlay.html
index 645bb7ce3bc..7864b704944 100644
--- a/chromium/chrome/browser/resources/options/startup_overlay.html
+++ b/chromium/chrome/browser/resources/options/startup_overlay.html
@@ -1,6 +1,6 @@
 <div id="startup-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="startupPagesOverlay"></h1>
+  <h1>$i18n{startupPagesOverlay}</h1>
   <!-- This <input> element is always hidden. It needs to be here so that
        its 'controlled-by' attribute will get set when the urls preference is
        managed by a policy, so that the managed prefs bar will show up.
@@ -11,13 +11,12 @@
   </div>
   <div class="action-area">
     <span class="hbox stretch">
-      <button id="startupUseCurrentButton"
-          i18n-content="startupUseCurrent"></button>
+      <button id="startupUseCurrentButton">$i18n{startupUseCurrent}</button>
     </span>
     <div class="button-strip">
-      <button id="startup-overlay-cancel" i18n-content="cancel"></button>
-      <button id="startup-overlay-confirm" class="default-button"
-          i18n-content="ok">
+      <button id="startup-overlay-cancel">$i18n{cancel}</button>
+      <button id="startup-overlay-confirm" class="default-button">
+        $i18n{ok}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/startup_section.html b/chromium/chrome/browser/resources/options/startup_section.html
index 0d429a8c801..764f63a42ff 100644
--- a/chromium/chrome/browser/resources/options/startup_section.html
+++ b/chromium/chrome/browser/resources/options/startup_section.html
@@ -1,5 +1,5 @@
 <section id="startup-section" guest-visibility="hidden">
-  <h3 i18n-content="sectionTitleStartup"></h3>
+  <h3>$i18n{sectionTitleStartup}</h3>
   <div id="startup-section-content">
     <div class="radio controlled-setting-with-label"
         id="newtab-section-content">
@@ -8,7 +8,7 @@
             pref="session.restore_on_startup"
             metric="Options_Startup_NewTab">
         <span>
-          <span i18n-content="startupShowNewTab"></span>
+          <span>$i18n{startupShowNewTab}</span>
           <span class="controlled-setting-indicator"
               pref="session.restore_on_startup" value="5"></span>
         </span>
@@ -20,7 +20,7 @@
             value="1" pref="session.restore_on_startup"
             metric="Options_Startup_LastSession">
         <span>
-          <span i18n-content="startupRestoreLastSession"></span>
+          <span>$i18n{startupRestoreLastSession}</span>
           <span class="controlled-setting-indicator"
               pref="session.restore_on_startup" value="1"></span>
         </span>
@@ -32,13 +32,12 @@
             pref="session.restore_on_startup"
             value="4" metric="Options_Startup_Custom">
         <span>
-          <span i18n-content="startupShowPages"></span>
+          <span>$i18n{startupShowPages}</span>
           <span class="controlled-setting-indicator"
               pref="session.restore_on_startup" value="4"></span>
         </span>
       </label>
-      <a is="action-link" id="startup-set-pages"
-          i18n-content="startupSetPages"></a>
+      <a is="action-link" id="startup-set-pages">$i18n{startupSetPages}</a>
       <span class="controlled-setting-indicator"
           pref="session.startup_urls"></span>
     </div>
diff --git a/chromium/chrome/browser/resources/options/supervised_user_create_confirm.html b/chromium/chrome/browser/resources/options/supervised_user_create_confirm.html
index 3ccd8c74878..ae4076ab678 100644
--- a/chromium/chrome/browser/resources/options/supervised_user_create_confirm.html
+++ b/chromium/chrome/browser/resources/options/supervised_user_create_confirm.html
@@ -4,9 +4,10 @@
   <div id="supervised-user-created-image"></div>
   <h1 id="supervised-user-created-title"></h1>
   <div id="supervised-user-created-text" class="content-area"></div>
-  <div id="supervised-user-created-action-area" class="action-area button-strip">
-    <button id="supervised-user-created-done"
-        i18n-content="supervisedUserCreatedDone">
+  <div id="supervised-user-created-action-area"
+      class="action-area button-strip">
+    <button id="supervised-user-created-done">
+      $i18n{supervisedUserCreatedDone}
     </button>
     <button id="supervised-user-created-switch"></button>
   </div>
diff --git a/chromium/chrome/browser/resources/options/supervised_user_import.html b/chromium/chrome/browser/resources/options/supervised_user_import.html
index 72cd4c3aa31..9fd806d9a44 100644
--- a/chromium/chrome/browser/resources/options/supervised_user_import.html
+++ b/chromium/chrome/browser/resources/options/supervised_user_import.html
@@ -1,19 +1,19 @@
 <div id="supervised-user-import" class="page" hidden>
   <div class="close-button"></div>
   <!-- Overlay to import an existing supervised user during user creation -->
-  <h1 id="supervised-user-import-title" i18n-content="supervisedUserImportTitle"
-      class="supervised-user-import">
+  <h1 id="supervised-user-import-title" class="supervised-user-import">
+    $i18n{supervisedUserImportTitle}
   </h1>
   <h1 id="supervised-user-select-avatar-title"
-      i18n-content="supervisedUserSelectAvatarTitle"
       class="supervised-user-select-avatar" hidden>
+    $i18n{supervisedUserSelectAvatarTitle}
   </h1>
-  <div id="supervised-user-import-text" i18n-content="supervisedUserImportText"
-      class="supervised-user-import">
+  <div id="supervised-user-import-text" class="supervised-user-import">
+    $i18n{supervisedUserImportText}
   </div>
   <div id="supervised-user-select-avatar-text"
-      i18n-content="supervisedUserSelectAvatarText"
       class="supervised-user-select-avatar" hidden>
+    $i18n{supervisedUserSelectAvatarText}
   </div>
   <div id="supervised-user-import-content-area" class="content-area">
     <list id="supervised-user-list"
@@ -26,15 +26,14 @@
   <div id="supervised-user-import-action-area" class="action-area">
     <div class="button-strip">
       <div id="supervised-user-import-throbber" class="throbber"></div>
-      <button id="supervised-user-import-cancel" i18n-content="cancel">
-      </button>
+      <button id="supervised-user-import-cancel">$i18n{cancel}</button>
       <button id="supervised-user-import-ok"
-          i18n-content="supervisedUserImportOk"
           class="default-button supervised-user-import">
+        $i18n{supervisedUserImportOk}
       </button>
       <button id="supervised-user-select-avatar-ok"
-          i18n-content="supervisedUserSelectAvatarOk"
           class="default-button supervised-user-select-avatar" hidden>
+        $i18n{supervisedUserSelectAvatarOk}
       </button>
     </div>
   </div>
diff --git a/chromium/chrome/browser/resources/options/sync_section.html b/chromium/chrome/browser/resources/options/sync_section.html
index f43b440a585..375601e2235 100644
--- a/chromium/chrome/browser/resources/options/sync_section.html
+++ b/chromium/chrome/browser/resources/options/sync_section.html
@@ -1,23 +1,22 @@
 <if expr="not chromeos">
 <section id="sync-section">
-  <h3 i18n-content="sectionTitleSync"></h3>
+  <h3>$i18n{sectionTitleSync}</h3>
 </if>
 <if expr="chromeos">
 <div id="sync-section">
 </if>
 
   <div id="sync-overview" class="settings-row" hidden>
-    <p i18n-content="syncOverview"></p>
-    <a i18n-values="href:syncLearnMoreURL" i18n-content="learnMore"
-        target="_blank"></a>
+    <p>$i18n{syncOverview}</p>
+    <a href="$i18nRaw{syncLearnMoreURL}" target="_blank">$i18n{learnMore}</a>
   </div>
 
 <if expr="chromeos">
   <div id="account-picture-wrapper">
     <div id="account-picture-control">
-      <input type="image" id="account-picture" tabindex="0"
-          alt="" i18n-values="aria-label:changePicture">
-      <div id="change-picture-caption" i18n-content="changePicture"></div>
+      <input type="image" id="account-picture" tabindex="0" alt=""
+          aria-label="$i18n{changePicture}">
+      <div id="change-picture-caption">$i18n{changePicture}</div>
     </div>
     <span id="account-picture-indicator" class="controlled-setting-indicator">
     </span>
@@ -39,14 +38,14 @@
             metric="Options_ScreenLock"
             pref="settings.enable_screen_lock">
        <span>
-         <span i18n-content="enableScreenlock"></span>
+         <span>$i18n{enableScreenlock}</span>
          <span class="controlled-setting-indicator"
-            i18n-values="textshared:screenLockShared"
-            pref="settings.enable_screen_lock"></span>
+             textshared="$i18n{screenLockShared}"
+             pref="settings.enable_screen_lock"></span>
        </span>
       </label>
-      <a is="action-link" id="manage-screenlock"
-        i18n-content="manageScreenlock" hidden>
+      <a is="action-link" id="manage-screenlock" hidden>
+        $i18n{manageScreenlock}
       </a>
     </div>
   </div>
@@ -57,13 +56,12 @@
     <span id="start-stop-sync-indicator"
         class="controlled-setting-indicator" hidden>
     </span>
-    <button id="customize-sync" i18n-content="customizeSync"
-        pref="sync.managed" hidden>
+    <button id="customize-sync" pref="sync.managed" hidden>
+      $i18n{customizeSync}
     </button>
 <if expr="chromeos">
-    <button id="manage-accounts-button"
-        public-account-visibility="hidden"
-        i18n-content="manageAccountsButtonTitle">
+    <button id="manage-accounts-button" public-account-visibility="hidden">
+      $i18n{manageAccountsButtonTitle}
     </button>
 </if>  <!-- chromeos -->
   </div>
diff --git a/chromium/chrome/browser/resources/options_test_resources.grd b/chromium/chrome/browser/resources/options_test_resources.grd
deleted file mode 100644
index a9220f9fbb3..00000000000
--- a/chromium/chrome/browser/resources/options_test_resources.grd
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
-  <outputs>
-    <output filename="grit/options_test_resources.h" type="rc_header">
-      <emit emit_type='prepend'></emit>
-    </output>
-    <output filename="options_test_resources.pak" type="data_package" />
-  </outputs>
-  <release seq="1">
-    <structures>
-      <structure name="IDR_OPTIONS_DELETABLE_ITEM_LIST"
-                 file="options/deletable_item_list.js"
-                 type="chrome_html" />
-      <structure name="IDR_OPTIONS_INLINE_EDITABLE_LIST"
-                 file="options/inline_editable_list.js"
-                 type="chrome_html" />
-    </structures>
-  </release>
-</grit>
diff --git a/chromium/chrome/browser/resources/pdf/browser_api.js b/chromium/chrome/browser/resources/pdf/browser_api.js
index c29559a55b9..85822de29c1 100644
--- a/chromium/chrome/browser/resources/pdf/browser_api.js
+++ b/chromium/chrome/browser/resources/pdf/browser_api.js
@@ -71,13 +71,12 @@ class BrowserApi {
    * @param {BrowserApi.ZoomBehavior} zoomBehavior How to manage zoom.
    */
   static create(streamInfo, zoomBehavior) {
-    return Promise.all([
-        lookupDefaultZoom(streamInfo),
-        lookupInitialZoom(streamInfo)
-    ]).then(function(zoomFactors) {
-      return new BrowserApi(
-          streamInfo, zoomFactors[0], zoomFactors[1], zoomBehavior);
-    });
+    return Promise
+        .all([lookupDefaultZoom(streamInfo), lookupInitialZoom(streamInfo)])
+        .then(function(zoomFactors) {
+          return new BrowserApi(
+              streamInfo, zoomFactors[0], zoomFactors[1], zoomBehavior);
+        });
   }
 
   /**
@@ -136,7 +135,7 @@ class BrowserApi {
 
   /**
    * Adds an event listener to be notified when the browser zoom changes.
-   * @param {function} listener The listener to be called with the new zoom
+   * @param {!Function} listener The listener to be called with the new zoom
    *     factor.
    */
   addZoomEventListener(listener) {
@@ -144,7 +143,9 @@ class BrowserApi {
           this.zoomBehavior_ == BrowserApi.ZoomBehavior.PROPAGATE_PARENT))
       return;
 
-    chrome.tabs.onZoomChange.addListener(function(zoomChangeInfo) {
+    chrome.tabs.onZoomChange.addListener(function(info) {
+      var zoomChangeInfo =
+          /** @type {{tabId: number, newZoomFactor: number}} */ (info);
       if (zoomChangeInfo.tabId != this.streamInfo_.tabId)
         return;
       listener(zoomChangeInfo.newZoomFactor);
@@ -169,30 +170,32 @@ BrowserApi.ZoomBehavior = {
  */
 function createBrowserApiForMimeHandlerView() {
   return new Promise(function(resolve, reject) {
-    chrome.mimeHandlerPrivate.getStreamInfo(resolve);
-  }).then(function(streamInfo) {
-    let promises = [];
-    let zoomBehavior = BrowserApi.ZoomBehavior.NONE;
-    if (streamInfo.tabId != -1) {
-      zoomBehavior = streamInfo.embedded ?
-                      BrowserApi.ZoomBehavior.PROPAGATE_PARENT :
-                      BrowserApi.ZoomBehavior.MANAGE;
-      promises.push(new Promise(function(resolve) {
-        chrome.tabs.get(streamInfo.tabId, resolve);
-      }).then(function(tab) {
-        if (tab)
-          streamInfo.tabUrl = tab.url;
-      }));
-    }
-    if (zoomBehavior == BrowserApi.ZoomBehavior.MANAGE) {
-      promises.push(new Promise(function(resolve) {
-        chrome.tabs.setZoomSettings(
-            streamInfo.tabId, {mode: 'manual', scope: 'per-tab'}, resolve);
-      }));
-    }
-    return Promise.all(promises).then(
-        function() { return BrowserApi.create(streamInfo, zoomBehavior); });
-  });
+           chrome.mimeHandlerPrivate.getStreamInfo(resolve);
+         })
+      .then(function(streamInfo) {
+        let promises = [];
+        let zoomBehavior = BrowserApi.ZoomBehavior.NONE;
+        if (streamInfo.tabId != -1) {
+          zoomBehavior = streamInfo.embedded ?
+              BrowserApi.ZoomBehavior.PROPAGATE_PARENT :
+              BrowserApi.ZoomBehavior.MANAGE;
+          promises.push(new Promise(function(resolve) {
+                          chrome.tabs.get(streamInfo.tabId, resolve);
+                        }).then(function(tab) {
+            if (tab)
+              streamInfo.tabUrl = tab.url;
+          }));
+        }
+        if (zoomBehavior == BrowserApi.ZoomBehavior.MANAGE) {
+          promises.push(new Promise(function(resolve) {
+            chrome.tabs.setZoomSettings(
+                streamInfo.tabId, {mode: 'manual', scope: 'per-tab'}, resolve);
+          }));
+        }
+        return Promise.all(promises).then(function() {
+          return BrowserApi.create(streamInfo, zoomBehavior);
+        });
+      });
 }
 
 /**
@@ -210,18 +213,19 @@ function createBrowserApiForPrintPreview() {
     tabId: -1,
   };
   return new Promise(function(resolve, reject) {
-    if (!chrome.tabs) {
-      resolve();
-      return;
-    }
-    chrome.tabs.getCurrent(function(tab) {
-      streamInfo.tabId = tab.id;
-      streamInfo.tabUrl = tab.url;
-      resolve();
-    });
-  }).then(function() {
-    return BrowserApi.create(streamInfo, BrowserApi.ZoomBehavior.NONE);
-  });
+           if (!chrome.tabs) {
+             resolve();
+             return;
+           }
+           chrome.tabs.getCurrent(function(tab) {
+             streamInfo.tabId = tab.id;
+             streamInfo.tabUrl = tab.url;
+             resolve();
+           });
+         })
+      .then(function() {
+        return BrowserApi.create(streamInfo, BrowserApi.ZoomBehavior.NONE);
+      });
 }
 
 /**
diff --git a/chromium/chrome/browser/resources/pdf/compiled_resources2.gyp b/chromium/chrome/browser/resources/pdf/compiled_resources2.gyp
index a5d9dfe40b8..05a86018b37 100644
--- a/chromium/chrome/browser/resources/pdf/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/pdf/compiled_resources2.gyp
@@ -6,6 +6,14 @@
 {
   'targets': [
     {
+      'target_name': 'browser_api',
+      'dependencies': [
+        '<(EXTERNS_GYP):chrome_extensions',
+        '<(EXTERNS_GYP):mime_handler_private',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'gesture_detector',
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -24,5 +32,16 @@
       'target_name': 'viewport_scroller',
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'pdf_resources',
+      'type': 'none',
+      'dependencies': [
+        'elements/viewer-bookmark/compiled_resources2.gyp:*',
+        'elements/viewer-error-screen/compiled_resources2.gyp:*',
+        'elements/viewer-page-indicator/compiled_resources2.gyp:*',
+        'elements/viewer-page-selector/compiled_resources2.gyp:*',
+        'elements/viewer-password-screen/compiled_resources2.gyp:*',
+      ],
+    },
   ],
 }
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/compiled_resources2.gyp b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/compiled_resources2.gyp
new file mode 100644
index 00000000000..5df4148b621
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/compiled_resources2.gyp
@@ -0,0 +1,15 @@
+# Copyright 2017 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.
+
+{
+  'targets': [
+    {
+      'target_name': 'viewer-bookmark',
+      'dependencies': [
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior/compiled_resources2.gyp:iron-a11y-keys-behavior-extracted',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
index 9d6399070e7..1e7164a333f 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
@@ -3,90 +3,75 @@
 // found in the LICENSE file.
 
 (function() {
-  /** Amount that each level of bookmarks is indented by (px). */
-  var BOOKMARK_INDENT = 20;
+/** Amount that each level of bookmarks is indented by (px). */
+var BOOKMARK_INDENT = 20;
 
-  Polymer({
-    is: 'viewer-bookmark',
+Polymer({
+  is: 'viewer-bookmark',
 
-    properties: {
-      /**
-       * A bookmark object, each containing a:
-       * - title
-       * - page (optional)
-       * - children (an array of bookmarks)
-       */
-      bookmark: {
-        type: Object,
-        observer: 'bookmarkChanged_'
-      },
+  properties: {
+    /**
+     * A bookmark object, each containing a:
+     * - title
+     * - page (optional)
+     * - children (an array of bookmarks)
+     */
+    bookmark: {type: Object, observer: 'bookmarkChanged_'},
 
-      depth: {
-        type: Number,
-        observer: 'depthChanged'
-      },
+    depth: {type: Number, observer: 'depthChanged'},
 
-      childDepth: Number,
+    childDepth: Number,
 
-      childrenShown: {
-        type: Boolean,
-        reflectToAttribute: true,
-        value: false
-      },
+    childrenShown: {type: Boolean, reflectToAttribute: true, value: false},
 
-      keyEventTarget: {
-        type: Object,
-        value: function() {
-          return this.$.item;
-        }
+    keyEventTarget: {
+      type: Object,
+      value: function() {
+        return this.$.item;
       }
-    },
-
-    behaviors: [
-      Polymer.IronA11yKeysBehavior
-    ],
+    }
+  },
 
-    keyBindings: {
-      'enter': 'onEnter_',
-      'space': 'onSpace_'
-    },
+  behaviors: [Polymer.IronA11yKeysBehavior],
 
-    bookmarkChanged_: function() {
-      this.$.expand.style.visibility =
-          this.bookmark.children.length > 0 ? 'visible' : 'hidden';
-    },
+  keyBindings: {'enter': 'onEnter_', 'space': 'onSpace_'},
 
-    depthChanged: function() {
-      this.childDepth = this.depth + 1;
-      this.$.item.style.webkitPaddingStart =
-          (this.depth * BOOKMARK_INDENT) + 'px';
-    },
+  bookmarkChanged_: function() {
+    this.$.expand.style.visibility =
+        this.bookmark.children.length > 0 ? 'visible' : 'hidden';
+  },
 
-    onClick: function() {
-      if (this.bookmark.hasOwnProperty('page'))
-        this.fire('change-page', {page: this.bookmark.page});
-      else if (this.bookmark.hasOwnProperty('uri'))
-        this.fire('navigate', {uri: this.bookmark.uri, newtab: true});
-    },
+  depthChanged: function() {
+    this.childDepth = this.depth + 1;
+    this.$.item.style.webkitPaddingStart =
+        (this.depth * BOOKMARK_INDENT) + 'px';
+  },
 
-    onEnter_: function(e) {
-      // Don't allow events which have propagated up from the expand button to
-      // trigger a click.
-      if (e.detail.keyboardEvent.target != this.$.expand)
-        this.onClick();
-    },
+  onClick: function() {
+    if (this.bookmark.hasOwnProperty('page'))
+      this.fire('change-page', {page: this.bookmark.page});
+    else if (this.bookmark.hasOwnProperty('uri'))
+      this.fire('navigate', {uri: this.bookmark.uri, newtab: true});
+  },
 
-    onSpace_: function(e) {
-      // paper-icon-button stops propagation of space events, so there's no need
-      // to check the event source here.
+  onEnter_: function(e) {
+    // Don't allow events which have propagated up from the expand button to
+    // trigger a click.
+    if (e.detail.keyboardEvent.target != this.$.expand)
       this.onClick();
-      // Prevent default space scroll behavior.
-      e.detail.keyboardEvent.preventDefault();
-    },
+  },
 
-    toggleChildren: function(e) {
-      this.childrenShown = !this.childrenShown;
-      e.stopPropagation();  // Prevent the above onClick handler from firing.
-    }
-  });
+  onSpace_: function(e) {
+    // paper-icon-button stops propagation of space events, so there's no need
+    // to check the event source here.
+    this.onClick();
+    // Prevent default space scroll behavior.
+    e.detail.keyboardEvent.preventDefault();
+  },
+
+  toggleChildren: function(e) {
+    this.childrenShown = !this.childrenShown;
+    e.stopPropagation();  // Prevent the above onClick handler from firing.
+  }
+});
 })();
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.js b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.js
index 1aa2b5cc232..32f3fd320d5 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.js
@@ -2,6 +2,4 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Polymer({
-  is: 'viewer-bookmarks-content'
-});
+Polymer({is: 'viewer-bookmarks-content'});
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/compiled_resources2.gyp b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/compiled_resources2.gyp
new file mode 100644
index 00000000000..061a2d27a67
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/compiled_resources2.gyp
@@ -0,0 +1,15 @@
+# Copyright 2017 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.
+
+{
+  'targets': [
+    {
+      'target_name': 'viewer-error-screen',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp:cr_dialog',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
index 3dccd91dc8b..10a850ee4d3 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
@@ -7,13 +7,14 @@
   <template>
     <style include="cr-shared-style"></style>
     <dialog is="cr-dialog" id="dialog" no-cancel>
-      <div class="title">
+      <div class="title" slot="title">
         [[strings.errorDialogTitle]]
       </div>
-      <div class="body">
+      <div class="body" slot="body">
         [[strings.pageLoadFailed]]
       </div>
-      <div class="button-container" hidden$="[[!reloadFn]]">
+      <div class="button-container" slot="button-container"
+          hidden$="[[!reloadFn]]">
         <paper-button class="action-button" on-click="reload">
           [[strings.pageReload]]
         </paper-button>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js
index 29951a43c1b..017d4747c05 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js
@@ -5,13 +5,13 @@
 Polymer({
   is: 'viewer-error-screen',
   properties: {
-    reloadFn: Object,
+    reloadFn: Function,
 
     strings: Object,
   },
 
   show: function() {
-    this.$.dialog.showModal();
+    /** @type {!CrDialogElement} */ (this.$.dialog).showModal();
   },
 
   reload: function() {
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/compiled_resources2.gyp b/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/compiled_resources2.gyp
new file mode 100644
index 00000000000..f4c56ed7f9b
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/compiled_resources2.gyp
@@ -0,0 +1,12 @@
+# Copyright 2017 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.
+
+{
+  'targets': [
+    {
+      'target_name': 'viewer-page-indicator',
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/viewer-page-indicator.js b/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/viewer-page-indicator.js
index 65b1be2ffc3..96f7f3d07f4 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/viewer-page-indicator.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator/viewer-page-indicator.js
@@ -6,25 +6,17 @@ Polymer({
   is: 'viewer-page-indicator',
 
   properties: {
-    label: {
-      type: String,
-      value: '1'
-    },
+    label: {type: String, value: '1'},
 
-    index: {
-      type: Number,
-      observer: 'indexChanged'
-    },
+    index: {type: Number, observer: 'indexChanged'},
 
-    pageLabels: {
-      type: Array,
-      value: null,
-      observer: 'pageLabelsChanged'
-    }
+    pageLabels: {type: Array, value: null, observer: 'pageLabelsChanged'}
   },
 
+  /** @type {number|undefined} */
   timerId: undefined,
 
+  /** @override */
   ready: function() {
     var callback = this.fadeIn.bind(this, 2000);
     window.addEventListener('scroll', function() {
@@ -36,20 +28,22 @@ Polymer({
     this.fadeIn(6000);
   },
 
+  /** @param {number} displayTime */
   fadeIn: function(displayTime) {
     var percent = window.scrollY /
-        (document.body.scrollHeight -
+        (document.scrollingElement.scrollHeight -
          document.documentElement.clientHeight);
-    this.style.top = percent *
-        (document.documentElement.clientHeight - this.offsetHeight) + 'px';
-// <if expr="is_macosx">
+    this.style.top =
+        percent * (document.documentElement.clientHeight - this.offsetHeight) +
+        'px';
+    // <if expr="is_macosx">
     // On the Mac, if overlay scrollbars are enabled, prevent them from
     // overlapping the triangle.
-    if (window.innerWidth == document.body.scrollWidth)
+    if (window.innerWidth == document.scrollingElement.scrollWidth)
       this.style.right = '16px';
     else
       this.style.right = '0px';
-// </if>
+    // </if>
     this.style.opacity = 1;
     clearTimeout(this.timerId);
 
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/compiled_resources2.gyp b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/compiled_resources2.gyp
new file mode 100644
index 00000000000..00dd3695705
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/compiled_resources2.gyp
@@ -0,0 +1,12 @@
+# Copyright 2017 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.
+
+{
+  'targets': [
+    {
+      'target_name': 'viewer-page-selector',
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
index ad344f60e13..198b551805a 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
@@ -9,27 +9,20 @@ Polymer({
     /**
      * The number of pages the document contains.
      */
-    docLength: {
-      type: Number,
-      value: 1,
-      observer: 'docLengthChanged'
-    },
+    docLength: {type: Number, value: 1, observer: 'docLengthChanged_'},
 
     /**
      * The current page being viewed (1-based). A change to pageNo is mirrored
      * immediately to the input field. A change to the input field is not
      * mirrored back until pageNoCommitted() is called and change-page is fired.
      */
-    pageNo: {
-      type: Number,
-      value: 1
-    },
+    pageNo: {type: Number, value: 1},
 
     strings: Object,
   },
 
   pageNoCommitted: function() {
-    var page = parseInt(this.$.input.value);
+    var page = parseInt(this.$.input.value, 10);
 
     if (!isNaN(page) && page <= this.docLength && page > 0)
       this.fire('change-page', {page: page - 1});
@@ -38,7 +31,8 @@ Polymer({
     this.$.input.blur();
   },
 
-  docLengthChanged: function() {
+  /** @private */
+  docLengthChanged_: function() {
     var numDigits = this.docLength.toString().length;
     this.$.pageselector.style.width = numDigits + 'ch';
     // Set both sides of the slash to the same width, so that the layout is
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/compiled_resources2.gyp b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/compiled_resources2.gyp
new file mode 100644
index 00000000000..a26f57364b1
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/compiled_resources2.gyp
@@ -0,0 +1,15 @@
+# Copyright 2017 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.
+
+{
+  'targets': [
+    {
+      'target_name': 'viewer-password-screen',
+      'dependencies': [
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted'
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
index fe925120f94..76351c2eda9 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
@@ -16,8 +16,8 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" no-cancel>
-      <div class="title">[[strings.passwordDialogTitle]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[strings.passwordDialogTitle]]</div>
+      <div class="body" slot="body">
         <div id="message">[[strings.passwordPrompt]]</div>
         <paper-input id="password"
             type="password"
@@ -27,7 +27,7 @@
             autofocus>
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="submit" class="action-button" on-click="submit">
           [[strings.passwordSubmit]]
         </paper-button>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js
index 0ca52a64a8e..ef1f1284a9f 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js
@@ -25,18 +25,20 @@ Polymer({
   },
 
   deny: function() {
-    this.$.password.disabled = false;
+    var password = /** @type {!PaperInputElement} */ (this.$.password);
+    password.disabled = false;
     this.$.submit.disabled = false;
     this.invalid = true;
-    this.$.password.focus();
-    this.$.password.inputElement.select();
+    password.focus();
+    password.inputElement.select();
   },
 
   submit: function() {
-    if (this.$.password.value.length == 0)
+    var password = /** @type {!PaperInputElement} */ (this.$.password);
+    if (password.value.length == 0)
       return;
-    this.$.password.disabled = true;
+    password.disabled = true;
     this.$.submit.disabled = true;
-    this.fire('password-submitted', {password: this.$.password.value});
+    this.fire('password-submitted', {password: password.value});
   },
 });
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
index d4e8cbd6637..07b03909149 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
@@ -2,145 +2,126 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 (function() {
-  Polymer({
-    is: 'viewer-pdf-toolbar',
-
-    behaviors: [
-      Polymer.NeonAnimationRunnerBehavior
-    ],
-
-    properties: {
-      /**
-       * The current loading progress of the PDF document (0 - 100).
-       */
-      loadProgress: {
-        type: Number,
-        observer: 'loadProgressChanged'
-      },
-
-      /**
-       * The title of the PDF document.
-       */
-      docTitle: String,
-
-      /**
-       * The number of the page being viewed (1-based).
-       */
-      pageNo: Number,
-
-      /**
-       * Tree of PDF bookmarks (or null if the document has no bookmarks).
-       */
-      bookmarks: {
-        type: Object,
-        value: null
-      },
-
-      /**
-       * The number of pages in the PDF document.
-       */
-      docLength: Number,
-
-      /**
-       * Whether the toolbar is opened and visible.
-       */
-      opened: {
-        type: Boolean,
-        value: true
-      },
-
-      strings: Object,
-
-      animationConfig: {
-        value: function() {
-          return {
-            'entry': {
-              name: 'transform-animation',
-              node: this,
-              transformFrom: 'translateY(-100%)',
-              transformTo: 'translateY(0%)',
-              timing: {
-                easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                duration: 250
-              }
-            },
-            'exit': {
-              name: 'slide-up-animation',
-              node: this,
-              timing: {
-                easing: 'cubic-bezier(0.4, 0, 1, 1)',
-                duration: 250
-              }
-            }
-          };
-        }
+Polymer({
+  is: 'viewer-pdf-toolbar',
+
+  behaviors: [Polymer.NeonAnimationRunnerBehavior],
+
+  properties: {
+    /**
+     * The current loading progress of the PDF document (0 - 100).
+     */
+    loadProgress: {type: Number, observer: 'loadProgressChanged'},
+
+    /**
+     * The title of the PDF document.
+     */
+    docTitle: String,
+
+    /**
+     * The number of the page being viewed (1-based).
+     */
+    pageNo: Number,
+
+    /**
+     * Tree of PDF bookmarks (or null if the document has no bookmarks).
+     */
+    bookmarks: {type: Object, value: null},
+
+    /**
+     * The number of pages in the PDF document.
+     */
+    docLength: Number,
+
+    /**
+     * Whether the toolbar is opened and visible.
+     */
+    opened: {type: Boolean, value: true},
+
+    strings: Object,
+
+    animationConfig: {
+      value: function() {
+        return {
+          'entry': {
+            name: 'transform-animation',
+            node: this,
+            transformFrom: 'translateY(-100%)',
+            transformTo: 'translateY(0%)',
+            timing: {easing: 'cubic-bezier(0, 0, 0.2, 1)', duration: 250}
+          },
+          'exit': {
+            name: 'slide-up-animation',
+            node: this,
+            timing: {easing: 'cubic-bezier(0.4, 0, 1, 1)', duration: 250}
+          }
+        };
       }
-    },
+    }
+  },
 
-    listeners: {
-      'neon-animation-finish': '_onAnimationFinished'
-    },
+  listeners: {'neon-animation-finish': '_onAnimationFinished'},
 
-    _onAnimationFinished: function() {
-      this.style.transform = this.opened ? 'none' : 'translateY(-100%)';
-    },
+  _onAnimationFinished: function() {
+    this.style.transform = this.opened ? 'none' : 'translateY(-100%)';
+  },
 
-    loadProgressChanged: function() {
-      if (this.loadProgress >= 100) {
-        this.$.pageselector.classList.toggle('invisible', false);
-        this.$.buttons.classList.toggle('invisible', false);
-        this.$.progress.style.opacity = 0;
-      }
-    },
+  loadProgressChanged: function() {
+    if (this.loadProgress >= 100) {
+      this.$.pageselector.classList.toggle('invisible', false);
+      this.$.buttons.classList.toggle('invisible', false);
+      this.$.progress.style.opacity = 0;
+    }
+  },
 
-    hide: function() {
-      if (this.opened)
-        this.toggleVisibility();
-    },
+  hide: function() {
+    if (this.opened)
+      this.toggleVisibility();
+  },
 
-    show: function() {
-      if (!this.opened) {
-        this.toggleVisibility();
-      }
-    },
-
-    toggleVisibility: function() {
-      this.opened = !this.opened;
-      this.cancelAnimation();
-      this.playAnimation(this.opened ? 'entry' : 'exit');
-    },
-
-    selectPageNumber: function() {
-      this.$.pageselector.select();
-    },
-
-    shouldKeepOpen: function() {
-      return this.$.bookmarks.dropdownOpen || this.loadProgress < 100 ||
-          this.$.pageselector.isActive();
-    },
-
-    hideDropdowns: function() {
-      if (this.$.bookmarks.dropdownOpen) {
-        this.$.bookmarks.toggleDropdown();
-        return true;
-      }
-      return false;
-    },
+  show: function() {
+    if (!this.opened) {
+      this.toggleVisibility();
+    }
+  },
+
+  toggleVisibility: function() {
+    this.opened = !this.opened;
+    this.cancelAnimation();
+    this.playAnimation(this.opened ? 'entry' : 'exit');
+  },
+
+  selectPageNumber: function() {
+    this.$.pageselector.select();
+  },
+
+  shouldKeepOpen: function() {
+    return this.$.bookmarks.dropdownOpen || this.loadProgress < 100 ||
+        this.$.pageselector.isActive();
+  },
+
+  hideDropdowns: function() {
+    if (this.$.bookmarks.dropdownOpen) {
+      this.$.bookmarks.toggleDropdown();
+      return true;
+    }
+    return false;
+  },
 
-    setDropdownLowerBound: function(lowerBound) {
-      this.$.bookmarks.lowerBound = lowerBound;
-    },
+  setDropdownLowerBound: function(lowerBound) {
+    this.$.bookmarks.lowerBound = lowerBound;
+  },
 
-    rotateRight: function() {
-      this.fire('rotate-right');
-    },
+  rotateRight: function() {
+    this.fire('rotate-right');
+  },
 
-    download: function() {
-      this.fire('save');
-    },
+  download: function() {
+    this.fire('save');
+  },
 
-    print: function() {
-      this.fire('print');
-    }
-  });
+  print: function() {
+    this.fire('print');
+  }
+});
 })();
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js
index 17a04c04d7b..53e9acc5318 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js
@@ -3,136 +3,132 @@
 // found in the LICENSE file.
 
 (function() {
-  /**
-   * Size of additional padding in the inner scrollable section of the dropdown.
-   */
-  var DROPDOWN_INNER_PADDING = 12;
-
-  /** Size of vertical padding on the outer #dropdown element. */
-  var DROPDOWN_OUTER_PADDING = 2;
-
-  /** Minimum height of toolbar dropdowns (px). */
-  var MIN_DROPDOWN_HEIGHT = 200;
-
-  Polymer({
-    is: 'viewer-toolbar-dropdown',
-
-    properties: {
-      /** String to be displayed at the top of the dropdown. */
-      header: String,
-
-      /** Icon to display when the dropdown is closed. */
-      closedIcon: String,
-
-      /** Icon to display when the dropdown is open. */
-      openIcon: String,
-
-      /** True if the dropdown is currently open. */
-      dropdownOpen: {
-        type: Boolean,
-        reflectToAttribute: true,
-        value: false
-      },
-
-      /** Toolbar icon currently being displayed. */
-      dropdownIcon: {
-        type: String,
-        computed: 'computeIcon_(dropdownOpen, closedIcon, openIcon)'
-      },
-
-      /** Lowest vertical point that the dropdown should occupy (px). */
-      lowerBound: {
-        type: Number,
-        observer: 'lowerBoundChanged_'
-      },
-
-      /**
-       * True if the max-height CSS property for the dropdown scroll container
-       * is valid. If false, the height will be updated the next time the
-       * dropdown is visible.
-       */
-      maxHeightValid_: false,
-
-      /** Current animation being played, or null if there is none. */
-      animation_: Object
-    },
+/**
+ * Size of additional padding in the inner scrollable section of the dropdown.
+ */
+var DROPDOWN_INNER_PADDING = 12;
 
-    computeIcon_: function(dropdownOpen, closedIcon, openIcon) {
-      return dropdownOpen ? openIcon : closedIcon;
-    },
+/** Size of vertical padding on the outer #dropdown element. */
+var DROPDOWN_OUTER_PADDING = 2;
 
-    lowerBoundChanged_: function() {
-      this.maxHeightValid_ = false;
-      if (this.dropdownOpen)
-        this.updateMaxHeight();
-    },
+/** Minimum height of toolbar dropdowns (px). */
+var MIN_DROPDOWN_HEIGHT = 200;
 
-    toggleDropdown: function() {
-      this.dropdownOpen = !this.dropdownOpen;
-      if (this.dropdownOpen) {
-        this.$.dropdown.style.display = 'block';
-        if (!this.maxHeightValid_)
-          this.updateMaxHeight();
-      }
-      this.cancelAnimation_();
-      this.playAnimation_(this.dropdownOpen);
-    },
+Polymer({
+  is: 'viewer-toolbar-dropdown',
 
-    updateMaxHeight: function() {
-      var scrollContainer = this.$['scroll-container'];
-      var height = this.lowerBound -
-          scrollContainer.getBoundingClientRect().top -
-          DROPDOWN_INNER_PADDING;
-      height = Math.max(height, MIN_DROPDOWN_HEIGHT);
-      scrollContainer.style.maxHeight = height + 'px';
-      this.maxHeightValid_ = true;
-    },
+  properties: {
+    /** String to be displayed at the top of the dropdown. */
+    header: String,
 
-    cancelAnimation_: function() {
-      if (this._animation)
-        this._animation.cancel();
-    },
+    /** Icon to display when the dropdown is closed. */
+    closedIcon: String,
 
-    /**
-     * Start an animation on the dropdown.
-     * @param {boolean} isEntry True to play entry animation, false to play
-     * exit.
-     * @private
-     */
-    playAnimation_: function(isEntry) {
-      this.animation_ = isEntry ? this.animateEntry_() : this.animateExit_();
-      this.animation_.onfinish = function() {
-        this.animation_ = null;
-        if (!this.dropdownOpen)
-          this.$.dropdown.style.display = 'none';
-      }.bind(this);
-    },
-
-    animateEntry_: function() {
-      var maxHeight = this.$.dropdown.getBoundingClientRect().height -
-          DROPDOWN_OUTER_PADDING;
-
-      if (maxHeight < 0)
-        maxHeight = 0;
+    /** Icon to display when the dropdown is open. */
+    openIcon: String,
 
-      var fade = new KeyframeEffect(this.$.dropdown, [
-            {opacity: 0},
-            {opacity: 1}
-          ], {duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
-      var slide = new KeyframeEffect(this.$.dropdown, [
-            {height: '20px', transform: 'translateY(-10px)'},
-            {height: maxHeight + 'px', transform: 'translateY(0)'}
-          ], {duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
+    /** True if the dropdown is currently open. */
+    dropdownOpen: {type: Boolean, reflectToAttribute: true, value: false},
 
-      return document.timeline.play(new GroupEffect([fade, slide]));
+    /** Toolbar icon currently being displayed. */
+    dropdownIcon: {
+      type: String,
+      computed: 'computeIcon_(dropdownOpen, closedIcon, openIcon)'
     },
 
-    animateExit_: function() {
-      return this.$.dropdown.animate([
-            {transform: 'translateY(0)', opacity: 1},
-            {transform: 'translateY(-5px)', opacity: 0}
-          ], {duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'});
+    /** Lowest vertical point that the dropdown should occupy (px). */
+    lowerBound: {type: Number, observer: 'lowerBoundChanged_'},
+
+    /**
+     * True if the max-height CSS property for the dropdown scroll container
+     * is valid. If false, the height will be updated the next time the
+     * dropdown is visible.
+     */
+    maxHeightValid_: false,
+
+    /** Current animation being played, or null if there is none. */
+    animation_: Object
+  },
+
+  computeIcon_: function(dropdownOpen, closedIcon, openIcon) {
+    return dropdownOpen ? openIcon : closedIcon;
+  },
+
+  lowerBoundChanged_: function() {
+    this.maxHeightValid_ = false;
+    if (this.dropdownOpen)
+      this.updateMaxHeight();
+  },
+
+  toggleDropdown: function() {
+    this.dropdownOpen = !this.dropdownOpen;
+    if (this.dropdownOpen) {
+      this.$.dropdown.style.display = 'block';
+      if (!this.maxHeightValid_)
+        this.updateMaxHeight();
     }
-  });
+    this.cancelAnimation_();
+    this.playAnimation_(this.dropdownOpen);
+  },
+
+  updateMaxHeight: function() {
+    var scrollContainer = this.$['scroll-container'];
+    var height = this.lowerBound - scrollContainer.getBoundingClientRect().top -
+        DROPDOWN_INNER_PADDING;
+    height = Math.max(height, MIN_DROPDOWN_HEIGHT);
+    scrollContainer.style.maxHeight = height + 'px';
+    this.maxHeightValid_ = true;
+  },
+
+  cancelAnimation_: function() {
+    if (this._animation)
+      this._animation.cancel();
+  },
+
+  /**
+   * Start an animation on the dropdown.
+   * @param {boolean} isEntry True to play entry animation, false to play
+   * exit.
+   * @private
+   */
+  playAnimation_: function(isEntry) {
+    this.animation_ = isEntry ? this.animateEntry_() : this.animateExit_();
+    this.animation_.onfinish = function() {
+      this.animation_ = null;
+      if (!this.dropdownOpen)
+        this.$.dropdown.style.display = 'none';
+    }.bind(this);
+  },
+
+  animateEntry_: function() {
+    var maxHeight =
+        this.$.dropdown.getBoundingClientRect().height - DROPDOWN_OUTER_PADDING;
+
+    if (maxHeight < 0)
+      maxHeight = 0;
+
+    var fade = new KeyframeEffect(
+        this.$.dropdown, [{opacity: 0}, {opacity: 1}],
+        {duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
+    var slide = new KeyframeEffect(
+        this.$.dropdown,
+        [
+          {height: '20px', transform: 'translateY(-10px)'},
+          {height: maxHeight + 'px', transform: 'translateY(0)'}
+        ],
+        {duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
+
+    return document.timeline.play(new GroupEffect([fade, slide]));
+  },
+
+  animateExit_: function() {
+    return this.$.dropdown.animate(
+        [
+          {transform: 'translateY(0)', opacity: 1},
+          {transform: 'translateY(-5px)', opacity: 0}
+        ],
+        {duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'});
+  }
+});
 
 })();
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
index df556aced28..6558c15d4a6 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
@@ -18,41 +18,25 @@ Polymer({
      * perform the conversion manually.
      * @private
      */
-    icons_: {
-      type: Array,
-      value: [''],
-      computed: 'computeIconsArray_(icons)'
-    },
+    icons_: {type: Array, value: [''], computed: 'computeIconsArray_(icons)'},
 
     tooltips: Array,
 
-    closed: {
-      type: Boolean,
-      reflectToAttribute: true,
-      value: false
-    },
+    closed: {type: Boolean, reflectToAttribute: true, value: false},
 
-    delay: {
-      type: Number,
-      observer: 'delayChanged_'
-    },
+    delay: {type: Number, observer: 'delayChanged_'},
 
     /**
      * Index of the icon currently being displayed.
      */
-    activeIndex: {
-      type: Number,
-      value: 0
-    },
+    activeIndex: {type: Number, value: 0},
 
     /**
      * Icon currently being displayed on the FAB.
      * @private
      */
-    visibleIcon_: {
-      type: String,
-      computed: 'computeVisibleIcon_(icons_, activeIndex)'
-    },
+    visibleIcon_:
+        {type: String, computed: 'computeVisibleIcon_(icons_, activeIndex)'},
 
     visibleTooltip_: {
       type: String,
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
index 3ade73b7174..6a4af8f4aa3 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
@@ -4,96 +4,88 @@
 
 (function() {
 
-  var FIT_TO_PAGE = 0;
-  var FIT_TO_WIDTH = 1;
+var FIT_TO_PAGE = 0;
+var FIT_TO_WIDTH = 1;
 
-  Polymer({
-    is: 'viewer-zoom-toolbar',
+Polymer({
+  is: 'viewer-zoom-toolbar',
 
-    properties: {
-      strings: {
-        type: Object,
-        observer: 'updateTooltips_'
-      },
+  properties: {
+    strings: {type: Object, observer: 'updateTooltips_'},
 
-      visible_: {
-        type: Boolean,
-        value: true
-      }
-    },
+    visible_: {type: Boolean, value: true}
+  },
 
-    isVisible: function() {
-      return this.visible_;
-    },
+  isVisible: function() {
+    return this.visible_;
+  },
 
-    /**
-     * @private
-     * Change button tooltips to match any changes to localized strings.
-     */
-    updateTooltips_: function() {
-      this.$['fit-button'].tooltips = [
-          this.strings.tooltipFitToPage,
-          this.strings.tooltipFitToWidth
-      ];
-      this.$['zoom-in-button'].tooltips = [this.strings.tooltipZoomIn];
-      this.$['zoom-out-button'].tooltips = [this.strings.tooltipZoomOut];
-    },
+  /**
+   * @private
+   * Change button tooltips to match any changes to localized strings.
+   */
+  updateTooltips_: function() {
+    this.$['fit-button'].tooltips =
+        [this.strings.tooltipFitToPage, this.strings.tooltipFitToWidth];
+    this.$['zoom-in-button'].tooltips = [this.strings.tooltipZoomIn];
+    this.$['zoom-out-button'].tooltips = [this.strings.tooltipZoomOut];
+  },
 
-    /**
-     * Handle clicks of the fit-button.
-     */
-    fitToggle: function() {
-      if (this.$['fit-button'].activeIndex == FIT_TO_WIDTH)
-        this.fire('fit-to-width');
-      else
-        this.fire('fit-to-page');
-    },
+  /**
+   * Handle clicks of the fit-button.
+   */
+  fitToggle: function() {
+    if (this.$['fit-button'].activeIndex == FIT_TO_WIDTH)
+      this.fire('fit-to-width');
+    else
+      this.fire('fit-to-page');
+  },
 
-    /**
-     * Handle the keyboard shortcut equivalent of fit-button clicks.
-     */
-    fitToggleFromHotKey: function() {
-      this.fitToggle();
+  /**
+   * Handle the keyboard shortcut equivalent of fit-button clicks.
+   */
+  fitToggleFromHotKey: function() {
+    this.fitToggle();
 
-      // Toggle the button state since there was no mouse click.
-      var button = this.$['fit-button'];
-      if (button.activeIndex == FIT_TO_WIDTH)
-        button.activeIndex = FIT_TO_PAGE;
-      else
-        button.activeIndex = FIT_TO_WIDTH;
-    },
+    // Toggle the button state since there was no mouse click.
+    var button = this.$['fit-button'];
+    if (button.activeIndex == FIT_TO_WIDTH)
+      button.activeIndex = FIT_TO_PAGE;
+    else
+      button.activeIndex = FIT_TO_WIDTH;
+  },
 
-    /**
-     * Handle clicks of the zoom-in-button.
-     */
-    zoomIn: function() {
-      this.fire('zoom-in');
-    },
+  /**
+   * Handle clicks of the zoom-in-button.
+   */
+  zoomIn: function() {
+    this.fire('zoom-in');
+  },
 
-    /**
-     * Handle clicks of the zoom-out-button.
-     */
-    zoomOut: function() {
-      this.fire('zoom-out');
-    },
+  /**
+   * Handle clicks of the zoom-out-button.
+   */
+  zoomOut: function() {
+    this.fire('zoom-out');
+  },
 
-    show: function() {
-      if (!this.visible_) {
-        this.visible_ = true;
-        this.$['fit-button'].show();
-        this.$['zoom-in-button'].show();
-        this.$['zoom-out-button'].show();
-      }
-    },
+  show: function() {
+    if (!this.visible_) {
+      this.visible_ = true;
+      this.$['fit-button'].show();
+      this.$['zoom-in-button'].show();
+      this.$['zoom-out-button'].show();
+    }
+  },
 
-    hide: function() {
-      if (this.visible_) {
-        this.visible_ = false;
-        this.$['fit-button'].hide();
-        this.$['zoom-in-button'].hide();
-        this.$['zoom-out-button'].hide();
-      }
-    },
-  });
+  hide: function() {
+    if (this.visible_) {
+      this.visible_ = false;
+      this.$['fit-button'].hide();
+      this.$['zoom-in-button'].hide();
+      this.$['zoom-out-button'].hide();
+    }
+  },
+});
 
 })();
diff --git a/chromium/chrome/browser/resources/pdf/gesture_detector.js b/chromium/chrome/browser/resources/pdf/gesture_detector.js
index d73a85b7a3b..811bfe28b5b 100644
--- a/chromium/chrome/browser/resources/pdf/gesture_detector.js
+++ b/chromium/chrome/browser/resources/pdf/gesture_detector.js
@@ -20,20 +20,20 @@ class GestureDetector {
     this.element_.addEventListener(
         'touchstart',
         /** @type {function(!Event)} */ (this.onTouchStart_.bind(this)),
-        { passive: true });
+        {passive: true});
 
     this.element_.addEventListener(
         'touchmove',
         /** @type {function(!Event)} */ (this.onTouch_.bind(this)),
-        { passive: false });
+        {passive: false});
     this.element_.addEventListener(
         'touchend',
         /** @type {function(!Event)} */ (this.onTouch_.bind(this)),
-        { passive: true });
+        {passive: true});
     this.element_.addEventListener(
         'touchcancel',
         /** @type {function(!Event)} */ (this.onTouch_.bind(this)),
-        { passive: true });
+        {passive: true});
 
     this.pinchStartEvent_ = null;
     this.lastTouchTouchesCount_ = 0;
@@ -42,11 +42,8 @@ class GestureDetector {
     this.lastEvent_ = null;
 
     /** @private {!Map<string, !Array<!Function>>} */
-    this.listeners_ = new Map([
-      ['pinchstart', []],
-      ['pinchupdate', []],
-      ['pinchend', []]
-    ]);
+    this.listeners_ =
+        new Map([['pinchstart', []], ['pinchupdate', []], ['pinchend', []]]);
   }
 
   /**
@@ -92,10 +89,7 @@ class GestureDetector {
 
     this.pinchStartEvent_ = event;
     this.lastEvent_ = event;
-    this.notify_({
-      type: 'pinchstart',
-      center: GestureDetector.center_(event)
-    });
+    this.notify_({type: 'pinchstart', center: GestureDetector.center_(event)});
   }
 
   /**
@@ -112,8 +106,8 @@ class GestureDetector {
     // Check if the pinch ends with the current event.
     if (event.touches.length < 2 ||
         lastEvent.touches.length !== event.touches.length) {
-      let startScaleRatio = GestureDetector.pinchScaleRatio_(
-          lastEvent, this.pinchStartEvent_);
+      let startScaleRatio =
+          GestureDetector.pinchScaleRatio_(lastEvent, this.pinchStartEvent_);
       let center = GestureDetector.center_(lastEvent);
       let endEvent = {
         type: 'pinchend',
@@ -131,8 +125,8 @@ class GestureDetector {
     event.preventDefault();
 
     let scaleRatio = GestureDetector.pinchScaleRatio_(event, lastEvent);
-    let startScaleRatio = GestureDetector.pinchScaleRatio_(
-        event, this.pinchStartEvent_);
+    let startScaleRatio =
+        GestureDetector.pinchScaleRatio_(event, this.pinchStartEvent_);
     let center = GestureDetector.center_(event);
     this.notify_({
       type: 'pinchupdate',
diff --git a/chromium/chrome/browser/resources/pdf/main.js b/chromium/chrome/browser/resources/pdf/main.js
index 901b8e67074..6a1061c6535 100644
--- a/chromium/chrome/browser/resources/pdf/main.js
+++ b/chromium/chrome/browser/resources/pdf/main.js
@@ -12,44 +12,44 @@ var viewer;
 
 
 (function() {
-  /**
-   * Stores any pending messages received which should be passed to the
-   * PDFViewer when it is created.
-   * @type Array
-   */
-  var pendingMessages = [];
-
-  /**
-   * Handles events that are received prior to the PDFViewer being created.
-   * @param {Object} message A message event received.
-   */
-  function handleScriptingMessage(message) {
-    pendingMessages.push(message);
-  }
-
-  /**
-   * Initialize the global PDFViewer and pass any outstanding messages to it.
-   * @param {Object} browserApi An object providing an API to the browser.
-   */
-  function initViewer(browserApi) {
-    // PDFViewer will handle any messages after it is created.
-    window.removeEventListener('message', handleScriptingMessage, false);
-    viewer = new PDFViewer(browserApi);
-    while (pendingMessages.length > 0)
-      viewer.handleScriptingMessage(pendingMessages.shift());
-  }
-
-  /**
-   * Entrypoint for starting the PDF viewer. This function obtains the browser
-   * API for the PDF and constructs a PDFViewer object with it.
-   */
-  function main() {
-    // Set up an event listener to catch scripting messages which are sent prior
-    // to the PDFViewer being created.
-    window.addEventListener('message', handleScriptingMessage, false);
-
-    createBrowserApi().then(initViewer);
-  }
-
-  main();
+/**
+ * Stores any pending messages received which should be passed to the
+ * PDFViewer when it is created.
+ * @type Array
+ */
+var pendingMessages = [];
+
+/**
+ * Handles events that are received prior to the PDFViewer being created.
+ * @param {Object} message A message event received.
+ */
+function handleScriptingMessage(message) {
+  pendingMessages.push(message);
+}
+
+/**
+ * Initialize the global PDFViewer and pass any outstanding messages to it.
+ * @param {Object} browserApi An object providing an API to the browser.
+ */
+function initViewer(browserApi) {
+  // PDFViewer will handle any messages after it is created.
+  window.removeEventListener('message', handleScriptingMessage, false);
+  viewer = new PDFViewer(browserApi);
+  while (pendingMessages.length > 0)
+    viewer.handleScriptingMessage(pendingMessages.shift());
+}
+
+/**
+ * Entrypoint for starting the PDF viewer. This function obtains the browser
+ * API for the PDF and constructs a PDFViewer object with it.
+ */
+function main() {
+  // Set up an event listener to catch scripting messages which are sent prior
+  // to the PDFViewer being created.
+  window.addEventListener('message', handleScriptingMessage, false);
+
+  createBrowserApi().then(initViewer);
+}
+
+main();
 })();
diff --git a/chromium/chrome/browser/resources/pdf/navigator.js b/chromium/chrome/browser/resources/pdf/navigator.js
index d619c42a60b..ebc18db186e 100644
--- a/chromium/chrome/browser/resources/pdf/navigator.js
+++ b/chromium/chrome/browser/resources/pdf/navigator.js
@@ -179,10 +179,8 @@ Navigator.prototype = {
    */
   isValidUrl_: function(url) {
     // Make sure |url| starts with a valid scheme.
-    if (!url.startsWith('http://') &&
-        !url.startsWith('https://') &&
-        !url.startsWith('ftp://') &&
-        !url.startsWith('file://') &&
+    if (!url.startsWith('http://') && !url.startsWith('https://') &&
+        !url.startsWith('ftp://') && !url.startsWith('file://') &&
         !url.startsWith('mailto:')) {
       return false;
     }
@@ -193,11 +191,8 @@ Navigator.prototype = {
 
 
     // Make sure |url| is not only a scheme.
-    if (url == 'http://' ||
-        url == 'https://' ||
-        url == 'ftp://' ||
-        url == 'file://' ||
-        url == 'mailto:') {
+    if (url == 'http://' || url == 'https://' || url == 'ftp://' ||
+        url == 'file://' || url == 'mailto:') {
       return false;
     }
 
@@ -226,8 +221,8 @@ Navigator.prototype = {
       var schemeEndIndex = this.originalUrl_.indexOf('://');
       var firstSlash = this.originalUrl_.indexOf('/', schemeEndIndex + 3);
       // e.g. http://www.foo.com/bar -> http://www.foo.com
-      var domain = firstSlash != -1 ?
-          this.originalUrl_.substr(0, firstSlash) : this.originalUrl_;
+      var domain = firstSlash != -1 ? this.originalUrl_.substr(0, firstSlash) :
+                                      this.originalUrl_;
       return domain + url;
     }
 
@@ -245,7 +240,8 @@ Navigator.prototype = {
     if (!isRelative) {
       var domainSeparatorIndex = url.indexOf('/');
       var domainName = domainSeparatorIndex == -1 ?
-          url : url.substr(0, domainSeparatorIndex);
+          url :
+          url.substr(0, domainSeparatorIndex);
       var domainDotCount = (domainName.match(/\./g) || []).length;
       if (domainDotCount < 2)
         isRelative = true;
@@ -253,8 +249,8 @@ Navigator.prototype = {
 
     if (isRelative) {
       var slashIndex = this.originalUrl_.lastIndexOf('/');
-      var path = slashIndex != -1 ?
-          this.originalUrl_.substr(0, slashIndex) : this.originalUrl_;
+      var path = slashIndex != -1 ? this.originalUrl_.substr(0, slashIndex) :
+                                    this.originalUrl_;
       return path + '/' + url;
     }
 
diff --git a/chromium/chrome/browser/resources/pdf/open_pdf_params_parser.js b/chromium/chrome/browser/resources/pdf/open_pdf_params_parser.js
index 8d1ac213e69..2eefdec662e 100644
--- a/chromium/chrome/browser/resources/pdf/open_pdf_params_parser.js
+++ b/chromium/chrome/browser/resources/pdf/open_pdf_params_parser.js
@@ -42,8 +42,10 @@ OpenPDFParamsParser.prototype = {
     }
 
     // Handle #zoom=scale,left,top.
-    var position = {x: parseFloat(paramValueSplit[1]),
-                    y: parseFloat(paramValueSplit[2])};
+    var position = {
+      x: parseFloat(paramValueSplit[1]),
+      y: parseFloat(paramValueSplit[2])
+    };
     viewportPosition['position'] = position;
     viewportPosition['zoom'] = zoomFactor;
   },
@@ -123,10 +125,8 @@ OpenPDFParamsParser.prototype = {
 
     if (viewportPosition.page === undefined &&
         'nameddest' in paramsDictionary) {
-      this.outstandingRequests_.push({
-        callback: callback,
-        viewportPosition: viewportPosition
-      });
+      this.outstandingRequests_.push(
+          {callback: callback, viewportPosition: viewportPosition});
       this.getNamedDestinationsFunction_(paramsDictionary['nameddest']);
     } else {
       callback(viewportPosition);
diff --git a/chromium/chrome/browser/resources/pdf/pdf.js b/chromium/chrome/browser/resources/pdf/pdf.js
index 898935ef283..46c54bea404 100644
--- a/chromium/chrome/browser/resources/pdf/pdf.js
+++ b/chromium/chrome/browser/resources/pdf/pdf.js
@@ -51,9 +51,9 @@ function shouldIgnoreKeyEvents(activeElement) {
     activeElement = activeElement.shadowRoot.activeElement;
   }
 
-  return (activeElement.isContentEditable ||
-          activeElement.tagName == 'INPUT' ||
-          activeElement.tagName == 'TEXTAREA');
+  return (
+      activeElement.isContentEditable || activeElement.tagName == 'INPUT' ||
+      activeElement.tagName == 'TEXTAREA');
 }
 
 /**
@@ -102,6 +102,7 @@ function PDFViewer(browserApi) {
   this.delayedScriptingMessages_ = [];
 
   this.isPrintPreview_ = location.origin === 'chrome://print';
+  this.isPrintPreviewLoaded_ = false;
 
   // Parse open pdf parameters.
   this.paramsParser_ =
@@ -117,8 +118,8 @@ function PDFViewer(browserApi) {
   if (this.isPrintPreview_)
     this.pageIndicator_ = $('page-indicator');
   this.passwordScreen_ = $('password-screen');
-  this.passwordScreen_.addEventListener('password-submitted',
-                                        this.onPasswordSubmitted_.bind(this));
+  this.passwordScreen_.addEventListener(
+      'password-submitted', this.onPasswordSubmitted_.bind(this));
   this.errorScreen_ = $('error-screen');
   // Can only reload if we are in a normal tab.
   if (chrome.tabs && this.browserApi_.getStreamInfo().tabId != -1) {
@@ -133,15 +134,12 @@ function PDFViewer(browserApi) {
       (toolbarEnabled) ? PDFViewer.MATERIAL_TOOLBAR_HEIGHT : 0;
   var defaultZoom =
       this.browserApi_.getZoomBehavior() == BrowserApi.ZoomBehavior.MANAGE ?
-      this.browserApi_.getDefaultZoom() : 1.0;
-  this.viewport_ = new Viewport(window,
-                                this.sizer_,
-                                this.viewportChanged_.bind(this),
-                                this.beforeZoom_.bind(this),
-                                this.afterZoom_.bind(this),
-                                getScrollbarWidth(),
-                                defaultZoom,
-                                topToolbarHeight);
+      this.browserApi_.getDefaultZoom() :
+      1.0;
+  this.viewport_ = new Viewport(
+      window, this.sizer_, this.viewportChanged_.bind(this),
+      this.beforeZoom_.bind(this), this.afterZoom_.bind(this),
+      getScrollbarWidth(), defaultZoom, topToolbarHeight);
 
   // Create the plugin object dynamically so we can set its src. The plugin
   // element is sized to fill the entire window and is set to be fixed
@@ -152,18 +150,18 @@ function PDFViewer(browserApi) {
   // chrome/renderer/printing/print_web_view_helper.cc actually references it.
   this.plugin_.id = 'plugin';
   this.plugin_.type = 'application/x-google-chrome-pdf';
-  this.plugin_.addEventListener('message', this.handlePluginMessage_.bind(this),
-                                false);
+  this.plugin_.addEventListener(
+      'message', this.handlePluginMessage_.bind(this), false);
 
   // Handle scripting messages from outside the extension that wish to interact
   // with it. We also send a message indicating that extension has loaded and
   // is ready to receive messages.
-  window.addEventListener('message', this.handleScriptingMessage.bind(this),
-                          false);
+  window.addEventListener(
+      'message', this.handleScriptingMessage.bind(this), false);
 
   this.plugin_.setAttribute('src', this.originalUrl_);
-  this.plugin_.setAttribute('stream-url',
-                            this.browserApi_.getStreamInfo().streamUrl);
+  this.plugin_.setAttribute(
+      'stream-url', this.browserApi_.getStreamInfo().streamUrl);
   var headers = '';
   for (var header in this.browserApi_.getStreamInfo().responseHeaders) {
     headers += header + ': ' +
@@ -176,8 +174,8 @@ function PDFViewer(browserApi) {
   this.plugin_.setAttribute('top-toolbar-height', topToolbarHeight);
 
   if (this.browserApi_.getStreamInfo().embedded) {
-    this.plugin_.setAttribute('top-level-url',
-                              this.browserApi_.getStreamInfo().tabUrl);
+    this.plugin_.setAttribute(
+        'top-level-url', this.browserApi_.getStreamInfo().tabUrl);
   } else {
     this.plugin_.setAttribute('full-frame', '');
   }
@@ -185,14 +183,13 @@ function PDFViewer(browserApi) {
 
   // Setup the button event listeners.
   this.zoomToolbar_ = $('zoom-toolbar');
-  this.zoomToolbar_.addEventListener('fit-to-width',
-      this.viewport_.fitToWidth.bind(this.viewport_));
-  this.zoomToolbar_.addEventListener('fit-to-page',
-      this.fitToPage_.bind(this));
-  this.zoomToolbar_.addEventListener('zoom-in',
-      this.viewport_.zoomIn.bind(this.viewport_));
-  this.zoomToolbar_.addEventListener('zoom-out',
-      this.viewport_.zoomOut.bind(this.viewport_));
+  this.zoomToolbar_.addEventListener(
+      'fit-to-width', this.viewport_.fitToWidth.bind(this.viewport_));
+  this.zoomToolbar_.addEventListener('fit-to-page', this.fitToPage_.bind(this));
+  this.zoomToolbar_.addEventListener(
+      'zoom-in', this.viewport_.zoomIn.bind(this.viewport_));
+  this.zoomToolbar_.addEventListener(
+      'zoom-out', this.viewport_.zoomOut.bind(this.viewport_));
 
   this.gestureDetector_ = new GestureDetector(this.plugin_);
   this.gestureDetector_.addEventListener(
@@ -208,12 +205,12 @@ function PDFViewer(browserApi) {
     this.toolbar_.hidden = false;
     this.toolbar_.addEventListener('save', this.save_.bind(this));
     this.toolbar_.addEventListener('print', this.print_.bind(this));
-    this.toolbar_.addEventListener('rotate-right',
-        this.rotateClockwise_.bind(this));
+    this.toolbar_.addEventListener(
+        'rotate-right', this.rotateClockwise_.bind(this));
     // Must attach to mouseup on the plugin element, since it eats mousedown
     // and click events.
-    this.plugin_.addEventListener('mouseup',
-        this.toolbar_.hideDropdowns.bind(this.toolbar_));
+    this.plugin_.addEventListener(
+        'mouseup', this.toolbar_.hideDropdowns.bind(this.toolbar_));
 
     this.toolbar_.docTitle = getFilenameFromURL(this.originalUrl_);
   }
@@ -223,9 +220,9 @@ function PDFViewer(browserApi) {
   }.bind(this));
 
   document.body.addEventListener('navigate', function(e) {
-    var disposition =
-        e.detail.newtab ? Navigator.WindowOpenDisposition.NEW_BACKGROUND_TAB :
-                          Navigator.WindowOpenDisposition.CURRENT_TAB;
+    var disposition = e.detail.newtab ?
+        Navigator.WindowOpenDisposition.NEW_BACKGROUND_TAB :
+        Navigator.WindowOpenDisposition.CURRENT_TAB;
     this.navigator_.navigate(e.detail.uri, disposition);
   }.bind(this));
 
@@ -245,8 +242,8 @@ function PDFViewer(browserApi) {
   document.addEventListener('keydown', this.handleKeyEvent_.bind(this));
   document.addEventListener('mousemove', this.handleMouseEvent_.bind(this));
   document.addEventListener('mouseout', this.handleMouseEvent_.bind(this));
-  document.addEventListener('contextmenu',
-      this.handleContextMenuEvent_.bind(this));
+  document.addEventListener(
+      'contextmenu', this.handleContextMenuEvent_.bind(this));
 
   var tabId = this.browserApi_.getStreamInfo().tabId;
   this.navigator_ = new Navigator(
@@ -365,14 +362,12 @@ PDFViewer.prototype = {
         return;
       case 65:  // 'a' key.
         if (e.ctrlKey || e.metaKey) {
-          this.plugin_.postMessage({
-            type: 'selectAll'
-          });
+          this.plugin_.postMessage({type: 'selectAll'});
           // Since we do selection ourselves.
           e.preventDefault();
         }
         return;
-      case 71: // 'g' key.
+      case 71:  // 'g' key.
         if (this.toolbar_ && (e.ctrlKey || e.metaKey) && e.altKey) {
           this.toolbarManager_.showToolbars();
           this.toolbar_.selectPageNumber();
@@ -394,10 +389,8 @@ PDFViewer.prototype = {
 
     // Give print preview a chance to handle the key event.
     if (!fromScriptingAPI && this.isPrintPreview_) {
-      this.sendScriptingMessage_({
-        type: 'sendKeyEvent',
-        keyEvent: SerializeKeyEvent(e)
-      });
+      this.sendScriptingMessage_(
+          {type: 'sendKeyEvent', keyEvent: SerializeKeyEvent(e)});
     } else {
       // Show toolbars as a fallback.
       if (!(e.shiftKey || e.ctrlKey || e.altKey))
@@ -428,9 +421,7 @@ PDFViewer.prototype = {
    * Rotate the plugin clockwise.
    */
   rotateClockwise_: function() {
-    this.plugin_.postMessage({
-      type: 'rotateClockwise'
-    });
+    this.plugin_.postMessage({type: 'rotateClockwise'});
   },
 
   /**
@@ -438,9 +429,7 @@ PDFViewer.prototype = {
    * Rotate the plugin counter-clockwise.
    */
   rotateCounterClockwise_: function() {
-    this.plugin_.postMessage({
-      type: 'rotateCounterclockwise'
-    });
+    this.plugin_.postMessage({type: 'rotateCounterclockwise'});
   },
 
   /**
@@ -457,9 +446,7 @@ PDFViewer.prototype = {
    * Notify the plugin to print.
    */
   print_: function() {
-    this.plugin_.postMessage({
-      type: 'print'
-    });
+    this.plugin_.postMessage({type: 'print'});
   },
 
   /**
@@ -467,9 +454,7 @@ PDFViewer.prototype = {
    * Notify the plugin to save.
    */
   save_: function() {
-    this.plugin_.postMessage({
-      type: 'save'
-    });
+    this.plugin_.postMessage({type: 'save'});
   },
 
   /**
@@ -478,10 +463,8 @@ PDFViewer.prototype = {
    * @param {string} name The namedDestination to fetch page number from plugin.
    */
   getNamedDestination_: function(name) {
-    this.plugin_.postMessage({
-      type: 'getNamedDestination',
-      namedDestination: name
-    });
+    this.plugin_.postMessage(
+        {type: 'getNamedDestination', namedDestination: name});
   },
 
   /**
@@ -492,10 +475,10 @@ PDFViewer.prototype = {
   sendDocumentLoadedMessage_: function() {
     if (this.loadState_ == LoadState.LOADING)
       return;
-    this.sendScriptingMessage_({
-      type: 'documentLoaded',
-      load_state: this.loadState_
-    });
+    if (this.isPrintPreview_ && !this.isPrintPreviewLoaded_)
+      return;
+    this.sendScriptingMessage_(
+        {type: 'documentLoaded', load_state: this.loadState_});
   },
 
   /**
@@ -545,8 +528,7 @@ PDFViewer.prototype = {
       if (this.lastViewportPosition_)
         this.viewport_.position = this.lastViewportPosition_;
       this.paramsParser_.getViewportFromUrlParams(
-          this.originalUrl_,
-          this.handleURLParams_.bind(this));
+          this.originalUrl_, this.handleURLParams_.bind(this));
       this.loadState_ = LoadState.SUCCESS;
       this.sendDocumentLoadedMessage_();
       while (this.delayedScriptingMessages_.length > 0)
@@ -579,10 +561,8 @@ PDFViewer.prototype = {
    * @param {Object} event a password-submitted event.
    */
   onPasswordSubmitted_: function(event) {
-    this.plugin_.postMessage({
-      type: 'getPasswordComplete',
-      password: event.detail.password
-    });
+    this.plugin_.postMessage(
+        {type: 'getPasswordComplete', password: event.detail.password});
   },
 
   /**
@@ -641,6 +621,10 @@ PDFViewer.prototype = {
           this.navigator_.navigate(message.data.url, message.data.disposition);
         }
         break;
+      case 'printPreviewLoaded':
+        this.isPrintPreviewLoaded_ = true;
+        this.sendDocumentLoadedMessage_();
+        break;
       case 'setScrollPosition':
         var position = this.viewport_.position;
         if (message.data.x !== undefined)
@@ -682,9 +666,7 @@ PDFViewer.prototype = {
    * reacting to scroll events while zoom is taking place to avoid flickering.
    */
   beforeZoom_: function() {
-    this.plugin_.postMessage({
-      type: 'stopScrolling'
-    });
+    this.plugin_.postMessage({type: 'stopScrolling'});
 
     if (this.viewport_.pinchPhase == Viewport.PinchPhase.PINCH_START) {
       var position = this.viewport_.position;
@@ -777,8 +759,8 @@ PDFViewer.prototype = {
     // than the spec. In RTL layout, the zoom toolbar is on the left side, but
     // the scrollbar is still on the right, so this is not necessary.
     if (!isRTL()) {
-      this.zoomToolbar_.style.right = -verticalScrollbarWidth +
-          (scrollbarWidth / 2) + 'px';
+      this.zoomToolbar_.style.right =
+          -verticalScrollbarWidth + (scrollbarWidth / 2) + 'px';
     }
     // Having a horizontal scrollbar is much rarer so we don't offset the
     // toolbar from the bottom any more than what the spec says. This means
@@ -890,8 +872,8 @@ PDFViewer.prototype = {
           grayscale: message.data.grayscale,
           // If the PDF isn't modifiable we send 0 as the page count so that no
           // blank placeholder pages get appended to the PDF.
-          pageCount: (message.data.modifiable ?
-                      message.data.pageNumbers.length : 0)
+          pageCount:
+              (message.data.modifiable ? message.data.pageNumbers.length : 0)
         });
         return true;
       case 'sendKeyEvent':
diff --git a/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js b/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js
index 102130e1959..fd5e2e1559c 100644
--- a/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js
+++ b/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js
@@ -39,11 +39,7 @@ function SerializeKeyEvent(event) {
  * has finished loading or failed to load.
  * @enum {string}
  */
-var LoadState = {
-  LOADING: 'loading',
-  SUCCESS: 'success',
-  FAILED: 'failed'
-};
+var LoadState = {LOADING: 'loading', SUCCESS: 'success', FAILED: 'failed'};
 
 /**
  * Create a new PDFScriptingAPI. This provides a scripting interface to
@@ -60,8 +56,8 @@ function PDFScriptingAPI(window, plugin) {
   window.addEventListener('message', function(event) {
     if (event.origin != 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai' &&
         event.origin != 'chrome://print') {
-      console.error('Received message that was not from the extension: ' +
-                    event);
+      console.error(
+          'Received message that was not from the extension: ' + event);
       return;
     }
     switch (event.data.type) {
@@ -77,11 +73,9 @@ function PDFScriptingAPI(window, plugin) {
          */
         var viewportData = event.data;
         if (this.viewportChangedCallback_)
-          this.viewportChangedCallback_(viewportData.pageX,
-                                        viewportData.pageY,
-                                        viewportData.pageWidth,
-                                        viewportData.viewportWidth,
-                                        viewportData.viewportHeight);
+          this.viewportChangedCallback_(
+              viewportData.pageX, viewportData.pageY, viewportData.pageWidth,
+              viewportData.viewportWidth, viewportData.viewportHeight);
         break;
       case 'documentLoaded':
         var data = /** @type {{load_state: LoadState}} */ (event.data);
@@ -119,20 +113,18 @@ PDFScriptingAPI.prototype = {
       this.pendingScriptingMessages_.push(message);
   },
 
- /**
-  * Sets the plugin element containing the PDF viewer. The element will usually
-  * be passed into the PDFScriptingAPI constructor but may also be set later.
-  * @param {Object} plugin the plugin element containing the PDF viewer.
-  */
+  /**
+   * Sets the plugin element containing the PDF viewer. The element will usually
+   * be passed into the PDFScriptingAPI constructor but may also be set later.
+   * @param {Object} plugin the plugin element containing the PDF viewer.
+   */
   setPlugin: function(plugin) {
     this.plugin_ = plugin;
 
     if (this.plugin_) {
       // Send a message to ensure the postMessage channel is initialized which
       // allows us to receive messages.
-      this.sendMessage_({
-        type: 'initialize'
-      });
+      this.sendMessage_({type: 'initialize'});
       // Flush pending messages.
       while (this.pendingScriptingMessages_.length > 0)
         this.sendMessage_(this.pendingScriptingMessages_.shift());
@@ -190,11 +182,7 @@ PDFScriptingAPI.prototype = {
    * @param {number} index the index of the page to load.
    */
   loadPreviewPage: function(url, index) {
-    this.sendMessage_({
-      type: 'loadPreviewPage',
-      url: url,
-      index: index
-    });
+    this.sendMessage_({type: 'loadPreviewPage', url: url, index: index});
   },
 
   /**
@@ -202,9 +190,7 @@ PDFScriptingAPI.prototype = {
    * load.
    */
   selectAll: function() {
-    this.sendMessage_({
-      type: 'selectAll'
-    });
+    this.sendMessage_({type: 'selectAll'});
   },
 
   /**
@@ -218,9 +204,7 @@ PDFScriptingAPI.prototype = {
     if (this.selectedTextCallback_)
       return false;
     this.selectedTextCallback_ = callback;
-    this.sendMessage_({
-      type: 'getSelectedText'
-    });
+    this.sendMessage_({type: 'getSelectedText'});
     return true;
   },
 
@@ -228,9 +212,7 @@ PDFScriptingAPI.prototype = {
    * Print the document. May only be called after document load.
    */
   print: function() {
-    this.sendMessage_({
-      type: 'print'
-    });
+    this.sendMessage_({type: 'print'});
   },
 
   /**
@@ -238,10 +220,8 @@ PDFScriptingAPI.prototype = {
    * @param {Event} keyEvent the key event to send to the extension.
    */
   sendKeyEvent: function(keyEvent) {
-    this.sendMessage_({
-      type: 'sendKeyEvent',
-      keyEvent: SerializeKeyEvent(keyEvent)
-    });
+    this.sendMessage_(
+        {type: 'sendKeyEvent', keyEvent: SerializeKeyEvent(keyEvent)});
   },
 };
 
@@ -255,8 +235,8 @@ PDFScriptingAPI.prototype = {
  */
 function PDFCreateOutOfProcessPlugin(src) {
   var client = new PDFScriptingAPI(window, null);
-  var iframe = assertInstanceof(window.document.createElement('iframe'),
-                                HTMLIFrameElement);
+  var iframe = assertInstanceof(
+      window.document.createElement('iframe'), HTMLIFrameElement);
   iframe.setAttribute('src', 'pdf_preview.html?' + src);
   // Prevent the frame from being tab-focusable.
   iframe.setAttribute('tabindex', '-1');
diff --git a/chromium/chrome/browser/resources/pdf/viewport.js b/chromium/chrome/browser/resources/pdf/viewport.js
index 6d027f1c8ee..54f166bc6d4 100644
--- a/chromium/chrome/browser/resources/pdf/viewport.js
+++ b/chromium/chrome/browser/resources/pdf/viewport.js
@@ -9,9 +9,10 @@
  * @return {number} the height of the intersection of the rects
  */
 function getIntersectionHeight(rect1, rect2) {
-  return Math.max(0,
+  return Math.max(
+      0,
       Math.min(rect1.y + rect1.height, rect2.y + rect2.height) -
-      Math.max(rect1.y, rect2.y));
+          Math.max(rect1.y, rect2.y));
 }
 
 /**
@@ -30,10 +31,7 @@ function clampScale(scale) {
  * @return {!Object} The vector.
  */
 function vectorDelta(p1, p2) {
-  return {
-    x: p2.x - p1.x,
-    y: p2.y - p1.y
-  };
+  return {x: p2.x - p1.x, y: p2.y - p1.y};
 }
 
 function frameToPluginCoordinate(coordinateInFrame) {
@@ -58,14 +56,9 @@ function frameToPluginCoordinate(coordinateInFrame) {
  * @param {number} topToolbarHeight The number of pixels that should initially
  *     be left blank above the document for the toolbar.
  */
-function Viewport(window,
-                  sizer,
-                  viewportChangedCallback,
-                  beforeZoomCallback,
-                  afterZoomCallback,
-                  scrollbarWidth,
-                  defaultZoom,
-                  topToolbarHeight) {
+function Viewport(
+    window, sizer, viewportChangedCallback, beforeZoomCallback,
+    afterZoomCallback, scrollbarWidth, defaultZoom, topToolbarHeight) {
   this.window_ = window;
   this.sizer_ = sizer;
   this.viewportChangedCallback_ = viewportChangedCallback;
@@ -127,8 +120,10 @@ Viewport.SCROLL_INCREMENT = 40;
  * components/ui/zoom/page_zoom_constants.h and
  * chrome/browser/resources/settings/appearance_page/appearance_page.js
  */
-Viewport.ZOOM_FACTORS = [0.25, 1 / 3, 0.5, 2 / 3, 0.75, 0.8, 0.9,
-                         1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5];
+Viewport.ZOOM_FACTORS = [
+  0.25, 1 / 3, 0.5, 2 / 3, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3,
+  4, 5
+];
 
 /**
  * The minimum and maximum range to be used to clip zoom factor.
@@ -141,7 +136,12 @@ Viewport.ZOOM_FACTOR_RANGE = {
 /**
  * The width of the page shadow around pages in pixels.
  */
-Viewport.PAGE_SHADOW = {top: 3, bottom: 7, left: 5, right: 5};
+Viewport.PAGE_SHADOW = {
+  top: 3,
+  bottom: 7,
+  left: 5,
+  right: 5
+};
 
 Viewport.prototype = {
   /**
@@ -173,10 +173,7 @@ Viewport.prototype = {
   documentNeedsScrollbars_: function(zoom) {
     var zoomedDimensions = this.getZoomedDocumentDimensions_(zoom);
     if (!zoomedDimensions) {
-      return {
-        horizontal: false,
-        vertical: false
-      };
+      return {horizontal: false, vertical: false};
     }
 
     // If scrollbars are required for one direction, expand the document in the
@@ -211,8 +208,8 @@ Viewport.prototype = {
     var zoomedDimensions = this.getZoomedDocumentDimensions_(this.zoom);
     if (zoomedDimensions) {
       this.sizer_.style.width = zoomedDimensions.width + 'px';
-      this.sizer_.style.height = zoomedDimensions.height +
-          this.topToolbarHeight_ + 'px';
+      this.sizer_.style.height =
+          zoomedDimensions.height + this.topToolbarHeight_ + 'px';
     }
   },
 
@@ -329,7 +326,7 @@ Viewport.prototype = {
   setZoomInternal_: function(newZoom) {
     if (!this.allowedToChangeZoom_) {
       throw 'Called Viewport.setZoomInternal_ without calling ' +
-            'Viewport.mightZoom_.';
+          'Viewport.mightZoom_.';
     }
     // Record the scroll position (relative to the top-left of the window).
     var currentScrollPos = {
@@ -353,9 +350,10 @@ Viewport.prototype = {
    * @param {!Object} center The pinch center in content coordinates.
    */
   setPinchZoomInternal_: function(scaleDelta, center) {
-    assert(this.allowedToChangeZoom_,
+    assert(
+        this.allowedToChangeZoom_,
         'Called Viewport.setPinchZoomInternal_ without calling ' +
-        'Viewport.mightZoom_.');
+            'Viewport.mightZoom_.');
     this.internalZoom_ = clampScale(this.internalZoom_ * scaleDelta);
 
     var newCenterInContent = this.frameToContent(center);
@@ -372,10 +370,7 @@ Viewport.prototype = {
 
     this.contentSizeChanged_();
     // Scroll to the scaled scroll position.
-    this.position = {
-      x: currentScrollPos.x,
-      y: currentScrollPos.y
-    };
+    this.position = {x: currentScrollPos.x, y: currentScrollPos.y};
   },
 
   /**
@@ -399,8 +394,9 @@ Viewport.prototype = {
    */
   setZoom: function(newZoom) {
     this.fittingType_ = Viewport.FittingType.NONE;
-    newZoom = Math.max(Viewport.ZOOM_FACTOR_RANGE.min,
-                       Math.min(newZoom, Viewport.ZOOM_FACTOR_RANGE.max));
+    newZoom = Math.max(
+        Viewport.ZOOM_FACTOR_RANGE.min,
+        Math.min(newZoom, Viewport.ZOOM_FACTOR_RANGE.max));
     this.mightZoom_(function() {
       this.setZoomInternal_(newZoom);
       this.updateViewport_();
@@ -461,8 +457,8 @@ Viewport.prototype = {
         top = this.pageDimensions_[page - 1].y +
             this.pageDimensions_[page - 1].height;
       }
-      var bottom = this.pageDimensions_[page].y +
-          this.pageDimensions_[page].height;
+      var bottom =
+          this.pageDimensions_[page].y + this.pageDimensions_[page].height;
 
       if (top <= y && bottom > y)
         return page;
@@ -490,11 +486,13 @@ Viewport.prototype = {
       width: this.size.width / this.zoom,
       height: this.size.height / this.zoom
     };
-    var firstVisiblePageVisibility = getIntersectionHeight(
-        this.pageDimensions_[firstVisiblePage], viewportRect) /
+    var firstVisiblePageVisibility =
+        getIntersectionHeight(
+            this.pageDimensions_[firstVisiblePage], viewportRect) /
         this.pageDimensions_[firstVisiblePage].height;
-    var nextPageVisibility = getIntersectionHeight(
-        this.pageDimensions_[firstVisiblePage + 1], viewportRect) /
+    var nextPageVisibility =
+        getIntersectionHeight(
+            this.pageDimensions_[firstVisiblePage + 1], viewportRect) /
         this.pageDimensions_[firstVisiblePage + 1].height;
     if (nextPageVisibility > firstVisiblePageVisibility)
       return firstVisiblePage + 1;
@@ -573,8 +571,8 @@ Viewport.prototype = {
         return;
       // When computing fit-to-width, the maximum width of a page in the
       // document is used, which is equal to the size of the document width.
-      this.setZoomInternal_(this.computeFittingZoom_(this.documentDimensions_,
-                                                     true));
+      this.setZoomInternal_(
+          this.computeFittingZoom_(this.documentDimensions_, true));
       var page = this.getMostVisiblePage();
       this.updateViewport_();
     }.bind(this));
@@ -600,10 +598,7 @@ Viewport.prototype = {
       };
       this.setZoomInternal_(this.computeFittingZoom_(dimensions, false));
       if (scrollToTopOfPage) {
-        this.position = {
-          x: 0,
-          y: this.pageDimensions_[page].y * this.zoom
-        };
+        this.position = {x: 0, y: this.pageDimensions_[page].y * this.zoom};
       }
       this.updateViewport_();
     }.bind(this));
@@ -656,15 +651,15 @@ Viewport.prototype = {
   pinchZoom: function(e) {
     this.mightZoom_(function() {
       this.pinchPhase_ = e.direction == 'out' ?
-                         Viewport.PinchPhase.PINCH_UPDATE_ZOOM_OUT :
-                         Viewport.PinchPhase.PINCH_UPDATE_ZOOM_IN;
+          Viewport.PinchPhase.PINCH_UPDATE_ZOOM_OUT :
+          Viewport.PinchPhase.PINCH_UPDATE_ZOOM_IN;
 
       var scaleDelta = e.startScaleRatio / this.prevScale_;
       this.pinchPanVector_ =
           vectorDelta(e.center, this.firstPinchCenterInFrame_);
 
-      var needsScrollbars = this.documentNeedsScrollbars_(
-          this.zoomManager_.applyBrowserZoom(
+      var needsScrollbars =
+          this.documentNeedsScrollbars_(this.zoomManager_.applyBrowserZoom(
               clampScale(this.internalZoom_ * scaleDelta)));
 
       this.pinchCenter_ = e.center;
@@ -686,8 +681,7 @@ Viewport.prototype = {
         this.keepContentCentered_ = false;
       }
 
-      this.setPinchZoomInternal_(
-          scaleDelta, frameToPluginCoordinate(e.center));
+      this.setPinchZoomInternal_(scaleDelta, frameToPluginCoordinate(e.center));
       this.updateViewport_();
       this.prevScale_ = e.startScaleRatio;
     }.bind(this));
@@ -712,8 +706,7 @@ Viewport.prototype = {
       var scaleDelta = e.startScaleRatio / this.prevScale_;
       this.pinchCenter_ = e.center;
 
-      this.setPinchZoomInternal_(
-          scaleDelta, frameToPluginCoordinate(e.center));
+      this.setPinchZoomInternal_(scaleDelta, frameToPluginCoordinate(e.center));
       this.updateViewport_();
     }.bind(this));
 
@@ -760,13 +753,10 @@ Viewport.prototype = {
       this.documentDimensions_ = documentDimensions;
       this.pageDimensions_ = this.documentDimensions_.pageDimensions;
       if (initialDimensions) {
-        this.setZoomInternal_(
-            Math.min(this.defaultZoom_,
-                     this.computeFittingZoom_(this.documentDimensions_, true)));
-        this.position = {
-          x: 0,
-          y: -this.topToolbarHeight_
-        };
+        this.setZoomInternal_(Math.min(
+            this.defaultZoom_,
+            this.computeFittingZoom_(this.documentDimensions_, true)));
+        this.position = {x: 0, y: -this.topToolbarHeight_};
       }
       this.contentSizeChanged_();
       this.resize_();
@@ -781,12 +771,7 @@ Viewport.prototype = {
    */
   getPageScreenRect: function(page) {
     if (!this.documentDimensions_) {
-      return {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      };
+      return {x: 0, y: 0, width: 0, height: 0};
     }
     if (page >= this.pageDimensions_.length)
       page = this.pageDimensions_.length - 1;
@@ -810,8 +795,8 @@ Viewport.prototype = {
         Viewport.PAGE_SHADOW.left;
     // Compute the space on the left of the document if the document fits
     // completely in the screen.
-    var spaceOnLeft = (this.size.width -
-        this.documentDimensions_.width * this.zoom) / 2;
+    var spaceOnLeft =
+        (this.size.width - this.documentDimensions_.width * this.zoom) / 2;
     spaceOnLeft = Math.max(spaceOnLeft, 0);
 
     return {
diff --git a/chromium/chrome/browser/resources/pdf/viewport_scroller.js b/chromium/chrome/browser/resources/pdf/viewport_scroller.js
index eeef83956b9..8246e54e98c 100644
--- a/chromium/chrome/browser/resources/pdf/viewport_scroller.js
+++ b/chromium/chrome/browser/resources/pdf/viewport_scroller.js
@@ -44,9 +44,9 @@ ViewportScroller.prototype = {
    */
   startDragScrollTimer_: function() {
     if (this.timerId_ === null) {
-      this.timerId_ =
-          this.window_.setInterval(this.dragScrollPage_.bind(this),
-                                   ViewportScroller.DRAG_TIMER_INTERVAL_MS_);
+      this.timerId_ = this.window_.setInterval(
+          this.dragScrollPage_.bind(this),
+          ViewportScroller.DRAG_TIMER_INTERVAL_MS_);
       this.lastFrameTime_ = Date.now();
     }
   },
@@ -71,7 +71,7 @@ ViewportScroller.prototype = {
     var position = this.viewport_.position;
     var currentFrameTime = Date.now();
     var timeAdjustment = (currentFrameTime - this.lastFrameTime_) /
-                         ViewportScroller.DRAG_TIMER_INTERVAL_MS_;
+        ViewportScroller.DRAG_TIMER_INTERVAL_MS_;
     position.y += (this.scrollVelocity_.y * timeAdjustment);
     position.x += (this.scrollVelocity_.x * timeAdjustment);
     this.viewport_.position = position;
@@ -86,18 +86,19 @@ ViewportScroller.prototype = {
    * @return {Object} Object with x and y direction scroll velocity.
    */
   calculateVelocity_: function(event) {
-    var x = Math.min(Math.max(-event.offsetX,
-                              event.offsetX - this.plugin_.offsetWidth, 0),
-                     ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_) *
-            Math.sign(event.offsetX);
-    var y = Math.min(Math.max(-event.offsetY,
-                              event.offsetY - this.plugin_.offsetHeight, 0),
-                     ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_) *
-            Math.sign(event.offsetY);
-    return {
-      x: x,
-      y: y
-    };
+    var x =
+        Math.min(
+            Math.max(
+                -event.offsetX, event.offsetX - this.plugin_.offsetWidth, 0),
+            ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_) *
+        Math.sign(event.offsetX);
+    var y =
+        Math.min(
+            Math.max(
+                -event.offsetY, event.offsetY - this.plugin_.offsetHeight, 0),
+            ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_) *
+        Math.sign(event.offsetY);
+    return {x: x, y: y};
   },
 
   /**
@@ -123,13 +124,13 @@ ViewportScroller.prototype = {
     if (isSelecting) {
       if (!this.mousemoveCallback_)
         this.mousemoveCallback_ = this.onMousemove_.bind(this);
-      this.plugin_.addEventListener('mousemove', this.mousemoveCallback_,
-                                    false);
+      this.plugin_.addEventListener(
+          'mousemove', this.mousemoveCallback_, false);
     } else {
       this.stopDragScrollTimer_();
       if (this.mousemoveCallback_) {
-        this.plugin_.removeEventListener('mousemove', this.mousemoveCallback_,
-                                         false);
+        this.plugin_.removeEventListener(
+            'mousemove', this.mousemoveCallback_, false);
       }
     }
   }
diff --git a/chromium/chrome/browser/resources/pdf/zoom_manager.js b/chromium/chrome/browser/resources/pdf/zoom_manager.js
index 5ed2c74ac39..eec9115cd84 100644
--- a/chromium/chrome/browser/resources/pdf/zoom_manager.js
+++ b/chromium/chrome/browser/resources/pdf/zoom_manager.js
@@ -145,16 +145,16 @@ class ActiveZoomManager extends ZoomManager {
     if (this.floatingPointEquals(this.browserZoom_, zoom))
       return;
 
-    this.changingBrowserZoom_ = this.setBrowserZoomFunction_(zoom).then(
-        function() {
-      this.browserZoom_ = zoom;
-      this.changingBrowserZoom_ = null;
-
-      // The extension's zoom level may have changed while the browser zoom
-      // change was in progress. We call back into onPdfZoomChange to ensure the
-      // browser zoom is up to date.
-      this.onPdfZoomChange();
-    }.bind(this));
+    this.changingBrowserZoom_ =
+        this.setBrowserZoomFunction_(zoom).then(function() {
+          this.browserZoom_ = zoom;
+          this.changingBrowserZoom_ = null;
+
+          // The extension's zoom level may have changed while the browser zoom
+          // change was in progress. We call back into onPdfZoomChange to ensure
+          // the browser zoom is up to date.
+          this.onPdfZoomChange();
+        }.bind(this));
   }
 
   /**
diff --git a/chromium/chrome/browser/resources/plugin_metadata/plugins_linux.json b/chromium/chrome/browser/resources/plugin_metadata/plugins_linux.json
index bc016197575..070130ee4ae 100644
--- a/chromium/chrome/browser/resources/plugin_metadata/plugins_linux.json
+++ b/chromium/chrome/browser/resources/plugin_metadata/plugins_linux.json
@@ -1,5 +1,5 @@
 {
-  "x-version": 22,
+  "x-version": 23,
   "google-talk": {
     "mime_types": [
     ],
@@ -80,9 +80,9 @@
     ],
     "versions": [
       {
-        "version": "25.0.0.171",
+        "version": "26.0.0.126",
         "status": "up_to_date",
-        "reference": "https://helpx.adobe.com/security/products/flash-player/apsb17-15.html"
+        "reference": "https://helpx.adobe.com/security/products/flash-player/apsb17-17.html"
       }
     ],
     "lang": "en-US",
diff --git a/chromium/chrome/browser/resources/plugin_metadata/plugins_mac.json b/chromium/chrome/browser/resources/plugin_metadata/plugins_mac.json
index 338dd128ec9..e5239be3682 100644
--- a/chromium/chrome/browser/resources/plugin_metadata/plugins_mac.json
+++ b/chromium/chrome/browser/resources/plugin_metadata/plugins_mac.json
@@ -1,5 +1,5 @@
 {
-  "x-version": 28,
+  "x-version": 29,
   "google-talk": {
     "mime_types": [
     ],
@@ -115,9 +115,9 @@
     ],
     "versions": [
       {
-        "version": "25.0.0.171",
+        "version": "26.0.0.126",
         "status": "requires_authorization",
-        "reference": "https://helpx.adobe.com/security/products/flash-player/apsb17-15.html"
+        "reference": "https://helpx.adobe.com/security/products/flash-player/apsb17-17.html"
       }
     ],
     "lang": "en-US",
diff --git a/chromium/chrome/browser/resources/plugin_metadata/plugins_win.json b/chromium/chrome/browser/resources/plugin_metadata/plugins_win.json
index a46965f4455..0ad1506bbec 100644
--- a/chromium/chrome/browser/resources/plugin_metadata/plugins_win.json
+++ b/chromium/chrome/browser/resources/plugin_metadata/plugins_win.json
@@ -1,5 +1,5 @@
 {
-  "x-version": 37,
+  "x-version": 38,
   "google-talk": {
     "mime_types": [
     ],
@@ -137,9 +137,9 @@
     ],
     "versions": [
       {
-        "version": "25.0.0.171",
+        "version": "26.0.0.126",
         "status": "requires_authorization",
-        "reference": "https://helpx.adobe.com/security/products/flash-player/apsb17-15.html"
+        "reference": "https://helpx.adobe.com/security/products/flash-player/apsb17-17.html"
       }
     ],
     "lang": "en-US",
diff --git a/chromium/chrome/browser/resources/policy.css b/chromium/chrome/browser/resources/policy.css
index 399c63679d9..eb4f5439af8 100644
--- a/chromium/chrome/browser/resources/policy.css
+++ b/chromium/chrome/browser/resources/policy.css
@@ -2,11 +2,11 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-body.uber-frame {
+body {
   -webkit-margin-start: 23px;
 }
 
-body.uber-frame > .page {
+body > .page {
   -webkit-margin-end: 0;
   -webkit-padding-end: 24px;
 }
@@ -17,16 +17,16 @@ body.uber-frame > .page {
   z-index: 4;
 }
 
-body.uber-frame header {
+body header {
   left: 23px;
   max-width: none;
 }
 
-html[dir='rtl'] body.uber-frame header {
+html[dir='rtl'] body header {
   right: 23px;
 }
 
-body.uber-frame section {
+body section {
   max-width: none;
 }
 
diff --git a/chromium/chrome/browser/resources/policy.html b/chromium/chrome/browser/resources/policy.html
index 61b62a30f29..dbf20f29c73 100644
--- a/chromium/chrome/browser/resources/policy.html
+++ b/chromium/chrome/browser/resources/policy.html
@@ -15,10 +15,9 @@
 <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
 <script src="chrome://resources/js/load_time_data.js"></script>
 <script src="chrome://resources/js/util.js"></script>
-<script src="chrome://policy/uber_utils.js"></script>
 </head>
 
-<body class="uber-frame">
+<body>
   <div id="filter-overlay" class="page">
     <header>
       <input id="filter" class="search-field-container" type="search"
@@ -58,8 +57,12 @@
     <fieldset id="status-box-template">
       <legend class="legend"></legend>
       <div class="status-entry" hidden>
-        <div class="label" i18n-content="labelDomain"></div>
-        <div class="domain"></div>
+        <div class="label" i18n-content="labelEnterpriseEnrollmentDomain"></div>
+        <div class="enterprise-enrollment-domain"></div>
+      </div>
+      <div class="status-entry" hidden>
+        <div class="label" i18n-content="labelEnterpriseDisplayDomain"></div>
+        <div class="enterprise-display-domain"></div>
       </div>
       <div class="status-entry" hidden>
         <div class="label" i18n-content="labelUsername"></div>
diff --git a/chromium/chrome/browser/resources/policy.js b/chromium/chrome/browser/resources/policy.js
index aaba4ff6e21..a46ff41aad9 100644
--- a/chromium/chrome/browser/resources/policy.js
+++ b/chromium/chrome/browser/resources/policy.js
@@ -9,8 +9,9 @@ cr.define('policy', function() {
    * @return {boolean} True if this is the mobile version.
    */
   var isMobilePage = function() {
-    return document.defaultView.getComputedStyle(document.querySelector(
-        '.scope-column')).display == 'none';
+    return document.defaultView
+               .getComputedStyle(document.querySelector('.scope-column'))
+               .display == 'none';
   };
 
   /**
@@ -31,8 +32,7 @@ cr.define('policy', function() {
     /**
      * Initialization function for the cr.ui framework.
      */
-    decorate: function() {
-    },
+    decorate: function() {},
 
     /**
      * Populate the box with the given cloud policy status.
@@ -45,27 +45,31 @@ cr.define('policy', function() {
         // status item with the domain the device is enrolled into.
         this.querySelector('.legend').textContent =
             loadTimeData.getString('statusDevice');
-        var domain = this.querySelector('.domain');
-        domain.textContent = status.domain;
-        domain.parentElement.hidden = false;
+        var enrollmentDomain =
+            this.querySelector('.enterprise-enrollment-domain');
+        enrollmentDomain.textContent = status.enterpriseEnrollmentDomain;
+        enrollmentDomain.parentElement.hidden = false;
+        var displayDomain = this.querySelector('.enterprise-display-domain');
+        displayDomain.textContent = status.enterpriseDisplayDomain;
+        displayDomain.parentElement.hidden = false;
 
         // Populate the device naming information.
         // Populate the asset identifier.
         var assetId = this.querySelector('.asset-id');
-        assetId.textContent = status.assetId ||
-            loadTimeData.getString('notSpecified');
+        assetId.textContent =
+            status.assetId || loadTimeData.getString('notSpecified');
         assetId.parentElement.hidden = false;
 
         // Populate the device location.
         var location = this.querySelector('.location');
-        location.textContent = status.location ||
-            loadTimeData.getString('notSpecified');
+        location.textContent =
+            status.location || loadTimeData.getString('notSpecified');
         location.parentElement.hidden = false;
 
         // Populate the directory API ID.
         var directoryApiId = this.querySelector('.directory-api-id');
-        directoryApiId.textContent = status.directoryApiId ||
-            loadTimeData.getString('notSpecified');
+        directoryApiId.textContent =
+            status.directoryApiId || loadTimeData.getString('notSpecified');
         directoryApiId.parentElement.hidden = false;
       } else {
         // For user policy, set the appropriate title and populate the topmost
@@ -107,8 +111,8 @@ cr.define('policy', function() {
      */
     decorate: function() {
       this.updateToggleExpandedValueText_();
-      this.querySelector('.toggle-expanded-value').addEventListener(
-          'click', this.toggleExpandedValue_.bind(this));
+      this.querySelector('.toggle-expanded-value')
+          .addEventListener('click', this.toggleExpandedValue_.bind(this));
     },
 
     /**
@@ -128,12 +132,11 @@ cr.define('policy', function() {
       // Populate the remaining columns with policy scope, level and value if a
       // value has been set. Otherwise, leave them blank.
       if (value) {
-        this.querySelector('.scope').textContent =
-            loadTimeData.getString(value.scope == 'user' ?
-                'scopeUser' : 'scopeDevice');
-        this.querySelector('.level').textContent =
-            loadTimeData.getString(value.level == 'recommended' ?
-                'levelRecommended' : 'levelMandatory');
+        this.querySelector('.scope').textContent = loadTimeData.getString(
+            value.scope == 'user' ? 'scopeUser' : 'scopeDevice');
+        this.querySelector('.level').textContent = loadTimeData.getString(
+            value.level == 'recommended' ? 'levelRecommended' :
+                                           'levelMandatory');
         this.querySelector('.source').textContent =
             loadTimeData.getString(value.source);
         this.querySelector('.value').textContent = value.value;
@@ -164,7 +167,8 @@ cr.define('policy', function() {
         /** @const */ var HIDDEN_COLUMNS_IN_MOBILE_VERSION = 2;
 
         var expandedValue = this.querySelector('.expanded-value');
-        expandedValue.setAttribute('colspan',
+        expandedValue.setAttribute(
+            'colspan',
             expandedValue.colSpan - HIDDEN_COLUMNS_IN_MOBILE_VERSION);
       }
     },
@@ -211,7 +215,8 @@ cr.define('policy', function() {
       this.querySelector('.toggle-expanded-value').textContent =
           loadTimeData.getString(
               this.classList.contains('show-overflowed-value') ?
-                  'hideExpandedValue' : 'showExpandedValue');
+                  'hideExpandedValue' :
+                  'showExpandedValue');
     },
 
     /**
@@ -310,8 +315,7 @@ cr.define('policy', function() {
       var policies = this.getElementsByTagName('tbody');
       for (var i = 0; i < policies.length; i++) {
         var policy = policies[i];
-        policy.hidden =
-            policy.unset && !showUnset ||
+        policy.hidden = policy.unset && !showUnset ||
             policy.name.toLowerCase().indexOf(this.filterPattern_) == -1;
       }
       if (this.querySelector('tbody:not([hidden])'))
@@ -351,8 +355,7 @@ cr.define('policy', function() {
    * A singelton object that handles communication between browser and WebUI.
    * @constructor
    */
-  function Page() {
-  }
+  function Page() {}
 
   // Make Page a singleton.
   cr.addSingletonGetter(Page);
@@ -377,8 +380,9 @@ cr.define('policy', function() {
 
     if (names.hasOwnProperty('extensionPolicyNames')) {
       for (var ext in names.extensionPolicyNames) {
-        var table = page.appendNewTable('extension-' + ext,
-            names.extensionPolicyNames[ext].name, 'ID: ' + ext);
+        var table = page.appendNewTable(
+            'extension-' + ext, names.extensionPolicyNames[ext].name,
+            'ID: ' + ext);
         table.setPolicyNames(names.extensionPolicyNames[ext].policyNames);
       }
     }
@@ -428,7 +432,6 @@ cr.define('policy', function() {
      * Main initialization function. Called by the browser on page load.
      */
     initialize: function() {
-      uber.onContentFrameLoaded();
       cr.ui.FocusOutlineManager.forDocument(document);
 
       this.mainSection = $('main-section');
@@ -460,7 +463,7 @@ cr.define('policy', function() {
       chrome.send('initialized');
     },
 
-   /**
+    /**
      * Creates a new policy table section, adds the section to the page,
      * and returns the new table from that section.
      * @param {string} id The key for storing the new table in policyTables.
@@ -469,8 +472,8 @@ cr.define('policy', function() {
      * @return {Element} The newly created table.
      */
     appendNewTable: function(id, label_title, label_content) {
-      var newSection = this.createPolicyTableSection(id, label_title,
-          label_content);
+      var newSection =
+          this.createPolicyTableSection(id, label_title, label_content);
       this.mainSection.appendChild(newSection);
       return this.policyTables[id];
     },
@@ -521,13 +524,13 @@ cr.define('policy', function() {
       var newTable = window.document.createElement('table');
       var tableHead = window.document.createElement('thead');
       var tableRow = window.document.createElement('tr');
-      var tableHeadings = ['Scope', 'Level', 'Source', 'Name', 'Value',
-          'Status'];
+      var tableHeadings =
+          ['Scope', 'Level', 'Source', 'Name', 'Value', 'Status'];
       for (var i = 0; i < tableHeadings.length; i++) {
         var tableHeader = window.document.createElement('th');
         tableHeader.classList.add(tableHeadings[i].toLowerCase() + '-column');
-        tableHeader.textContent = loadTimeData.getString('header' +
-                                                         tableHeadings[i]);
+        tableHeader.textContent =
+            loadTimeData.getString('header' + tableHeadings[i]);
         tableRow.appendChild(tableHeader);
       }
       tableHead.appendChild(tableRow);
@@ -569,9 +572,7 @@ cr.define('policy', function() {
     },
   };
 
-  return {
-    Page: Page
-  };
+  return {Page: Page};
 });
 
 // Have the main initialization function be called when the page finishes
diff --git a/chromium/chrome/browser/resources/policy_android.css b/chromium/chrome/browser/resources/policy_android.css
index 6bf8a0df327..7bb0e2ac53b 100644
--- a/chromium/chrome/browser/resources/policy_android.css
+++ b/chromium/chrome/browser/resources/policy_android.css
@@ -2,11 +2,11 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-body.uber-frame {
+body {
   -webkit-margin-start: 0;
 }
 
-body.uber-frame > .page {
+body > .page {
   -webkit-margin-end: 0;
   -webkit-padding-end: 10px;
   -webkit-padding-start: 10px;
@@ -19,22 +19,22 @@ body.uber-frame > .page {
   z-index: 4;
 }
 
-body.uber-frame header {
+body header {
   left: 0;
   max-width: none;
   min-width: 0;
 }
 
-body.uber-frame header > h1 {
+body header > h1 {
   margin-left: 10px;
 }
 
-body.uber-frame section {
+body section {
   -webkit-padding-start: 0;
   max-width: none;
 }
 
-body.uber-frame section > h3 {
+body section > h3 {
   -webkit-margin-start: 0;
 }
 
@@ -132,7 +132,7 @@ section:not(.empty) > div.no-policies-set {
   display: none;
 }
 
-body.uber-frame * section.policy-table-section {
+body * section.policy-table-section {
   padding-bottom: 10px;
 }
 
diff --git a/chromium/chrome/browser/resources/predictors/autocomplete_action_predictor.js b/chromium/chrome/browser/resources/predictors/autocomplete_action_predictor.js
index ebdad5c3df6..cae254f5b6b 100644
--- a/chromium/chrome/browser/resources/predictors/autocomplete_action_predictor.js
+++ b/chromium/chrome/browser/resources/predictors/autocomplete_action_predictor.js
@@ -12,7 +12,7 @@ function requestAutocompleteActionPredictorDb() {
 /**
  * Callback from backend with the database contents. Sets up some globals and
  * calls to create the UI.
- * @param {Dictionary} database Information about AutocompleteActionPredictor
+ * @param {Object} database Information about AutocompleteActionPredictor
  *     including the database as a flattened list, a boolean indicating if the
  *     system is enabled and the current hit weight.
  */
@@ -30,7 +30,7 @@ function updateAutocompleteActionPredictorDb(database) {
 
 /**
  * Updates the table from the database.
- * @param {Dictionary} database Information about AutocompleteActionPredictor
+ * @param {Object} database Information about AutocompleteActionPredictor
  *     including the database as a flattened list, a boolean indicating if the
  *     system is enabled and the current hit weight.
  */
@@ -54,9 +54,10 @@ function updateAutocompleteActionPredictorDbView(database) {
 
     if (!filter.checked || entry.confidence > 0) {
       var row = document.createElement('tr');
-      row.className = (entry.confidence > 0.8 ? 'action-prerender' :
-                          (entry.confidence > 0.5 ? 'action-preconnect' :
-                              'action-none'));
+      row.className =
+          (entry.confidence > 0.8 ?
+               'action-prerender' :
+               (entry.confidence > 0.5 ? 'action-preconnect' : 'action-none'));
 
       row.appendChild(document.createElement('td')).textContent =
           entry.user_text;
@@ -74,5 +75,5 @@ function updateAutocompleteActionPredictorDbView(database) {
   $('countBanner').textContent = 'Entries: ' + databaseSection.children.length;
 }
 
-document.addEventListener('DOMContentLoaded',
-                          requestAutocompleteActionPredictorDb);
+document.addEventListener(
+    'DOMContentLoaded', requestAutocompleteActionPredictorDb);
diff --git a/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.html b/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.html
index ed9eed3243c..ad8c3a7cae5 100644
--- a/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.html
+++ b/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.html
@@ -3,10 +3,11 @@
     <tabs>
       <tab>URL Table Cache</tab>
       <tab>Host Table Cache</tab>
+      <tab>Origin Table Cache</tab>
     </tabs>
     <tabpanels>
       <tabpanel>
-        <table id="">
+        <table>
           <thead>
             <tr>
               <th>Main Frame Url</th>
@@ -25,7 +26,7 @@
         </table>
       </tabpanel>
       <tabpanel>
-        <table id="">
+        <table>
           <thead>
             <tr>
               <th>Host</th>
@@ -43,9 +44,28 @@
           </tbody>
         </table>
       </tabpanel>
+      <tabpanel>
+        <table>
+          <thead>
+            <tr>
+              <th>Host</th>
+              <th>Origin</th>
+              <th>Num Hits</th>
+              <th>Num Misses</th>
+              <th>Consec Misses</th>
+              <th>Average Position</th>
+              <th>Always Access Net</th>
+              <th>Accessed Net</th>
+              <th>Score</th>
+            </tr>
+          </thead>
+          <tbody id="rpp_origin_body">
+          </tbody>
+        </table>
+      </tabpanel>
     </tabpanels>
   </tabbox>
 </div>
 <div id='rpp_disabled'>
   Resource prefetch prediction is disabled.
-</div>
\ No newline at end of file
+</div>
diff --git a/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.js b/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.js
index f2815e6d183..a00b7d58a20 100644
--- a/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.js
+++ b/chromium/chrome/browser/resources/predictors/resource_prefetch_predictor.js
@@ -12,7 +12,7 @@ function requestResourcePrefetchPredictorDb() {
 /**
  * Callback from backend with the database contents. Sets up some globals and
  * calls to create the UI.
- * @param {Dictionary} database Information about ResourcePrefetchPredictor
+ * @param {Object} database Information about ResourcePrefetchPredictor
  *     including the database as a flattened list, a boolean indicating if the
  *     system is enabled.
  */
@@ -31,7 +31,7 @@ function truncateString(str) {
 
 /**
  * Updates the table from the database.
- * @param {Dictionary} database Information about ResourcePrefetchPredictor
+ * @param {Object} database Information about ResourcePrefetchPredictor
  *     including the database as a flattened list, a boolean indicating if the
  *     system is enabled and the current hit weight.
  */
@@ -40,30 +40,31 @@ function updateResourcePrefetchPredictorDbView(database) {
     $('rpp_enabled').style.display = 'none';
     $('rpp_disabled').style.display = 'block';
     return;
-  } else {
-    $('rpp_enabled').style.display = 'block';
-    $('rpp_disabled').style.display = 'none';
   }
 
+  $('rpp_enabled').style.display = 'block';
+  $('rpp_disabled').style.display = 'none';
+
   var hasUrlData = database.url_db && database.url_db.length > 0;
   var hasHostData = database.host_db && database.host_db.length > 0;
+  var hasOriginData = database.origin_db && database.origin_db.length > 0;
 
   if (hasUrlData)
     renderCacheData($('rpp_url_body'), database.url_db);
   if (hasHostData)
     renderCacheData($('rpp_host_body'), database.host_db);
+  if (hasOriginData)
+    renderOriginData($('rpp_origin_body'), database.origin_db);
 }
 
 /**
  * Renders cache data for URL or host based data.
  * @param {HTMLElement} body element of table to render into.
- * @param {Dictionary} database to render.
+ * @param {Object} database to render.
  */
 function renderCacheData(body, database) {
   body.textContent = '';
-  for (var i = 0; i < database.length; ++i) {
-    var main = database[i];
-
+  for (let main of database) {
     for (var j = 0; j < main.resources.length; ++j) {
       var resource = main.resources[j];
       var row = document.createElement('tr');
@@ -75,8 +76,8 @@ function renderCacheData(body, database) {
         row.appendChild(t);
       }
 
-      row.className = resource.is_prefetchable ? 'action-prerender'
-                                               : 'action-none';
+      row.className =
+          resource.is_prefetchable ? 'action-prerender' : 'action-none';
 
       row.appendChild(document.createElement('td')).textContent =
           truncateString(resource.resource_url);
@@ -99,5 +100,46 @@ function renderCacheData(body, database) {
   }
 }
 
-document.addEventListener('DOMContentLoaded',
-                          requestResourcePrefetchPredictorDb);
+/**
+ * Renders the content of the predictor origin table.
+ * @param {HTMLElement} body element of table to render into.
+ * @param {Object} database to render.
+ */
+function renderOriginData(body, database) {
+  body.textContent = '';
+  for (let main of database) {
+    for (var j = 0; j < main.origins.length; ++j) {
+      var origin = main.origins[j];
+      var row = document.createElement('tr');
+
+      if (j == 0) {
+        var t = document.createElement('td');
+        t.rowSpan = main.origins.length;
+        t.textContent = truncateString(main.main_frame_host);
+        row.appendChild(t);
+      }
+
+      row.className = 'action-none';
+      row.appendChild(document.createElement('td')).textContent =
+          truncateString(origin.origin);
+      row.appendChild(document.createElement('td')).textContent =
+          origin.number_of_hits;
+      row.appendChild(document.createElement('td')).textContent =
+          origin.number_of_misses;
+      row.appendChild(document.createElement('td')).textContent =
+          origin.consecutive_misses;
+      row.appendChild(document.createElement('td')).textContent =
+          origin.position;
+      row.appendChild(document.createElement('td')).textContent =
+          origin.always_access_network;
+      row.appendChild(document.createElement('td')).textContent =
+          origin.accessed_network;
+      row.appendChild(document.createElement('td')).textContent =
+          origin.score;
+      body.appendChild(row);
+    }
+  }
+}
+
+document.addEventListener(
+    'DOMContentLoaded', requestResourcePrefetchPredictorDb);
diff --git a/chromium/chrome/browser/resources/print_preview/cloud_print_interface.js b/chromium/chrome/browser/resources/print_preview/cloud_print_interface.js
index 4c40894b00a..2527074c3ef 100644
--- a/chromium/chrome/browser/resources/print_preview/cloud_print_interface.js
+++ b/chromium/chrome/browser/resources/print_preview/cloud_print_interface.js
@@ -14,8 +14,7 @@ cloudprint.CloudPrintInterfaceEventType = {
   PRINTER_DONE: 'cloudprint.CloudPrintInterface.PRINTER_DONE',
   PRINTER_FAILED: 'cloudprint.CloudPrintInterface.PRINTER_FAILED',
   PROCESS_INVITE_DONE: 'cloudprint.CloudPrintInterface.PROCESS_INVITE_DONE',
-  PROCESS_INVITE_FAILED:
-      'cloudprint.CloudPrintInterface.PROCESS_INVITE_FAILED',
+  PROCESS_INVITE_FAILED: 'cloudprint.CloudPrintInterface.PROCESS_INVITE_FAILED',
   SEARCH_DONE: 'cloudprint.CloudPrintInterface.SEARCH_DONE',
   SEARCH_FAILED: 'cloudprint.CloudPrintInterface.SEARCH_FAILED',
   SUBMIT_DONE: 'cloudprint.CloudPrintInterface.SUBMIT_DONE',
@@ -88,13 +87,6 @@ cr.define('cloudprint', function() {
     this.xsrfTokens_ = {};
 
     /**
-     * Pending requests delayed until we get access token.
-     * @type {!Array<!cloudprint.CloudPrintRequest>}
-     * @private
-     */
-    this.requestQueue_ = [];
-
-    /**
      * Outstanding cloud destination search requests.
      * @type {!Array<!cloudprint.CloudPrintRequest>}
      * @private
@@ -102,13 +94,13 @@ cr.define('cloudprint', function() {
     this.outstandingCloudSearchRequests_ = [];
 
     /**
-     * Event tracker used to keep track of native layer events.
-     * @type {!EventTracker}
-     * @private
+     * Promise that will be resolved when the access token for
+     * DestinationOrigin.DEVICE is available. Null if there is no request
+     * currently pending.
+     * @private {?Promise<string>}
      */
-    this.tracker_ = new EventTracker();
+    this.accessTokenRequestPromise_ = null;
 
-    this.addEventListeners_();
   }
 
   /**
@@ -153,9 +145,7 @@ cr.define('cloudprint', function() {
    * @enum {string}
    * @private
    */
-  CloudPrintInterface.JsonFields_ = {
-    PRINTER: 'printer'
-  };
+  CloudPrintInterface.JsonFields_ = {PRINTER: 'printer'};
 
   /**
    * Could Print origins used to search printers.
@@ -164,10 +154,8 @@ cr.define('cloudprint', function() {
    * @private
    */
   CloudPrintInterface.CLOUD_ORIGINS_ = [
-      print_preview.DestinationOrigin.COOKIES,
-      print_preview.DestinationOrigin.DEVICE
-      // TODO(vitalybuka): Enable when implemented.
-      // ready print_preview.DestinationOrigin.PROFILE
+    print_preview.DestinationOrigin.COOKIES,
+    print_preview.DestinationOrigin.DEVICE
   ];
 
   CloudPrintInterface.prototype = {
@@ -221,19 +209,14 @@ cr.define('cloudprint', function() {
     search_: function(isRecent, account, origins) {
       var params = [
         new HttpParam('connection_status', 'ALL'),
-        new HttpParam('client', 'chrome'),
-        new HttpParam('use_cdd', 'true')
+        new HttpParam('client', 'chrome'), new HttpParam('use_cdd', 'true')
       ];
       if (isRecent) {
         params.push(new HttpParam('q', '^recent'));
       }
       origins.forEach(function(origin) {
         var cpRequest = this.buildRequest_(
-            'GET',
-            'search',
-            params,
-            origin,
-            account,
+            'GET', 'search', params, origin, account,
             this.onSearchDone_.bind(this, isRecent));
         this.outstandingCloudSearchRequests_.push(cpRequest);
         this.sendOrQueueRequest_(cpRequest);
@@ -249,12 +232,8 @@ cr.define('cloudprint', function() {
         new HttpParam('client', 'chrome'),
       ];
       this.sendOrQueueRequest_(this.buildRequest_(
-          'GET',
-          'invites',
-          params,
-          print_preview.DestinationOrigin.COOKIES,
-          account,
-          this.onInvitesDone_.bind(this)));
+          'GET', 'invites', params, print_preview.DestinationOrigin.COOKIES,
+          account, this.onInvitesDone_.bind(this)));
     },
 
     /**
@@ -270,10 +249,7 @@ cr.define('cloudprint', function() {
         new HttpParam('use_cdd', 'true'),
       ];
       this.sendOrQueueRequest_(this.buildRequest_(
-          'POST',
-          'processinvite',
-          params,
-          invitation.destination.origin,
+          'POST', 'processinvite', params, invitation.destination.origin,
           invitation.destination.account,
           this.onProcessInviteDone_.bind(this, invitation, accept)));
     },
@@ -298,19 +274,14 @@ cr.define('cloudprint', function() {
         new HttpParam('printerid', destination.id),
         new HttpParam('contentType', 'dataUrl'),
         new HttpParam('title', documentInfo.title),
-        new HttpParam('ticket',
-                      printTicketStore.createPrintTicket(destination)),
+        new HttpParam(
+            'ticket', printTicketStore.createPrintTicket(destination)),
         new HttpParam('content', 'data:application/pdf;base64,' + data),
-        new HttpParam('tag',
-                      '__google__chrome_version=' + chromeVersion),
+        new HttpParam('tag', '__google__chrome_version=' + chromeVersion),
         new HttpParam('tag', '__google__os=' + navigator.platform)
       ];
       var cpRequest = this.buildRequest_(
-          'POST',
-          'submit',
-          params,
-          destination.origin,
-          destination.account,
+          'POST', 'submit', params, destination.origin, destination.account,
           this.onSubmitDone_.bind(this));
       this.sendOrQueueRequest_(cpRequest);
     },
@@ -327,31 +298,15 @@ cr.define('cloudprint', function() {
      */
     printer: function(printerId, origin, account) {
       var params = [
-        new HttpParam('printerid', printerId),
-        new HttpParam('use_cdd', 'true'),
+        new HttpParam('printerid', printerId), new HttpParam('use_cdd', 'true'),
         new HttpParam('printer_connection_status', 'true')
       ];
       this.sendOrQueueRequest_(this.buildRequest_(
-          'GET',
-          'printer',
-          params,
-          origin,
-          account || '',
+          'GET', 'printer', params, origin, account || '',
           this.onPrinterDone_.bind(this, printerId)));
     },
 
     /**
-     * Adds event listeners to relevant events.
-     * @private
-     */
-    addEventListeners_: function() {
-      this.tracker_.add(
-          this.nativeLayer_.getEventTarget(),
-          print_preview.NativeLayer.EventType.ACCESS_TOKEN_READY,
-          this.onAccessTokenReady_.bind(this));
-    },
-
-    /**
      * Builds request to the Google Cloud Print API.
      * @param {string} method HTTP method of the request.
      * @param {string} action Google Cloud Print action to perform.
@@ -379,7 +334,7 @@ cr.define('cloudprint', function() {
         if (account) {
           var index = this.userSessionIndex_[account] || 0;
           if (index > 0) {
-            url += '&user=' + index;
+            url += '&authuser=' + index;
           }
         }
       }
@@ -409,14 +364,13 @@ cr.define('cloudprint', function() {
 
       var xhr = new XMLHttpRequest();
       xhr.open(method, url, true);
-      xhr.withCredentials =
-          (origin == print_preview.DestinationOrigin.COOKIES);
+      xhr.withCredentials = (origin == print_preview.DestinationOrigin.COOKIES);
       for (var header in headers) {
         xhr.setRequestHeader(header, headers[header]);
       }
 
-      return new cloudprint.CloudPrintRequest(xhr, body, origin, account,
-                                              callback);
+      return new cloudprint.CloudPrintRequest(
+          xhr, body, origin, account, callback);
     },
 
     /**
@@ -427,11 +381,17 @@ cr.define('cloudprint', function() {
      */
     sendOrQueueRequest_: function(request) {
       if (request.origin == print_preview.DestinationOrigin.COOKIES) {
-        return this.sendRequest_(request);
-      } else {
-        this.requestQueue_.push(request);
-        this.nativeLayer_.startGetAccessToken(request.origin);
+        this.sendRequest_(request);
+        return;
       }
+
+      if (this.accessTokenRequestPromise_ == null) {
+        this.accessTokenRequestPromise_ =
+            this.nativeLayer_.getAccessToken(request.origin);
+      }
+
+      this.accessTokenRequestPromise_.then(
+          this.onAccessTokenReady_.bind(this, request));
     },
 
     /**
@@ -503,29 +463,25 @@ cr.define('cloudprint', function() {
     },
 
     /**
-     * Called when a native layer receives access token.
-     * @param {Event} event Contains the authentication type and access token.
+     * Called when a native layer receives access token. Assumes that the
+     * destination type for this token is DestinationOrigin.DEVICE.
+     * @param {cloudprint.CloudPrintRequest} request The pending request that
+     *     requires the access token.
+     * @param {string} accessToken The access token obtained.
      * @private
      */
-    onAccessTokenReady_: function(event) {
-      // TODO(vitalybuka): remove when other Origins implemented.
-      assert(event.authType == print_preview.DestinationOrigin.DEVICE);
-      this.requestQueue_ = this.requestQueue_.filter(function(request) {
-        assert(request.origin == print_preview.DestinationOrigin.DEVICE);
-        if (request.origin != event.authType) {
-          return true;
-        }
-        if (event.accessToken) {
-          request.xhr.setRequestHeader('Authorization',
-                                       'Bearer ' + event.accessToken);
-          this.sendRequest_(request);
-        } else {  // No valid token.
-          // Without abort status does not exist.
-          request.xhr.abort();
-          request.callback(request);
-        }
-        return false;
-      }, this);
+    onAccessTokenReady_: function(request, accessToken) {
+      assert(request.origin == print_preview.DestinationOrigin.DEVICE);
+      if (accessToken) {
+        request.xhr.setRequestHeader(
+            'Authorization', 'Bearer ' + accessToken);
+        this.sendRequest_(request);
+      } else {  // No valid token.
+        // Without abort status does not exist.
+        request.xhr.abort();
+        request.callback(request);
+      }
+      this.accessTokenRequestPromise_ = null;
     },
 
     /**
@@ -537,8 +493,8 @@ cr.define('cloudprint', function() {
     onReadyStateChange_: function(request) {
       if (request.xhr.readyState == 4) {
         if (request.xhr.status == 200) {
-          request.result = /** @type {Object} */ (
-              JSON.parse(request.xhr.responseText));
+          request.result =
+              /** @type {Object} */ (JSON.parse(request.xhr.responseText));
           if (request.origin == print_preview.DestinationOrigin.COOKIES &&
               request.result['success']) {
             this.xsrfTokens_[request.result['request']['user']] =
@@ -569,9 +525,7 @@ cr.define('cloudprint', function() {
           });
       var activeUser = '';
       if (request.origin == print_preview.DestinationOrigin.COOKIES) {
-        activeUser =
-            request.result &&
-            request.result['request'] &&
+        activeUser = request.result && request.result['request'] &&
             request.result['request']['user'];
       }
       var event = null;
@@ -596,8 +550,7 @@ cr.define('cloudprint', function() {
         event.isRecent = isRecent;
       } else {
         event = this.createErrorEvent_(
-            CloudPrintInterfaceEventType.SEARCH_FAILED,
-            request);
+            CloudPrintInterfaceEventType.SEARCH_FAILED, request);
       }
       event.user = activeUser;
       event.searchDone = lastRequestForThisOrigin;
@@ -612,18 +565,17 @@ cr.define('cloudprint', function() {
      */
     onInvitesDone_: function(request) {
       var event = null;
-      var activeUser =
-          (request.result &&
-           request.result['request'] &&
-           request.result['request']['user']) || '';
+      var activeUser = (request.result && request.result['request'] &&
+                        request.result['request']['user']) ||
+          '';
       if (request.xhr.status == 200 && request.result['success']) {
         // Extract invitations.
         var invitationListJson = request.result['invites'] || [];
         var invitationList = [];
         invitationListJson.forEach(function(invitationJson) {
           try {
-            invitationList.push(cloudprint.InvitationParser.parse(
-                invitationJson, activeUser));
+            invitationList.push(
+                cloudprint.InvitationParser.parse(invitationJson, activeUser));
           } catch (e) {
             console.error('Unable to parse invitation: ' + e);
           }
@@ -649,10 +601,9 @@ cr.define('cloudprint', function() {
      */
     onProcessInviteDone_: function(invitation, accept, request) {
       var event = null;
-      var activeUser =
-          (request.result &&
-           request.result['request'] &&
-           request.result['request']['user']) || '';
+      var activeUser = (request.result && request.result['request'] &&
+                        request.result['request']['user']) ||
+          '';
       if (request.xhr.status == 200 && request.result['success']) {
         event = new Event(CloudPrintInterfaceEventType.PROCESS_INVITE_DONE);
         if (accept) {
@@ -681,8 +632,8 @@ cr.define('cloudprint', function() {
      */
     onSubmitDone_: function(request) {
       if (request.xhr.status == 200 && request.result['success']) {
-        var submitDoneEvent = new Event(
-            CloudPrintInterfaceEventType.SUBMIT_DONE);
+        var submitDoneEvent =
+            new Event(CloudPrintInterfaceEventType.SUBMIT_DONE);
         submitDoneEvent.jobId = request.result['job']['id'];
         this.dispatchEvent(submitDoneEvent);
       } else {
@@ -703,8 +654,7 @@ cr.define('cloudprint', function() {
       // Special handling of the first printer request. It does not matter at
       // this point, whether printer was found or not.
       if (request.origin == print_preview.DestinationOrigin.COOKIES &&
-          request.result &&
-          request.account &&
+          request.result && request.account &&
           request.result['request']['user'] &&
           request.result['request']['users'] &&
           request.account != request.result['request']['user']) {
@@ -715,8 +665,7 @@ cr.define('cloudprint', function() {
           this.userInfo_.activeUser = request.account;
           // Repeat the request for the newly activated account.
           this.printer(
-              request.result['request']['params']['printerid'],
-              request.origin,
+              request.result['request']['params']['printerid'], request.origin,
               request.account);
           // Stop processing this request, wait for the new response.
           return;
@@ -734,7 +683,8 @@ cr.define('cloudprint', function() {
           printer = cloudprint.CloudDestinationParser.parse(
               printerJson, request.origin, activeUser);
         } catch (err) {
-          console.error('Failed to parse cloud print destination: ' +
+          console.error(
+              'Failed to parse cloud print destination: ' +
               JSON.stringify(printerJson));
           return;
         }
diff --git a/chromium/chrome/browser/resources/print_preview/common/overlay.js b/chromium/chrome/browser/resources/print_preview/common/overlay.js
index 9ff7f753ad0..dc083062fee 100644
--- a/chromium/chrome/browser/resources/print_preview/common/overlay.js
+++ b/chromium/chrome/browser/resources/print_preview/common/overlay.js
@@ -37,7 +37,8 @@ cr.define('print_preview', function() {
             this.cancel();
           } else if (e.keyCode == 13) {
             var activeElementTag = document.activeElement ?
-                document.activeElement.tagName.toUpperCase() : '';
+                document.activeElement.tagName.toUpperCase() :
+                '';
             if (activeElementTag != 'BUTTON' && activeElementTag != 'SELECT') {
               if (this.onEnterPressedInternal()) {
                 e.stopPropagation();
@@ -49,15 +50,13 @@ cr.define('print_preview', function() {
       }.bind(this));
 
       this.tracker.add(
-          this.getChildElement('.page > .close-button'),
-          'click',
+          this.getChildElement('.page > .close-button'), 'click',
           this.cancel.bind(this));
 
       this.tracker.add(
           this.getElement(), 'click', this.onOverlayClick_.bind(this));
       this.tracker.add(
-          this.getChildElement('.page'),
-          'animationend',
+          this.getChildElement('.page'), 'animationend',
           this.onAnimationEnd_.bind(this));
     },
 
@@ -126,7 +125,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    Overlay: Overlay
-  };
+  return {Overlay: Overlay};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/common/search_box.js b/chromium/chrome/browser/resources/print_preview/common/search_box.js
index c94fd09f9b0..d8db692974f 100644
--- a/chromium/chrome/browser/resources/print_preview/common/search_box.js
+++ b/chromium/chrome/browser/resources/print_preview/common/search_box.js
@@ -24,7 +24,7 @@ cr.define('print_preview', function() {
      * Timeout used to control incremental search.
      * @private {?number}
      */
-     this.timeout_ = null;
+    this.timeout_ = null;
 
     /**
      * Input box where the query is entered.
@@ -37,9 +37,7 @@ cr.define('print_preview', function() {
    * Enumeration of event types dispatched from the search box.
    * @enum {string}
    */
-  SearchBox.EventType = {
-    SEARCH: 'print_preview.SearchBox.SEARCH'
-  };
+  SearchBox.EventType = {SEARCH: 'print_preview.SearchBox.SEARCH'};
 
   /**
    * Delay in milliseconds before dispatching a SEARCH event.
@@ -64,18 +62,18 @@ cr.define('print_preview', function() {
 
     /** @override */
     createDom: function() {
-      this.setElementInternal(this.cloneTemplateInternal(
-          'search-box-template'));
-      this.input_ = assertInstanceof(this.getChildElement('.search-box-input'),
-          HTMLInputElement);
+      this.setElementInternal(
+          this.cloneTemplateInternal('search-box-template'));
+      this.input_ = assertInstanceof(
+          this.getChildElement('.search-box-input'), HTMLInputElement);
       this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_);
     },
 
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
-      this.tracker.add(assert(this.input_), 'input',
-                       this.onInputInput_.bind(this));
+      this.tracker.add(
+          assert(this.input_), 'input', this.onInputInput_.bind(this));
     },
 
     /** @override */
@@ -124,7 +122,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    SearchBox: SearchBox
-  };
+  return {SearchBox: SearchBox};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/common/search_bubble.js b/chromium/chrome/browser/resources/print_preview/common/search_bubble.js
index 9f85bc4a840..ab78aa57d93 100644
--- a/chromium/chrome/browser/resources/print_preview/common/search_bubble.js
+++ b/chromium/chrome/browser/resources/print_preview/common/search_bubble.js
@@ -91,8 +91,8 @@ cr.define('print_preview', function() {
         return;
 
       // Position the bubble below the location of the owner.
-      var left = owner.offsetLeft + owner.offsetWidth / 2 -
-          this.offsetWidth / 2;
+      var left =
+          owner.offsetLeft + owner.offsetWidth / 2 - this.offsetWidth / 2;
       var top = owner.offsetTop + owner.offsetHeight;
 
       // Update the position in the CSS.  Cache the last values for
@@ -109,7 +109,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    SearchBubble: SearchBubble
-  };
+  return {SearchBubble: SearchBubble};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/compiled_resources2.gyp b/chromium/chrome/browser/resources/print_preview/compiled_resources2.gyp
index 4e9e83d5e50..3f740401d6d 100644
--- a/chromium/chrome/browser/resources/print_preview/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/print_preview/compiled_resources2.gyp
@@ -8,6 +8,7 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:event_tracker',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:webui_listener_tracker',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:promise_resolver',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
diff --git a/chromium/chrome/browser/resources/print_preview/component.js b/chromium/chrome/browser/resources/print_preview/component.js
index 5431b74e5ca..02109b85b7f 100644
--- a/chromium/chrome/browser/resources/print_preview/component.js
+++ b/chromium/chrome/browser/resources/print_preview/component.js
@@ -15,8 +15,7 @@ cr.define('print_preview', function() {
 
     /**
      * Component's HTML element.
-     * @type {Element}
-     * @private
+     * @private {Element}
      */
     this.element_ = null;
 
@@ -24,15 +23,19 @@ cr.define('print_preview', function() {
 
     /**
      * Component's event tracker.
-     * @type {EventTracker}
-     * @private
+     * @private {!EventTracker}
      */
-     this.tracker_ = new EventTracker();
+    this.tracker_ = new EventTracker();
+
+    /**
+     * Component's WebUI listener tracker.
+     * @private {!WebUIListenerTracker}
+     */
+    this.listenerTracker_ = new WebUIListenerTracker();
 
     /**
      * Child components of the component.
-     * @type {!Array<!print_preview.Component>}
-     * @private
+     * @private {!Array<!print_preview.Component>}
      */
     this.children_ = [];
   }
@@ -45,11 +48,16 @@ cr.define('print_preview', function() {
       return this.element_;
     },
 
-    /** @return {EventTracker} Component's event tracker. */
+    /** @return {!EventTracker} Component's event tracker. */
     get tracker() {
       return this.tracker_;
     },
 
+    /** @return {!WebUIListenerTracker} Component's Web UI listener tracker. */
+    get listenerTracker() {
+      return this.listenerTracker_;
+    },
+
     /**
      * @return {boolean} Whether the element of the component is already in the
      *     HTML document.
@@ -88,6 +96,7 @@ cr.define('print_preview', function() {
         }
       });
       this.tracker_.removeAll();
+      this.listenerTracker_.removeAll();
       this.isInDocument_ = false;
     },
 
@@ -194,8 +203,8 @@ cr.define('print_preview', function() {
      */
     cloneTemplateInternal: function(templateId, opt_keepHidden) {
       var templateEl = $(templateId);
-      assert(templateEl != null,
-             'Could not find element with ID: ' + templateId);
+      assert(
+          templateEl != null, 'Could not find element with ID: ' + templateId);
       var el = assertInstanceof(templateEl.cloneNode(true), HTMLElement);
       el.id = '';
       if (!opt_keepHidden) {
@@ -205,7 +214,5 @@ cr.define('print_preview', function() {
     }
   };
 
-  return {
-    Component: Component
-  };
+  return {Component: Component};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/app_state.js b/chromium/chrome/browser/resources/print_preview/data/app_state.js
index 4846941cfa6..2cef90c6b76 100644
--- a/chromium/chrome/browser/resources/print_preview/data/app_state.js
+++ b/chromium/chrome/browser/resources/print_preview/data/app_state.js
@@ -86,8 +86,7 @@ cr.define('print_preview', function() {
   function AppState() {
     /**
      * Internal representation of application state.
-     * @type {Object}
-     * @private
+     * @private {Object}
      */
     this.state_ = {};
     this.state_[print_preview.AppStateField.VERSION] = AppState.VERSION_;
@@ -97,10 +96,15 @@ cr.define('print_preview', function() {
     /**
      * Whether the app state has been initialized. The app state will ignore all
      * writes until it has been initialized.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.isInitialized_ = false;
+
+    /**
+     * Native Layer object to use for sending app state to C++ handler.
+     * @private {!print_preview.NativeLayer}
+     */
+    this.nativeLayer_ = print_preview.NativeLayer.getInstance();
   }
 
   /**
@@ -118,22 +122,14 @@ cr.define('print_preview', function() {
    */
   AppState.VERSION_ = 2;
 
-  /**
-   * Name of C++ layer function to persist app state.
-   * @type {string}
-   * @const
-   * @private
-   */
-  AppState.NATIVE_FUNCTION_NAME_ = 'saveAppState';
-
   AppState.prototype = {
     /**
      * @return {?RecentDestination} The most recent destination,
      *     which is currently the selected destination.
      */
     get selectedDestination() {
-      return  (this.state_[print_preview.AppStateField.RECENT_DESTINATIONS].
-                 length > 0) ?
+      return (this.state_[print_preview.AppStateField.RECENT_DESTINATIONS]
+                  .length > 0) ?
           this.state_[print_preview.AppStateField.RECENT_DESTINATIONS][0] :
           null;
     },
@@ -142,9 +138,8 @@ cr.define('print_preview', function() {
      * @return {boolean} Whether the selected destination is valid.
      */
     isSelectedDestinationValid: function() {
-      return !!this.selectedDestination &&
-             !!this.selectedDestination.id &&
-             !!this.selectedDestination.origin;
+      return !!this.selectedDestination && !!this.selectedDestination.id &&
+          !!this.selectedDestination.origin;
     },
 
     /**
@@ -176,10 +171,10 @@ cr.define('print_preview', function() {
     getField: function(field) {
       if (field == print_preview.AppStateField.CUSTOM_MARGINS) {
         return this.state_[field] ?
-            print_preview.Margins.parse(this.state_[field]) : null;
-      } else {
-        return this.state_[field];
+            print_preview.Margins.parse(this.state_[field]) :
+            null;
       }
+      return this.state_[field];
     },
 
     /**
@@ -193,9 +188,9 @@ cr.define('print_preview', function() {
         try {
           var state = JSON.parse(serializedAppStateStr);
           if (state[print_preview.AppStateField.VERSION] == AppState.VERSION_) {
-            this.state_ = /** @type {Object} */(state);
+            this.state_ = /** @type {Object} */ (state);
           }
-        } catch(e) {
+        } catch (e) {
           console.error('Unable to parse state: ' + e);
           // Proceed with default state.
         }
@@ -206,17 +201,19 @@ cr.define('print_preview', function() {
       }
       if (!this.state_[print_preview.AppStateField.RECENT_DESTINATIONS]) {
         this.state_[print_preview.AppStateField.RECENT_DESTINATIONS] = [];
-      } else if (!(this.state_[print_preview.AppStateField.RECENT_DESTINATIONS]
-                   instanceof Array)) {
+      } else if (!(this.state_[print_preview.AppStateField
+                                   .RECENT_DESTINATIONS] instanceof
+                   Array)) {
         var tmp = this.state_[print_preview.AppStateField.RECENT_DESTINATIONS];
         this.state_[print_preview.AppStateField.RECENT_DESTINATIONS] = [tmp];
-      } else if (!this.state_[
-          print_preview.AppStateField.RECENT_DESTINATIONS][0] ||
+      } else if (
+          !this.state_[print_preview.AppStateField.RECENT_DESTINATIONS][0] ||
           !this.state_[print_preview.AppStateField.RECENT_DESTINATIONS][0].id) {
         // read in incorrectly
         this.state_[print_preview.AppStateField.RECENT_DESTINATIONS] = [];
-      } else if (this.state_[print_preview.AppStateField.RECENT_DESTINATIONS].
-                 length > AppState.NUM_DESTINATIONS_) {
+      } else if (
+          this.state_[print_preview.AppStateField.RECENT_DESTINATIONS].length >
+          AppState.NUM_DESTINATIONS_) {
         this.state_[print_preview.AppStateField.RECENT_DESTINATIONS].length =
             AppState.NUM_DESTINATIONS_;
       }
@@ -256,11 +253,12 @@ cr.define('print_preview', function() {
       // Determine if this destination is already in the recent destinations,
       // and where in the array it is located.
       var newDestination = new RecentDestination(dest);
-      var indexFound = this.state_[
-          print_preview.AppStateField.RECENT_DESTINATIONS].findIndex(
-              function(recent) {
-                return (newDestination.id == recent.id &&
-                        newDestination.origin == recent.origin);
+      var indexFound =
+          this.state_[print_preview.AppStateField.RECENT_DESTINATIONS]
+              .findIndex(function(recent) {
+                return (
+                    newDestination.id == recent.id &&
+                    newDestination.origin == recent.origin);
               });
 
       // No change
@@ -273,7 +271,7 @@ cr.define('print_preview', function() {
       // index n.
       if (indexFound == -1 &&
           this.state_[print_preview.AppStateField.RECENT_DESTINATIONS].length ==
-          AppState.NUM_DESTINATIONS_) {
+              AppState.NUM_DESTINATIONS_) {
         indexFound = AppState.NUM_DESTINATIONS_ - 1;
       }
       if (indexFound != -1)
@@ -305,12 +303,9 @@ cr.define('print_preview', function() {
      * @private
      */
     persist_: function() {
-      chrome.send(AppState.NATIVE_FUNCTION_NAME_,
-                  [JSON.stringify(this.state_)]);
+      this.nativeLayer_.saveAppState(JSON.stringify(this.state_));
     }
   };
 
-  return {
-    AppState: AppState
-  };
+  return {AppState: AppState};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/capabilities_holder.js b/chromium/chrome/browser/resources/print_preview/data/capabilities_holder.js
index ffa0f897fbd..1201ae2d3ac 100644
--- a/chromium/chrome/browser/resources/print_preview/data/capabilities_holder.js
+++ b/chromium/chrome/browser/resources/print_preview/data/capabilities_holder.js
@@ -34,7 +34,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    CapabilitiesHolder: CapabilitiesHolder
-  };
+  return {CapabilitiesHolder: CapabilitiesHolder};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/cloud_parsers.js b/chromium/chrome/browser/resources/print_preview/data/cloud_parsers.js
index 83d6213619a..25e16c1e4e1 100644
--- a/chromium/chrome/browser/resources/print_preview/data/cloud_parsers.js
+++ b/chromium/chrome/browser/resources/print_preview/data/cloud_parsers.js
@@ -77,8 +77,9 @@ cr.define('cloudprint', function() {
       account: account,
       tags: tags,
       isOwned: arrayContains(tags, CloudDestinationParser.OWNED_TAG_),
-      lastAccessTime: parseInt(
-          json[CloudDestinationParser.Field_.LAST_ACCESS], 10) || Date.now(),
+      lastAccessTime:
+          parseInt(json[CloudDestinationParser.Field_.LAST_ACCESS], 10) ||
+          Date.now(),
       cloudID: id,
       description: json[CloudDestinationParser.Field_.DESCRIPTION]
     };
@@ -86,13 +87,11 @@ cr.define('cloudprint', function() {
         id,
         CloudDestinationParser.parseType_(
             json[CloudDestinationParser.Field_.TYPE]),
-        origin,
-        json[CloudDestinationParser.Field_.DISPLAY_NAME],
+        origin, json[CloudDestinationParser.Field_.DISPLAY_NAME],
         arrayContains(tags, CloudDestinationParser.RECENT_TAG_) /*isRecent*/,
-        connectionStatus,
-        optionalParams);
+        connectionStatus, optionalParams);
     if (json.hasOwnProperty(CloudDestinationParser.Field_.CAPABILITIES)) {
-      cloudDest.capabilities = /** @type {!print_preview.Cdd} */(
+      cloudDest.capabilities = /** @type {!print_preview.Cdd} */ (
           json[CloudDestinationParser.Field_.CAPABILITIES]);
     }
     return cloudDest;
@@ -109,11 +108,11 @@ cr.define('cloudprint', function() {
     if (typeStr == CloudDestinationParser.CloudType_.ANDROID ||
         typeStr == CloudDestinationParser.CloudType_.IOS) {
       return print_preview.DestinationType.MOBILE;
-    } else if (typeStr == CloudDestinationParser.CloudType_.DOCS) {
+    }
+    if (typeStr == CloudDestinationParser.CloudType_.DOCS) {
       return print_preview.DestinationType.GOOGLE_PROMOTED;
-    } else {
-      return print_preview.DestinationType.GOOGLE;
     }
+    return print_preview.DestinationType.GOOGLE;
   };
 
   /** Namespace which contains a method to parse printer sharing invitation. */
@@ -124,23 +123,16 @@ cr.define('cloudprint', function() {
    * @enum {string}
    * @private
    */
-  InvitationParser.Field_ = {
-    PRINTER: 'printer',
-    RECEIVER: 'receiver',
-    SENDER: 'sender'
-  };
+  InvitationParser
+      .Field_ = {PRINTER: 'printer', RECEIVER: 'receiver', SENDER: 'sender'};
 
   /**
    * Enumeration of cloud destination types that are supported by print preview.
    * @enum {string}
    * @private
    */
-  InvitationParser.AclType_ = {
-    DOMAIN: 'DOMAIN',
-    GROUP: 'GROUP',
-    PUBLIC: 'PUBLIC',
-    USER: 'USER'
-  };
+  InvitationParser.AclType_ =
+      {DOMAIN: 'DOMAIN', GROUP: 'GROUP', PUBLIC: 'PUBLIC', USER: 'USER'};
 
   /**
    * Parses printer sharing invitation from JSON from GCP invite API response.
@@ -167,8 +159,9 @@ cr.define('cloudprint', function() {
     var receiverType = receiver['type'];
     if (receiverType == InvitationParser.AclType_.USER) {
       // It's a personal invitation, empty name indicates just that.
-    } else if (receiverType == InvitationParser.AclType_.GROUP ||
-               receiverType == InvitationParser.AclType_.DOMAIN) {
+    } else if (
+        receiverType == InvitationParser.AclType_.GROUP ||
+        receiverType == InvitationParser.AclType_.DOMAIN) {
       receiverName = nameFormatter(receiver['name'], receiver['scope']);
     } else {
       throw Error('Invitation of unsupported receiver type');
@@ -176,8 +169,7 @@ cr.define('cloudprint', function() {
 
     var destination = cloudprint.CloudDestinationParser.parse(
         json[InvitationParser.Field_.PRINTER],
-        print_preview.DestinationOrigin.COOKIES,
-        account);
+        print_preview.DestinationOrigin.COOKIES, account);
 
     return new print_preview.Invitation(
         senderName, receiverName, destination, receiver, account);
diff --git a/chromium/chrome/browser/resources/print_preview/data/coordinate2d.js b/chromium/chrome/browser/resources/print_preview/data/coordinate2d.js
index 7352af778d9..b336f743504 100644
--- a/chromium/chrome/browser/resources/print_preview/data/coordinate2d.js
+++ b/chromium/chrome/browser/resources/print_preview/data/coordinate2d.js
@@ -63,14 +63,10 @@ cr.define('print_preview', function() {
      * @return {boolean} Whether another point is equal to this one.
      */
     equals: function(other) {
-      return other != null &&
-          this.x_ == other.x_ &&
-          this.y_ == other.y_;
+      return other != null && this.x_ == other.x_ && this.y_ == other.y_;
     }
   };
 
   // Export
-  return {
-    Coordinate2d: Coordinate2d
-  };
+  return {Coordinate2d: Coordinate2d};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/destination.js b/chromium/chrome/browser/resources/print_preview/data/destination.js
index c8595eb0a61..24e93cb4e8a 100644
--- a/chromium/chrome/browser/resources/print_preview/data/destination.js
+++ b/chromium/chrome/browser/resources/print_preview/data/destination.js
@@ -22,7 +22,6 @@ print_preview.DestinationType = {
 print_preview.DestinationOrigin = {
   LOCAL: 'local',
   COOKIES: 'cookies',
-  PROFILE: 'profile',
   DEVICE: 'device',
   PRIVET: 'privet',
   EXTENSION: 'extension',
@@ -122,8 +121,8 @@ cr.define('print_preview', function() {
    *     for the destination.
    * @constructor
    */
-  function Destination(id, type, origin, displayName, isRecent,
-                       connectionStatus, opt_params) {
+  function Destination(
+      id, type, origin, displayName, isRecent, connectionStatus, opt_params) {
     /**
      * ID of the destination.
      * @private {string}
@@ -208,8 +207,8 @@ cr.define('print_preview', function() {
      * accessed.
      * @private {number}
      */
-    this.lastAccessTime_ = (opt_params && opt_params.lastAccessTime) ||
-                           Date.now();
+    this.lastAccessTime_ =
+        (opt_params && opt_params.lastAccessTime) || Date.now();
 
     /**
      * Cloud ID for Privet printers.
@@ -240,12 +239,13 @@ cr.define('print_preview', function() {
      * @private {print_preview.DestinationProvisionalType}
      */
     this.provisionalType_ = (opt_params && opt_params.provisionalType) ||
-                            print_preview.DestinationProvisionalType.NONE;
+        print_preview.DestinationProvisionalType.NONE;
 
-    assert(this.provisionalType_ !=
-               print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION ||
-           this.isExtension,
-           'Provisional USB destination only supprted with extension origin.');
+    assert(
+        this.provisionalType_ !=
+                print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION ||
+            this.isExtension,
+        'Provisional USB destination only supprted with extension origin.');
   }
 
   /**
@@ -253,10 +253,8 @@ cr.define('print_preview', function() {
    * @type {!Array<string>}
    * @const
    */
-  Destination.LOCATION_TAG_PREFIXES = [
-    '__cp__location=',
-    '__cp__printer-location='
-  ];
+  Destination.LOCATION_TAG_PREFIXES =
+      ['__cp__location=', '__cp__printer-location='];
 
   /**
    * Enumeration of Google-promoted destination IDs.
@@ -337,11 +335,11 @@ cr.define('print_preview', function() {
     /** @return {boolean} Whether the destination is local or cloud-based. */
     get isLocal() {
       return this.origin_ == print_preview.DestinationOrigin.LOCAL ||
-             this.origin_ == print_preview.DestinationOrigin.EXTENSION ||
-             this.origin_ == print_preview.DestinationOrigin.CROS ||
-             (this.origin_ == print_preview.DestinationOrigin.PRIVET &&
-              this.connectionStatus_ !=
-              print_preview.DestinationConnectionStatus.UNREGISTERED);
+          this.origin_ == print_preview.DestinationOrigin.EXTENSION ||
+          this.origin_ == print_preview.DestinationOrigin.CROS ||
+          (this.origin_ == print_preview.DestinationOrigin.PRIVET &&
+           this.connectionStatus_ !=
+               print_preview.DestinationConnectionStatus.UNREGISTERED);
     },
 
     /** @return {boolean} Whether the destination is a Privet local printer */
@@ -452,9 +450,12 @@ cr.define('print_preview', function() {
 
     /** @return {boolean} Whether the destination is considered offline. */
     get isOffline() {
-      return arrayContains([print_preview.DestinationConnectionStatus.OFFLINE,
-                            print_preview.DestinationConnectionStatus.DORMANT],
-                            this.connectionStatus_);
+      return arrayContains(
+          [
+            print_preview.DestinationConnectionStatus.OFFLINE,
+            print_preview.DestinationConnectionStatus.DORMANT
+          ],
+          this.connectionStatus_);
     },
 
     /** @return {string} Human readable status for offline destination. */
@@ -498,8 +499,7 @@ cr.define('print_preview', function() {
       if (this.isLocal) {
         return Destination.IconUrl_.LOCAL;
       }
-      if (this.type_ == print_preview.DestinationType.MOBILE &&
-          this.isOwned_) {
+      if (this.type_ == print_preview.DestinationType.MOBILE && this.isOwned_) {
         return Destination.IconUrl_.MOBILE;
       }
       if (this.type_ == print_preview.DestinationType.MOBILE) {
@@ -547,7 +547,7 @@ cr.define('print_preview', function() {
      */
     get isProvisional() {
       return this.provisionalType_ !=
-             print_preview.DestinationProvisionalType.NONE;
+          print_preview.DestinationProvisionalType.NONE;
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/print_preview/data/destination_match.js b/chromium/chrome/browser/resources/print_preview/data/destination_match.js
index 6a87f68103c..3152abe2342 100644
--- a/chromium/chrome/browser/resources/print_preview/data/destination_match.js
+++ b/chromium/chrome/browser/resources/print_preview/data/destination_match.js
@@ -18,7 +18,6 @@ cr.define('print_preview', function() {
    */
   function DestinationMatch(
       origins, idRegExp, displayNameRegExp, skipVirtualDestinations) {
-
     /** @private {!Array<!print_preview.DestinationOrigin>} */
     this.origins_ = origins;
 
@@ -48,9 +47,8 @@ cr.define('print_preview', function() {
      * @return {boolean} Whether destination is the same as initial.
      */
     matchIdAndOrigin: function(id, origin) {
-      return this.matchOrigin(origin) &&
-             !!this.idRegExp_ &&
-             this.idRegExp_.test(id);
+      return this.matchOrigin(origin) && !!this.idRegExp_ &&
+          this.idRegExp_.test(id);
     },
 
     /**
@@ -89,13 +87,10 @@ cr.define('print_preview', function() {
             destination.id);
       }
       return arrayContains(
-          [print_preview.Destination.GooglePromotedId.DOCS],
-          destination.id);
+          [print_preview.Destination.GooglePromotedId.DOCS], destination.id);
     }
   };
 
   // Export
-  return {
-    DestinationMatch: DestinationMatch
-  };
+  return {DestinationMatch: DestinationMatch};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/destination_store.js b/chromium/chrome/browser/resources/print_preview/data/destination_store.js
index 116b1c64ee0..236ea49e8ba 100644
--- a/chromium/chrome/browser/resources/print_preview/data/destination_store.js
+++ b/chromium/chrome/browser/resources/print_preview/data/destination_store.js
@@ -8,107 +8,94 @@ cr.define('print_preview', function() {
   /**
    * A data store that stores destinations and dispatches events when the data
    * store changes.
-   * @param {!print_preview.NativeLayer} nativeLayer Used to fetch local print
-   *     destinations.
    * @param {!print_preview.UserInfo} userInfo User information repository.
    * @param {!print_preview.AppState} appState Application state.
+   * @param {!WebUIListenerTracker} listenerTracker Tracker for WebUI listeners
+   *     added in DestinationStore constructor.
    * @constructor
    * @extends {cr.EventTarget}
    */
-  function DestinationStore(nativeLayer, userInfo, appState) {
+  function DestinationStore(userInfo, appState, listenerTracker) {
     cr.EventTarget.call(this);
 
     /**
      * Used to fetch local print destinations.
-     * @type {!print_preview.NativeLayer}
-     * @private
+     * @private {!print_preview.NativeLayer}
      */
-    this.nativeLayer_ = nativeLayer;
+    this.nativeLayer_ = print_preview.NativeLayer.getInstance();
 
     /**
      * User information repository.
-     * @type {!print_preview.UserInfo}
-     * @private
+     * @private {!print_preview.UserInfo}
      */
     this.userInfo_ = userInfo;
 
     /**
      * Used to load and persist the selected destination.
-     * @type {!print_preview.AppState}
-     * @private
+     * @private {!print_preview.AppState}
      */
     this.appState_ = appState;
 
     /**
      * Used to track metrics.
-     * @type {!print_preview.DestinationSearchMetricsContext}
-     * @private
+     * @private {!print_preview.DestinationSearchMetricsContext}
      */
     this.metrics_ = new print_preview.DestinationSearchMetricsContext();
 
     /**
      * Internal backing store for the data store.
-     * @type {!Array<!print_preview.Destination>}
-     * @private
+     * @private {!Array<!print_preview.Destination>}
      */
     this.destinations_ = [];
 
     /**
      * Cache used for constant lookup of destinations by origin and id.
-     * @type {Object<!print_preview.Destination>}
-     * @private
+     * @private {Object<!print_preview.Destination>}
      */
     this.destinationMap_ = {};
 
     /**
      * Currently selected destination.
-     * @type {print_preview.Destination}
-     * @private
+     * @private {print_preview.Destination}
      */
     this.selectedDestination_ = null;
 
     /**
      * Whether the destination store will auto select the destination that
      * matches this set of parameters.
-     * @type {print_preview.DestinationMatch}
-     * @private
+     * @private {print_preview.DestinationMatch}
      */
     this.autoSelectMatchingDestination_ = null;
 
     /**
      * Event tracker used to track event listeners of the destination store.
-     * @type {!EventTracker}
-     * @private
+     * @private {!EventTracker}
      */
     this.tracker_ = new EventTracker();
 
     /**
      * Whether PDF printer is enabled. It's disabled, for example, in App Kiosk
      * mode.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.pdfPrinterEnabled_ = false;
 
     /**
      * ID of the system default destination.
-     * @type {?string}
-     * @private
+     * @private {?string}
      */
     this.systemDefaultDestinationId_ = null;
 
     /**
      * Used to fetch cloud-based print destinations.
-     * @type {cloudprint.CloudPrintInterface}
-     * @private
+     * @private {cloudprint.CloudPrintInterface}
      */
     this.cloudPrintInterface_ = null;
 
     /**
      * Maps user account to the list of origins for which destinations are
      * already loaded.
-     * @type {!Object<Array<print_preview.DestinationOrigin>>}
-     * @private
+     * @private {!Object<Array<!print_preview.DestinationOrigin>>}
      */
     this.loadedCloudOrigins_ = {};
 
@@ -117,91 +104,82 @@ cr.define('print_preview', function() {
      * destination matches the initial destination ID after the specified
      * timeout, the first destination in the store will be automatically
      * selected.
-     * @type {?number}
-     * @private
+     * @private {?number}
      */
     this.autoSelectTimeout_ = null;
 
     /**
      * Whether a search for local destinations is in progress.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.isLocalDestinationSearchInProgress_ = false;
 
     /**
      * Whether the destination store has already loaded or is loading all local
      * destinations.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.hasLoadedAllLocalDestinations_ = false;
 
     /**
      * Whether a search for privet destinations is in progress.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.isPrivetDestinationSearchInProgress_ = false;
 
     /**
      * Whether the destination store has already loaded or is loading all privet
      * destinations.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.hasLoadedAllPrivetDestinations_ = false;
 
     /**
-     * ID of a timeout after the start of a privet search to end that privet
-     * search.
-     * @type {?number}
-     * @private
-     */
-    this.privetSearchTimeout_ = null;
-
-    /**
      * Whether a search for extension destinations is in progress.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.isExtensionDestinationSearchInProgress_ = false;
 
     /**
      * Whether the destination store has already loaded all extension
      * destinations.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.hasLoadedAllExtensionDestinations_ = false;
 
     /**
      * ID of a timeout set at the start of an extension destination search. The
      * timeout ends the search.
-     * @type {?number}
-     * @private
+     * @private {?number}
      */
     this.extensionSearchTimeout_ = null;
 
     /**
      * MDNS service name of destination that we are waiting to register.
-     * @type {?string}
-     * @private
+     * @private {?string}
      */
     this.waitForRegisterDestination_ = null;
 
     /**
      * Local destinations are CROS destinations on ChromeOS because they require
      * extra setup.
-     * @type {!print_preview.DestinationOrigin}
-     * @private
+     * @private {!print_preview.DestinationOrigin}
      */
     this.platformOrigin_ = cr.isChromeOS ?
         print_preview.DestinationOrigin.CROS :
         print_preview.DestinationOrigin.LOCAL;
 
-    this.addEventListeners_();
+    /**
+     * Whether to default to the system default printer instead of the most
+     * recent destination.
+     * @private {boolean}
+     */
+    this.useSystemDefaultAsDefault_ =
+        loadTimeData.getBoolean('useSystemDefaultPrinter');
+
     this.reset_();
+
+    this.addWebUIEventListeners_(listenerTracker);
   }
 
   /**
@@ -220,8 +198,7 @@ cr.define('print_preview', function() {
         'print_preview.DestinationStore.PROVISIONAL_DESTINATION_RESOLVED',
     CACHED_SELECTED_DESTINATION_INFO_READY:
         'print_preview.DestinationStore.CACHED_SELECTED_DESTINATION_INFO_READY',
-    SELECTED_DESTINATION_CAPABILITIES_READY:
-        'print_preview.DestinationStore' +
+    SELECTED_DESTINATION_CAPABILITIES_READY: 'print_preview.DestinationStore' +
         '.SELECTED_DESTINATION_CAPABILITIES_READY',
   };
 
@@ -235,13 +212,6 @@ cr.define('print_preview', function() {
   DestinationStore.AUTO_SELECT_TIMEOUT_ = 15000;
 
   /**
-   * Amount of time spent searching for privet destination, in milliseconds.
-   * @private {number}
-   * @const
-   */
-  DestinationStore.PRIVET_SEARCH_DURATION_ = 5000;
-
-  /**
    * Maximum amount of time spent searching for extension destinations, in
    * milliseconds.
    * @private {number}
@@ -440,10 +410,8 @@ cr.define('print_preview', function() {
     for (var i = 0, media; (media = mediaSize.option[i]); i++) {
       // No need to patch capabilities with localized names provided.
       if (!media.custom_display_name_localized) {
-        media.custom_display_name =
-            media.custom_display_name ||
-            DestinationStore.MEDIA_DISPLAY_NAMES_[media.name] ||
-            media.name;
+        media.custom_display_name = media.custom_display_name ||
+            DestinationStore.MEDIA_DISPLAY_NAMES_[media.name] || media.name;
       }
     }
     return capabilities;
@@ -495,9 +463,10 @@ cr.define('print_preview', function() {
       var category;
       if (name.startsWith('NA_')) {
         category = categoryStandardNA;
-      } else if (name.startsWith('PRC_') || name.startsWith('ROC_') ||
-                 name == 'OM_DAI_PA_KAI' || name == 'OM_JUURO_KU_KAI' ||
-                 name == 'OM_PA_KAI') {
+      } else if (
+          name.startsWith('PRC_') || name.startsWith('ROC_') ||
+          name == 'OM_DAI_PA_KAI' || name == 'OM_JUURO_KU_KAI' ||
+          name == 'OM_PA_KAI') {
         category = categoryStandardCN;
       } else if (name.startsWith('ISO_')) {
         category = categoryStandardISO;
@@ -522,8 +491,9 @@ cr.define('print_preview', function() {
 
     // Then put it all back together.
     mediaSize.option = categoryStandardNA;
-    mediaSize.option.push(...categoryStandardCN, ...categoryStandardISO,
-        ...categoryStandardJP, ...categoryStandardMisc, ...categoryCustom);
+    mediaSize.option.push(
+        ...categoryStandardCN, ...categoryStandardISO, ...categoryStandardJP,
+        ...categoryStandardMisc, ...categoryCustom);
     return capabilities;
   };
 
@@ -564,8 +534,8 @@ cr.define('print_preview', function() {
      */
     get isLocalDestinationSearchInProgress() {
       return this.isLocalDestinationSearchInProgress_ ||
-        this.isPrivetDestinationSearchInProgress_ ||
-        this.isExtensionDestinationSearchInProgress_;
+          this.isPrivetDestinationSearchInProgress_ ||
+          this.isExtensionDestinationSearchInProgress_;
     },
 
     /**
@@ -573,7 +543,24 @@ cr.define('print_preview', function() {
      */
     get isCloudDestinationSearchInProgress() {
       return !!this.cloudPrintInterface_ &&
-             this.cloudPrintInterface_.isCloudDestinationSearchInProgress;
+          this.cloudPrintInterface_.isCloudDestinationSearchInProgress;
+    },
+
+    /**
+     * Starts listening for relevant WebUI events and adds the listeners to
+     * |listenerTracker|. |listenerTracker| is responsible for removing the
+     * listeners when necessary.
+     * @param {!WebUIListenerTracker} listenerTracker
+     * @private
+     */
+    addWebUIEventListeners_: function(listenerTracker) {
+      listenerTracker.add(
+          'privet-printer-added', this.onPrivetPrinterAdded_.bind(this));
+      listenerTracker.add(
+          'extension-printers-added',
+          this.onExtensionPrintersAdded_.bind(this));
+      listenerTracker.add(
+          'reload-printer-list', this.onDestinationsReload.bind(this));
     },
 
     /**
@@ -589,8 +576,7 @@ cr.define('print_preview', function() {
      *     default destination selection rules.
      */
     init: function(
-        isInAppKioskMode,
-        systemDefaultDestinationId,
+        isInAppKioskMode, systemDefaultDestinationId,
         serializedDefaultDestinationSelectionRulesStr) {
       this.pdfPrinterEnabled_ = !isInAppKioskMode;
       this.systemDefaultDestinationId_ = systemDefaultDestinationId;
@@ -631,31 +617,26 @@ cr.define('print_preview', function() {
           account = this.appState_.recentDestinations[i].account || '';
           name = this.appState_.recentDestinations[i].name || '';
           capabilities = this.appState_.recentDestinations[i].capabilities;
-          extensionId = this.appState_.recentDestinations[i].extensionId ||
-                        '';
+          extensionId = this.appState_.recentDestinations[i].extensionId || '';
           extensionName =
               this.appState_.recentDestinations[i].extensionName || '';
-          var candidate =
-              this.destinationMap_[this.getDestinationKey_(origin,
-                                                           id, account)];
+          var candidate = this.destinationMap_[this.getDestinationKey_(
+              origin, id, account)];
           if (candidate != null) {
-            if (!foundDestination)
+            if (!foundDestination && !this.useSystemDefaultAsDefault_)
               this.selectDestination(candidate);
             candidate.isRecent = true;
             foundDestination = true;
-          } else if (!foundDestination) {
+          } else if (!foundDestination && !this.useSystemDefaultAsDefault_) {
             foundDestination = this.fetchPreselectedDestination_(
-                                    origin,
-                                    id,
-                                    account,
-                                    name,
-                                    capabilities,
-                                    extensionId,
-                                    extensionName);
+                origin, id, account, name, capabilities, extensionId,
+                extensionName);
           }
         }
       }
-      if (foundDestination) return;
+
+      if (foundDestination && !this.useSystemDefaultAsDefault_)
+        return;
 
       // Try the system default
       id = this.systemDefaultDestinationId_ || '';
@@ -671,12 +652,7 @@ cr.define('print_preview', function() {
       }
 
       if (this.fetchPreselectedDestination_(
-              origin,
-              id,
-              account,
-              name,
-              capabilities,
-              extensionId,
+              origin, id, account, name, capabilities, extensionId,
               extensionName)) {
         return;
       }
@@ -697,6 +673,7 @@ cr.define('print_preview', function() {
      *     destination.
      * @param {string} extensionName Extension name associated with this
      *     destination.
+     * @return {boolean} Whether capabilities fetch was successfully started.
      * @private
      */
     fetchPreselectedDestination_: function(
@@ -706,7 +683,11 @@ cr.define('print_preview', function() {
 
       if (origin == print_preview.DestinationOrigin.LOCAL ||
           origin == print_preview.DestinationOrigin.CROS) {
-        this.nativeLayer_.startGetLocalDestinationCapabilities(id);
+        this.nativeLayer_.getPrinterCapabilities(id).then(
+            this.onLocalDestinationCapabilitiesSet_.bind(this),
+            this.onGetCapabilitiesFail_.bind(
+                this,
+                /** @type {print_preview.DestinationOrigin} */ (origin), id));
         return true;
       }
 
@@ -715,31 +696,32 @@ cr.define('print_preview', function() {
            origin == print_preview.DestinationOrigin.DEVICE)) {
         this.cloudPrintInterface_.printer(
             id,
-            /** @type {print_preview.DestinationOrigin} */(origin),
-            account);
+            /** @type {print_preview.DestinationOrigin} */ (origin), account);
         return true;
       }
 
       if (origin == print_preview.DestinationOrigin.PRIVET) {
         // TODO(noamsml): Resolve a specific printer instead of listing all
         // privet printers in this case.
-        this.nativeLayer_.startGetPrivetDestinations();
+        this.nativeLayer_.getPrivetPrinters().then(
+            this.endPrivetPrinterSearch_.bind(this));
 
         // Create a fake selectedDestination_ that is not actually in the
         // destination store. When the real destination is created, this
         // destination will be overwritten.
         this.selectedDestination_ = new print_preview.Destination(
-            id,
-            print_preview.DestinationType.LOCAL,
-            print_preview.DestinationOrigin.PRIVET,
-            name,
-            false /*isRecent*/,
+            id, print_preview.DestinationType.LOCAL,
+            print_preview.DestinationOrigin.PRIVET, name, false /*isRecent*/,
             print_preview.DestinationConnectionStatus.ONLINE);
-        this.selectedDestination_.capabilities = capabilities;
 
-        cr.dispatchSimpleEvent(
-          this,
-          DestinationStore.EventType.CACHED_SELECTED_DESTINATION_INFO_READY);
+        if (capabilities) {
+          this.selectedDestination_.capabilities = capabilities;
+
+          cr.dispatchSimpleEvent(
+              this,
+              DestinationStore.EventType
+                  .CACHED_SELECTED_DESTINATION_INFO_READY);
+        }
         return true;
       }
 
@@ -778,26 +760,22 @@ cr.define('print_preview', function() {
     fetchMatchingDestination_: function(destinationMatch) {
       this.autoSelectMatchingDestination_ = destinationMatch;
 
-      if (destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.LOCAL) ||
-          destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.CROS)) {
+      if (destinationMatch.matchOrigin(print_preview.DestinationOrigin.LOCAL) ||
+          destinationMatch.matchOrigin(print_preview.DestinationOrigin.CROS)) {
         this.startLoadLocalDestinations();
       }
       if (destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.PRIVET)) {
+              print_preview.DestinationOrigin.PRIVET)) {
         this.startLoadPrivetDestinations();
       }
       if (destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.EXTENSION)) {
+              print_preview.DestinationOrigin.EXTENSION)) {
         this.startLoadExtensionDestinations();
       }
       if (destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.COOKIES) ||
+              print_preview.DestinationOrigin.COOKIES) ||
           destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.DEVICE) ||
-          destinationMatch.matchOrigin(
-            print_preview.DestinationOrigin.PROFILE)) {
+              print_preview.DestinationOrigin.DEVICE)) {
         this.startLoadCloudDestinations();
       }
     },
@@ -817,9 +795,8 @@ cr.define('print_preview', function() {
           matchRules =
               JSON.parse(serializedDefaultDestinationSelectionRulesStr);
         }
-      } catch(e) {
-        console.error(
-            'Failed to parse defaultDestinationSelectionRules: ' + e);
+      } catch (e) {
+        console.error('Failed to parse defaultDestinationSelectionRules: ' + e);
       }
       if (!matchRules)
         return null;
@@ -841,7 +818,6 @@ cr.define('print_preview', function() {
       if (isCloud) {
         origins.push(print_preview.DestinationOrigin.COOKIES);
         origins.push(print_preview.DestinationOrigin.DEVICE);
-        origins.push(print_preview.DestinationOrigin.PROFILE);
       }
 
       var idRegExp = null;
@@ -863,9 +839,7 @@ cr.define('print_preview', function() {
       }
 
       return new print_preview.DestinationMatch(
-          origins,
-          idRegExp,
-          displayNameRegExp,
+          origins, idRegExp, displayNameRegExp,
           true /*skipVirtualDestinations*/);
     },
 
@@ -882,8 +856,7 @@ cr.define('print_preview', function() {
       }
       if (this.systemDefaultDestinationId_) {
         return this.createExactDestinationMatch_(
-            this.platformOrigin_,
-            this.systemDefaultDestinationId_);
+            this.platformOrigin_, this.systemDefaultDestinationId_);
       }
       return null;
     },
@@ -900,8 +873,7 @@ cr.define('print_preview', function() {
       return new print_preview.DestinationMatch(
           [origin],
           new RegExp('^' + id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '$'),
-          null /*displayNameRegExp*/,
-          false /*skipVirtualDestinations*/);
+          null /*displayNameRegExp*/, false /*skipVirtualDestinations*/);
     },
 
     /**
@@ -910,6 +882,7 @@ cr.define('print_preview', function() {
      *     to set.
      */
     setCloudPrintInterface: function(cloudPrintInterface) {
+      assert(this.cloudPrintInterface_ == null);
       this.cloudPrintInterface_ = cloudPrintInterface;
       this.tracker_.add(
           this.cloudPrintInterface_,
@@ -965,8 +938,9 @@ cr.define('print_preview', function() {
         return;
       }
 
-      assert(!destination.isProvisional,
-             'Unable to select provisonal destinations');
+      assert(
+          !destination.isProvisional,
+          'Unable to select provisonal destinations');
 
       // Update and persist selected destination.
       this.selectedDestination_ = destination;
@@ -978,29 +952,40 @@ cr.define('print_preview', function() {
             return otherDestination.cloudID == destination.cloudID &&
                 otherDestination != destination;
           })) {
-        this.metrics_.record(destination.isPrivet ?
-            print_preview.Metrics.DestinationSearchBucket.
-                PRIVET_DUPLICATE_SELECTED :
-            print_preview.Metrics.DestinationSearchBucket.
-                CLOUD_DUPLICATE_SELECTED);
+        this.metrics_.record(
+            destination.isPrivet ? print_preview.Metrics.DestinationSearchBucket
+                                       .PRIVET_DUPLICATE_SELECTED :
+                                   print_preview.Metrics.DestinationSearchBucket
+                                       .CLOUD_DUPLICATE_SELECTED);
       }
       // Notify about selected destination change.
       cr.dispatchSimpleEvent(
           this, DestinationStore.EventType.DESTINATION_SELECT);
-      // Request destination capabilities, of not known yet.
+      // Request destination capabilities from backend, since they are not
+      // known yet.
       if (destination.capabilities == null) {
         if (destination.isPrivet) {
-          this.nativeLayer_.startGetPrivetDestinationCapabilities(
-              destination.id);
+          this.nativeLayer_.getPrivetPrinterCapabilities(destination.id)
+              .then(
+                  this.onPrivetCapabilitiesSet_.bind(this),
+                  this.onGetCapabilitiesFail_.bind(
+                      this, destination.origin, destination.id));
         } else if (destination.isExtension) {
-          this.nativeLayer_.startGetExtensionDestinationCapabilities(
-              destination.id);
+          this.nativeLayer_.getExtensionPrinterCapabilities(destination.id)
+              .then(
+                  this.onExtensionCapabilitiesSet_.bind(this, destination.id),
+                  this.onGetCapabilitiesFail_.bind(
+                      this, destination.origin, destination.id));
         } else if (destination.isLocal) {
-          this.nativeLayer_.startGetLocalDestinationCapabilities(
-              destination.id);
+          this.nativeLayer_.getPrinterCapabilities(destination.id)
+              .then(
+                  this.onLocalDestinationCapabilitiesSet_.bind(this),
+                  this.onGetCapabilitiesFail_.bind(
+                      this, destination.origin, destination.id));
         } else {
-          assert(this.cloudPrintInterface_ != null,
-                 'Cloud destination selected, but GCP is not enabled');
+          assert(
+              this.cloudPrintInterface_ != null,
+              'Cloud destination selected, but GCP is not enabled');
           this.cloudPrintInterface_.printer(
               destination.id, destination.origin, destination.account);
         }
@@ -1032,7 +1017,35 @@ cr.define('print_preview', function() {
           destination.provisionalType ==
               print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION,
           'Provisional type cannot be resolved.');
-      this.nativeLayer_.grantExtensionPrinterAccess(destination.id);
+      this.nativeLayer_.grantExtensionPrinterAccess(destination.id).then(
+          /**
+           * @param {!print_preview.ProvisionalDestinationInfo}
+           *     destinationInfo Information about the resolved printer.
+           */
+          function(destinationInfo) {
+            /**
+             * Removes the destination from the store and replaces it with a
+             * destination created from the resolved destination properties, if
+             * any are reported. Then sends a PROVISIONAL_DESTINATION_RESOLVED
+             * event.
+             */
+            this.removeProvisionalDestination_(destination.id);
+            var parsedDestination =
+                print_preview.ExtensionDestinationParser.parse(destinationInfo);
+            this.insertIntoStore_(parsedDestination);
+            this.dispatchProvisionalDestinationResolvedEvent_(
+                destination.id, parsedDestination);
+          }.bind(this),
+          function() {
+            /**
+             * The provisional destination is removed from the store and a
+             * PROVISIONAL_DESTINATION_RESOLVED event is dispatched with a null
+             * destination.
+             */
+            this.removeProvisionalDestination_(destination.id);
+            this.dispatchProvisionalDestinationResolvedEvent_(destination.id,
+                                                              null);
+          }.bind(this));
     },
 
     /**
@@ -1042,8 +1055,7 @@ cr.define('print_preview', function() {
     selectPdfDestination_: function() {
       var saveToPdfKey = this.getDestinationKey_(
           print_preview.DestinationOrigin.LOCAL,
-          print_preview.Destination.GooglePromotedId.SAVE_AS_PDF,
-          '');
+          print_preview.Destination.GooglePromotedId.SAVE_AS_PDF, '');
       this.selectDestination(
           this.destinationMap_[saveToPdfKey] || this.destinations_[0] || null);
     },
@@ -1057,16 +1069,11 @@ cr.define('print_preview', function() {
       if (this.systemDefaultDestinationId_) {
         if (this.autoSelectMatchingDestination_ &&
             !this.autoSelectMatchingDestination_.matchIdAndOrigin(
-                this.systemDefaultDestinationId_,
-                this.platformOrigin_)) {
+                this.systemDefaultDestinationId_, this.platformOrigin_)) {
           if (this.fetchPreselectedDestination_(
-                this.platformOrigin_,
-                this.systemDefaultDestinationId_,
-                '' /*account*/,
-                '' /*name*/,
-                null /*capabilities*/,
-                '' /*extensionId*/,
-                '' /*extensionName*/)) {
+                  this.platformOrigin_, this.systemDefaultDestinationId_,
+                  '' /*account*/, '' /*name*/, null /*capabilities*/,
+                  '' /*extensionId*/, '' /*extensionName*/)) {
             return;
           }
         }
@@ -1078,7 +1085,8 @@ cr.define('print_preview', function() {
     startLoadLocalDestinations: function() {
       if (!this.hasLoadedAllLocalDestinations_) {
         this.hasLoadedAllLocalDestinations_ = true;
-        this.nativeLayer_.startGetLocalDestinations();
+        this.nativeLayer_.getPrinters().then(
+            this.onLocalDestinationsSet_.bind(this));
         this.isLocalDestinationSearchInProgress_ = true;
         cr.dispatchSimpleEvent(
             this, DestinationStore.EventType.DESTINATION_SEARCH_STARTED);
@@ -1087,17 +1095,17 @@ cr.define('print_preview', function() {
 
     /** Initiates loading of privet print destinations. */
     startLoadPrivetDestinations: function() {
-      if (!this.hasLoadedAllPrivetDestinations_) {
-        if (this.privetDestinationSearchInProgress_)
-          clearTimeout(this.privetSearchTimeout_);
-        this.isPrivetDestinationSearchInProgress_ = true;
-        this.nativeLayer_.startGetPrivetDestinations();
-        cr.dispatchSimpleEvent(
-            this, DestinationStore.EventType.DESTINATION_SEARCH_STARTED);
-        this.privetSearchTimeout_ = setTimeout(
-            this.endPrivetPrinterSearch_.bind(this),
-            DestinationStore.PRIVET_SEARCH_DURATION_);
-      }
+      if (this.hasLoadedAllPrivetDestinations_)
+        return;
+      this.isPrivetDestinationSearchInProgress_ = true;
+      this.nativeLayer_.getPrivetPrinters().then(
+          this.endPrivetPrinterSearch_.bind(this), function() {
+            // Rejected by C++, indicating privet printing is disabled.
+            this.hasLoadedAllPrivetDestinations_ = true;
+            this.isPrivetDestinationSearchInProgress_ = false;
+          }.bind(this));
+      cr.dispatchSimpleEvent(
+          this, DestinationStore.EventType.DESTINATION_SEARCH_STARTED);
     },
 
     /** Initializes loading of extension managed print destinations. */
@@ -1109,7 +1117,8 @@ cr.define('print_preview', function() {
         clearTimeout(this.extensionSearchTimeout_);
 
       this.isExtensionDestinationSearchInProgress_ = true;
-      this.nativeLayer_.startGetExtensionDestinations();
+      this.nativeLayer_.getExtensionPrinters().then(
+          this.onExtensionPrintersDone_.bind(this));
       cr.dispatchSimpleEvent(
           this, DestinationStore.EventType.DESTINATION_SEARCH_STARTED);
       this.extensionSearchTimeout_ = setTimeout(
@@ -1159,53 +1168,41 @@ cr.define('print_preview', function() {
      * Wait for a privet device to be registered.
      */
     waitForRegister: function(id) {
-      this.nativeLayer_.startGetPrivetDestinations();
+      this.nativeLayer_.getPrivetPrinters().then(
+          this.endPrivetPrinterSearch_.bind(this));
       this.waitForRegisterDestination_ = id;
     },
 
     /**
-     * Event handler for {@code
-     * print_preview.NativeLayer.EventType.PROVISIONAL_DESTINATION_RESOLVED}.
-     * Currently assumes the provisional destination is an extension
-     * destination.
-     * Called when a provisional destination resolvement attempt finishes.
-     * The provisional destination is removed from the store and replaced with
-     * a destination created from the resolved destination properties, if any
-     * are reported.
-     * Emits {@code DestinationStore.EventType.PROVISIONAL_DESTINATION_RESOLVED}
-     * event.
-     * @param {!Event} evt The event containing the provisional destination ID
-     *     and resolved destination description. If the destination was not
-     *     successfully resolved, the description will not be set.
+     * Removes the provisional destination with ID |provisionalId| from
+     * |destinationMap_| and |destinations_|.
+     * @param{string} provisionalId The provisional destination ID.
      * @private
      */
-    handleProvisionalDestinationResolved_: function(evt) {
-      var provisionalDestinationIndex = -1;
-      var provisionalDestination = null;
-      for (var i = 0; i < this.destinations_.length; ++i) {
-        if (evt.provisionalId == this.destinations_[i].id) {
-          provisionalDestinationIndex = i;
-          provisionalDestination = this.destinations_[i];
-          break;
-        }
-      }
-
-      if (!provisionalDestination)
-        return;
-
-      this.destinations_.splice(provisionalDestinationIndex, 1);
-      delete this.destinationMap_[this.getKey_(provisionalDestination)];
-
-      var destination = evt.destination ?
-          print_preview.ExtensionDestinationParser.parse(evt.destination) :
-          null;
-
-      if (destination)
-        this.insertIntoStore_(destination);
+    removeProvisionalDestination_: function(provisionalId) {
+      this.destinations_ = this.destinations_.filter(
+          function(el) {
+            if (el.id == provisionalId) {
+              delete this.destinationMap_[this.getKey_(el)];
+              return false;
+            }
+            return true;
+          }, this);
+    },
 
+    /**
+     * Dispatches the PROVISIONAL_DESTINATION_RESOLVED event for id
+     * |provisionalId| and destination |destination|.
+     * @param {string} provisionalId The ID of the destination that was
+     *     resolved.
+     * @param {?print_preview.Destination} destination Information about the
+     *     destination if it was resolved successfully.
+     */
+    dispatchProvisionalDestinationResolvedEvent_: function(
+        provisionalId, destination) {
       var event = new Event(
           DestinationStore.EventType.PROVISIONAL_DESTINATION_RESOLVED);
-      event.provisionalId = evt.provisionalId;
+      event.provisionalId = provisionalId;
       event.destination = destination;
       this.dispatchEvent(event);
     },
@@ -1274,8 +1271,8 @@ cr.define('print_preview', function() {
       assert(destination.constructor !== Array, 'Single printer expected');
       destination.capabilities_ = DestinationStore.localizeCapabilities_(
           assert(destination.capabilities_));
-      destination.capabilities_ = DestinationStore.sortMediaSizes_(
-          destination.capabilities_);
+      destination.capabilities_ =
+          DestinationStore.sortMediaSizes_(destination.capabilities_);
       var existingDestination = this.destinationMap_[this.getKey_(destination)];
       if (existingDestination != null) {
         existingDestination.capabilities = destination.capabilities;
@@ -1298,7 +1295,6 @@ cr.define('print_preview', function() {
      * @private
      */
     endPrivetPrinterSearch_: function() {
-      this.nativeLayer_.stopGetPrivetDestinations();
       this.isPrivetDestinationSearchInProgress_ = false;
       this.hasLoadedAllPrivetDestinations_ = true;
       cr.dispatchSimpleEvent(
@@ -1319,8 +1315,7 @@ cr.define('print_preview', function() {
       if (this.autoSelectMatchingDestination_ &&
           this.autoSelectMatchingDestination_.matchOrigin(
               print_preview.DestinationOrigin.EXTENSION) &&
-          this.selectedDestination_ &&
-          this.selectedDestination_.isExtension) {
+          this.selectedDestination_ && this.selectedDestination_.isExtension) {
         this.selectDefaultDestination_();
       }
     },
@@ -1335,67 +1330,24 @@ cr.define('print_preview', function() {
       var key = this.getKey_(destination);
       var existingDestination = this.destinationMap_[key];
       if (existingDestination == null) {
-        destination.isRecent |= this.appState_.recentDestinations.some(
-            function(recent) {
-              return (destination.id == recent.id &&
-                      destination.origin == recent.origin);
+        destination.isRecent |=
+            this.appState_.recentDestinations.some(function(recent) {
+              return (
+                  destination.id == recent.id &&
+                  destination.origin == recent.origin);
             }, this);
         this.destinations_.push(destination);
         this.destinationMap_[key] = destination;
         return true;
-      } else if (existingDestination.connectionStatus ==
-                     print_preview.DestinationConnectionStatus.UNKNOWN &&
-                 destination.connectionStatus !=
-                     print_preview.DestinationConnectionStatus.UNKNOWN) {
+      }
+      if (existingDestination.connectionStatus ==
+              print_preview.DestinationConnectionStatus.UNKNOWN &&
+          destination.connectionStatus !=
+              print_preview.DestinationConnectionStatus.UNKNOWN) {
         existingDestination.connectionStatus = destination.connectionStatus;
         return true;
-      } else {
-        return false;
       }
-    },
-
-    /**
-     * Binds handlers to events.
-     * @private
-     */
-    addEventListeners_: function() {
-      var nativeLayerEventTarget = this.nativeLayer_.getEventTarget();
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET,
-          this.onLocalDestinationsSet_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.CAPABILITIES_SET,
-          this.onLocalDestinationCapabilitiesSet_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.GET_CAPABILITIES_FAIL,
-          this.onGetCapabilitiesFail_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.DESTINATIONS_RELOAD,
-          this.onDestinationsReload_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PRIVET_PRINTER_CHANGED,
-          this.onPrivetPrinterAdded_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PRIVET_CAPABILITIES_SET,
-          this.onPrivetCapabilitiesSet_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.EXTENSION_PRINTERS_ADDED,
-          this.onExtensionPrintersAdded_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.EXTENSION_CAPABILITIES_SET,
-          this.onExtensionCapabilitiesSet_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PROVISIONAL_DESTINATION_RESOLVED,
-          this.handleProvisionalDestinationResolved_.bind(this));
+      return false;
     },
 
     /**
@@ -1410,8 +1362,7 @@ cr.define('print_preview', function() {
             print_preview.Destination.GooglePromotedId.SAVE_AS_PDF,
             print_preview.DestinationType.LOCAL,
             print_preview.DestinationOrigin.LOCAL,
-            loadTimeData.getString('printToPDF'),
-            false /*isRecent*/,
+            loadTimeData.getString('printToPDF'), false /*isRecent*/,
             print_preview.DestinationConnectionStatus.ONLINE));
       }
     },
@@ -1437,11 +1388,12 @@ cr.define('print_preview', function() {
 
     /**
      * Called when the local destinations have been got from the native layer.
-     * @param {Event} event Contains the local destinations.
+     * @param {!Array<!print_preview.LocalDestinationInfo>} destinationInfos A
+     *     list of the local destinations retrieved.
      * @private
      */
-    onLocalDestinationsSet_: function(event) {
-      var localDestinations = event.destinationInfos.map(function(destInfo) {
+    onLocalDestinationsSet_: function(destinationInfos) {
+      var localDestinations = destinationInfos.map(function(destInfo) {
         return print_preview.LocalDestinationParser.parse(destInfo);
       });
       this.insertDestinations_(localDestinations);
@@ -1455,26 +1407,24 @@ cr.define('print_preview', function() {
      * local destination. Updates the destination with new capabilities if the
      * destination already exists, otherwise it creates a new destination and
      * then updates its capabilities.
-     * @param {Event} event Contains the capabilities of the local print
-     *     destination.
+     * @param {print_preview.PrinterCapabilitiesResponse} settingsInfo Contains
+     *     information about and capabilities of the local print destination.
      * @private
      */
-    onLocalDestinationCapabilitiesSet_: function(event) {
-      var destinationId = event.settingsInfo['printerId'];
-      var printerName = event.settingsInfo['printerName'];
-      var printerDescription = event.settingsInfo['printerDescription'];
+    onLocalDestinationCapabilitiesSet_: function(settingsInfo) {
+      var destinationId = settingsInfo['printerId'];
+      var printerName = settingsInfo['printerName'];
+      var printerDescription = settingsInfo['printerDescription'];
       // PDF is special since we don't need to query the device for
       // capabilities.
       var origin = destinationId ==
-          print_preview.Destination.GooglePromotedId.SAVE_AS_PDF ?
-          print_preview.DestinationOrigin.LOCAL : this.platformOrigin_;
-      var key = this.getDestinationKey_(
-          origin,
-          destinationId,
-          '');
+              print_preview.Destination.GooglePromotedId.SAVE_AS_PDF ?
+          print_preview.DestinationOrigin.LOCAL :
+          this.platformOrigin_;
+      var key = this.getDestinationKey_(origin, destinationId, '');
       var destination = this.destinationMap_[key];
-      var capabilities = DestinationStore.localizeCapabilities_(
-          event.settingsInfo.capabilities);
+      var capabilities =
+          DestinationStore.localizeCapabilities_(settingsInfo.capabilities);
       // Special case for PDF printer (until local printers capabilities are
       // reported in CDD format too).
       if (destinationId ==
@@ -1491,12 +1441,13 @@ cr.define('print_preview', function() {
           }
           destination.capabilities = capabilities;
         } else {
-          var isEnterprisePrinter = event.settingsInfo['cupsEnterprisePrinter'];
-          destination = print_preview.LocalDestinationParser.parse(
-              {deviceName: destinationId,
-               printerName: printerName,
-               cupsEnterprisePrinter: isEnterprisePrinter,
-               printerDescription: printerDescription});
+          var isEnterprisePrinter = settingsInfo['cupsEnterprisePrinter'];
+          destination = print_preview.LocalDestinationParser.parse({
+            deviceName: destinationId,
+            printerName: printerName,
+            cupsEnterprisePrinter: isEnterprisePrinter,
+            printerDescription: printerDescription
+          });
           destination.capabilities = capabilities;
           this.insertDestination_(destination);
         }
@@ -1513,15 +1464,17 @@ cr.define('print_preview', function() {
      * Called when a request to get a local destination's print capabilities
      * fails. If the destination is the initial destination, auto-select another
      * destination instead.
-     * @param {Event} event Contains the destination ID that failed.
+     * @param {print_preview.DestinationOrigin} origin The origin type of the
+     *     failed destination.
+     * @param {string} destinationId The destination ID that failed.
      * @private
      */
-    onGetCapabilitiesFail_: function(event) {
-      console.warn('Failed to get print capabilities for printer ' +
-                    event.destinationId);
+    onGetCapabilitiesFail_: function(origin, destinationId) {
+      console.warn(
+          'Failed to get print capabilities for printer ' + destinationId);
       if (this.autoSelectMatchingDestination_ &&
           this.autoSelectMatchingDestination_.matchIdAndOrigin(
-              event.destinationId, event.destinationOrigin)) {
+              destinationId, origin)) {
         this.selectDefaultDestination_();
       }
     },
@@ -1591,35 +1544,35 @@ cr.define('print_preview', function() {
 
     /**
      * Called when a Privet printer is added to the local network.
-     * @param {{printer: {serviceName: string,
-     *                    name: string,
-     *                    hasLocalPrinting: boolean,
-     *                    isUnregistered: boolean,
-     *                    cloudID: string}}} event Contains information about
-     *      the added printer.
+     * @param {!{serviceName: string,
+     *           name: string,
+     *           hasLocalPrinting: boolean,
+     *           isUnregistered: boolean,
+     *           cloudID: string}} printer Information about the added printer.
      * @private
      */
-    onPrivetPrinterAdded_: function(event) {
-      if (event.printer.serviceName == this.waitForRegisterDestination_ &&
-          !event.printer.isUnregistered) {
+    onPrivetPrinterAdded_: function(printer) {
+      if (printer.serviceName == this.waitForRegisterDestination_ &&
+          !printer.isUnregistered) {
         this.waitForRegisterDestination_ = null;
-        this.onDestinationsReload_();
+        this.onDestinationsReload();
       } else {
         this.insertDestinations_(
-            print_preview.PrivetDestinationParser.parse(event.printer));
+            print_preview.PrivetDestinationParser.parse(printer));
       }
     },
 
     /**
      * Called when capabilities for a privet printer are set.
-     * @param {Object} event Contains the capabilities and printer ID.
+     * @param {!print_preview.PrivetPrinterCapabilitiesResponse} printerInfo
+     *     Contains the privet printer's description and capabilities.
      * @private
      */
-    onPrivetCapabilitiesSet_: function(event) {
+    onPrivetCapabilitiesSet_: function(printerInfo) {
       var destinations =
-          print_preview.PrivetDestinationParser.parse(event.printer);
+          print_preview.PrivetDestinationParser.parse(printerInfo.printer);
       destinations.forEach(function(dest) {
-        dest.capabilities = event.capabilities;
+        dest.capabilities = printerInfo.capabilities;
         this.updateDestination_(dest);
       }, this);
     },
@@ -1627,18 +1580,26 @@ cr.define('print_preview', function() {
     /**
      * Called when an extension responds to a getExtensionDestinations
      * request.
-     * @param {Object} event Contains information about list of printers
-     *     reported by the extension.
-     *     {@code done} parameter is set iff this is the final list of printers
-     *     returned as part of getExtensionDestinations request.
+     * @param {!Array<!{extensionId: string,
+     *                  extensionName: string,
+     *                  id: string,
+     *                  name: string,
+     *                  description: (string|undefined),
+     *                  provisional: (boolean|undefined)}>} printers The list
+     *     containing information about printers added by an extension.
      * @private
      */
-    onExtensionPrintersAdded_: function(event) {
-      this.insertDestinations_(event.printers.map(function(printer) {
-        return print_preview.ExtensionDestinationParser.parse(printer);
-      }));
+    onExtensionPrintersAdded_: function(printers) {
+      this.insertDestinations_(
+          printers.map(print_preview.ExtensionDestinationParser.parse));
+    },
 
-      if (event.done && this.isExtensionDestinationSearchInProgress_) {
+    /**
+     * Called when all extensions are done adding printers.
+     * @private
+     */
+    onExtensionPrintersDone_: function() {
+      if (this.isExtensionDestinationSearchInProgress_) {
         clearTimeout(this.extensionSearchTimeout_);
         this.endExtensionPrinterSearch_();
       }
@@ -1646,27 +1607,26 @@ cr.define('print_preview', function() {
 
     /**
      * Called when capabilities for an extension managed printer are set.
-     * @param {Object} event Contains the printer's capabilities and ID.
+     * @param {string} printerId The printer Id.
+     * @param {!print_preview.Cdd} capabilities The printer's capabilities.
      * @private
      */
-    onExtensionCapabilitiesSet_: function(event) {
+    onExtensionCapabilitiesSet_: function(printerId, capabilities) {
       var destinationKey = this.getDestinationKey_(
-          print_preview.DestinationOrigin.EXTENSION,
-          event.printerId,
+          print_preview.DestinationOrigin.EXTENSION, printerId,
           '' /* account */);
       var destination = this.destinationMap_[destinationKey];
       if (!destination)
         return;
-      destination.capabilities = event.capabilities;
+      destination.capabilities = capabilities;
       this.updateDestination_(destination);
     },
 
     /**
-     * Called from native layer after the user was requested to sign in, and did
-     * so successfully.
-     * @private
+     * Called from print preview after the user was requested to sign in, and
+     * did so successfully.
      */
-    onDestinationsReload_: function() {
+    onDestinationsReload: function() {
       this.reset_();
       this.autoSelectMatchingDestination_ =
           this.convertPreselectedToDestinationMatch_();
@@ -1700,7 +1660,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    DestinationStore: DestinationStore
-  };
+  return {DestinationStore: DestinationStore};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/document_info.js b/chromium/chrome/browser/resources/print_preview/data/document_info.js
index 990ac21263e..2e286f35ead 100644
--- a/chromium/chrome/browser/resources/print_preview/data/document_info.js
+++ b/chromium/chrome/browser/resources/print_preview/data/document_info.js
@@ -59,7 +59,7 @@ cr.define('print_preview', function() {
     // page-related information won't be set until preview generation occurs,
     // so we'll use some defaults until then. This way, the print ticket store
     // will be valid even if no preview can be generated.
-    var initialPageSize = new print_preview.Size(612, 792); // 8.5"x11"
+    var initialPageSize = new print_preview.Size(612, 792);  // 8.5"x11"
 
     /**
      * Size of the pages of the document in points.
@@ -95,9 +95,7 @@ cr.define('print_preview', function() {
    * Event types dispatched by this data model.
    * @enum {string}
    */
-  DocumentInfo.EventType = {
-    CHANGE: 'print_preview.DocumentInfo.CHANGE'
-  };
+  DocumentInfo.EventType = {CHANGE: 'print_preview.DocumentInfo.CHANGE'};
 
   DocumentInfo.prototype = {
     __proto__: cr.EventTarget.prototype,
@@ -223,7 +221,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    DocumentInfo: DocumentInfo
-  };
+  return {DocumentInfo: DocumentInfo};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/invitation.js b/chromium/chrome/browser/resources/print_preview/data/invitation.js
index d62434d6517..8aef4f3b23c 100644
--- a/chromium/chrome/browser/resources/print_preview/data/invitation.js
+++ b/chromium/chrome/browser/resources/print_preview/data/invitation.js
@@ -87,7 +87,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    Invitation: Invitation
-  };
+  return {Invitation: Invitation};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/invitation_store.js b/chromium/chrome/browser/resources/print_preview/data/invitation_store.js
index 9524ca2601c..41f654fac14 100644
--- a/chromium/chrome/browser/resources/print_preview/data/invitation_store.js
+++ b/chromium/chrome/browser/resources/print_preview/data/invitation_store.js
@@ -70,8 +70,7 @@ cr.define('print_preview', function() {
    * @enum {string}
    */
   InvitationStore.EventType = {
-    INVITATION_PROCESSED:
-        'print_preview.InvitationStore.INVITATION_PROCESSED',
+    INVITATION_PROCESSED: 'print_preview.InvitationStore.INVITATION_PROCESSED',
     INVITATION_SEARCH_DONE:
         'print_preview.InvitationStore.INVITATION_SEARCH_DONE'
   };
@@ -102,6 +101,7 @@ cr.define('print_preview', function() {
      *     to set.
      */
     setCloudPrintInterface: function(cloudPrintInterface) {
+      assert(this.cloudPrintInterface_ == null);
       this.cloudPrintInterface_ = cloudPrintInterface;
       this.tracker_.add(
           this.cloudPrintInterface_,
@@ -221,7 +221,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    InvitationStore: InvitationStore
-  };
+  return {InvitationStore: InvitationStore};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/local_parsers.js b/chromium/chrome/browser/resources/print_preview/data/local_parsers.js
index 4155f5a3777..8748f37b625 100644
--- a/chromium/chrome/browser/resources/print_preview/data/local_parsers.js
+++ b/chromium/chrome/browser/resources/print_preview/data/local_parsers.js
@@ -10,35 +10,36 @@ cr.define('print_preview', function() {
 
   /**
    * Parses a local print destination.
-   * @param {!Object} destinationInfo Information describing a local print
-   *     destination.
+   * @param {!print_preview.LocalDestinationInfo} destinationInfo Information
+   *     describing a local print destination.
    * @return {!print_preview.Destination} Parsed local print destination.
    */
   LocalDestinationParser.parse = function(destinationInfo) {
-    var options = {description: destinationInfo.printerDescription,
-                   isEnterprisePrinter: destinationInfo.cupsEnterprisePrinter};
+    var options = {
+      description: destinationInfo.printerDescription,
+      isEnterprisePrinter: destinationInfo.cupsEnterprisePrinter
+    };
     if (destinationInfo.printerOptions) {
       // Convert options into cloud print tags format.
-      options.tags = Object.keys(destinationInfo.printerOptions).map(
-          function(key) {return '__cp__' + key + '=' + this[key];},
-          destinationInfo.printerOptions);
+      options.tags =
+          Object.keys(destinationInfo.printerOptions).map(function(key) {
+            return '__cp__' + key + '=' + this[key];
+          }, destinationInfo.printerOptions);
     }
     return new print_preview.Destination(
-        destinationInfo.deviceName,
-        print_preview.DestinationType.LOCAL,
+        destinationInfo.deviceName, print_preview.DestinationType.LOCAL,
         cr.isChromeOS ? print_preview.DestinationOrigin.CROS :
                         print_preview.DestinationOrigin.LOCAL,
-        destinationInfo.printerName,
-        false /*isRecent*/,
-        print_preview.DestinationConnectionStatus.ONLINE,
-        options);
+        destinationInfo.printerName, false /*isRecent*/,
+        print_preview.DestinationConnectionStatus.ONLINE, options);
   };
 
   function PrivetDestinationParser() {}
 
   /**
    * Parses a privet destination as one or more local printers.
-   * @param {!Object} destinationInfo Object that describes a privet printer.
+   * @param {!print_preview.PrivetPrinterDescription} destinationInfo Object
+   *     that describes a privet printer.
    * @return {!Array<!print_preview.Destination>} Parsed destination info.
    */
   PrivetDestinationParser.parse = function(destinationInfo) {
@@ -46,21 +47,16 @@ cr.define('print_preview', function() {
 
     if (destinationInfo.hasLocalPrinting) {
       returnedPrinters.push(new print_preview.Destination(
-          destinationInfo.serviceName,
-          print_preview.DestinationType.LOCAL,
-          print_preview.DestinationOrigin.PRIVET,
-          destinationInfo.name,
-          false /*isRecent*/,
-          print_preview.DestinationConnectionStatus.ONLINE,
+          destinationInfo.serviceName, print_preview.DestinationType.LOCAL,
+          print_preview.DestinationOrigin.PRIVET, destinationInfo.name,
+          false /*isRecent*/, print_preview.DestinationConnectionStatus.ONLINE,
           {cloudID: destinationInfo.cloudID}));
     }
 
     if (destinationInfo.isUnregistered) {
       returnedPrinters.push(new print_preview.Destination(
-          destinationInfo.serviceName,
-          print_preview.DestinationType.GOOGLE,
-          print_preview.DestinationOrigin.PRIVET,
-          destinationInfo.name,
+          destinationInfo.serviceName, print_preview.DestinationType.GOOGLE,
+          print_preview.DestinationOrigin.PRIVET, destinationInfo.name,
           false /*isRecent*/,
           print_preview.DestinationConnectionStatus.UNREGISTERED));
     }
@@ -73,26 +69,25 @@ cr.define('print_preview', function() {
   /**
    * Parses an extension destination from an extension supplied printer
    * description.
-   * @param {!Object} destinationInfo Object describing an extension printer.
+   * @param {!print_preview.ProvisionalDestinationInfo} destinationInfo Object
+   *     describing an extension printer.
    * @return {!print_preview.Destination} Parsed destination.
    */
   ExtensionDestinationParser.parse = function(destinationInfo) {
-    var provisionalType =
-        destinationInfo.provisional ?
-            print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION :
-            print_preview.DestinationProvisionalType.NONE;
+    var provisionalType = destinationInfo.provisional ?
+        print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION :
+        print_preview.DestinationProvisionalType.NONE;
 
     return new print_preview.Destination(
-        destinationInfo.id,
-        print_preview.DestinationType.LOCAL,
-        print_preview.DestinationOrigin.EXTENSION,
-        destinationInfo.name,
-        false /* isRecent */,
-        print_preview.DestinationConnectionStatus.ONLINE,
-        {description: destinationInfo.description || '',
-         extensionId: destinationInfo.extensionId,
-         extensionName: destinationInfo.extensionName || '',
-         provisionalType: provisionalType});
+        destinationInfo.id, print_preview.DestinationType.LOCAL,
+        print_preview.DestinationOrigin.EXTENSION, destinationInfo.name,
+        false /* isRecent */, print_preview.DestinationConnectionStatus.ONLINE,
+        {
+          description: destinationInfo.description || '',
+          extensionId: destinationInfo.extensionId,
+          extensionName: destinationInfo.extensionName || '',
+          provisionalType: provisionalType
+        });
   };
 
   // Export
diff --git a/chromium/chrome/browser/resources/print_preview/data/margins.js b/chromium/chrome/browser/resources/print_preview/data/margins.js
index 716ab3adab2..ba8239b9210 100644
--- a/chromium/chrome/browser/resources/print_preview/data/margins.js
+++ b/chromium/chrome/browser/resources/print_preview/data/margins.js
@@ -107,7 +107,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    Margins: Margins
-  };
+  return {Margins: Margins};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/measurement_system.js b/chromium/chrome/browser/resources/print_preview/data/measurement_system.js
index f661b0c1c48..01c6a55f4ee 100644
--- a/chromium/chrome/browser/resources/print_preview/data/measurement_system.js
+++ b/chromium/chrome/browser/resources/print_preview/data/measurement_system.js
@@ -9,8 +9,8 @@ cr.exportPath('print_preview');
  * @enum {number}
  */
 print_preview.MeasurementSystemUnitType = {
-  METRIC: 0, // millimeters
-  IMPERIAL: 1 // inches
+  METRIC: 0,   // millimeters
+  IMPERIAL: 1  // inches
 };
 
 cr.define('print_preview', function() {
@@ -54,10 +54,10 @@ cr.define('print_preview', function() {
    * @private
    */
   MeasurementSystem.Precision_ = {};
-  MeasurementSystem.Precision_[
-      print_preview.MeasurementSystemUnitType.METRIC] = 0.5;
-  MeasurementSystem.Precision_[
-      print_preview.MeasurementSystemUnitType.IMPERIAL] = 0.01;
+  MeasurementSystem.Precision_[print_preview.MeasurementSystemUnitType.METRIC] =
+      0.5;
+  MeasurementSystem
+      .Precision_[print_preview.MeasurementSystemUnitType.IMPERIAL] = 0.01;
 
   /**
    * Maximum number of decimal places to keep for local unit.
@@ -65,10 +65,10 @@ cr.define('print_preview', function() {
    * @private
    */
   MeasurementSystem.DecimalPlaces_ = {};
-  MeasurementSystem.DecimalPlaces_[
-      print_preview.MeasurementSystemUnitType.METRIC] = 1;
-  MeasurementSystem.DecimalPlaces_[
-      print_preview.MeasurementSystemUnitType.IMPERIAL] = 2;
+  MeasurementSystem
+      .DecimalPlaces_[print_preview.MeasurementSystemUnitType.METRIC] = 1;
+  MeasurementSystem
+      .DecimalPlaces_[print_preview.MeasurementSystemUnitType.IMPERIAL] = 2;
 
   /**
    * Number of points per inch.
@@ -91,12 +91,11 @@ cr.define('print_preview', function() {
     get unitSymbol() {
       if (this.unitType_ == print_preview.MeasurementSystemUnitType.METRIC) {
         return 'mm';
-      } else if (this.unitType_ ==
-                 print_preview.MeasurementSystemUnitType.IMPERIAL) {
+      }
+      if (this.unitType_ == print_preview.MeasurementSystemUnitType.IMPERIAL) {
         return '"';
-      } else {
-        throw Error('Unit type not supported: ' + this.unitType_);
       }
+      throw Error('Unit type not supported: ' + this.unitType_);
     },
 
     /**
@@ -141,9 +140,8 @@ cr.define('print_preview', function() {
     convertFromPoints: function(pts) {
       if (this.unitType_ == print_preview.MeasurementSystemUnitType.METRIC) {
         return pts / MeasurementSystem.PTS_PER_MM_;
-      } else {
-        return pts / MeasurementSystem.PTS_PER_INCH_;
       }
+      return pts / MeasurementSystem.PTS_PER_INCH_;
     },
 
     /**
@@ -153,14 +151,11 @@ cr.define('print_preview', function() {
     convertToPoints: function(localUnits) {
       if (this.unitType_ == print_preview.MeasurementSystemUnitType.METRIC) {
         return localUnits * MeasurementSystem.PTS_PER_MM_;
-      } else {
-        return localUnits * MeasurementSystem.PTS_PER_INCH_;
       }
+      return localUnits * MeasurementSystem.PTS_PER_INCH_;
     }
   };
 
   // Export
-  return {
-    MeasurementSystem: MeasurementSystem
-  };
+  return {MeasurementSystem: MeasurementSystem};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/page_number_set.js b/chromium/chrome/browser/resources/print_preview/data/page_number_set.js
index 0917f3bc47d..81fb7b66815 100644
--- a/chromium/chrome/browser/resources/print_preview/data/page_number_set.js
+++ b/chromium/chrome/browser/resources/print_preview/data/page_number_set.js
@@ -58,7 +58,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    PageNumberSet: PageNumberSet
-  };
+  return {PageNumberSet: PageNumberSet};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/print_ticket_store.js b/chromium/chrome/browser/resources/print_preview/data/print_ticket_store.js
index 0b0922aaff1..8b8f16b1ea8 100644
--- a/chromium/chrome/browser/resources/print_preview/data/print_ticket_store.js
+++ b/chromium/chrome/browser/resources/print_preview/data/print_ticket_store.js
@@ -147,11 +147,8 @@ cr.define('print_preview', function() {
      * @private
      */
     this.mediaSize_ = new print_preview.ticket_items.MediaSize(
-        this.appState_,
-        this.destinationStore_,
-        this.documentInfo_,
-        this.marginsType_,
-        this.customMargins_);
+        this.appState_, this.destinationStore_, this.documentInfo_,
+        this.marginsType_, this.customMargins_);
 
     /**
      * Landscape ticket item.
@@ -159,11 +156,8 @@ cr.define('print_preview', function() {
      * @private
      */
     this.landscape_ = new print_preview.ticket_items.Landscape(
-        this.appState_,
-        this.destinationStore_,
-        this.documentInfo_,
-        this.marginsType_,
-        this.customMargins_);
+        this.appState_, this.destinationStore_, this.documentInfo_,
+        this.marginsType_, this.customMargins_);
 
     /**
      * Header-footer ticket item.
@@ -171,12 +165,8 @@ cr.define('print_preview', function() {
      * @private
      */
     this.headerFooter_ = new print_preview.ticket_items.HeaderFooter(
-        this.appState_,
-        this.documentInfo_,
-        this.marginsType_,
-        this.customMargins_,
-        this.mediaSize_,
-        this.landscape_);
+        this.appState_, this.documentInfo_, this.marginsType_,
+        this.customMargins_, this.mediaSize_, this.landscape_);
 
     /**
      * Fit-to-page ticket item.
@@ -336,86 +326,83 @@ cr.define('print_preview', function() {
      */
     init: function(
         thousandsDelimeter, decimalDelimeter, unitType, selectionOnly) {
-      this.measurementSystem_.setSystem(thousandsDelimeter, decimalDelimeter,
-                                        unitType);
+      this.measurementSystem_.setSystem(
+          thousandsDelimeter, decimalDelimeter, unitType);
       this.selectionOnly_.updateValue(selectionOnly);
 
       // Initialize ticket with user's previous values.
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_COLOR_ENABLED)) {
+              print_preview.AppStateField.IS_COLOR_ENABLED)) {
         this.color_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_COLOR_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_COLOR_ENABLED)));
       }
       if (this.appState_.hasField(print_preview.AppStateField.DPI)) {
         this.dpi_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.DPI)));
+            /** @type {!Object} */ (
+                this.appState_.getField(print_preview.AppStateField.DPI)));
       }
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_DUPLEX_ENABLED)) {
+              print_preview.AppStateField.IS_DUPLEX_ENABLED)) {
         this.duplex_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_DUPLEX_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_DUPLEX_ENABLED)));
       }
       if (this.appState_.hasField(print_preview.AppStateField.MEDIA_SIZE)) {
         this.mediaSize_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.MEDIA_SIZE)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.MEDIA_SIZE)));
       }
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_LANDSCAPE_ENABLED)) {
+              print_preview.AppStateField.IS_LANDSCAPE_ENABLED)) {
         this.landscape_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_LANDSCAPE_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_LANDSCAPE_ENABLED)));
       }
       // Initialize margins after landscape because landscape may reset margins.
       if (this.appState_.hasField(print_preview.AppStateField.MARGINS_TYPE)) {
         this.marginsType_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.MARGINS_TYPE)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.MARGINS_TYPE)));
       }
-      if (this.appState_.hasField(
-          print_preview.AppStateField.CUSTOM_MARGINS)) {
+      if (this.appState_.hasField(print_preview.AppStateField.CUSTOM_MARGINS)) {
         this.customMargins_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.CUSTOM_MARGINS)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.CUSTOM_MARGINS)));
       }
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_HEADER_FOOTER_ENABLED)) {
+              print_preview.AppStateField.IS_HEADER_FOOTER_ENABLED)) {
         this.headerFooter_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_HEADER_FOOTER_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_HEADER_FOOTER_ENABLED)));
       }
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_COLLATE_ENABLED)) {
+              print_preview.AppStateField.IS_COLLATE_ENABLED)) {
         this.collate_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_COLLATE_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_COLLATE_ENABLED)));
       }
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_FIT_TO_PAGE_ENABLED)) {
+              print_preview.AppStateField.IS_FIT_TO_PAGE_ENABLED)) {
         this.fitToPage_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_FIT_TO_PAGE_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_FIT_TO_PAGE_ENABLED)));
       }
-      if (this.appState_.hasField(
-          print_preview.AppStateField.SCALING)) {
+      if (this.appState_.hasField(print_preview.AppStateField.SCALING)) {
         this.scaling_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.SCALING)));
+            /** @type {!Object} */ (
+                this.appState_.getField(print_preview.AppStateField.SCALING)));
       }
       if (this.appState_.hasField(
-          print_preview.AppStateField.IS_CSS_BACKGROUND_ENABLED)) {
+              print_preview.AppStateField.IS_CSS_BACKGROUND_ENABLED)) {
         this.cssBackground_.updateValue(
-            /** @type {!Object} */(this.appState_.getField(
-            print_preview.AppStateField.IS_CSS_BACKGROUND_ENABLED)));
+            /** @type {!Object} */ (this.appState_.getField(
+                print_preview.AppStateField.IS_CSS_BACKGROUND_ENABLED)));
       }
-      if (this.appState_.hasField(
-          print_preview.AppStateField.VENDOR_OPTIONS)) {
+      if (this.appState_.hasField(print_preview.AppStateField.VENDOR_OPTIONS)) {
         this.vendorItems_.updateValue(
-            /** @type {!Object<string>} */(this.appState_.getField(
-            print_preview.AppStateField.VENDOR_OPTIONS)));
+            /** @type {!Object<string>} */ (this.appState_.getField(
+                print_preview.AppStateField.VENDOR_OPTIONS)));
       }
     },
 
@@ -427,15 +414,16 @@ cr.define('print_preview', function() {
       return this.isTicketValidForPreview() &&
           (!this.copies_.isCapabilityAvailable() || this.copies_.isValid()) &&
           (!this.pageRange_.isCapabilityAvailable() ||
-              this.pageRange_.isValid());
+           this.pageRange_.isValid());
     },
 
     /** @return {boolean} Whether the ticket is valid for preview generation. */
     isTicketValidForPreview: function() {
-      return (!this.marginsType_.isCapabilityAvailable() ||
-              !this.marginsType_.isValueEqual(
-                  print_preview.ticket_items.MarginsTypeValue.CUSTOM) ||
-              this.customMargins_.isValid());
+      return (
+          !this.marginsType_.isCapabilityAvailable() ||
+          !this.marginsType_.isValueEqual(
+              print_preview.ticket_items.MarginsTypeValue.CUSTOM) ||
+          this.customMargins_.isValid());
     },
 
     /**
@@ -444,18 +432,17 @@ cr.define('print_preview', function() {
      * @return {string} Google Cloud Print print ticket.
      */
     createPrintTicket: function(destination) {
-      assert(!destination.isLocal ||
-             destination.isPrivet || destination.isExtension,
-             'Trying to create a Google Cloud Print print ticket for a local ' +
-                 ' non-privet and non-extension destination');
-
-      assert(destination.capabilities,
-             'Trying to create a Google Cloud Print print ticket for a ' +
-                 'destination with no print capabilities');
-      var cjt = {
-        version: '1.0',
-        print: {}
-      };
+      assert(
+          !destination.isLocal || destination.isPrivet ||
+              destination.isExtension,
+          'Trying to create a Google Cloud Print print ticket for a local ' +
+              ' non-privet and non-extension destination');
+
+      assert(
+          destination.capabilities,
+          'Trying to create a Google Cloud Print print ticket for a ' +
+              'destination with no print capabilities');
+      var cjt = {version: '1.0', print: {}};
       if (this.collate.isCapabilityAvailable() && this.collate.isUserEdited()) {
         cjt.print.collate = {collate: this.collate.getValue()};
       }
@@ -474,8 +461,9 @@ cr.define('print_preview', function() {
         cjt.print.copies = {copies: this.copies.getValueAsNumber()};
       }
       if (this.duplex.isCapabilityAvailable() && this.duplex.isUserEdited()) {
-        cjt.print.duplex =
-            {type: this.duplex.getValue() ? 'LONG_EDGE' : 'NO_DUPLEX'};
+        cjt.print.duplex = {
+          type: this.duplex.getValue() ? 'LONG_EDGE' : 'NO_DUPLEX'
+        };
       }
       if (this.mediaSize.isCapabilityAvailable()) {
         var value = this.mediaSize.getValue();
@@ -493,8 +481,9 @@ cr.define('print_preview', function() {
         if (this.landscape.hasOption('AUTO'))
           cjt.print.page_orientation = {type: 'AUTO'};
       } else if (this.landscape.isUserEdited()) {
-        cjt.print.page_orientation =
-            {type: this.landscape.getValue() ? 'LANDSCAPE' : 'PORTRAIT'};
+        cjt.print.page_orientation = {
+          type: this.landscape.getValue() ? 'LANDSCAPE' : 'PORTRAIT'
+        };
       }
       if (this.dpi.isCapabilityAvailable()) {
         var value = this.dpi.getValue();
@@ -530,14 +519,14 @@ cr.define('print_preview', function() {
 
       this.tracker_.add(
           this.destinationStore_,
-          print_preview.DestinationStore.EventType.
-              SELECTED_DESTINATION_CAPABILITIES_READY,
+          print_preview.DestinationStore.EventType
+              .SELECTED_DESTINATION_CAPABILITIES_READY,
           this.onSelectedDestinationCapabilitiesReady_.bind(this));
 
       this.tracker_.add(
           this.destinationStore_,
-          print_preview.DestinationStore.EventType.
-              CACHED_SELECTED_DESTINATION_INFO_READY,
+          print_preview.DestinationStore.EventType
+              .CACHED_SELECTED_DESTINATION_INFO_READY,
           this.onSelectedDestinationCapabilitiesReady_.bind(this));
 
       // TODO(rltoscano): Print ticket store shouldn't be re-dispatching these
@@ -545,8 +534,7 @@ cr.define('print_preview', function() {
       // for the events from document info instead. Will move this when
       // consumers are all migrated.
       this.tracker_.add(
-          this.documentInfo_,
-          print_preview.DocumentInfo.EventType.CHANGE,
+          this.documentInfo_, print_preview.DocumentInfo.EventType.CHANGE,
           this.onDocumentInfoChange_.bind(this));
     },
 
@@ -572,8 +560,8 @@ cr.define('print_preview', function() {
      * @private
      */
     onSelectedDestinationCapabilitiesReady_: function() {
-      var caps = assert(
-          this.destinationStore_.selectedDestination.capabilities);
+      var caps =
+          assert(this.destinationStore_.selectedDestination.capabilities);
       var isFirstUpdate = this.capabilitiesHolder_.get() == null;
       this.capabilitiesHolder_.set(caps);
       if (isFirstUpdate) {
@@ -596,7 +584,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    PrintTicketStore: PrintTicketStore
-  };
+  return {PrintTicketStore: PrintTicketStore};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/printable_area.js b/chromium/chrome/browser/resources/print_preview/data/printable_area.js
index 5ab0ab64469..ae0f076096e 100644
--- a/chromium/chrome/browser/resources/print_preview/data/printable_area.js
+++ b/chromium/chrome/browser/resources/print_preview/data/printable_area.js
@@ -51,14 +51,11 @@ cr.define('print_preview', function() {
      * @return {boolean} Whether another printable area is equal to this one.
      */
     equals: function(other) {
-      return other != null &&
-          this.origin_.equals(other.origin_) &&
+      return other != null && this.origin_.equals(other.origin_) &&
           this.size_.equals(other.size_);
     }
   };
 
   // Export
-  return {
-    PrintableArea: PrintableArea
-  };
+  return {PrintableArea: PrintableArea};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/size.js b/chromium/chrome/browser/resources/print_preview/data/size.js
index 7e617131470..078ce7d7b1e 100644
--- a/chromium/chrome/browser/resources/print_preview/data/size.js
+++ b/chromium/chrome/browser/resources/print_preview/data/size.js
@@ -43,14 +43,11 @@ cr.define('print_preview', function() {
      * @return {boolean} Whether this size object is equal to another.
      */
     equals: function(other) {
-      return other != null &&
-          this.width_ == other.width_ &&
+      return other != null && this.width_ == other.width_ &&
           this.height_ == other.height_;
     }
   };
 
   // Export
-  return {
-    Size: Size
-  };
+  return {Size: Size};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/collate.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/collate.js
index e2055ad5305..ec59d895da3 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/collate.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/collate.js
@@ -17,9 +17,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function Collate(appState, destinationStore) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_COLLATE_ENABLED,
+        this, appState, print_preview.AppStateField.IS_COLLATE_ENABLED,
         destinationStore);
   }
 
@@ -53,16 +51,12 @@ cr.define('print_preview.ticket_items', function() {
      */
     getCollateCapability_: function() {
       var dest = this.getSelectedDestInternal();
-      return (dest &&
-              dest.capabilities &&
-              dest.capabilities.printer &&
+      return (dest && dest.capabilities && dest.capabilities.printer &&
               dest.capabilities.printer.collate) ||
-             null;
+          null;
     }
   };
 
   // Export
-  return {
-    Collate: Collate
-  };
+  return {Collate: Collate};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/color.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/color.js
index ccbbcbf8d40..67d2dec3619 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/color.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/color.js
@@ -17,9 +17,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function Color(appState, destinationStore) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_COLOR_ENABLED,
+        this, appState, print_preview.AppStateField.IS_COLOR_ENABLED,
         destinationStore);
   }
 
@@ -62,11 +60,9 @@ cr.define('print_preview.ticket_items', function() {
     /** @return {Object} Color capability of the selected destination. */
     get capability() {
       var dest = this.getSelectedDestInternal();
-      return (dest &&
-              dest.capabilities &&
-              dest.capabilities.printer &&
+      return (dest && dest.capabilities && dest.capabilities.printer &&
               dest.capabilities.printer.color) ||
-             null;
+          null;
     },
 
     /** @return {Object} Color option corresponding to the current value. */
@@ -91,8 +87,8 @@ cr.define('print_preview.ticket_items', function() {
     /** @override */
     getDefaultValueInternal: function() {
       var capability = this.capability;
-      var defaultOption = capability ?
-          this.getDefaultColorOption_(capability.option) : null;
+      var defaultOption =
+          capability ? this.getDefaultColorOption_(capability.option) : null;
       return defaultOption &&
           (Color.COLOR_TYPES_.indexOf(defaultOption.type) >= 0);
     },
@@ -129,7 +125,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    Color: Color
-  };
+  return {Color: Color};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/copies.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/copies.js
index 155af719387..936342cb1d2 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/copies.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/copies.js
@@ -55,16 +55,12 @@ cr.define('print_preview.ticket_items', function() {
      */
     getCopiesCapability_: function() {
       var dest = this.getSelectedDestInternal();
-      return (dest &&
-              dest.capabilities &&
-              dest.capabilities.printer &&
+      return (dest && dest.capabilities && dest.capabilities.printer &&
               dest.capabilities.printer.copies) ||
-             null;
+          null;
     }
   };
 
   // Export
-  return {
-    Copies: Copies
-  };
+  return {Copies: Copies};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/css_background.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/css_background.js
index 03fde6c6997..ab205878a7d 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/css_background.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/css_background.js
@@ -17,11 +17,8 @@ cr.define('print_preview.ticket_items', function() {
    */
   function CssBackground(appState, documentInfo) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_CSS_BACKGROUND_ENABLED,
-        null /*destinationStore*/,
-        documentInfo);
+        this, appState, print_preview.AppStateField.IS_CSS_BACKGROUND_ENABLED,
+        null /*destinationStore*/, documentInfo);
   }
 
   CssBackground.prototype = {
@@ -49,7 +46,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    CssBackground: CssBackground
-  };
+  return {CssBackground: CssBackground};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/custom_margins.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/custom_margins.js
index dfa74230c0f..97c0ed8399b 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/custom_margins.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/custom_margins.js
@@ -33,11 +33,8 @@ cr.define('print_preview.ticket_items', function() {
    */
   function CustomMargins(appState, documentInfo) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.CUSTOM_MARGINS,
-        null /*destinationStore*/,
-        documentInfo);
+        this, appState, print_preview.AppStateField.CUSTOM_MARGINS,
+        null /*destinationStore*/, documentInfo);
   }
 
   /**
@@ -62,7 +59,7 @@ cr.define('print_preview.ticket_items', function() {
    * @const
    * @private
    */
-  CustomMargins.MINIMUM_MARGINS_DISTANCE_ = 72; // 1 inch.
+  CustomMargins.MINIMUM_MARGINS_DISTANCE_ = 72;  // 1 inch.
 
   CustomMargins.prototype = {
     __proto__: print_preview.ticket_items.TicketItem.prototype,
@@ -135,13 +132,13 @@ cr.define('print_preview.ticket_items', function() {
     /** @override */
     getDefaultValueInternal: function() {
       return this.getDocumentInfoInternal().margins ||
-             new print_preview.Margins(72, 72, 72, 72);
+          new print_preview.Margins(72, 72, 72, 72);
     },
 
     /** @override */
     getCapabilityNotAvailableValueInternal: function() {
       return this.getDocumentInfoInternal().margins ||
-             new print_preview.Margins(72, 72, 72, 72);
+          new print_preview.Margins(72, 72, 72, 72);
     },
 
     /**
@@ -158,14 +155,12 @@ cr.define('print_preview.ticket_items', function() {
           this.getDocumentInfoInternal().pageSize.height :
           this.getDocumentInfoInternal().pageSize.width;
 
-      var totalMargin = dimensionLength -
-                        CustomMargins.MINIMUM_MARGINS_DISTANCE_;
+      var totalMargin =
+          dimensionLength - CustomMargins.MINIMUM_MARGINS_DISTANCE_;
       return Math.round(totalMargin > 0 ? totalMargin - oppositeMargin : 0);
     }
   };
 
   // Export
-  return {
-    CustomMargins: CustomMargins
-  };
+  return {CustomMargins: CustomMargins};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/dpi.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/dpi.js
index 674a98ceb7c..7a514f1c9d8 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/dpi.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/dpi.js
@@ -16,10 +16,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function Dpi(appState, destinationStore) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.DPI,
-        destinationStore);
+        this, appState, print_preview.AppStateField.DPI, destinationStore);
   }
 
   Dpi.prototype = {
@@ -31,34 +28,32 @@ cr.define('print_preview.ticket_items', function() {
         return false;
       return this.capability.option.some(function(option) {
         return option.horizontal_dpi == value.horizontal_dpi &&
-               option.vertical_dpi == value.vertical_dpi &&
-               option.vendor_id == value.vendor_id;
+            option.vertical_dpi == value.vertical_dpi &&
+            option.vendor_id == value.vendor_id;
       });
     },
 
     /** @override */
     isCapabilityAvailable: function() {
-      return !!this.capability &&
-             !!this.capability.option &&
-             this.capability.option.length > 1;
+      return !!this.capability && !!this.capability.option &&
+          this.capability.option.length > 1;
     },
 
     /** @override */
     isValueEqual: function(value) {
       var myValue = this.getValue();
       return myValue.horizontal_dpi == value.horizontal_dpi &&
-             myValue.vertical_dpi == value.vertical_dpi &&
-             myValue.vendor_id == value.vendor_id;
+          myValue.vertical_dpi == value.vertical_dpi &&
+          myValue.vendor_id == value.vendor_id;
     },
 
     /** @return {Object} DPI capability of the selected destination. */
     get capability() {
       var destination = this.getSelectedDestInternal();
-      return (destination &&
-              destination.capabilities &&
+      return (destination && destination.capabilities &&
               destination.capabilities.printer &&
               destination.capabilities.printer.dpi) ||
-             null;
+          null;
     },
 
     /** @override */
@@ -76,7 +71,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    Dpi: Dpi
-  };
+  return {Dpi: Dpi};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/duplex.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/duplex.js
index 0fcf3bb3251..9930e1cac0b 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/duplex.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/duplex.js
@@ -17,9 +17,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function Duplex(appState, destinationStore) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_DUPLEX_ENABLED,
+        this, appState, print_preview.AppStateField.IS_DUPLEX_ENABLED,
         destinationStore);
   }
 
@@ -67,16 +65,12 @@ cr.define('print_preview.ticket_items', function() {
      */
     getDuplexCapability_: function() {
       var dest = this.getSelectedDestInternal();
-      return (dest &&
-              dest.capabilities &&
-              dest.capabilities.printer &&
+      return (dest && dest.capabilities && dest.capabilities.printer &&
               dest.capabilities.printer.duplex) ||
-             null;
+          null;
     }
   };
 
   // Export
-  return {
-    Duplex: Duplex
-  };
+  return {Duplex: Duplex};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/fit_to_page.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/fit_to_page.js
index 332e5850508..6dc52f782e9 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/fit_to_page.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/fit_to_page.js
@@ -18,11 +18,8 @@ cr.define('print_preview.ticket_items', function() {
    */
   function FitToPage(appState, documentInfo, destinationStore) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_FIT_TO_PAGE_ENABLED,
-        destinationStore,
-        documentInfo);
+        this, appState, print_preview.AppStateField.IS_FIT_TO_PAGE_ENABLED,
+        destinationStore, documentInfo);
   }
 
   FitToPage.prototype = {
@@ -37,8 +34,8 @@ cr.define('print_preview.ticket_items', function() {
     isCapabilityAvailable: function() {
       return !this.getDocumentInfoInternal().isModifiable &&
           (!this.getSelectedDestInternal() ||
-              this.getSelectedDestInternal().id !=
-                  print_preview.Destination.GooglePromotedId.SAVE_AS_PDF);
+           this.getSelectedDestInternal().id !=
+               print_preview.Destination.GooglePromotedId.SAVE_AS_PDF);
     },
 
     /** @override */
@@ -53,12 +50,10 @@ cr.define('print_preview.ticket_items', function() {
     getCapabilityNotAvailableValueInternal: function() {
       return !this.getSelectedDestInternal() ||
           this.getSelectedDestInternal().id !=
-              print_preview.Destination.GooglePromotedId.SAVE_AS_PDF;
+          print_preview.Destination.GooglePromotedId.SAVE_AS_PDF;
     }
   };
 
   // Export
-  return {
-    FitToPage: FitToPage
-  };
+  return {FitToPage: FitToPage};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/header_footer.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/header_footer.js
index 9cb9e9c7d6b..b144537bbd4 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/header_footer.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/header_footer.js
@@ -23,14 +23,12 @@ cr.define('print_preview.ticket_items', function() {
    * @constructor
    * @extends {print_preview.ticket_items.TicketItem}
    */
-  function HeaderFooter(appState, documentInfo, marginsType, customMargins,
-      mediaSize, landscape) {
+  function HeaderFooter(
+      appState, documentInfo, marginsType, customMargins, mediaSize,
+      landscape) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_HEADER_FOOTER_ENABLED,
-        null /*destinationStore*/,
-        documentInfo);
+        this, appState, print_preview.AppStateField.IS_HEADER_FOOTER_ENABLED,
+        null /*destinationStore*/, documentInfo);
 
     /**
      * Ticket item that stores which predefined margins to print with.
@@ -86,8 +84,8 @@ cr.define('print_preview.ticket_items', function() {
         return false;
       }
       var microns = this.landscape_.getValue() ?
-                    this.mediaSize_.getValue().width_microns :
-                    this.mediaSize_.getValue().height_microns;
+          this.mediaSize_.getValue().width_microns :
+          this.mediaSize_.getValue().height_microns;
       if (microns < HeaderFooter.MINIMUM_HEIGHT_MICRONS_) {
         // If this is a small paper size, there is not space for headers
         // and footers regardless of the margins.
@@ -108,9 +106,8 @@ cr.define('print_preview.ticket_items', function() {
         margins = this.getDocumentInfoInternal().margins;
       }
       var orientEnum = print_preview.ticket_items.CustomMarginsOrientation;
-      return margins == null ||
-             margins.get(orientEnum.TOP) > 0 ||
-             margins.get(orientEnum.BOTTOM) > 0;
+      return margins == null || margins.get(orientEnum.TOP) > 0 ||
+          margins.get(orientEnum.BOTTOM) > 0;
     },
 
     /** @override */
@@ -148,7 +145,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    HeaderFooter: HeaderFooter
-  };
+  return {HeaderFooter: HeaderFooter};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/landscape.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/landscape.js
index c7a33bd8d2c..df4dc00d0e8 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/landscape.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/landscape.js
@@ -22,14 +22,11 @@ cr.define('print_preview.ticket_items', function() {
    * @constructor
    * @extends {print_preview.ticket_items.TicketItem}
    */
-  function Landscape(appState, destinationStore, documentInfo, marginsType,
-                     customMargins) {
+  function Landscape(
+      appState, destinationStore, documentInfo, marginsType, customMargins) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.IS_LANDSCAPE_ENABLED,
-        destinationStore,
-        documentInfo);
+        this, appState, print_preview.AppStateField.IS_LANDSCAPE_ENABLED,
+        destinationStore, documentInfo);
 
     /**
      * Margins ticket item. Reset when landscape ticket item changes.
@@ -63,8 +60,7 @@ cr.define('print_preview.ticket_items', function() {
       var hasLandscapeOption = false;
       cap.option.forEach(function(option) {
         hasAutoOrPortraitOption = hasAutoOrPortraitOption ||
-            option.type == 'AUTO' ||
-            option.type == 'PORTRAIT';
+            option.type == 'AUTO' || option.type == 'PORTRAIT';
         hasLandscapeOption = hasLandscapeOption || option.type == 'LANDSCAPE';
       });
       // TODO(rltoscano): Technically, the print destination can still change
@@ -73,8 +69,7 @@ cr.define('print_preview.ticket_items', function() {
       // case so it would be a bad user experience.
       return this.getDocumentInfoInternal().isModifiable &&
           !this.getDocumentInfoInternal().hasCssMediaStyles &&
-          hasAutoOrPortraitOption &&
-          hasLandscapeOption;
+          hasAutoOrPortraitOption && hasLandscapeOption;
     },
 
     /** @override */
@@ -103,7 +98,7 @@ cr.define('print_preview.ticket_items', function() {
       if (updateMargins) {
         // Reset the user set margins when page orientation changes.
         this.marginsType_.updateValue(
-          print_preview.ticket_items.MarginsTypeValue.DEFAULT);
+            print_preview.ticket_items.MarginsTypeValue.DEFAULT);
         this.customMargins_.updateValue(null);
       }
     },
@@ -127,16 +122,12 @@ cr.define('print_preview.ticket_items', function() {
      */
     getPageOrientationCapability_: function() {
       var dest = this.getSelectedDestInternal();
-      return (dest &&
-              dest.capabilities &&
-              dest.capabilities.printer &&
+      return (dest && dest.capabilities && dest.capabilities.printer &&
               dest.capabilities.printer.page_orientation) ||
-             null;
+          null;
     }
   };
 
   // Export
-  return {
-    Landscape: Landscape
-  };
+  return {Landscape: Landscape};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/margins_type.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/margins_type.js
index 73fa0b1e1de..808e1486464 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/margins_type.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/margins_type.js
@@ -35,11 +35,8 @@ cr.define('print_preview.ticket_items', function() {
    */
   function MarginsType(appState, documentInfo, customMargins) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.MARGINS_TYPE,
-        null /*destinationStore*/,
-        documentInfo);
+        this, appState, print_preview.AppStateField.MARGINS_TYPE,
+        null /*destinationStore*/, documentInfo);
 
     /**
      * Custom margins ticket item, used to write when margins type changes.
@@ -77,7 +74,7 @@ cr.define('print_preview.ticket_items', function() {
       print_preview.ticket_items.TicketItem.prototype.updateValueInternal.call(
           this, value);
       if (this.isValueEqual(
-          print_preview.ticket_items.MarginsTypeValue.CUSTOM)) {
+              print_preview.ticket_items.MarginsTypeValue.CUSTOM)) {
         // If CUSTOM, set the value of the custom margins so that it won't be
         // overridden by the default value.
         this.customMargins_.updateValue(this.customMargins_.getValue());
@@ -86,7 +83,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    MarginsType: MarginsType
-  };
+  return {MarginsType: MarginsType};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/media_size.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/media_size.js
index 1f3176354fe..09abc7a3c91 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/media_size.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/media_size.js
@@ -23,11 +23,8 @@ cr.define('print_preview.ticket_items', function() {
   function MediaSize(
       appState, destinationStore, documentInfo, marginsType, customMargins) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.MEDIA_SIZE,
-        destinationStore,
-        documentInfo);
+        this, appState, print_preview.AppStateField.MEDIA_SIZE,
+        destinationStore, documentInfo);
 
     /**
      * Margins ticket item. Reset when this item changes.
@@ -52,9 +49,9 @@ cr.define('print_preview.ticket_items', function() {
       }
       return this.capability.option.some(function(option) {
         return option.width_microns == value.width_microns &&
-               option.height_microns == value.height_microns &&
-               option.is_continuous_feed == value.is_continuous_feed &&
-               option.vendor_id == value.vendor_id;
+            option.height_microns == value.height_microns &&
+            option.is_continuous_feed == value.is_continuous_feed &&
+            option.vendor_id == value.vendor_id;
       });
     },
 
@@ -73,19 +70,18 @@ cr.define('print_preview.ticket_items', function() {
     isValueEqual: function(value) {
       var myValue = this.getValue();
       return myValue.width_microns == value.width_microns &&
-             myValue.height_microns == value.height_microns &&
-             myValue.is_continuous_feed == value.is_continuous_feed &&
-             myValue.vendor_id == value.vendor_id;
+          myValue.height_microns == value.height_microns &&
+          myValue.is_continuous_feed == value.is_continuous_feed &&
+          myValue.vendor_id == value.vendor_id;
     },
 
     /** @return {Object} Media size capability of the selected destination. */
     get capability() {
       var destination = this.getSelectedDestInternal();
-      return (destination &&
-              destination.capabilities &&
+      return (destination && destination.capabilities &&
               destination.capabilities.printer &&
               destination.capabilities.printer.media_size) ||
-             null;
+          null;
     },
 
     /** @override */
@@ -116,7 +112,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    MediaSize: MediaSize
-  };
+  return {MediaSize: MediaSize};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/page_range.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/page_range.js
index f0120010dd3..5eb176f8bbe 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/page_range.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/page_range.js
@@ -15,10 +15,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function PageRange(documentInfo) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        null /*appState*/,
-        null /*field*/,
-        null /*destinationStore*/,
+        this, null /*appState*/, null /*field*/, null /*destinationStore*/,
         documentInfo);
   }
 
@@ -70,7 +67,7 @@ cr.define('print_preview.ticket_items', function() {
      * @private
      */
     getValueAsString_: function() {
-      return /** @type {string} */(this.getValue());
+      return /** @type {string} */ (this.getValue());
     },
 
     /**
@@ -107,13 +104,11 @@ cr.define('print_preview.ticket_items', function() {
     checkValidity: function() {
       var pageRanges = pageRangeTextToPageRanges(
           this.getValueAsString_(), this.getDocumentInfoInternal().pageCount);
-      return pageRanges instanceof Array ?
-          PageRangeStatus.NO_ERROR : pageRanges;
+      return pageRanges instanceof Array ? PageRangeStatus.NO_ERROR :
+                                           pageRanges;
     },
   };
 
   // Export
-  return {
-    PageRange: PageRange
-  };
+  return {PageRange: PageRange};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/rasterize.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/rasterize.js
index cf0ebeca612..5827ba55025 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/rasterize.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/rasterize.js
@@ -44,7 +44,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    Rasterize: Rasterize
-  };
+  return {Rasterize: Rasterize};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/scaling.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/scaling.js
index e3703d4ff22..e1099dadf36 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/scaling.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/scaling.js
@@ -19,10 +19,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function Scaling(appState, destinationStore, documentInfo) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        appState,
-        print_preview.AppStateField.SCALING,
-        destinationStore,
+        this, appState, print_preview.AppStateField.SCALING, destinationStore,
         documentInfo);
   }
 
@@ -46,9 +43,9 @@ cr.define('print_preview.ticket_items', function() {
       var knownSizeToSaveAsPdf =
           (!this.getDocumentInfoInternal().isModifiable ||
            this.getDocumentInfoInternal().hasCssMediaStyles) &&
-           this.getSelectedDestInternal() &&
-           this.getSelectedDestInternal().id ==
-               print_preview.Destination.GooglePromotedId.SAVE_AS_PDF;
+          this.getSelectedDestInternal() &&
+          this.getSelectedDestInternal().id ==
+              print_preview.Destination.GooglePromotedId.SAVE_AS_PDF;
       return !knownSizeToSaveAsPdf;
     },
 
@@ -69,7 +66,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    Scaling: Scaling
-  };
+  return {Scaling: Scaling};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/selection_only.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/selection_only.js
index 4002f681268..f6bfaf73c62 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/selection_only.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/selection_only.js
@@ -15,10 +15,7 @@ cr.define('print_preview.ticket_items', function() {
    */
   function SelectionOnly(documentInfo) {
     print_preview.ticket_items.TicketItem.call(
-        this,
-        null /*appState*/,
-        null /*field*/,
-        null /*destinationStore*/,
+        this, null /*appState*/, null /*field*/, null /*destinationStore*/,
         documentInfo);
   }
 
@@ -33,7 +30,7 @@ cr.define('print_preview.ticket_items', function() {
     /** @override */
     isCapabilityAvailable: function() {
       return this.getDocumentInfoInternal().isModifiable &&
-             this.getDocumentInfoInternal().hasSelection;
+          this.getDocumentInfoInternal().hasSelection;
     },
 
     /** @override */
@@ -48,7 +45,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    SelectionOnly: SelectionOnly
-  };
+  return {SelectionOnly: SelectionOnly};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/ticket_item.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/ticket_item.js
index f2ea4dc80a0..753c5164f2b 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/ticket_item.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/ticket_item.js
@@ -106,15 +106,13 @@ cr.define('print_preview.ticket_items', function() {
 
     /** @return {print_preview.ValueType} The value of the ticket item. */
     getValue: function() {
-      if (this.isCapabilityAvailable()) {
-        if (this.value_ == null) {
-          return this.getDefaultValueInternal();
-        } else {
-          return this.value_;
-        }
-      } else {
+      if (!this.isCapabilityAvailable()) {
         return this.getCapabilityNotAvailableValueInternal();
       }
+      if (this.value_ == null) {
+        return this.getDefaultValueInternal();
+      }
+      return this.value_;
     },
 
     /** @return {boolean} Whether the ticket item was modified by the user. */
@@ -190,7 +188,8 @@ cr.define('print_preview.ticket_items', function() {
      */
     getSelectedDestInternal: function() {
       return this.destinationStore_ ?
-          this.destinationStore_.selectedDestination : null;
+          this.destinationStore_.selectedDestination :
+          null;
     },
 
     /**
@@ -227,21 +226,18 @@ cr.define('print_preview.ticket_items', function() {
       if (this.destinationStore_) {
         this.tracker_.add(
             this.destinationStore_,
-            print_preview.DestinationStore.EventType.
-                SELECTED_DESTINATION_CAPABILITIES_READY,
+            print_preview.DestinationStore.EventType
+                .SELECTED_DESTINATION_CAPABILITIES_READY,
             this.dispatchChangeEventInternal.bind(this));
       }
       if (this.documentInfo_) {
         this.tracker_.add(
-            this.documentInfo_,
-            print_preview.DocumentInfo.EventType.CHANGE,
+            this.documentInfo_, print_preview.DocumentInfo.EventType.CHANGE,
             this.dispatchChangeEventInternal.bind(this));
       }
     },
   };
 
   // Export
-  return {
-    TicketItem: TicketItem
-  };
+  return {TicketItem: TicketItem};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/ticket_items/vendor_items.js b/chromium/chrome/browser/resources/print_preview/data/ticket_items/vendor_items.js
index ae27fbb6518..82a65d361f5 100644
--- a/chromium/chrome/browser/resources/print_preview/data/ticket_items/vendor_items.js
+++ b/chromium/chrome/browser/resources/print_preview/data/ticket_items/vendor_items.js
@@ -63,16 +63,16 @@ cr.define('print_preview.ticket_items', function() {
     /** @return {Object} Vendor capabilities of the selected destination. */
     get capability() {
       var destination = this.destinationStore_ ?
-          this.destinationStore_.selectedDestination : null;
+          this.destinationStore_.selectedDestination :
+          null;
       if (!destination)
         return null;
       if (destination.type == print_preview.DestinationType.MOBILE) {
         return null;
       }
-      return (destination.capabilities &&
-              destination.capabilities.printer &&
+      return (destination.capabilities && destination.capabilities.printer &&
               destination.capabilities.printer.vendor_capability) ||
-             null;
+          null;
     },
 
     /**
@@ -106,7 +106,5 @@ cr.define('print_preview.ticket_items', function() {
   };
 
   // Export
-  return {
-    VendorItems: VendorItems
-  };
+  return {VendorItems: VendorItems};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/data/user_info.js b/chromium/chrome/browser/resources/print_preview/data/user_info.js
index 64adba95e59..5076052302c 100644
--- a/chromium/chrome/browser/resources/print_preview/data/user_info.js
+++ b/chromium/chrome/browser/resources/print_preview/data/user_info.js
@@ -87,7 +87,5 @@ cr.define('print_preview', function() {
     },
   };
 
-  return {
-    UserInfo: UserInfo
-  };
+  return {UserInfo: UserInfo};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/metrics.js b/chromium/chrome/browser/resources/print_preview/metrics.js
index f301ef0f9c0..d9b84cbc67f 100644
--- a/chromium/chrome/browser/resources/print_preview/metrics.js
+++ b/chromium/chrome/browser/resources/print_preview/metrics.js
@@ -105,6 +105,9 @@ cr.define('print_preview', function() {
 
     /** @private {number} */
     this.maxBucket_ = maxBucket;
+
+    /** @private {!print_preview.NativeLayer} */
+    this.nativeLayer_ = print_preview.NativeLayer.getInstance();
   }
 
   MetricsContext.prototype = {
@@ -114,10 +117,10 @@ cr.define('print_preview', function() {
      * @param {number} bucket Value to record.
      */
     record: function(bucket) {
-      chrome.send('metricsHandler:recordInHistogram',
-                  [this.histogram_,
-                   ((bucket > this.maxBucket_) ? this.maxBucket_ : bucket),
-                   this.maxBucket_]);
+      this.nativeLayer_.recordInHistogram(
+          this.histogram_,
+          (bucket > this.maxBucket_) ? this.maxBucket_ : bucket,
+          this.maxBucket_);
     }
   };
 
@@ -128,8 +131,7 @@ cr.define('print_preview', function() {
    */
   function DestinationSearchMetricsContext() {
     MetricsContext.call(
-        this,
-        'PrintPreview.DestinationAction',
+        this, 'PrintPreview.DestinationAction',
         Metrics.DestinationSearchBucket.DESTINATION_SEARCH_MAX_BUCKET);
   }
 
@@ -143,14 +145,12 @@ cr.define('print_preview', function() {
    * @extends {print_preview.MetricsContext}
    */
   function GcpPromoMetricsContext() {
-    MetricsContext.call(this,
-                        'PrintPreview.GcpPromo',
-                        Metrics.GcpPromoBucket.GCP_PROMO_MAX_BUCKET);
+    MetricsContext.call(
+        this, 'PrintPreview.GcpPromo',
+        Metrics.GcpPromoBucket.GCP_PROMO_MAX_BUCKET);
   }
 
-  GcpPromoMetricsContext.prototype = {
-    __proto__: MetricsContext.prototype
-  };
+  GcpPromoMetricsContext.prototype = {__proto__: MetricsContext.prototype};
 
   /**
    * Print settings UI specific usage statistics context.
@@ -159,8 +159,7 @@ cr.define('print_preview', function() {
    */
   function PrintSettingsUiMetricsContext() {
     MetricsContext.call(
-        this,
-        'PrintPreview.PrintSettingsUi',
+        this, 'PrintPreview.PrintSettingsUi',
         Metrics.PrintSettingsUiBucket.PRINT_SETTINGS_UI_MAX_BUCKET);
   }
 
diff --git a/chromium/chrome/browser/resources/print_preview/native_layer.js b/chromium/chrome/browser/resources/print_preview/native_layer.js
index d3a12f024ad..5a863b1c0b3 100644
--- a/chromium/chrome/browser/resources/print_preview/native_layer.js
+++ b/chromium/chrome/browser/resources/print_preview/native_layer.js
@@ -17,13 +17,66 @@ print_preview.PreviewSettings;
 
 /**
  * @typedef {{
+ *   deviceName: string,
+ *   printerName: string,
+ *   printerDescription: (string | undefined),
+ *   cupsEnterprisePrinter: (boolean | undefined),
+ *   printerOptions: (Object | undefined),
+ * }}
+ */
+print_preview.LocalDestinationInfo;
+
+/**
+ * @typedef {{
+ *   printerId: string,
+ *   printerName: string,
+ *   printerDescription: string,
+ *   cupsEnterprisePrinter: (boolean | undefined),
+ *   capabilities: !print_preview.Cdd,
+ * }}
+ */
+print_preview.PrinterCapabilitiesResponse;
+
+/**
+ * @typedef {{
+ *   serviceName: string,
+ *   name: string,
+ *   hasLocalPrinting: boolean,
+ *   isUnregistered: boolean,
+ *   cloudID: string,
+ * }}
+ * @see PrintPreviewHandler::FillPrinterDescription in print_preview_handler.cc
+ */
+print_preview.PrivetPrinterDescription;
+
+/**
+ * @typedef {{
+ *   printer: !print_preview.PrivetPrinterDescription,
+ *   capabilities: !print_preview.Cdd,
+ * }}
+ */
+print_preview.PrivetPrinterCapabilitiesResponse;
+
+/**
+ * @typedef {{
  *   printerId: string,
  *   success: boolean,
  *   capabilities: Object,
  * }}
-*/
+ */
 print_preview.PrinterSetupResponse;
 
+/**
+ * @typedef {{
+ *   extensionId: string,
+ *   extensionName: string,
+ *   id: string,
+ *   name: string,
+ *   description: (string|undefined),
+ * }}
+ */
+print_preview.ProvisionalDestinationInfo;
+
 cr.define('print_preview', function() {
   'use strict';
 
@@ -32,52 +85,6 @@ cr.define('print_preview', function() {
    * @constructor
    */
   function NativeLayer() {
-    // Bind global handlers
-    global.setUseCloudPrint = this.onSetUseCloudPrint_.bind(this);
-    global.setPrinters = this.onSetPrinters_.bind(this);
-    global.updateWithPrinterCapabilities =
-        this.onUpdateWithPrinterCapabilities_.bind(this);
-    global.failedToGetPrinterCapabilities =
-        this.onFailedToGetPrinterCapabilities_.bind(this);
-    global.failedToGetPrivetPrinterCapabilities =
-      this.onFailedToGetPrivetPrinterCapabilities_.bind(this);
-    global.failedToGetExtensionPrinterCapabilities =
-        this.onFailedToGetExtensionPrinterCapabilities_.bind(this);
-    global.reloadPrintersList = this.onReloadPrintersList_.bind(this);
-    global.printToCloud = this.onPrintToCloud_.bind(this);
-    global.fileSelectionCancelled =
-        this.onFileSelectionCancelled_.bind(this);
-    global.fileSelectionCompleted =
-        this.onFileSelectionCompleted_.bind(this);
-    global.printPreviewFailed = this.onPrintPreviewFailed_.bind(this);
-    global.invalidPrinterSettings =
-        this.onInvalidPrinterSettings_.bind(this);
-    global.onDidGetDefaultPageLayout =
-        this.onDidGetDefaultPageLayout_.bind(this);
-    global.onDidGetPreviewPageCount =
-        this.onDidGetPreviewPageCount_.bind(this);
-    global.onDidPreviewPage = this.onDidPreviewPage_.bind(this);
-    global.updatePrintPreview = this.onUpdatePrintPreview_.bind(this);
-    global.onDidGetAccessToken = this.onDidGetAccessToken_.bind(this);
-    global.onPrivetPrinterChanged = this.onPrivetPrinterChanged_.bind(this);
-    global.onPrivetCapabilitiesSet =
-        this.onPrivetCapabilitiesSet_.bind(this);
-    global.onPrivetPrintFailed = this.onPrivetPrintFailed_.bind(this);
-    global.onExtensionPrintersAdded =
-        this.onExtensionPrintersAdded_.bind(this);
-    global.onExtensionCapabilitiesSet =
-        this.onExtensionCapabilitiesSet_.bind(this);
-    global.onEnableManipulateSettingsForTest =
-        this.onEnableManipulateSettingsForTest_.bind(this);
-    global.printPresetOptionsFromDocument =
-        this.onPrintPresetOptionsFromDocument_.bind(this);
-    global.onProvisionalPrinterResolved =
-        this.onProvisionalDestinationResolved_.bind(this);
-    global.failedToResolveProvisionalPrinter =
-        this.failedToResolveProvisionalDestination_.bind(this);
-
-    /** @private {!cr.EventTarget} */
-    this.eventTarget_ = new cr.EventTarget();
   }
 
   /** @private {?print_preview.NativeLayer} */
@@ -102,64 +109,17 @@ cr.define('print_preview', function() {
   };
 
   /**
-   * Event types dispatched from the Chromium native layer.
-   * @enum {string}
-   * @const
-   */
-  NativeLayer.EventType = {
-    ACCESS_TOKEN_READY: 'print_preview.NativeLayer.ACCESS_TOKEN_READY',
-    CAPABILITIES_SET: 'print_preview.NativeLayer.CAPABILITIES_SET',
-    CLOUD_PRINT_ENABLE: 'print_preview.NativeLayer.CLOUD_PRINT_ENABLE',
-    DESTINATIONS_RELOAD: 'print_preview.NativeLayer.DESTINATIONS_RELOAD',
-    DISABLE_SCALING: 'print_preview.NativeLayer.DISABLE_SCALING',
-    FILE_SELECTION_CANCEL: 'print_preview.NativeLayer.FILE_SELECTION_CANCEL',
-    FILE_SELECTION_COMPLETE:
-        'print_preview.NativeLayer.FILE_SELECTION_COMPLETE',
-    GET_CAPABILITIES_FAIL: 'print_preview.NativeLayer.GET_CAPABILITIES_FAIL',
-    LOCAL_DESTINATIONS_SET: 'print_preview.NativeLayer.LOCAL_DESTINATIONS_SET',
-    MANIPULATE_SETTINGS_FOR_TEST:
-        'print_preview.NativeLayer.MANIPULATE_SETTINGS_FOR_TEST',
-    PAGE_COUNT_READY: 'print_preview.NativeLayer.PAGE_COUNT_READY',
-    PAGE_LAYOUT_READY: 'print_preview.NativeLayer.PAGE_LAYOUT_READY',
-    PAGE_PREVIEW_READY: 'print_preview.NativeLayer.PAGE_PREVIEW_READY',
-    PREVIEW_GENERATION_DONE:
-        'print_preview.NativeLayer.PREVIEW_GENERATION_DONE',
-    PREVIEW_GENERATION_FAIL:
-        'print_preview.NativeLayer.PREVIEW_GENERATION_FAIL',
-    PRINT_TO_CLOUD: 'print_preview.NativeLayer.PRINT_TO_CLOUD',
-    SETTINGS_INVALID: 'print_preview.NativeLayer.SETTINGS_INVALID',
-    PRIVET_PRINTER_CHANGED: 'print_preview.NativeLayer.PRIVET_PRINTER_CHANGED',
-    PRIVET_CAPABILITIES_SET:
-        'print_preview.NativeLayer.PRIVET_CAPABILITIES_SET',
-    PRIVET_PRINT_FAILED: 'print_preview.NativeLayer.PRIVET_PRINT_FAILED',
-    EXTENSION_PRINTERS_ADDED:
-        'print_preview.NativeLayer.EXTENSION_PRINTERS_ADDED',
-    EXTENSION_CAPABILITIES_SET:
-        'print_preview.NativeLayer.EXTENSION_CAPABILITIES_SET',
-    PRINT_PRESET_OPTIONS: 'print_preview.NativeLayer.PRINT_PRESET_OPTIONS',
-    PROVISIONAL_DESTINATION_RESOLVED:
-        'print_preview.NativeLayer.PROVISIONAL_DESTINATION_RESOLVED'
-  };
-
-  /**
    * Constant values matching printing::DuplexMode enum.
    * @enum {number}
    */
-  NativeLayer.DuplexMode = {
-    SIMPLEX: 0,
-    LONG_EDGE: 1,
-    UNKNOWN_DUPLEX_MODE: -1
-  };
+  NativeLayer.DuplexMode = {SIMPLEX: 0, LONG_EDGE: 1, UNKNOWN_DUPLEX_MODE: -1};
 
   /**
    * Enumeration of color modes used by Chromium.
    * @enum {number}
    * @private
    */
-  NativeLayer.ColorMode_ = {
-    GRAY: 1,
-    COLOR: 2
-  };
+  NativeLayer.ColorMode_ = {GRAY: 1, COLOR: 2};
 
   /**
    * Version of the serialized state of the print preview.
@@ -170,17 +130,13 @@ cr.define('print_preview', function() {
   NativeLayer.SERIALIZED_STATE_VERSION_ = 1;
 
   NativeLayer.prototype = {
-    /** @return {!cr.EventTarget} The event target for the native layer.*/
-    getEventTarget: function() {
-      return this.eventTarget_;
-    },
-
     /**
      * Requests access token for cloud print requests.
      * @param {string} authType type of access token.
+     * @return {!Promise<string>}
      */
-    startGetAccessToken: function(authType) {
-      chrome.send('getAccessToken', [authType]);
+    getAccessToken: function(authType) {
+      return cr.sendWithPromise('getAccessToken', authType);
     },
 
     /**
@@ -188,106 +144,108 @@ cr.define('print_preview', function() {
      * @return {!Promise<!print_preview.NativeInitialSettings>}
      */
     getInitialSettings: function() {
-      return cr.sendWithPromise('getInitialSettings').then(
-          /**
-           * @param {!Object} initialSettings Object containing the raw
-           *     Print Preview settings.
-           */
-          function(initialSettings) {
-            var numberFormatSymbols =
-               print_preview.MeasurementSystem.parseNumberFormat(
-                   initialSettings['numberFormat']);
-            var unitType = print_preview.MeasurementSystemUnitType.IMPERIAL;
-            if (initialSettings['measurementSystem'] != null) {
-              unitType = initialSettings['measurementSystem'];
-            }
-            return new print_preview.NativeInitialSettings(
-                initialSettings['printAutomaticallyInKioskMode'] || false,
-                initialSettings['appKioskMode'] || false,
-                numberFormatSymbols[0] || ',',
-                numberFormatSymbols[1] || '.',
-                unitType,
-                initialSettings['previewModifiable'] || false,
-                initialSettings['initiatorTitle'] || '',
-                initialSettings['documentHasSelection'] || false,
-                initialSettings['shouldPrintSelectionOnly'] || false,
-                initialSettings['printerName'] || null,
-                initialSettings['appState'] || null,
-                initialSettings['defaultDestinationSelectionRules'] || null);
-          });
+      return cr.sendWithPromise('getInitialSettings')
+          .then(
+              /**
+               * @param {!Object} initialSettings Object containing the raw
+               *     Print Preview settings.
+               */
+              function(initialSettings) {
+                var numberFormatSymbols =
+                    print_preview.MeasurementSystem.parseNumberFormat(
+                        initialSettings['numberFormat']);
+                var unitType = print_preview.MeasurementSystemUnitType.IMPERIAL;
+                if (initialSettings['measurementSystem'] != null) {
+                  unitType = initialSettings['measurementSystem'];
+                }
+                return new print_preview.NativeInitialSettings(
+                    initialSettings['printAutomaticallyInKioskMode'] || false,
+                    initialSettings['appKioskMode'] || false,
+                    numberFormatSymbols[0] || ',',
+                    numberFormatSymbols[1] || '.', unitType,
+                    initialSettings['previewModifiable'] || false,
+                    initialSettings['initiatorTitle'] || '',
+                    initialSettings['documentHasSelection'] || false,
+                    initialSettings['shouldPrintSelectionOnly'] || false,
+                    initialSettings['printerName'] || null,
+                    initialSettings['appState'] || null,
+                    initialSettings['defaultDestinationSelectionRules'] ||
+                        null);
+              });
     },
 
     /**
-     * Requests the system's local print destinations. A LOCAL_DESTINATIONS_SET
-     * event will be dispatched in response.
+     * Requests the system's local print destinations. The promise will be
+     * resolved with a list of the local destinations.
+     * @return {!Promise<!Array<print_preview.LocalDestinationInfo>>}
      */
-    startGetLocalDestinations: function() {
-      chrome.send('getPrinters');
+    getPrinters: function() {
+      return cr.sendWithPromise('getPrinters');
     },
 
     /**
-     * Requests the network's privet print destinations. A number of
-     * PRIVET_PRINTER_CHANGED events will be fired in response, followed by a
-     * PRIVET_SEARCH_ENDED.
+     * Requests the network's privet print destinations. After this is called,
+     * a number of privet-printer-changed events may be fired.
+     * @return {!Promise} Resolves when privet printer search is completed.
+     *     Rejected if privet printers are not enabled.
      */
-    startGetPrivetDestinations: function() {
-      chrome.send('getPrivetPrinters');
+    getPrivetPrinters: function() {
+      return cr.sendWithPromise('getPrivetPrinters');
     },
 
     /**
-     * Requests that the privet print stack stop searching for privet print
-     * destinations.
+     * Request a list of extension printers. Printers are reported as they are
+     * found by a series of 'extension-printers-added' events.
+     * @return {!Promise} Will be resolved when all extension managed printers
+     *     have been sent.
      */
-    stopGetPrivetDestinations: function() {
-      chrome.send('stopGetPrivetPrinters');
+    getExtensionPrinters: function() {
+      return cr.sendWithPromise('getExtensionPrinters');
     },
 
     /**
-     * Requests the privet destination's printing capabilities. A
-     * PRIVET_CAPABILITIES_SET event will be dispatched in response.
+     * Requests the destination's printing capabilities. Returns a promise that
+     * will be resolved with the capabilities if they are obtained successfully.
      * @param {string} destinationId ID of the destination.
+     * @return {!Promise<!print_preview.PrinterCapabilitiesResponse>}
      */
-    startGetPrivetDestinationCapabilities: function(destinationId) {
-      chrome.send('getPrivetPrinterCapabilities', [destinationId]);
+    getPrinterCapabilities: function(destinationId) {
+      return cr.sendWithPromise('getPrinterCapabilities', destinationId);
     },
 
     /**
-     * Requests that extension system dispatches an event requesting the list of
-     * extension managed printers.
+     * Requests the privet destination's printing capabilities. Returns a
+     * promise that will be resolved with capabilities and printer information
+     * if capabilities are obtained successfully.
+     * @param {string} destinationId ID of the destination.
+     * @return {!Promise<!print_preview.PrivetPrinterCapabilitiesResponse>}
      */
-    startGetExtensionDestinations: function() {
-      chrome.send('getExtensionPrinters');
+    getPrivetPrinterCapabilities: function(destinationId) {
+      return cr.sendWithPromise('getPrivetPrinterCapabilities', destinationId);
     },
 
     /**
-     * Requests an extension destination's printing capabilities. A
-     * EXTENSION_CAPABILITIES_SET event will be dispatched in response.
+     * Requests the extension destination's printing capabilities. Returns a
+     * promise that will be resolved with the ID and capabilities if
+     * capabilities are obtained successfully.
      * @param {string} destinationId The ID of the destination whose
      *     capabilities are requested.
+     * @return {!Promise<!print_preview.Cdd>}
      */
-    startGetExtensionDestinationCapabilities: function(destinationId) {
-      chrome.send('getExtensionPrinterCapabilities', [destinationId]);
-    },
-
-    /**
-     * Requests the destination's printing capabilities. A CAPABILITIES_SET
-     * event will be dispatched in response.
-     * @param {string} destinationId ID of the destination.
-     */
-    startGetLocalDestinationCapabilities: function(destinationId) {
-      chrome.send('getPrinterCapabilities', [destinationId]);
+    getExtensionPrinterCapabilities: function(destinationId) {
+      return cr.sendWithPromise(
+          'getExtensionPrinterCapabilities', destinationId);
     },
 
     /**
      * Requests Chrome to resolve provisional extension destination by granting
-     * the provider extension access to the printer. Chrome will respond with
-     * the resolved destination properties by calling
-     * {@code onProvisionalPrinterResolved}, or in case of an error
-     * {@code failedToResolveProvisionalPrinter}
+     * the provider extension access to the printer.
      * @param {string} provisionalDestinationId
+     * @return {!Promise<!print_preview.ProvisionalDestinationInfo>}
      */
     grantExtensionPrinterAccess: function(provisionalDestinationId) {
-      chrome.send('grantExtensionPrinterAccess', [provisionalDestinationId]);
+      return cr.sendWithPromise('grantExtensionPrinterAccess',
+                                provisionalDestinationId);
     },
 
     /**
@@ -310,31 +268,33 @@ cr.define('print_preview', function() {
       var option = destination.isLocal ? color.getSelectedOption() : null;
       var nativeColorModel = parseInt(option ? option.vendor_id : null, 10);
       if (isNaN(nativeColorModel)) {
-        return color.getValue() ?
-            NativeLayer.ColorMode_.COLOR : NativeLayer.ColorMode_.GRAY;
+        return color.getValue() ? NativeLayer.ColorMode_.COLOR :
+                                  NativeLayer.ColorMode_.GRAY;
       }
       return nativeColorModel;
     },
 
     /**
-     * Requests that a preview be generated. The following events may be
-     * dispatched in response:
-     *   - PAGE_COUNT_READY
-     *   - PAGE_LAYOUT_READY
-     *   - PAGE_PREVIEW_READY
-     *   - PREVIEW_GENERATION_DONE
-     *   - PREVIEW_GENERATION_FAIL
+     * Requests that a preview be generated. The following Web UI events may
+     * be triggered in response:
+     *   'print-preset-options',
+     *   'page-count-ready',
+     *   'page-layout-ready',
+     *   'page-preview-ready'
      * @param {!print_preview.Destination} destination Destination to print to.
      * @param {!print_preview.PrintTicketStore} printTicketStore Used to get the
      *     state of the print ticket.
      * @param {!print_preview.DocumentInfo} documentInfo Document data model.
      * @param {boolean} generateDraft Tell the renderer to re-render.
      * @param {number} requestId ID of the preview request.
+     * @return {!Promise<number>} Promise that resolves with the unique ID of
+     *     the preview UI when the preview has been generated.
      */
-    startGetPreview: function(
+    getPreview: function(
         destination, printTicketStore, documentInfo, generateDraft, requestId) {
-      assert(printTicketStore.isTicketValidForPreview(),
-             'Trying to generate preview when ticket is not valid');
+      assert(
+          printTicketStore.isTicketValidForPreview(),
+          'Trying to generate preview when ticket is not valid');
 
       var ticket = {
         'pageRange': printTicketStore.pageRange.getDocumentPageRanges(),
@@ -356,13 +316,16 @@ cr.define('print_preview', function() {
         'copies': 1,
         'deviceName': destination.id,
         'dpiHorizontal': 'horizontal_dpi' in printTicketStore.dpi.getValue() ?
-           printTicketStore.dpi.getValue().horizontal_dpi : 0,
+            printTicketStore.dpi.getValue().horizontal_dpi :
+            0,
         'dpiVertical': 'vertical_dpi' in printTicketStore.dpi.getValue() ?
-           printTicketStore.dpi.getValue().vertical_dpi : 0,
+            printTicketStore.dpi.getValue().vertical_dpi :
+            0,
         'duplex': printTicketStore.duplex.getValue() ?
-            NativeLayer.DuplexMode.LONG_EDGE : NativeLayer.DuplexMode.SIMPLEX,
+            NativeLayer.DuplexMode.LONG_EDGE :
+            NativeLayer.DuplexMode.SIMPLEX,
         'printToPDF': destination.id ==
-                print_preview.Destination.GooglePromotedId.SAVE_AS_PDF,
+            print_preview.Destination.GooglePromotedId.SAVE_AS_PDF,
         'printWithCloudPrint': !destination.isLocal,
         'printWithPrivet': destination.isPrivet,
         'printWithExtension': destination.isExtension,
@@ -390,10 +353,9 @@ cr.define('print_preview', function() {
         };
       }
 
-      chrome.send(
-          'getPreview',
-          [JSON.stringify(ticket),
-           requestId > 0 ? documentInfo.pageCount : -1]);
+      return cr.sendWithPromise(
+          'getPreview', JSON.stringify(ticket),
+          requestId > 0 ? documentInfo.pageCount : -1);
     },
 
     /**
@@ -408,15 +370,19 @@ cr.define('print_preview', function() {
      *     system's preview application.
      * @param {boolean=} opt_showSystemDialog Whether to open system dialog for
      *     advanced settings.
+     * @return {!Promise} Promise that will resolve when the print request is
+     *     finished or rejected.
      */
-    startPrint: function(destination, printTicketStore, cloudPrintInterface,
-                         documentInfo, opt_isOpenPdfInPreview,
-                         opt_showSystemDialog) {
-      assert(printTicketStore.isTicketValid(),
-             'Trying to print when ticket is not valid');
+    print: function(
+        destination, printTicketStore, cloudPrintInterface, documentInfo,
+        opt_isOpenPdfInPreview, opt_showSystemDialog) {
+      assert(
+          printTicketStore.isTicketValid(),
+          'Trying to print when ticket is not valid');
 
-      assert(!opt_showSystemDialog || (cr.isWindows && destination.isLocal),
-             'Implemented for Windows only');
+      assert(
+          !opt_showSystemDialog || (cr.isWindows && destination.isLocal),
+          'Implemented for Windows only');
 
       var ticket = {
         'mediaSize': printTicketStore.mediaSize.getValue(),
@@ -426,7 +392,8 @@ cr.define('print_preview', function() {
         'headerFooterEnabled': false,  // Only used in print preview
         'marginsType': printTicketStore.marginsType.getValue(),
         'duplex': printTicketStore.duplex.getValue() ?
-            NativeLayer.DuplexMode.LONG_EDGE : NativeLayer.DuplexMode.SIMPLEX,
+            NativeLayer.DuplexMode.LONG_EDGE :
+            NativeLayer.DuplexMode.SIMPLEX,
         'copies': printTicketStore.copies.getValueAsNumber(),
         'collate': printTicketStore.collate.getValue(),
         'shouldPrintBackgrounds': printTicketStore.cssBackground.getValue(),
@@ -440,9 +407,11 @@ cr.define('print_preview', function() {
         'rasterizePDF': printTicketStore.rasterize.getValue(),
         'scaleFactor': printTicketStore.scaling.getValueAsNumber(),
         'dpiHorizontal': 'horizontal_dpi' in printTicketStore.dpi.getValue() ?
-           printTicketStore.dpi.getValue().horizontal_dpi : 0,
+            printTicketStore.dpi.getValue().horizontal_dpi :
+            0,
         'dpiVertical': 'vertical_dpi' in printTicketStore.dpi.getValue() ?
-           printTicketStore.dpi.getValue().vertical_dpi : 0,
+            printTicketStore.dpi.getValue().vertical_dpi :
+            0,
         'deviceName': destination.id,
         'fitToPageEnabled': printTicketStore.fitToPage.getValue(),
         'pageWidth': documentInfo.pageSize.width,
@@ -480,28 +449,43 @@ cr.define('print_preview', function() {
         ticket['OpenPDFInPreview'] = true;
       }
 
-      chrome.send('print', [JSON.stringify(ticket)]);
+      return cr.sendWithPromise('print', JSON.stringify(ticket));
     },
 
     /** Requests that the current pending print request be cancelled. */
-    startCancelPendingPrint: function() {
+    cancelPendingPrintRequest: function() {
       chrome.send('cancelPendingPrintRequest');
     },
 
+    /**
+     * Sends the app state to be saved in the sticky settings.
+     * @param {string} appStateStr JSON string of the app state to persist
+     */
+    saveAppState: function(appStateStr) {
+      chrome.send('saveAppState', [appStateStr]);
+    },
+
     /** Shows the system's native printing dialog. */
-    startShowSystemDialog: function() {
+    showSystemDialog: function() {
       assert(!cr.isWindows);
       chrome.send('showSystemDialog');
     },
 
-    /** Closes the print preview dialog. */
-    startCloseDialog: function() {
-      chrome.send('closePrintPreviewDialog');
+    /**
+     * Closes the print preview dialog.
+     * If |isCancel| is true, also sends a message to Print Preview Handler in
+     * order to update UMA statistics.
+     * @param {boolean} isCancel whether this was called due to the user
+     *     closing the dialog without printing.
+     */
+    dialogClose: function(isCancel) {
+      if (isCancel)
+        chrome.send('closePrintPreviewDialog');
       chrome.send('dialogClose');
     },
 
     /** Hide the print preview dialog and allow the native layer to close it. */
-    startHideDialog: function() {
+    hidePreview: function() {
       chrome.send('hidePreview');
     },
 
@@ -510,13 +494,15 @@ cr.define('print_preview', function() {
      *     will be dispatched in response.
      * @param {boolean} addAccount Whether to open an 'add a new account' or
      *     default sign in page.
+     * @return {!Promise} Promise that resolves when the sign in tab has been
+     *     closed and the destinations should be reloaded.
      */
-    startCloudPrintSignIn: function(addAccount) {
-      chrome.send('signIn', [addAccount]);
+    signIn: function(addAccount) {
+      return cr.sendWithPromise('signIn', addAccount);
     },
 
     /** Navigates the user to the system printer settings interface. */
-    startManageLocalDestinations: function() {
+    manageLocalPrinters: function() {
       chrome.send('manageLocalPrinters');
     },
 
@@ -526,413 +512,50 @@ cr.define('print_preview', function() {
      *     page for (user must be currently logged in, indeed) or {@code null}
      *     to open this page for the primary user.
      */
-    startManageCloudDestinations: function(user) {
+    manageCloudPrinters: function(user) {
       chrome.send('manageCloudPrinters', [user || '']);
     },
 
     /** Forces browser to open a new tab with the given URL address. */
-    startForceOpenNewTab: function(url) {
+    forceOpenNewTab: function(url) {
       chrome.send('forceOpenNewTab', [url]);
     },
 
     /**
-     * Turn on the integration of Cloud Print.
-     * @param {{cloudPrintURL: string, appKioskMode: string}} settings
-     *     cloudPrintUrl: The URL to use for cloud print servers.
-     * @private
-     */
-    onSetUseCloudPrint_: function(settings) {
-      var cloudPrintEnableEvent = new Event(
-          NativeLayer.EventType.CLOUD_PRINT_ENABLE);
-      cloudPrintEnableEvent.baseCloudPrintUrl = settings['cloudPrintUrl'] || '';
-      cloudPrintEnableEvent.appKioskMode = settings['appKioskMode'] || false;
-      this.eventTarget_.dispatchEvent(cloudPrintEnableEvent);
-    },
-
-    /**
-     * Updates the print preview with local printers.
-     * Called from PrintPreviewHandler::SetupPrinterList().
-     * @param {Array} printers Array of printer info objects.
-     * @private
-     */
-    onSetPrinters_: function(printers) {
-      var localDestsSetEvent = new Event(
-          NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-      localDestsSetEvent.destinationInfos = printers;
-      this.eventTarget_.dispatchEvent(localDestsSetEvent);
-    },
-
-    /**
-     * Called when native layer gets settings information for a requested local
-     * destination.
-     * @param {Object} settingsInfo printer setting information.
-     * @private
-     */
-    onUpdateWithPrinterCapabilities_: function(settingsInfo) {
-      assert(settingsInfo.capabilities,
-          'Capabilities update without capabilites');
-      var capsSetEvent = new Event(NativeLayer.EventType.CAPABILITIES_SET);
-      capsSetEvent.settingsInfo = settingsInfo;
-      this.eventTarget_.dispatchEvent(capsSetEvent);
-    },
-
-    /**
-     * Called when native layer gets settings information for a requested local
-     * destination.
-     * @param {string} destinationId Printer affected by error.
-     * @private
-     */
-    onFailedToGetPrinterCapabilities_: function(destinationId) {
-      var getCapsFailEvent = new Event(
-          NativeLayer.EventType.GET_CAPABILITIES_FAIL);
-      getCapsFailEvent.destinationId = destinationId;
-      getCapsFailEvent.destinationOrigin =
-          print_preview.DestinationOrigin.LOCAL;
-      this.eventTarget_.dispatchEvent(getCapsFailEvent);
-    },
-
-    /**
-     * Called when native layer gets settings information for a requested privet
-     * destination.
-     * @param {string} destinationId Printer affected by error.
-     * @private
-     */
-    onFailedToGetPrivetPrinterCapabilities_: function(destinationId) {
-      var getCapsFailEvent = new Event(
-          NativeLayer.EventType.GET_CAPABILITIES_FAIL);
-      getCapsFailEvent.destinationId = destinationId;
-      getCapsFailEvent.destinationOrigin =
-          print_preview.DestinationOrigin.PRIVET;
-      this.eventTarget_.dispatchEvent(getCapsFailEvent);
-    },
-
-    /**
-     * Called when native layer fails to get settings information for a
-     * requested extension destination.
-     * @param {string} destinationId Printer affected by error.
-     * @private
-     */
-    onFailedToGetExtensionPrinterCapabilities_: function(destinationId) {
-      var getCapsFailEvent = new Event(
-          NativeLayer.EventType.GET_CAPABILITIES_FAIL);
-      getCapsFailEvent.destinationId = destinationId;
-      getCapsFailEvent.destinationOrigin =
-          print_preview.DestinationOrigin.EXTENSION;
-      this.eventTarget_.dispatchEvent(getCapsFailEvent);
-    },
-
-    /** Reloads the printer list. */
-    onReloadPrintersList_: function() {
-      cr.dispatchSimpleEvent(this.eventTarget_,
-                             NativeLayer.EventType.DESTINATIONS_RELOAD);
-    },
-
-    /**
-     * Called from the C++ layer.
-     * Take the PDF data handed to us and submit it to the cloud, closing the
-     * print preview dialog once the upload is successful.
-     * @param {string} data Data to send as the print job.
-     * @private
-     */
-    onPrintToCloud_: function(data) {
-      var printToCloudEvent = new Event(
-          NativeLayer.EventType.PRINT_TO_CLOUD);
-      printToCloudEvent.data = data;
-      this.eventTarget_.dispatchEvent(printToCloudEvent);
-    },
-
-    /**
-     * Called from PrintPreviewUI::OnFileSelectionCancelled to notify the print
-     * preview dialog regarding the file selection cancel event.
-     * @private
-     */
-    onFileSelectionCancelled_: function() {
-      cr.dispatchSimpleEvent(
-          this.eventTarget_, NativeLayer.EventType.FILE_SELECTION_CANCEL);
-    },
-
-    /**
-     * Called from PrintPreviewUI::OnFileSelectionCompleted to notify the print
-     * preview dialog regarding the file selection completed event.
-     * @private
-     */
-    onFileSelectionCompleted_: function() {
-      // If the file selection is completed and the dialog is not already closed
-      // it means that a pending print to pdf request exists.
-      cr.dispatchSimpleEvent(
-          this.eventTarget_, NativeLayer.EventType.FILE_SELECTION_COMPLETE);
-    },
-
-    /**
-     * Display an error message when print preview fails.
-     * Called from PrintPreviewMessageHandler::OnPrintPreviewFailed().
-     * @private
-     */
-    onPrintPreviewFailed_: function() {
-      cr.dispatchSimpleEvent(
-          this.eventTarget_, NativeLayer.EventType.PREVIEW_GENERATION_FAIL);
-    },
-
-    /**
-     * Display an error message when encountered invalid printer settings.
-     * Called from PrintPreviewMessageHandler::OnInvalidPrinterSettings().
-     * @private
-     */
-    onInvalidPrinterSettings_: function() {
-      cr.dispatchSimpleEvent(this.eventTarget_,
-                             NativeLayer.EventType.SETTINGS_INVALID);
-    },
-
-    /**
-     * @param {{contentWidth: number, contentHeight: number, marginLeft: number,
-     *          marginRight: number, marginTop: number, marginBottom: number,
-     *          printableAreaX: number, printableAreaY: number,
-     *          printableAreaWidth: number, printableAreaHeight: number}}
-     *          pageLayout Specifies default page layout details in points.
-     * @param {boolean} hasCustomPageSizeStyle Indicates whether the previewed
-     *     document has a custom page size style.
-     * @private
-     */
-    onDidGetDefaultPageLayout_: function(pageLayout, hasCustomPageSizeStyle) {
-      var pageLayoutChangeEvent = new Event(
-          NativeLayer.EventType.PAGE_LAYOUT_READY);
-      pageLayoutChangeEvent.pageLayout = pageLayout;
-      pageLayoutChangeEvent.hasCustomPageSizeStyle = hasCustomPageSizeStyle;
-      this.eventTarget_.dispatchEvent(pageLayoutChangeEvent);
-    },
-
-    /**
-     * Update the page count and check the page range.
-     * Called from PrintPreviewUI::OnDidGetPreviewPageCount().
-     * @param {number} pageCount The number of pages.
-     * @param {number} previewResponseId The preview request id that resulted in
-     *      this response.
-     * @param {number} fitToPageScaling The scaling percentage required to fit
-     *      the document to page, rounded to the nearest integer.
-     * @private
-     */
-    onDidGetPreviewPageCount_: function(pageCount, previewResponseId,
-                                        fitToPageScaling) {
-      var pageCountChangeEvent = new Event(
-          NativeLayer.EventType.PAGE_COUNT_READY);
-      pageCountChangeEvent.pageCount = pageCount;
-      pageCountChangeEvent.previewResponseId = previewResponseId;
-      pageCountChangeEvent.fitToPageScaling = fitToPageScaling;
-      this.eventTarget_.dispatchEvent(pageCountChangeEvent);
-    },
-
-    /**
-     * Notification that a print preview page has been rendered.
-     * Check if the settings have changed and request a regeneration if needed.
-     * Called from PrintPreviewUI::OnDidPreviewPage().
-     * @param {number} pageNumber The page number, 0-based.
-     * @param {number} previewUid Preview unique identifier.
-     * @param {number} previewResponseId The preview request id that resulted in
-     *     this response.
-     * @private
-     */
-    onDidPreviewPage_: function(pageNumber, previewUid, previewResponseId) {
-      var pagePreviewGenEvent = new Event(
-          NativeLayer.EventType.PAGE_PREVIEW_READY);
-      pagePreviewGenEvent.pageIndex = pageNumber;
-      pagePreviewGenEvent.previewUid = previewUid;
-      pagePreviewGenEvent.previewResponseId = previewResponseId;
-      this.eventTarget_.dispatchEvent(pagePreviewGenEvent);
-    },
-
-    /**
-     * Notification that access token is ready.
-     * @param {string} authType Type of access token.
-     * @param {string} accessToken Access token.
-     * @private
-     */
-    onDidGetAccessToken_: function(authType, accessToken) {
-      var getAccessTokenEvent = new Event(
-          NativeLayer.EventType.ACCESS_TOKEN_READY);
-      getAccessTokenEvent.authType = authType;
-      getAccessTokenEvent.accessToken = accessToken;
-      this.eventTarget_.dispatchEvent(getAccessTokenEvent);
-    },
-
-    /**
-     * Update the print preview when new preview data is available.
-     * Create the PDF plugin as needed.
-     * Called from PrintPreviewUI::PreviewDataIsAvailable().
-     * @param {number} previewUid Preview unique identifier.
-     * @param {number} previewResponseId The preview request id that resulted in
-     *     this response.
-     * @private
-     */
-    onUpdatePrintPreview_: function(previewUid, previewResponseId) {
-      var previewGenDoneEvent = new Event(
-          NativeLayer.EventType.PREVIEW_GENERATION_DONE);
-      previewGenDoneEvent.previewUid = previewUid;
-      previewGenDoneEvent.previewResponseId = previewResponseId;
-      this.eventTarget_.dispatchEvent(previewGenDoneEvent);
-    },
-
-    /**
-     * Updates print preset options from source PDF document.
-     * Called from PrintPreviewUI::OnSetOptionsFromDocument().
-     * @param {{disableScaling: boolean, copies: number,
-     *          duplex: number}} options Specifies
-     *     printing options according to source document presets.
-     * @private
-     */
-    onPrintPresetOptionsFromDocument_: function(options) {
-      var printPresetOptionsEvent = new Event(
-          NativeLayer.EventType.PRINT_PRESET_OPTIONS);
-      printPresetOptionsEvent.optionsFromDocument = options;
-      this.eventTarget_.dispatchEvent(printPresetOptionsEvent);
-    },
-
-    /**
-     * @param {{serviceName: string, name: string}} printer Specifies
-     *     information about the printer that was added.
-     * @private
-     */
-    onPrivetPrinterChanged_: function(printer) {
-      var privetPrinterChangedEvent =
-            new Event(NativeLayer.EventType.PRIVET_PRINTER_CHANGED);
-      privetPrinterChangedEvent.printer = printer;
-      this.eventTarget_.dispatchEvent(privetPrinterChangedEvent);
-    },
-
-    /**
-     * @param {Object} printer Specifies information about the printer that was
-     *    added.
-     * @private
-     */
-    onPrivetCapabilitiesSet_: function(printer, capabilities) {
-      var privetCapabilitiesSetEvent =
-            new Event(NativeLayer.EventType.PRIVET_CAPABILITIES_SET);
-      privetCapabilitiesSetEvent.printer = printer;
-      privetCapabilitiesSetEvent.capabilities = capabilities;
-      this.eventTarget_.dispatchEvent(privetCapabilitiesSetEvent);
-    },
-
-    /**
-     * @param {string} http_error The HTTP response code or -1 if not an HTTP
-     *    error.
-     * @private
-     */
-    onPrivetPrintFailed_: function(http_error) {
-      var privetPrintFailedEvent =
-            new Event(NativeLayer.EventType.PRIVET_PRINT_FAILED);
-      privetPrintFailedEvent.httpError = http_error;
-      this.eventTarget_.dispatchEvent(privetPrintFailedEvent);
-    },
-
-    /**
-     * @param {Array<!{extensionId: string,
-     *                 extensionName: string,
-     *                 id: string,
-     *                 name: string,
-     *                 description: (string|undefined),
-     *                 provisional: (boolean|undefined)}>} printers The list
-     *     containing information about printers added by an extension.
-     * @param {boolean} done Whether this is the final list of extension
-     *     managed printers.
-     */
-    onExtensionPrintersAdded_: function(printers, done) {
-      var event = new Event(NativeLayer.EventType.EXTENSION_PRINTERS_ADDED);
-      event.printers = printers;
-      event.done = done;
-      this.eventTarget_.dispatchEvent(event);
-    },
-
-    /**
-     * Called when an extension responds to a request for an extension printer
-     * capabilities.
-     * @param {string} printerId The printer's ID.
-     * @param {!Object} capabilities The reported printer capabilities.
-     */
-    onExtensionCapabilitiesSet_: function(printerId,
-                                          capabilities) {
-      var event = new Event(NativeLayer.EventType.EXTENSION_CAPABILITIES_SET);
-      event.printerId = printerId;
-      event.capabilities = capabilities;
-      this.eventTarget_.dispatchEvent(event);
-    },
-
-    /**
-     * Called when Chrome reports that attempt to resolve a provisional
-     * destination failed.
-     * @param {string} destinationId The provisional destination ID.
-     * @private
+     * Sends a message to the test, letting it know that an
+     * option has been set to a particular value and that the change has
+     * finished modifying the preview area.
      */
-    failedToResolveProvisionalDestination_: function(destinationId) {
-      var evt = new Event(
-          NativeLayer.EventType.PROVISIONAL_DESTINATION_RESOLVED);
-      evt.provisionalId = destinationId;
-      evt.destination = null;
-      this.eventTarget_.dispatchEvent(evt);
+    uiLoadedForTest: function() {
+      chrome.send('UILoadedForTest');
     },
 
     /**
-     * Called when Chrome reports that a provisional destination has been
-     * successfully resolved.
-     * Currently used only for extension provided destinations.
-     * @param {string} provisionalDestinationId The provisional destination id.
-     * @param {!{extensionId: string,
-     *           extensionName: string,
-     *           id: string,
-     *           name: string,
-     *           description: (string|undefined)}} destinationInfo The resolved
-     *     destination info.
-     * @private
-     */
-    onProvisionalDestinationResolved_: function(provisionalDestinationId,
-                                                destinationInfo) {
-      var evt = new Event(
-          NativeLayer.EventType.PROVISIONAL_DESTINATION_RESOLVED);
-      evt.provisionalId = provisionalDestinationId;
-      evt.destination = destinationInfo;
-      this.eventTarget_.dispatchEvent(evt);
-    },
-
-   /**
-     * Allows for onManipulateSettings to be called
-     * from the native layer.
-     * @private
+     * Notifies the test that the option it tried to change
+     * had not been changed successfully.
      */
-    onEnableManipulateSettingsForTest_: function() {
-      global.onManipulateSettingsForTest =
-          this.onManipulateSettingsForTest_.bind(this);
+    uiFailedLoadingForTest: function() {
+      chrome.send('UIFailedLoadingForTest');
     },
 
     /**
-     * Dispatches an event to print_preview.js to change
-     * a particular setting for print preview.
-     * @param {!print_preview.PreviewSettings} settings Object containing the
-     *     value to be changed and that value should be set to.
-     * @private
+     * Notifies the metrics handler to record an action.
+     * @param {string} action The action to record.
      */
-    onManipulateSettingsForTest_: function(settings) {
-      var manipulateSettingsEvent =
-          new Event(NativeLayer.EventType.MANIPULATE_SETTINGS_FOR_TEST);
-      manipulateSettingsEvent.settings = settings;
-      this.eventTarget_.dispatchEvent(manipulateSettingsEvent);
+    recordAction: function(action) {
+      chrome.send('metricsHandler:recordAction', [action]);
     },
 
     /**
-     * Sends a message to the test, letting it know that an
-     * option has been set to a particular value and that the change has
-     * finished modifying the preview area.
+     * Notifies the metrics handler to record a histogram value.
+     * @param {string} histogram The name of the histogram to record
+     * @param {number} bucket The bucket to record
+     * @param {number} maxBucket The maximum bucket value in the histogram.
      */
-    previewReadyForTest: function() {
-      if (global.onManipulateSettingsForTest)
-        chrome.send('UILoadedForTest');
+    recordInHistogram: function(histogram, bucket, maxBucket) {
+      chrome.send(
+          'metricsHandler:recordInHistogram', [histogram, bucket, maxBucket]);
     },
-
-    /**
-     * Notifies the test that the option it tried to change
-     * had not been changed successfully.
-     */
-    previewFailedForTest: function() {
-      if (global.onManipulateSettingsForTest)
-        chrome.send('UIFailedLoadingForTest');
-    }
   };
 
   /**
@@ -960,19 +583,10 @@ cr.define('print_preview', function() {
    * @constructor
    */
   function NativeInitialSettings(
-      isInKioskAutoPrintMode,
-      isInAppKioskMode,
-      thousandsDelimeter,
-      decimalDelimeter,
-      unitType,
-      isDocumentModifiable,
-      documentTitle,
-      documentHasSelection,
-      selectionOnly,
-      systemDefaultDestinationId,
-      serializedAppStateStr,
-      serializedDefaultDestinationSelectionRulesStr) {
-
+      isInKioskAutoPrintMode, isInAppKioskMode, thousandsDelimeter,
+      decimalDelimeter, unitType, isDocumentModifiable, documentTitle,
+      documentHasSelection, selectionOnly, systemDefaultDestinationId,
+      serializedAppStateStr, serializedDefaultDestinationSelectionRulesStr) {
     /**
      * Whether the print preview should be in auto-print mode.
      * @private {boolean}
diff --git a/chromium/chrome/browser/resources/print_preview/preview_generator.js b/chromium/chrome/browser/resources/print_preview/preview_generator.js
index 55189a3c913..8d47ae1275b 100644
--- a/chromium/chrome/browser/resources/print_preview/preview_generator.js
+++ b/chromium/chrome/browser/resources/print_preview/preview_generator.js
@@ -14,11 +14,14 @@ cr.define('print_preview', function() {
    * @param {!print_preview.NativeLayer} nativeLayer Used to communicate to
    *     Chromium's preview rendering system.
    * @param {!print_preview.DocumentInfo} documentInfo Document data model.
+   * @param {!WebUIListenerTracker} listenerTracker Tracker for the WebUI
+   *     listeners added in the PreviewGenerator constructor.
    * @constructor
    * @extends {cr.EventTarget}
    */
   function PreviewGenerator(
-       destinationStore, printTicketStore, nativeLayer, documentInfo) {
+      destinationStore, printTicketStore, nativeLayer, documentInfo,
+      listenerTracker) {
     cr.EventTarget.call(this);
 
     /**
@@ -136,14 +139,7 @@ cr.define('print_preview', function() {
      */
     this.selectedDestination_ = null;
 
-    /**
-     * Event tracker used to keep track of native layer events.
-     * @type {!EventTracker}
-     * @private
-     */
-    this.tracker_ = new EventTracker();
-
-    this.addEventListeners_();
+    this.addWebUIEventListeners_(listenerTracker);
   }
 
   /**
@@ -171,22 +167,41 @@ cr.define('print_preview', function() {
     __proto__: cr.EventTarget.prototype,
 
     /**
+     * Starts listening for relevant WebUI events and adds the listeners to
+     * |listenerTracker|. |listenerTracker| is responsible for removing the
+     * listeners when necessary.
+     * @param {!WebUIListenerTracker} listenerTracker
+     * @private
+     */
+    addWebUIEventListeners_: function(listenerTracker) {
+      listenerTracker.add(
+          'page-count-ready', this.onPageCountReady_.bind(this));
+      listenerTracker.add(
+          'page-layout-ready', this.onPageLayoutReady_.bind(this));
+      listenerTracker.add(
+          'page-preview-ready', this.onPagePreviewReady_.bind(this));
+    },
+
+    /**
      * Request that new preview be generated. A preview request will not be
      * generated if the print ticket has not changed sufficiently.
-     * @return {boolean} Whether a new preview was actually requested.
+     * @return {{id: number,
+     *           request: Promise}} The preview request id, or -1 if no preview
+     *     was requested, and a promise that will resolve when the preview is
+     *     complete (null if no preview was actually requested).
      */
     requestPreview: function() {
       if (!this.printTicketStore_.isTicketValidForPreview() ||
           !this.printTicketStore_.isInitialized ||
           !this.destinationStore_.selectedDestination) {
-        return false;
+        return {id: -1, request: null};
       }
       var previewChanged = this.hasPreviewChanged_();
       if (!previewChanged && !this.hasPreviewPageRangeChanged_()) {
         // Changes to these ticket items might not trigger a new preview, but
         // they still need to be recorded.
         this.marginsType_ = this.printTicketStore_.marginsType.getValue();
-        return false;
+        return {id: -1, request: null};
       }
       this.mediaSize_ = this.printTicketStore_.mediaSize.getValue();
       this.isLandscapeEnabled_ = this.printTicketStore_.landscape.getValue();
@@ -205,46 +220,12 @@ cr.define('print_preview', function() {
 
       this.inFlightRequestId_++;
       this.generateDraft_ = this.documentInfo_.isModifiable;
-      this.nativeLayer_.startGetPreview(
-          this.destinationStore_.selectedDestination,
-          this.printTicketStore_,
-          this.documentInfo_,
-          this.generateDraft_,
-          this.inFlightRequestId_);
-      return true;
-    },
-
-    /** Removes all event listeners that the preview generator has attached. */
-    removeEventListeners: function() {
-      this.tracker_.removeAll();
-    },
-
-    /**
-     * Adds event listeners to the relevant native layer events.
-     * @private
-     */
-    addEventListeners_: function() {
-      var nativeLayerEventTarget = this.nativeLayer_.getEventTarget();
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PAGE_LAYOUT_READY,
-          this.onPageLayoutReady_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PAGE_COUNT_READY,
-          this.onPageCountReady_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PAGE_PREVIEW_READY,
-          this.onPagePreviewReady_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PREVIEW_GENERATION_DONE,
-          this.onPreviewGenerationDone_.bind(this));
-      this.tracker_.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PREVIEW_GENERATION_FAIL,
-          this.onPreviewGenerationFail_.bind(this));
+      return {
+        id: this.inFlightRequestId_,
+        request: this.nativeLayer_.getPreview(
+            this.destinationStore_.selectedDestination, this.printTicketStore_,
+            this.documentInfo_, this.generateDraft_, this.inFlightRequestId_),
+      };
     },
 
     /**
@@ -274,13 +255,13 @@ cr.define('print_preview', function() {
      * @private
      */
     dispatchPreviewStartEvent_: function(previewUid, index) {
-      var previewStartEvent = new Event(
-          PreviewGenerator.EventType.PREVIEW_START);
+      var previewStartEvent =
+          new Event(PreviewGenerator.EventType.PREVIEW_START);
       if (!this.documentInfo_.isModifiable) {
         index = -1;
       }
-      previewStartEvent.previewUrl = 'chrome://print/' +
-          previewUid.toString() + '/' + index + '/print.pdf';
+      previewStartEvent.previewUrl = 'chrome://print/' + previewUid.toString() +
+          '/' + index + '/print.pdf';
       this.dispatchEvent(previewStartEvent);
     },
 
@@ -300,18 +281,18 @@ cr.define('print_preview', function() {
           !ticketStore.scaling.isValueEqual(this.scalingValue_) ||
           !ticketStore.fitToPage.isValueEqual(this.isFitToPageEnabled_) ||
           (!ticketStore.marginsType.isValueEqual(this.marginsType_) &&
-              !ticketStore.marginsType.isValueEqual(
-                  print_preview.ticket_items.MarginsTypeValue.CUSTOM)) ||
+           !ticketStore.marginsType.isValueEqual(
+               print_preview.ticket_items.MarginsTypeValue.CUSTOM)) ||
           (ticketStore.marginsType.isValueEqual(
-              print_preview.ticket_items.MarginsTypeValue.CUSTOM) &&
-              !ticketStore.customMargins.isValueEqual(
-                  this.documentInfo_.margins)) ||
+               print_preview.ticket_items.MarginsTypeValue.CUSTOM) &&
+           !ticketStore.customMargins.isValueEqual(
+               this.documentInfo_.margins)) ||
           !ticketStore.cssBackground.isValueEqual(
               this.isCssBackgroundEnabled_) ||
           !ticketStore.selectionOnly.isValueEqual(
               this.isSelectionOnlyEnabled_) ||
           (this.selectedDestination_ !=
-              this.destinationStore_.selectedDestination);
+           this.destinationStore_.selectedDestination);
     },
 
     /**
@@ -321,98 +302,111 @@ cr.define('print_preview', function() {
     hasPreviewPageRangeChanged_: function() {
       return this.pageRanges_ == null ||
           !areRangesEqual(
-              this.printTicketStore_.pageRange.getPageRanges(),
-              this.pageRanges_);
+                 this.printTicketStore_.pageRange.getPageRanges(),
+                 this.pageRanges_);
     },
 
     /**
      * Called when the page layout of the document is ready. Always occurs
      * as a result of a preview request.
-     * @param {Event} event Contains layout info about the document.
+     * @param {{marginTop: number,
+     *          marginLeft: number,
+     *          marginBottom: number,
+     *          marginRight: number,
+     *          contentWidth: number,
+     *          contentHeight: number,
+     *          printableAreaX: number,
+     *          printableAreaY: number,
+     *          printableAreaWidth: number,
+     *          printableAreaHeight: number,
+     *        }} pageLayout Layout information about the document.
+     * @param {boolean} hasCustomPageSizeStyle Whether this document has a
+     *     custom page size or style to use.
      * @private
      */
-    onPageLayoutReady_: function(event) {
+    onPageLayoutReady_: function(pageLayout, hasCustomPageSizeStyle) {
       // NOTE: A request ID is not specified, so assuming its for the current
       // in-flight request.
 
       var origin = new print_preview.Coordinate2d(
-          event.pageLayout.printableAreaX,
-          event.pageLayout.printableAreaY);
+          pageLayout.printableAreaX, pageLayout.printableAreaY);
       var size = new print_preview.Size(
-          event.pageLayout.printableAreaWidth,
-          event.pageLayout.printableAreaHeight);
+          pageLayout.printableAreaWidth, pageLayout.printableAreaHeight);
 
       var margins = new print_preview.Margins(
-          Math.round(event.pageLayout.marginTop),
-          Math.round(event.pageLayout.marginRight),
-          Math.round(event.pageLayout.marginBottom),
-          Math.round(event.pageLayout.marginLeft));
+          Math.round(pageLayout.marginTop), Math.round(pageLayout.marginRight),
+          Math.round(pageLayout.marginBottom),
+          Math.round(pageLayout.marginLeft));
 
       var o = print_preview.ticket_items.CustomMarginsOrientation;
       var pageSize = new print_preview.Size(
-          event.pageLayout.contentWidth +
-              margins.get(o.LEFT) + margins.get(o.RIGHT),
-          event.pageLayout.contentHeight +
-              margins.get(o.TOP) + margins.get(o.BOTTOM));
+          pageLayout.contentWidth + margins.get(o.LEFT) + margins.get(o.RIGHT),
+          pageLayout.contentHeight + margins.get(o.TOP) +
+              margins.get(o.BOTTOM));
 
       this.documentInfo_.updatePageInfo(
-          new print_preview.PrintableArea(origin, size),
-          pageSize,
-          event.hasCustomPageSizeStyle,
-          margins);
+          new print_preview.PrintableArea(origin, size), pageSize,
+          hasCustomPageSizeStyle, margins);
     },
 
     /**
      * Called when the document page count is received from the native layer.
      * Always occurs as a result of a preview request.
-     * @param {Event} event Contains the document's page count.
+     * @param {number} pageCount The document's page count.
+     * @param {number} previewResponseId The request ID that corresponds to this
+     *     page count.
+     * @param {number} fitToPageScaling The scaling required to fit the document
+     *     to page (unused).
      * @private
      */
-    onPageCountReady_: function(event) {
-      if (this.inFlightRequestId_ != event.previewResponseId) {
-        return; // Ignore old response.
+    onPageCountReady_: function(
+        pageCount, previewResponseId, fitToPageScaling) {
+      if (this.inFlightRequestId_ != previewResponseId) {
+        return;  // Ignore old response.
       }
-      this.documentInfo_.updatePageCount(event.pageCount);
+      this.documentInfo_.updatePageCount(pageCount);
       this.pageRanges_ = this.printTicketStore_.pageRange.getPageRanges();
     },
 
     /**
      * Called when a page's preview has been generated. Dispatches a
      * PAGE_READY event.
-     * @param {Event} event Contains the page index and preview UID.
+     * @param {number} pageIndex The index of the page whose preview is ready.
+     * @param {number} previewUid The unique ID of the print preview UI.
+     * @param {number} previewResponseId The preview request ID that this page
+     *     preview is a response to.
      * @private
      */
-    onPagePreviewReady_: function(event) {
-      if (this.inFlightRequestId_ != event.previewResponseId) {
-        return; // Ignore old response.
+    onPagePreviewReady_: function(pageIndex, previewUid, previewResponseId) {
+      if (this.inFlightRequestId_ != previewResponseId) {
+        return;  // Ignore old response.
       }
-      var pageNumber = event.pageIndex + 1;
+      var pageNumber = pageIndex + 1;
       var pageNumberSet = this.printTicketStore_.pageRange.getPageNumberSet();
       if (pageNumberSet.hasPageNumber(pageNumber)) {
         var previewIndex = pageNumberSet.getPageNumberIndex(pageNumber);
         if (previewIndex == 0) {
-          this.dispatchPreviewStartEvent_(event.previewUid, event.pageIndex);
+          this.dispatchPreviewStartEvent_(previewUid, pageIndex);
         }
-        this.dispatchPageReadyEvent_(
-            previewIndex, pageNumber, event.previewUid);
+        this.dispatchPageReadyEvent_(previewIndex, pageNumber, previewUid);
       }
     },
 
     /**
      * Called when the preview generation is complete. Dispatches a
      * DOCUMENT_READY event.
-     * @param {Event} event Contains the preview UID and response ID.
-     * @private
+     * @param {number} previewResponseId
+     * @param {number} previewUid
      */
-    onPreviewGenerationDone_: function(event) {
-      if (this.inFlightRequestId_ != event.previewResponseId) {
-        return; // Ignore old response.
+    onPreviewGenerationDone: function(previewResponseId, previewUid) {
+      if (this.inFlightRequestId_ != previewResponseId) {
+        return;  // Ignore old response.
       }
       if (!this.generateDraft_) {
         // Dispatch a PREVIEW_START event since not generating a draft PDF,
         // which includes print preview for non-modifiable documents, does not
         // trigger PAGE_READY events.
-        this.dispatchPreviewStartEvent_(event.previewUid, 0);
+        this.dispatchPreviewStartEvent_(previewUid, 0);
       }
       cr.dispatchSimpleEvent(this, PreviewGenerator.EventType.DOCUMENT_READY);
     },
@@ -429,7 +423,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    PreviewGenerator: PreviewGenerator
-  };
+  return {PreviewGenerator: PreviewGenerator};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/previewarea/margin_control.js b/chromium/chrome/browser/resources/print_preview/previewarea/margin_control.js
index f324dc99c53..72fe4bca8be 100644
--- a/chromium/chrome/browser/resources/print_preview/previewarea/margin_control.js
+++ b/chromium/chrome/browser/resources/print_preview/previewarea/margin_control.js
@@ -219,8 +219,7 @@ cr.define('print_preview', function() {
      */
     setPositionInPts: function(posInPts) {
       this.positionInPts_ = posInPts;
-      var orientationEnum =
-          print_preview.ticket_items.CustomMarginsOrientation;
+      var orientationEnum = print_preview.ticket_items.CustomMarginsOrientation;
       var x = this.translateTransform_.x;
       var y = this.translateTransform_.y;
       var width = null, height = null;
@@ -270,8 +269,7 @@ cr.define('print_preview', function() {
      */
     convertPixelsToPts: function(pixels) {
       var pts;
-      var orientationEnum =
-          print_preview.ticket_items.CustomMarginsOrientation;
+      var orientationEnum = print_preview.ticket_items.CustomMarginsOrientation;
       if (this.orientation_ == orientationEnum.TOP) {
         pts = pixels - this.translateTransform_.y + MarginControl.RADIUS_;
         pts /= this.scaleTransform_;
@@ -307,8 +305,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     createDom: function() {
-      this.setElementInternal(this.cloneTemplateInternal(
-          'margin-control-template'));
+      this.setElementInternal(
+          this.cloneTemplateInternal('margin-control-template'));
       this.getElement().classList.add('margin-control-' + this.orientation_);
       this.textbox_ = this.getElement().getElementsByClassName(
           MarginControl.Classes_.TEXTBOX)[0];
@@ -324,12 +322,9 @@ cr.define('print_preview', function() {
       this.tracker.add(
           this.getElement(), 'mousedown', this.onMouseDown_.bind(this));
       this.tracker.add(
-          this.getElement(),
-          'transitionend',
-          this.onTransitionEnd_.bind(this));
+          this.getElement(), 'transitionend', this.onTransitionEnd_.bind(this));
       assert(this.textbox_);
-      this.tracker.add(
-          this.textbox_, 'input', this.onTextboxInput_.bind(this));
+      this.tracker.add(this.textbox_, 'input', this.onTextboxInput_.bind(this));
       this.tracker.add(
           this.textbox_, 'keydown', this.onTextboxKeyDown_.bind(this));
       this.tracker.add(
@@ -369,10 +364,9 @@ cr.define('print_preview', function() {
      * @private
      */
     onMouseDown_: function(event) {
-      if (!this.textbox_.disabled &&
-          event.button == 0 &&
+      if (!this.textbox_.disabled && event.button == 0 &&
           (event.target == this.getElement() ||
-              event.target == this.marginLineEl_)) {
+           event.target == this.marginLineEl_)) {
         this.mouseStartPositionInPixels_ =
             new print_preview.Coordinate2d(event.x, event.y);
         this.marginStartPositionInPixels_ = new print_preview.Coordinate2d(
@@ -449,7 +443,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    MarginControl: MarginControl
-  };
+  return {MarginControl: MarginControl};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/previewarea/margin_control_container.js b/chromium/chrome/browser/resources/print_preview/previewarea/margin_control_container.js
index 33ab6b2f34a..9a6f8042c65 100644
--- a/chromium/chrome/browser/resources/print_preview/previewarea/margin_control_container.js
+++ b/chromium/chrome/browser/resources/print_preview/previewarea/margin_control_container.js
@@ -20,9 +20,9 @@ cr.define('print_preview', function() {
    * @constructor
    * @extends {print_preview.Component}
    */
-  function MarginControlContainer(documentInfo, marginsTypeTicketItem,
-                                  customMarginsTicketItem, measurementSystem,
-                                  dragChangedCallback) {
+  function MarginControlContainer(
+      documentInfo, marginsTypeTicketItem, customMarginsTicketItem,
+      measurementSystem, dragChangedCallback) {
     print_preview.Component.call(this);
 
     /**
@@ -69,8 +69,8 @@ cr.define('print_preview', function() {
      */
     this.controls_ = {};
     for (var key in print_preview.ticket_items.CustomMarginsOrientation) {
-      var orientation = print_preview.ticket_items.CustomMarginsOrientation[
-          key];
+      var orientation =
+          print_preview.ticket_items.CustomMarginsOrientation[key];
       var control = new print_preview.MarginControl(orientation);
       this.controls_[orientation] = control;
       this.addChild(control);
@@ -130,7 +130,7 @@ cr.define('print_preview', function() {
     return orientation ==
         print_preview.ticket_items.CustomMarginsOrientation.TOP ||
         orientation ==
-            print_preview.ticket_items.CustomMarginsOrientation.BOTTOM;
+        print_preview.ticket_items.CustomMarginsOrientation.BOTTOM;
   };
 
   MarginControlContainer.prototype = {
@@ -175,11 +175,10 @@ cr.define('print_preview', function() {
       this.clippingSize_ = clipSize;
       for (var orientation in this.controls_) {
         var el = this.controls_[orientation].getElement();
-        el.style.clip = 'rect(' +
-            (-el.offsetTop) + 'px, ' +
+        el.style.clip = 'rect(' + (-el.offsetTop) + 'px, ' +
             (clipSize.width - el.offsetLeft) + 'px, ' +
-            (clipSize.height - el.offsetTop) + 'px, ' +
-            (-el.offsetLeft) + 'px)';
+            (clipSize.height - el.offsetTop) + 'px, ' + (-el.offsetLeft) +
+            'px)';
       }
     },
 
@@ -205,8 +204,7 @@ cr.define('print_preview', function() {
           this.getElement(), 'mouseout', this.onMouseOut_.bind(this));
 
       this.tracker.add(
-          this.documentInfo_,
-          print_preview.DocumentInfo.EventType.CHANGE,
+          this.documentInfo_, print_preview.DocumentInfo.EventType.CHANGE,
           this.onTicketChange_.bind(this));
       this.tracker.add(
           this.marginsTypeTicketItem_,
@@ -261,9 +259,9 @@ cr.define('print_preview', function() {
       } else {
         newPosInPts = control.convertPixelsToPts(posInPixels.x);
       }
-      newPosInPts = Math.min(this.customMarginsTicketItem_.getMarginMax(
-                                 control.getOrientation()),
-                             newPosInPts);
+      newPosInPts = Math.min(
+          this.customMarginsTicketItem_.getMarginMax(control.getOrientation()),
+          newPosInPts);
       newPosInPts = Math.max(0, newPosInPts);
       newPosInPts = Math.round(newPosInPts);
       control.setPositionInPts(newPosInPts);
@@ -281,9 +279,9 @@ cr.define('print_preview', function() {
       if (value.length == 0) {
         return null;
       }
-      var validationRegex = new RegExp('^(^-?)(\\d)+(\\' +
-          this.measurementSystem_.thousandsDelimeter + '\\d{3})*(\\' +
-          this.measurementSystem_.decimalDelimeter + '\\d*)?' +
+      var validationRegex = new RegExp(
+          '^(^-?)(\\d)+(\\' + this.measurementSystem_.thousandsDelimeter +
+          '\\d{3})*(\\' + this.measurementSystem_.decimalDelimeter + '\\d*)?' +
           '(' + this.measurementSystem_.unitSymbol + ')?$');
       if (validationRegex.test(value)) {
         // Replacing decimal point with the dot symbol in order to use
@@ -476,7 +474,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    MarginControlContainer: MarginControlContainer
-  };
+  return {MarginControlContainer: MarginControlContainer};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/previewarea/preview_area.js b/chromium/chrome/browser/resources/print_preview/previewarea/preview_area.js
index 9860795ad84..8d41ff9e6c2 100644
--- a/chromium/chrome/browser/resources/print_preview/previewarea/preview_area.js
+++ b/chromium/chrome/browser/resources/print_preview/previewarea/preview_area.js
@@ -56,14 +56,11 @@ cr.define('print_preview', function() {
    *     currently selected destination.
    * @param {!print_preview.PrintTicketStore} printTicketStore Used to get
    *     information about how the preview should be displayed.
-   * @param {!print_preview.NativeLayer} nativeLayer Needed to communicate with
-   *     Chromium's preview generation system.
    * @param {!print_preview.DocumentInfo} documentInfo Document data model.
    * @constructor
    * @extends {print_preview.Component}
    */
-  function PreviewArea(
-      destinationStore, printTicketStore, nativeLayer, documentInfo) {
+  function PreviewArea(destinationStore, printTicketStore, documentInfo) {
     print_preview.Component.call(this);
     // TODO(rltoscano): Understand the dependencies of printTicketStore needed
     // here, and add only those here (not the entire print ticket store).
@@ -87,7 +84,7 @@ cr.define('print_preview', function() {
      * @type {!print_preview.NativeLayer}
      * @private
      */
-    this.nativeLayer_ = nativeLayer;
+    this.nativeLayer_ = print_preview.NativeLayer.getInstance();
 
     /**
      * Document data model.
@@ -116,8 +113,7 @@ cr.define('print_preview', function() {
      * @private
      */
     this.marginControlContainer_ = new print_preview.MarginControlContainer(
-        this.documentInfo_,
-        this.printTicketStore_.marginsType,
+        this.documentInfo_, this.printTicketStore_.marginsType,
         this.printTicketStore_.customMargins,
         this.printTicketStore_.measurementSystem,
         this.onMarginDragChanged_.bind(this));
@@ -172,6 +168,7 @@ cr.define('print_preview', function() {
      * @private
      */
     this.openSystemDialogButton_ = null;
+
   }
 
   /**
@@ -193,7 +190,10 @@ cr.define('print_preview', function() {
 
     // Dispatched when a new document preview is being generated.
     PREVIEW_GENERATION_IN_PROGRESS:
-        'print_preview.PreviewArea.PREVIEW_GENERATION_IN_PROGRESS'
+        'print_preview.PreviewArea.PREVIEW_GENERATION_IN_PROGRESS',
+
+    // Dispatched when invalid printer settings are detected.
+    SETTINGS_INVALID: 'print_preview.PreviewArea.SETTINGS_INVALID'
   };
 
   /**
@@ -225,8 +225,8 @@ cr.define('print_preview', function() {
       'preview-area-custom-message';
   PreviewArea.MessageIdClassMap_[print_preview.PreviewAreaMessageId_.LOADING] =
       'preview-area-loading-message';
-  PreviewArea.MessageIdClassMap_[
-      print_preview.PreviewAreaMessageId_.PREVIEW_FAILED] =
+  PreviewArea
+      .MessageIdClassMap_[print_preview.PreviewAreaMessageId_.PREVIEW_FAILED] =
       'preview-area-preview-failed-message';
 
   /**
@@ -314,46 +314,34 @@ cr.define('print_preview', function() {
       print_preview.Component.prototype.enterDocument.call(this);
 
       this.tracker.add(
-          assert(this.openSystemDialogButton_),
-          'click',
+          assert(this.openSystemDialogButton_), 'click',
           this.onOpenSystemDialogButtonClick_.bind(this));
 
       var TicketStoreEvent = print_preview.PrintTicketStore.EventType;
-      [
-        TicketStoreEvent.INITIALIZE,
-        TicketStoreEvent.TICKET_CHANGE,
-        TicketStoreEvent.CAPABILITIES_CHANGE,
-        TicketStoreEvent.DOCUMENT_CHANGE
-      ].forEach(function(eventType) {
-        this.tracker.add(this.printTicketStore_, eventType,
-            this.onTicketChange_.bind(this));
-      }.bind(this));
-
-      [
-        this.printTicketStore_.color,
-        this.printTicketStore_.cssBackground,
-        this.printTicketStore_.customMargins,
-        this.printTicketStore_.fitToPage,
-        this.printTicketStore_.headerFooter,
-        this.printTicketStore_.landscape,
-        this.printTicketStore_.marginsType,
-        this.printTicketStore_.pageRange,
-        this.printTicketStore_.rasterize,
-        this.printTicketStore_.selectionOnly,
-        this.printTicketStore_.scaling
-      ].forEach(function(setting) {
-        this.tracker.add(
-            setting,
-            print_preview.ticket_items.TicketItem.EventType.CHANGE,
-            this.onTicketChange_.bind(this));
-      }.bind(this));
+      [TicketStoreEvent.INITIALIZE, TicketStoreEvent.TICKET_CHANGE,
+       TicketStoreEvent.CAPABILITIES_CHANGE, TicketStoreEvent.DOCUMENT_CHANGE]
+          .forEach(function(eventType) {
+            this.tracker.add(
+                this.printTicketStore_, eventType,
+                this.onTicketChange_.bind(this));
+          }.bind(this));
+
+      [this.printTicketStore_.color, this.printTicketStore_.cssBackground,
+       this.printTicketStore_.customMargins, this.printTicketStore_.fitToPage,
+       this.printTicketStore_.headerFooter, this.printTicketStore_.landscape,
+       this.printTicketStore_.marginsType, this.printTicketStore_.pageRange,
+       this.printTicketStore_.rasterize, this.printTicketStore_.selectionOnly,
+       this.printTicketStore_.scaling]
+          .forEach(function(setting) {
+            this.tracker.add(
+                setting, print_preview.ticket_items.TicketItem.EventType.CHANGE,
+                this.onTicketChange_.bind(this));
+          }.bind(this));
 
       if (this.checkPluginCompatibility_()) {
         this.previewGenerator_ = new print_preview.PreviewGenerator(
-            this.destinationStore_,
-            this.printTicketStore_,
-            this.nativeLayer_,
-            this.documentInfo_);
+            this.destinationStore_, this.printTicketStore_, this.nativeLayer_,
+            this.documentInfo_, this.listenerTracker);
         this.tracker.add(
             this.previewGenerator_,
             print_preview.PreviewGenerator.EventType.PREVIEW_START,
@@ -364,10 +352,6 @@ cr.define('print_preview', function() {
             this.onPagePreviewReady_.bind(this));
         this.tracker.add(
             this.previewGenerator_,
-            print_preview.PreviewGenerator.EventType.FAIL,
-            this.onPreviewGenerationFail_.bind(this));
-        this.tracker.add(
-            this.previewGenerator_,
             print_preview.PreviewGenerator.EventType.DOCUMENT_READY,
             this.onDocumentReady_.bind(this));
       } else {
@@ -378,9 +362,6 @@ cr.define('print_preview', function() {
     /** @override */
     exitDocument: function() {
       print_preview.Component.prototype.exitDocument.call(this);
-      if (this.previewGenerator_) {
-        this.previewGenerator_.removeEventListeners();
-      }
       this.overlayEl_ = null;
       this.openSystemDialogButton_ = null;
     },
@@ -442,7 +423,7 @@ cr.define('print_preview', function() {
         jumpingDotsEl.classList.add('jumping-dots');
       }
       var messageEl = this.getElement().getElementsByClassName(
-            PreviewArea.MessageIdClassMap_[messageId])[0];
+          PreviewArea.MessageIdClassMap_[messageId])[0];
       setIsVisible(messageEl, true);
 
       this.setOverlayVisible_(true);
@@ -455,8 +436,7 @@ cr.define('print_preview', function() {
      */
     setOverlayVisible_: function(visible) {
       this.overlayEl_.classList.toggle(
-          PreviewArea.Classes_.INVISIBLE,
-          !visible);
+          PreviewArea.Classes_.INVISIBLE, !visible);
       this.overlayEl_.setAttribute('aria-hidden', !visible);
 
       // Hide/show all controls that will overlap when the overlay is visible.
@@ -486,7 +466,7 @@ cr.define('print_preview', function() {
      */
     createPlugin_: function(srcUrl) {
       assert(!this.plugin_);
-      this.plugin_ = /** @type {print_preview.PDFPlugin} */(
+      this.plugin_ = /** @type {print_preview.PDFPlugin} */ (
           PDFCreateOutOfProcessPlugin(srcUrl));
       this.plugin_.setKeyEventCallback(this.keyEventCallback_);
 
@@ -497,8 +477,8 @@ cr.define('print_preview', function() {
       // chrome/renderer/printing/print_web_view_helper.cc actually references
       // it.
       this.plugin_.setAttribute('id', 'pdf-viewer');
-      this.getChildElement('.preview-area-plugin-wrapper').
-          appendChild(/** @type {Node} */(this.plugin_));
+      this.getChildElement('.preview-area-plugin-wrapper')
+          .appendChild(/** @type {Node} */ (this.plugin_));
 
       this.plugin_.setLoadCallback(this.onPluginLoad_.bind(this));
       this.plugin_.setViewportChangedCallback(
@@ -537,18 +517,45 @@ cr.define('print_preview', function() {
      * @private
      */
     onTicketChange_: function() {
-      if (this.previewGenerator_ && this.previewGenerator_.requestPreview()) {
-        cr.dispatchSimpleEvent(
-            this, PreviewArea.EventType.PREVIEW_GENERATION_IN_PROGRESS);
-        if (this.loadingTimeout_ == null) {
-          this.loadingTimeout_ = setTimeout(
-              this.showMessage_.bind(this,
-                  print_preview.PreviewAreaMessageId_.LOADING),
-              PreviewArea.LOADING_TIMEOUT_);
-        }
-      } else {
+      if (!this.previewGenerator_)
+        return;
+      var previewRequest = this.previewGenerator_.requestPreview();
+      if (previewRequest.id <= -1) {
         this.marginControlContainer_.showMarginControlsIfNeeded();
+        return;
       }
+
+      cr.dispatchSimpleEvent(
+          this, PreviewArea.EventType.PREVIEW_GENERATION_IN_PROGRESS);
+      if (this.loadingTimeout_ == null) {
+        this.loadingTimeout_ = setTimeout(
+            this.showMessage_.bind(
+                this, print_preview.PreviewAreaMessageId_.LOADING),
+            PreviewArea.LOADING_TIMEOUT_);
+      }
+      previewRequest.request.then(
+          /** @param {number} previewUid The unique id of the preview. */
+          function(previewUid) {
+            this.previewGenerator_.onPreviewGenerationDone(
+                previewRequest.id, previewUid);
+          }.bind(this),
+          /**
+           * @param {*} type The type of print preview failure that
+           *     occurred.
+           */
+          function(type) {
+            if (/** @type{string} */ (type) == 'CANCELLED')
+              return;  // overriden by a new request, do nothing.
+            if (/** @type{string} */ (type) == 'SETTINGS_INVALID') {
+              this.cancelTimeout();
+              this.showCustomMessage(
+                  loadTimeData.getString('invalidPrinterSettings'));
+              cr.dispatchSimpleEvent(
+                  this, PreviewArea.EventType.SETTINGS_INVALID);
+            } else {
+              this.onPreviewGenerationFail_();
+            }
+          }.bind(this));
     },
 
     /**
@@ -563,8 +570,7 @@ cr.define('print_preview', function() {
         this.createPlugin_(event.previewUrl);
       }
       this.plugin_.resetPrintPreviewMode(
-          event.previewUrl,
-          !this.printTicketStore_.color.getValue(),
+          event.previewUrl, !this.printTicketStore_.color.getValue(),
           this.printTicketStore_.pageRange.getPageNumberSet().asArray(),
           this.documentInfo_.isModifiable);
 
@@ -632,11 +638,8 @@ cr.define('print_preview', function() {
      * margins component if shown.
      * @private
      */
-    onPreviewVisualStateChange_: function(pageX,
-                                          pageY,
-                                          pageWidth,
-                                          viewportWidth,
-                                          viewportHeight) {
+    onPreviewVisualStateChange_: function(
+        pageX, pageY, pageWidth, viewportWidth, viewportHeight) {
       this.marginControlContainer_.updateTranslationTransform(
           new print_preview.Coordinate2d(pageX, pageY));
       this.marginControlContainer_.updateScaleTransform(
@@ -659,11 +662,9 @@ cr.define('print_preview', function() {
       // we don't want this to happen as it can cause the margin to stop
       // being draggable.
       this.plugin_.style.pointerEvents = isDragging ? 'none' : 'auto';
-    }
+    },
   };
 
   // Export
-  return {
-    PreviewArea: PreviewArea
-  };
+  return {PreviewArea: PreviewArea};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/print_header.js b/chromium/chrome/browser/resources/print_preview/print_header.js
index 9a132f83343..901718c22af 100644
--- a/chromium/chrome/browser/resources/print_preview/print_header.js
+++ b/chromium/chrome/browser/resources/print_preview/print_header.js
@@ -98,12 +98,10 @@ cr.define('print_preview', function() {
 
       // User events
       this.tracker.add(
-          this.getChildElement('button.cancel'),
-          'click',
+          this.getChildElement('button.cancel'), 'click',
           this.onCancelButtonClick_.bind(this));
       this.tracker.add(
-          this.getChildElement('button.print'),
-          'click',
+          this.getChildElement('button.print'), 'click',
           this.onPrintButtonClick_.bind(this));
 
       // Data events.
@@ -144,8 +142,7 @@ cr.define('print_preview', function() {
     updatePrintButtonEnabledState_: function() {
       this.getChildElement('button.print').disabled =
           this.destinationStore_.selectedDestination == null ||
-          !this.isEnabled_ ||
-          !this.isPrintButtonEnabled_ ||
+          !this.isEnabled_ || !this.isPrintButtonEnabled_ ||
           !this.printTicketStore_.isTicketValid();
     },
 
@@ -161,9 +158,9 @@ cr.define('print_preview', function() {
 
       var saveToPdfOrDrive = this.destinationStore_.selectedDestination &&
           (this.destinationStore_.selectedDestination.id ==
-              print_preview.Destination.GooglePromotedId.SAVE_AS_PDF ||
+               print_preview.Destination.GooglePromotedId.SAVE_AS_PDF ||
            this.destinationStore_.selectedDestination.id ==
-              print_preview.Destination.GooglePromotedId.DOCS);
+               print_preview.Destination.GooglePromotedId.DOCS);
 
       var numPages = this.printTicketStore_.pageRange.getPageNumberSet().size;
       var numSheets = numPages;
@@ -178,7 +175,8 @@ cr.define('print_preview', function() {
       var pagesLabel = loadTimeData.getString('printPreviewPageLabelPlural');
       var summaryLabel;
       if (numSheets > 1) {
-        summaryLabel = saveToPdfOrDrive ? pagesLabel :
+        summaryLabel = saveToPdfOrDrive ?
+            pagesLabel :
             loadTimeData.getString('printPreviewSheetsLabelPlural');
       } else {
         summaryLabel = loadTimeData.getString(
@@ -192,22 +190,19 @@ cr.define('print_preview', function() {
         html = loadTimeData.getStringF(
             'printPreviewSummaryFormatLong',
             '<b>' + numSheets.toLocaleString() + '</b>',
-            '<b>' + summaryLabel + '</b>',
-            numPages.toLocaleString(),
+            '<b>' + summaryLabel + '</b>', numPages.toLocaleString(),
             pagesLabel);
-        label = loadTimeData.getStringF('printPreviewSummaryFormatLong',
-                                        numSheets.toLocaleString(),
-                                        summaryLabel,
-                                        numPages.toLocaleString(),
-                                        pagesLabel);
+        label = loadTimeData.getStringF(
+            'printPreviewSummaryFormatLong', numSheets.toLocaleString(),
+            summaryLabel, numPages.toLocaleString(), pagesLabel);
       } else {
         html = loadTimeData.getStringF(
             'printPreviewSummaryFormatShort',
             '<b>' + numSheets.toLocaleString() + '</b>',
             '<b>' + summaryLabel + '</b>');
-        label = loadTimeData.getStringF('printPreviewSummaryFormatShort',
-                                        numSheets.toLocaleString(),
-                                        summaryLabel);
+        label = loadTimeData.getStringF(
+            'printPreviewSummaryFormatShort', numSheets.toLocaleString(),
+            summaryLabel);
       }
 
       // Removing extra spaces from within the string.
@@ -228,7 +223,8 @@ cr.define('print_preview', function() {
           print_preview.Destination.GooglePromotedId.SAVE_AS_PDF) {
         this.getChildElement('button.print').classList.add('loading');
         this.getChildElement('button.cancel').classList.add('loading');
-        var isSaveLabel = (this.destinationStore_.selectedDestination.id ==
+        var isSaveLabel =
+            (this.destinationStore_.selectedDestination.id ==
              print_preview.Destination.GooglePromotedId.DOCS);
         this.getChildElement('.summary').innerHTML =
             loadTimeData.getString(isSaveLabel ? 'saving' : 'printing');
@@ -279,7 +275,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    PrintHeader: PrintHeader
-  };
+  return {PrintHeader: PrintHeader};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/print_preview.html b/chromium/chrome/browser/resources/print_preview/print_preview.html
index 30b39646a5c..df7bc9fafa8 100644
--- a/chromium/chrome/browser/resources/print_preview/print_preview.html
+++ b/chromium/chrome/browser/resources/print_preview/print_preview.html
@@ -47,6 +47,7 @@
   <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
   <script src="chrome://resources/js/cr/ui/node_utils.js"></script>
   <script src="chrome://resources/js/event_tracker.js"></script>
+  <script src="chrome://resources/js/webui_listener_tracker.js"></script>
   <script src="chrome://resources/js/load_time_data.js"></script>
   <script src="chrome://resources/js/util.js"></script>
   <script src="chrome://print/print_preview.js"></script>
@@ -74,15 +75,14 @@
         <include src="settings/advanced_options_settings.html">
         <include src="settings/more_settings.html">
       </div>
-      <div id="link-container">
 <if expr="not chromeos">
+      <div id="link-container">
         <div>
           <a is="action-link" id="system-dialog-link" class="navbar-link">
             $i18n{systemDialogOption}
           </a>
           <div id="system-dialog-throbber" hidden class="throbber"></div>
         </div>
-</if>
 <if expr="is_macosx">
         <div>
           <a is="action-link" id="open-pdf-in-preview-link" class="navbar-link">
@@ -92,6 +92,7 @@
         </div>
 </if>
       </div>
+</if>
     </div>
   </div>
   <include src="search/destination_search.html">
diff --git a/chromium/chrome/browser/resources/print_preview/print_preview.js b/chromium/chrome/browser/resources/print_preview/print_preview.js
index 149d93a3288..df6e199fb7f 100644
--- a/chromium/chrome/browser/resources/print_preview/print_preview.js
+++ b/chromium/chrome/browser/resources/print_preview/print_preview.js
@@ -84,7 +84,7 @@ cr.define('print_preview', function() {
      * @private
      */
     this.destinationStore_ = new print_preview.DestinationStore(
-        this.nativeLayer_, this.userInfo_, this.appState_);
+        this.userInfo_, this.appState_, this.listenerTracker);
 
     /**
      * Data store which holds printer sharing invitations.
@@ -124,8 +124,8 @@ cr.define('print_preview', function() {
      * @type {!print_preview.DestinationSettings}
      * @private
      */
-    this.destinationSettings_ = new print_preview.DestinationSettings(
-        this.destinationStore_);
+    this.destinationSettings_ =
+        new print_preview.DestinationSettings(this.destinationStore_);
     this.addChild(this.destinationSettings_);
 
     /**
@@ -133,8 +133,8 @@ cr.define('print_preview', function() {
      * @type {!print_preview.PageSettings}
      * @private
      */
-    this.pageSettings_ = new print_preview.PageSettings(
-        this.printTicketStore_.pageRange);
+    this.pageSettings_ =
+        new print_preview.PageSettings(this.printTicketStore_.pageRange);
     this.addChild(this.pageSettings_);
 
     /**
@@ -164,7 +164,7 @@ cr.define('print_preview', function() {
         new print_preview.ColorSettings(this.printTicketStore_.color);
     this.addChild(this.colorSettings_);
 
-     /**
+    /**
      * Component that renders the media size settings.
      * @type {!print_preview.MediaSizeSettings}
      * @private
@@ -196,9 +196,8 @@ cr.define('print_preview', function() {
      * @type {!print_preview.ScalingSettings}
      * @private
      */
-    this.scalingSettings_ =
-        new print_preview.ScalingSettings(this.printTicketStore_.scaling,
-                                          this.printTicketStore_.fitToPage);
+    this.scalingSettings_ = new print_preview.ScalingSettings(
+        this.printTicketStore_.scaling, this.printTicketStore_.fitToPage);
     this.addChild(this.scalingSettings_);
 
     /**
@@ -207,12 +206,10 @@ cr.define('print_preview', function() {
      * @private
      */
     this.otherOptionsSettings_ = new print_preview.OtherOptionsSettings(
-        this.printTicketStore_.duplex,
-        this.printTicketStore_.fitToPage,
+        this.printTicketStore_.duplex, this.printTicketStore_.fitToPage,
         this.printTicketStore_.cssBackground,
         this.printTicketStore_.selectionOnly,
-        this.printTicketStore_.headerFooter,
-        this.printTicketStore_.rasterize);
+        this.printTicketStore_.headerFooter, this.printTicketStore_.rasterize);
     this.addChild(this.otherOptionsSettings_);
 
     /**
@@ -229,22 +226,16 @@ cr.define('print_preview', function() {
      * @type {!print_preview.AdvancedSettings}
      * @private
      */
-    this.advancedSettings_ = new print_preview.AdvancedSettings(
-        this.printTicketStore_);
+    this.advancedSettings_ =
+        new print_preview.AdvancedSettings(this.printTicketStore_);
     this.addChild(this.advancedSettings_);
 
     var settingsSections = [
-        this.destinationSettings_,
-        this.pageSettings_,
-        this.copiesSettings_,
-        this.mediaSizeSettings_,
-        this.layoutSettings_,
-        this.marginSettings_,
-        this.colorSettings_,
-        this.dpiSettings_,
-        this.scalingSettings_,
-        this.otherOptionsSettings_,
-        this.advancedOptionsSettings_];
+      this.destinationSettings_, this.pageSettings_, this.copiesSettings_,
+      this.mediaSizeSettings_, this.layoutSettings_, this.marginSettings_,
+      this.colorSettings_, this.dpiSettings_, this.scalingSettings_,
+      this.otherOptionsSettings_, this.advancedOptionsSettings_
+    ];
 
     /**
      * Component representing more/less settings button.
@@ -260,10 +251,8 @@ cr.define('print_preview', function() {
      * @type {!print_preview.PreviewArea}
      * @private
      */
-    this.previewArea_ = new print_preview.PreviewArea(this.destinationStore_,
-                                                      this.printTicketStore_,
-                                                      this.nativeLayer_,
-                                                      this.documentInfo_);
+    this.previewArea_ = new print_preview.PreviewArea(
+        this.destinationStore_, this.printTicketStore_, this.documentInfo_);
     this.addChild(this.previewArea_);
 
     /**
@@ -320,6 +309,13 @@ cr.define('print_preview', function() {
      * @private
      */
     this.showSystemDialogBeforeNextPrint_ = false;
+
+    /**
+     * Whether the preview is listening for the manipulate-settings-for-test
+     * UI event.
+     * @private {boolean}
+     */
+    this.isListeningForManipulateSettings_ = false;
   }
 
   PrintPreview.prototype = {
@@ -341,59 +337,29 @@ cr.define('print_preview', function() {
           this.onInitialSettingsSet_.bind(this));
       print_preview.PrintPreviewFocusManager.getInstance().initialize();
       cr.ui.FocusOutlineManager.forDocument(document);
+      this.listenerTracker.add('print-failed', this.onPrintFailed_.bind(this));
+      this.listenerTracker.add(
+          'use-cloud-print', this.onCloudPrintEnable_.bind(this));
+      this.listenerTracker.add(
+          'print-preset-options',
+          this.onPrintPresetOptionsFromDocument_.bind(this));
+      this.listenerTracker.add(
+          'page-count-ready', this.onPageCountReady_.bind(this));
+      this.listenerTracker.add(
+          'enable-manipulate-settings-for-test',
+          this.onEnableManipulateSettingsForTest_.bind(this));
     },
 
     /** @override */
     enterDocument: function() {
-      // Native layer events.
-      var nativeLayerEventTarget = this.nativeLayer_.getEventTarget();
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.CLOUD_PRINT_ENABLE,
-          this.onCloudPrintEnable_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PRINT_TO_CLOUD,
-          this.onPrintToCloud_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.FILE_SELECTION_CANCEL,
-          this.onFileSelectionCancel_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.FILE_SELECTION_COMPLETE,
-          this.onFileSelectionComplete_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.SETTINGS_INVALID,
-          this.onSettingsInvalid_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PRINT_PRESET_OPTIONS,
-          this.onPrintPresetOptionsFromDocument_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PAGE_COUNT_READY,
-          this.onPageCountReady_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.PRIVET_PRINT_FAILED,
-          this.onPrivetPrintFailed_.bind(this));
-      this.tracker.add(
-          nativeLayerEventTarget,
-          print_preview.NativeLayer.EventType.MANIPULATE_SETTINGS_FOR_TEST,
-          this.onManipulateSettingsForTest_.bind(this));
-
       if ($('system-dialog-link')) {
         this.tracker.add(
-            getRequiredElement('system-dialog-link'),
-            'click',
+            getRequiredElement('system-dialog-link'), 'click',
             this.openSystemPrintDialog_.bind(this));
       }
       if ($('open-pdf-in-preview-link')) {
         this.tracker.add(
-            getRequiredElement('open-pdf-in-preview-link'),
-            'click',
+            getRequiredElement('open-pdf-in-preview-link'), 'click',
             this.onOpenPdfInPreviewLinkClick_.bind(this));
       }
 
@@ -413,11 +379,15 @@ cr.define('print_preview', function() {
           this.previewArea_,
           print_preview.PreviewArea.EventType.OPEN_SYSTEM_DIALOG_CLICK,
           this.openSystemPrintDialog_.bind(this));
+      this.tracker.add(
+          this.previewArea_,
+          print_preview.PreviewArea.EventType.SETTINGS_INVALID,
+          this.onSettingsInvalid_.bind(this));
 
       this.tracker.add(
           this.destinationStore_,
-          print_preview.DestinationStore.EventType.
-              SELECTED_DESTINATION_CAPABILITIES_READY,
+          print_preview.DestinationStore.EventType
+              .SELECTED_DESTINATION_CAPABILITIES_READY,
           this.printIfReady_.bind(this));
       this.tracker.add(
           this.destinationStore_,
@@ -474,17 +444,14 @@ cr.define('print_preview', function() {
       // TODO(rltoscano): Move no-destinations-promo into its own component
       // instead being part of PrintPreview.
       this.tracker.add(
-          this.getChildElement('#no-destinations-promo .close-button'),
-          'click',
+          this.getChildElement('#no-destinations-promo .close-button'), 'click',
           this.onNoDestinationsPromoClose_.bind(this));
       this.tracker.add(
           this.getChildElement('#no-destinations-promo .not-now-button'),
-          'click',
-          this.onNoDestinationsPromoClose_.bind(this));
+          'click', this.onNoDestinationsPromoClose_.bind(this));
       this.tracker.add(
           this.getChildElement('#no-destinations-promo .add-printer-button'),
-          'click',
-          this.onNoDestinationsPromoClick_.bind(this));
+          'click', this.onNoDestinationsPromoClick_.bind(this));
     },
 
     /** @override */
@@ -538,12 +505,14 @@ cr.define('print_preview', function() {
      * @private
      */
     printDocumentOrOpenPdfPreview_: function(isPdfPreview) {
-      assert(this.uiState_ == PrintPreviewUiState_.READY,
-             'Print document request received when not in ready state: ' +
-                 this.uiState_);
+      assert(
+          this.uiState_ == PrintPreviewUiState_.READY,
+          'Print document request received when not in ready state: ' +
+              this.uiState_);
       if (isPdfPreview) {
         this.uiState_ = PrintPreviewUiState_.OPENING_PDF_PREVIEW;
-      } else if (this.destinationStore_.selectedDestination.id ==
+      } else if (
+          this.destinationStore_.selectedDestination.id ==
           print_preview.Destination.GooglePromotedId.SAVE_AS_PDF) {
         this.uiState_ = PrintPreviewUiState_.FILE_SELECTION;
       } else {
@@ -552,18 +521,17 @@ cr.define('print_preview', function() {
       this.setIsEnabled_(false);
       this.printHeader_.isCancelButtonEnabled = true;
       var printAttemptResult = this.printIfReady_();
-      if (printAttemptResult == print_preview.PrintAttemptResult_.PRINTED ||
-          printAttemptResult ==
-              print_preview.PrintAttemptResult_.READY_WAITING_FOR_PREVIEW) {
+      if (printAttemptResult ==
+          print_preview.PrintAttemptResult_.READY_WAITING_FOR_PREVIEW) {
         if ((this.destinationStore_.selectedDestination.isLocal &&
              !this.destinationStore_.selectedDestination.isPrivet &&
              !this.destinationStore_.selectedDestination.isExtension &&
              this.destinationStore_.selectedDestination.id !=
                  print_preview.Destination.GooglePromotedId.SAVE_AS_PDF) ||
-             this.uiState_ == PrintPreviewUiState_.OPENING_PDF_PREVIEW) {
+            this.uiState_ == PrintPreviewUiState_.OPENING_PDF_PREVIEW) {
           // Hide the dialog for now. The actual print command will be issued
           // when the preview generation is done.
-          this.nativeLayer_.startHideDialog();
+          this.nativeLayer_.hidePreview();
         }
       }
     },
@@ -587,35 +555,70 @@ cr.define('print_preview', function() {
       if (this.isPreviewGenerationInProgress_) {
         return print_preview.PrintAttemptResult_.READY_WAITING_FOR_PREVIEW;
       }
-      assert(this.printTicketStore_.isTicketValid(),
+      assert(
+          this.printTicketStore_.isTicketValid(),
           'Trying to print with invalid ticket');
       if (getIsVisible(this.moreSettings_.getElement())) {
         new print_preview.PrintSettingsUiMetricsContext().record(
             this.moreSettings_.isExpanded ?
-                print_preview.Metrics.PrintSettingsUiBucket.
-                    PRINT_WITH_SETTINGS_EXPANDED :
-                print_preview.Metrics.PrintSettingsUiBucket.
-                    PRINT_WITH_SETTINGS_COLLAPSED);
+                print_preview.Metrics.PrintSettingsUiBucket
+                    .PRINT_WITH_SETTINGS_EXPANDED :
+                print_preview.Metrics.PrintSettingsUiBucket
+                    .PRINT_WITH_SETTINGS_COLLAPSED);
       }
-      this.nativeLayer_.startPrint(
-          assert(this.destinationStore_.selectedDestination),
-          this.printTicketStore_,
-          this.cloudPrintInterface_,
+      var destination = assert(this.destinationStore_.selectedDestination);
+      var whenPrintDone = this.nativeLayer_.print(
+          destination, this.printTicketStore_, this.cloudPrintInterface_,
           this.documentInfo_,
           this.uiState_ == PrintPreviewUiState_.OPENING_PDF_PREVIEW,
           this.showSystemDialogBeforeNextPrint_);
+      if (this.uiState_ == PrintPreviewUiState_.OPENING_PDF_PREVIEW ||
+          (destination.isLocal && !destination.isPrivet &&
+           !destination.isExtension &&
+           destination.id !=
+               print_preview.Destination.GooglePromotedId.SAVE_AS_PDF)) {
+        // Local printers resolve when print is ready to start. Hide the
+        // dialog. Mac "Open in Preview" is treated as a local printer.
+        var boundHideDialog = function() {
+          this.nativeLayer_.hidePreview();
+        }.bind(this);
+        whenPrintDone.then(boundHideDialog, boundHideDialog);
+      } else if (!destination.isLocal) {
+        // Cloud print resolves when print data is returned to submit to cloud
+        // print, or if setings are invalid.
+        whenPrintDone.then(
+            this.onPrintToCloud_.bind(this),
+            this.onSettingsInvalid_.bind(this));
+      } else if (destination.isPrivet || destination.isExtension) {
+        // Privet and extension resolve when printing is complete or if there
+        // is an error printing.
+        whenPrintDone.then(
+            this.close_.bind(this, false),
+            this.onPrintFailed_.bind(this));
+      } else {
+        assert(
+            destination.id ==
+            print_preview.Destination.GooglePromotedId.SAVE_AS_PDF);
+        // Save as PDF resolves when file selection is completed or cancelled.
+        whenPrintDone.then(
+            this.onFileSelectionComplete_.bind(this),
+            this.onFileSelectionCancel_.bind(this));
+      }
+
       this.showSystemDialogBeforeNextPrint_ = false;
       return print_preview.PrintAttemptResult_.PRINTED;
     },
 
     /**
      * Closes the print preview.
+     * @param {boolean} isCancel Whether this was called due to the user
+     *     closing the dialog without printing.
      * @private
      */
-    close_: function() {
+    close_: function(isCancel) {
       this.exitDocument();
       this.uiState_ = PrintPreviewUiState_.CLOSING;
-      this.nativeLayer_.startCloseDialog();
+      this.nativeLayer_.dialogClose(isCancel);
     },
 
     /**
@@ -635,7 +638,7 @@ cr.define('print_preview', function() {
       setIsVisible(getRequiredElement('system-dialog-throbber'), true);
       this.setIsEnabled_(false);
       this.uiState_ = PrintPreviewUiState_.OPENING_NATIVE_PRINT_DIALOG;
-      this.nativeLayer_.startShowSystemDialog();
+      this.nativeLayer_.showSystemDialog();
     },
 
     /**
@@ -647,9 +650,10 @@ cr.define('print_preview', function() {
      * @private
      */
     onInitialSettingsSet_: function(settings) {
-      assert(this.uiState_ == PrintPreviewUiState_.INITIALIZING,
-             'Updating initial settings when not in initializing state: ' +
-                 this.uiState_);
+      assert(
+          this.uiState_ == PrintPreviewUiState_.INITIALIZING,
+          'Updating initial settings when not in initializing state: ' +
+              this.uiState_);
       this.uiState_ = PrintPreviewUiState_.READY;
 
       this.isInKioskAutoPrintMode_ = settings.isInKioskAutoPrintMode;
@@ -658,41 +662,37 @@ cr.define('print_preview', function() {
       // The following components must be initialized in this order.
       this.appState_.init(settings.serializedAppStateStr);
       this.documentInfo_.init(
-          settings.isDocumentModifiable,
-          settings.documentTitle,
+          settings.isDocumentModifiable, settings.documentTitle,
           settings.documentHasSelection);
       this.printTicketStore_.init(
-          settings.thousandsDelimeter,
-          settings.decimalDelimeter,
-          settings.unitType,
-          settings.selectionOnly);
+          settings.thousandsDelimeter, settings.decimalDelimeter,
+          settings.unitType, settings.selectionOnly);
       this.destinationStore_.init(
-          settings.isInAppKioskMode,
-          settings.systemDefaultDestinationId,
+          settings.isInAppKioskMode, settings.systemDefaultDestinationId,
           settings.serializedDefaultDestinationSelectionRulesStr);
       this.appState_.setInitialized();
 
       $('document-title').innerText = settings.documentTitle;
       this.hideSystemDialogLink_ = settings.isInAppKioskMode;
       if ($('system-dialog-link')) {
-        setIsVisible(getRequiredElement('system-dialog-link'),
-                     this.shouldShowSystemDialogLink_());
+        setIsVisible(
+            getRequiredElement('system-dialog-link'),
+            this.shouldShowSystemDialogLink_());
       }
     },
 
     /**
-     * Calls when the native layer enables Google Cloud Print integration.
+     * Called when Google Cloud Print integration is enabled by the
+     * PrintPreviewHandler.
      * Fetches the user's cloud printers.
-     * @param {Event} event Contains the base URL of the Google Cloud Print
-     *     service.
+     * @param {string} cloudPrintUrl The URL to use for cloud print servers.
+     * @param {boolean} appKioskMode Whether to print automatically for kiosk
+     *     mode.
      * @private
      */
-    onCloudPrintEnable_: function(event) {
+    onCloudPrintEnable_: function(cloudPrintUrl, appKioskMode) {
       this.cloudPrintInterface_ = new cloudprint.CloudPrintInterface(
-          event.baseCloudPrintUrl,
-          this.nativeLayer_,
-          this.userInfo_,
-          event.appKioskMode);
+          cloudPrintUrl, this.nativeLayer_, this.userInfo_, appKioskMode);
       this.tracker.add(
           this.cloudPrintInterface_,
           cloudprint.CloudPrintInterfaceEventType.SUBMIT_DONE,
@@ -720,21 +720,21 @@ cr.define('print_preview', function() {
 
     /**
      * Called from the native layer when ready to print to Google Cloud Print.
-     * @param {Event} event Contains the body to send in the HTTP request.
+     * @param {string} data The body to send in the HTTP request.
      * @private
      */
-    onPrintToCloud_: function(event) {
-      assert(this.uiState_ == PrintPreviewUiState_.PRINTING,
-             'Document ready to be sent to the cloud when not in printing ' +
-                 'state: ' + this.uiState_);
-      assert(this.cloudPrintInterface_ != null,
-             'Google Cloud Print is not enabled');
+    onPrintToCloud_: function(data) {
+      assert(
+          this.uiState_ == PrintPreviewUiState_.PRINTING,
+          'Document ready to be sent to the cloud when not in printing ' +
+              'state: ' + this.uiState_);
+      assert(
+          this.cloudPrintInterface_ != null,
+          'Google Cloud Print is not enabled');
       assert(this.destinationStore_.selectedDestination != null);
       this.cloudPrintInterface_.submit(
-          this.destinationStore_.selectedDestination,
-          this.printTicketStore_,
-          this.documentInfo_,
-          event.data);
+          this.destinationStore_.selectedDestination, this.printTicketStore_,
+          this.documentInfo_, data);
     },
 
     /**
@@ -743,9 +743,10 @@ cr.define('print_preview', function() {
      * @private
      */
     onFileSelectionCancel_: function() {
-      assert(this.uiState_ == PrintPreviewUiState_.FILE_SELECTION,
-             'File selection cancelled when not in file-selection state: ' +
-                 this.uiState_);
+      assert(
+          this.uiState_ == PrintPreviewUiState_.FILE_SELECTION,
+          'File selection cancelled when not in file-selection state: ' +
+              this.uiState_);
       this.setIsEnabled_(true);
       this.uiState_ = PrintPreviewUiState_.READY;
     },
@@ -755,9 +756,10 @@ cr.define('print_preview', function() {
      * @private
      */
     onFileSelectionComplete_: function() {
-      assert(this.uiState_ == PrintPreviewUiState_.FILE_SELECTION,
-             'File selection completed when not in file-selection state: ' +
-                 this.uiState_);
+      assert(
+          this.uiState_ == PrintPreviewUiState_.FILE_SELECTION,
+          'File selection completed when not in file-selection state: ' +
+              this.uiState_);
       this.previewArea_.showCustomMessage(
           loadTimeData.getString('printingToPDFInProgress'));
       this.uiState_ = PrintPreviewUiState_.PRINTING;
@@ -769,10 +771,11 @@ cr.define('print_preview', function() {
      * @private
      */
     onCloudPrintSubmitDone_: function(event) {
-      assert(this.uiState_ == PrintPreviewUiState_.PRINTING,
-             'Submited job to Google Cloud Print but not in printing state ' +
-                 this.uiState_);
-      this.close_();
+      assert(
+          this.uiState_ == PrintPreviewUiState_.PRINTING,
+          'Submited job to Google Cloud Print but not in printing state ' +
+              this.uiState_);
+      this.close_(false);
     },
 
     /**
@@ -783,7 +786,7 @@ cr.define('print_preview', function() {
      */
     onCloudPrintError_: function(event) {
       if (event.status == 0) {
-        return; // Ignore, the system does not have internet connectivity.
+        return;  // Ignore, the system does not have internet connectivity.
       }
       if (event.status == 403) {
         if (!this.isInAppKioskMode_) {
@@ -793,8 +796,9 @@ cr.define('print_preview', function() {
         this.printHeader_.setErrorMessage(event.message);
       }
       if (event.status == 200) {
-        console.error('Google Cloud Print Error: (' + event.errorCode + ') ' +
-                      event.message);
+        console.error(
+            'Google Cloud Print Error: (' + event.errorCode + ') ' +
+            event.message);
       } else {
         console.error('Google Cloud Print Error: HTTP status ' + event.status);
       }
@@ -815,7 +819,8 @@ cr.define('print_preview', function() {
     onPreviewGenerationDone_: function() {
       this.isPreviewGenerationInProgress_ = false;
       this.printHeader_.isPrintButtonEnabled = true;
-      this.nativeLayer_.previewReadyForTest();
+      if (this.isListeningForManipulateSettings_)
+        this.nativeLayer_.uiLoadedForTest();
       this.printIfReady_();
     },
 
@@ -827,7 +832,7 @@ cr.define('print_preview', function() {
       this.isPreviewGenerationInProgress_ = false;
       this.printHeader_.isPrintButtonEnabled = false;
       if (this.uiState_ == PrintPreviewUiState_.PRINTING)
-        this.nativeLayer_.startCancelPendingPrint();
+        this.nativeLayer_.cancelPendingPrintRequest();
     },
 
     /**
@@ -838,9 +843,10 @@ cr.define('print_preview', function() {
     onOpenPdfInPreviewLinkClick_: function() {
       if ($('open-pdf-in-preview-link').classList.contains('disabled'))
         return;
-      assert(this.uiState_ == PrintPreviewUiState_.READY,
-             'Trying to open pdf in preview when not in ready state: ' +
-                 this.uiState_);
+      assert(
+          this.uiState_ == PrintPreviewUiState_.READY,
+          'Trying to open pdf in preview when not in ready state: ' +
+              this.uiState_);
       setIsVisible(getRequiredElement('open-preview-app-throbber'), true);
       this.previewArea_.showCustomMessage(
           loadTimeData.getString('openingPDFInPreview'));
@@ -853,8 +859,9 @@ cr.define('print_preview', function() {
      * @private
      */
     onPrintButtonClick_: function() {
-      assert(this.uiState_ == PrintPreviewUiState_.READY,
-             'Trying to print when not in ready state: ' + this.uiState_);
+      assert(
+          this.uiState_ == PrintPreviewUiState_.READY,
+          'Trying to print when not in ready state: ' + this.uiState_);
       this.printDocumentOrOpenPdfPreview_(false /*isPdfPreview*/);
     },
 
@@ -864,18 +871,18 @@ cr.define('print_preview', function() {
      * @private
      */
     onCancelButtonClick_: function() {
-      this.close_();
+      this.close_(true);
     },
 
     /**
      * Called when the register promo for Cloud Print is clicked.
      * @private
      */
-     onCloudPrintRegisterPromoClick_: function(e) {
-       var devicesUrl = 'chrome://devices/register?id=' + e.destination.id;
-       this.nativeLayer_.startForceOpenNewTab(devicesUrl);
-       this.destinationStore_.waitForRegister(e.destination.id);
-     },
+    onCloudPrintRegisterPromoClick_: function(e) {
+      var devicesUrl = 'chrome://devices/register?id=' + e.destination.id;
+      this.nativeLayer_.forceOpenNewTab(devicesUrl);
+      this.destinationStore_.waitForRegister(e.destination.id);
+    },
 
     /**
      * Consume escape key presses and ctrl + shift + p. Delegate everything else
@@ -892,7 +899,7 @@ cr.define('print_preview', function() {
         // On non-mac with toolkit-views, ESC key is handled by C++-side instead
         // of JS-side.
         if (cr.isMac) {
-          this.close_();
+          this.close_(true);
           e.preventDefault();
         }
         return;
@@ -900,7 +907,7 @@ cr.define('print_preview', function() {
 
       // On Mac, Cmd-. should close the print dialog.
       if (cr.isMac && e.keyCode == 190 && e.metaKey) {
-        this.close_();
+        this.close_(true);
         e.preventDefault();
         return;
       }
@@ -920,7 +927,8 @@ cr.define('print_preview', function() {
           this.destinationStore_.selectedDestination &&
           this.printTicketStore_.isTicketValid() &&
           this.printHeader_.isPrintButtonEnabled) {
-        assert(this.uiState_ == PrintPreviewUiState_.READY,
+        assert(
+            this.uiState_ == PrintPreviewUiState_.READY,
             'Trying to print when not in ready state: ' + this.uiState_);
         var activeElementTag = document.activeElement.tagName.toUpperCase();
         if (activeElementTag != 'BUTTON' && activeElementTag != 'SELECT' &&
@@ -943,9 +951,6 @@ cr.define('print_preview', function() {
       this.uiState_ = PrintPreviewUiState_.ERROR;
       this.isPreviewGenerationInProgress_ = false;
       this.printHeader_.isPrintButtonEnabled = false;
-      this.previewArea_.cancelTimeout();
-      this.previewArea_.showCustomMessage(
-          loadTimeData.getString('invalidPrinterSettings'));
     },
 
     /**
@@ -973,7 +978,7 @@ cr.define('print_preview', function() {
      * @private
      */
     onManageCloudDestinationsActivated_: function() {
-      this.nativeLayer_.startManageCloudDestinations(this.userInfo_.activeUser);
+      this.nativeLayer_.manageCloudPrinters(this.userInfo_.activeUser);
     },
 
     /**
@@ -982,7 +987,7 @@ cr.define('print_preview', function() {
      * @private
      */
     onManageLocalDestinationsActivated_: function() {
-      this.nativeLayer_.startManageLocalDestinations();
+      this.nativeLayer_.manageLocalPrinters();
     },
 
     /**
@@ -993,66 +998,80 @@ cr.define('print_preview', function() {
      * @private
      */
     onCloudPrintSignInActivated_: function(addAccount) {
-      this.nativeLayer_.startCloudPrintSignIn(addAccount);
+      this.nativeLayer_.signIn(addAccount)
+          .then(this.destinationStore_.onDestinationsReload.bind(
+              this.destinationStore_));
     },
 
     /**
      * Updates printing options according to source document presets.
-     * @param {Event} event Contains options from source document.
+     * @param {boolean} disableScaling Whether the document disables scaling.
+     * @param {number} copies The default number of copies from the document.
+     * @param {number} duplex The default duplex setting from the document.
      * @private
      */
-    onPrintPresetOptionsFromDocument_: function(event) {
-      if (event.optionsFromDocument.disableScaling)
+    onPrintPresetOptionsFromDocument_: function(
+        disableScaling, copies, duplex) {
+      if (disableScaling)
         this.documentInfo_.updateIsScalingDisabled(true);
 
-      if (event.optionsFromDocument.copies > 0 &&
-          this.printTicketStore_.copies.isCapabilityAvailable()) {
-        this.printTicketStore_.copies.updateValue(
-            event.optionsFromDocument.copies);
+      if (copies > 0 && this.printTicketStore_.copies.isCapabilityAvailable()) {
+        this.printTicketStore_.copies.updateValue(copies);
       }
 
-      if (event.optionsFromDocument.duplex >= 0 &&
-          this.printTicketStore_.duplex.isCapabilityAvailable()) {
-        this.printTicketStore_.duplex.updateValue(
-            event.optionsFromDocument.duplex);
+      if (duplex >= 0 & this.printTicketStore_.duplex.isCapabilityAvailable()) {
+        this.printTicketStore_.duplex.updateValue(duplex);
       }
     },
 
     /**
      * Called when the Page Count Ready message is received to update the fit to
      * page scaling value in the scaling settings.
-     * @param {Event} event Event object representing the page count ready
-     *     message
+     * @param {number} pageCount The document's page count (unused).
+     * @param {number} previewResponseId The request ID that corresponds to this
+     *     page count (unused).
+     * @param {number} fitToPageScaling The scaling required to fit the document
+     *     to page.
      * @private
      */
-    onPageCountReady_: function(event) {
-      if (event.fitToPageScaling >= 0) {
-        this.scalingSettings_.updateFitToPageScaling(
-              event.fitToPageScaling);
+    onPageCountReady_: function(
+        pageCount, previewResponseId, fitToPageScaling) {
+      if (fitToPageScaling >= 0) {
+        this.scalingSettings_.updateFitToPageScaling(fitToPageScaling);
       }
     },
 
     /**
-     * Called when privet printing fails.
-     * @param {Event} event Event object representing the failure.
+     * Called when printing to a privet or extension printer fails.
+     * @param {*} httpError The HTTP error code, or -1 or a string describing
+     *     the error, if not an HTTP error.
      * @private
      */
-    onPrivetPrintFailed_: function(event) {
-      console.error('Privet printing failed with error code ' +
-                    event.httpError);
+    onPrintFailed_: function(httpError) {
+      console.error('Privet printing failed with error code ' + httpError);
       this.printHeader_.setErrorMessage(
           loadTimeData.getString('couldNotPrint'));
     },
 
     /**
+     * Called to start listening for the manipulate-settings-for-test WebUI
+     * event so that settings can be modified by this event.
+     * @private
+     */
+    onEnableManipulateSettingsForTest_: function() {
+      this.listenerTracker.add(
+          'manipulate-settings-for-test',
+          this.onManipulateSettingsForTest_.bind(this));
+      this.isListeningForManipulateSettings_ = true;
+    },
+
+    /**
      * Called when the print preview settings need to be changed for testing.
-     * @param {Event} event Event object that contains the option that is to
-     *     be changed and what to set that option.
+     * @param {!print_preview.PreviewSettings} settings Contains print preview
+     *     settings to change and the values to change them to.
      * @private
      */
-    onManipulateSettingsForTest_: function(event) {
-      var settings =
-          /** @type {print_preview.PreviewSettings} */(event.settings);
+    onManipulateSettingsForTest_: function(settings) {
       if ('selectSaveAsPdfDestination' in settings) {
         this.saveAsPdfForTest_();  // No parameters.
       } else if ('layoutSettings' in settings) {
@@ -1077,8 +1096,8 @@ cr.define('print_preview', function() {
     saveAsPdfForTest_: function() {
       if (this.destinationStore_.selectedDestination &&
           print_preview.Destination.GooglePromotedId.SAVE_AS_PDF ==
-          this.destinationStore_.selectedDestination.id) {
-        this.nativeLayer_.previewReadyForTest();
+              this.destinationStore_.selectedDestination.id) {
+        this.nativeLayer_.uiLoadedForTest();
         return;
       }
 
@@ -1095,7 +1114,7 @@ cr.define('print_preview', function() {
       if (pdfDestination)
         this.destinationStore_.selectDestination(pdfDestination);
       else
-        this.nativeLayer_.previewFailedForTest();
+        this.nativeLayer_.uiFailedLoadingForTest();
     },
 
     /**
@@ -1108,7 +1127,7 @@ cr.define('print_preview', function() {
     setLayoutSettingsForTest_: function(portrait) {
       var combobox = document.querySelector('.layout-settings-select');
       if (combobox.value == 'portrait') {
-        this.nativeLayer_.previewReadyForTest();
+        this.nativeLayer_.uiLoadedForTest();
       } else {
         combobox.value = 'landscape';
         this.layoutSettings_.onSelectChange_();
@@ -1125,7 +1144,7 @@ cr.define('print_preview', function() {
     setPageRangeForTest_: function(pageRange) {
       var textbox = document.querySelector('.page-settings-custom-input');
       if (textbox.value == pageRange) {
-        this.nativeLayer_.previewReadyForTest();
+        this.nativeLayer_.uiLoadedForTest();
       } else {
         textbox.value = pageRange;
         document.querySelector('.page-settings-custom-radio').click();
@@ -1142,7 +1161,7 @@ cr.define('print_preview', function() {
     setHeadersAndFootersForTest_: function(headersAndFooters) {
       var checkbox = document.querySelector('.header-footer-checkbox');
       if (headersAndFooters == checkbox.checked)
-        this.nativeLayer_.previewReadyForTest();
+        this.nativeLayer_.uiLoadedForTest();
       else
         checkbox.click();
     },
@@ -1157,7 +1176,7 @@ cr.define('print_preview', function() {
     setBackgroundColorsAndImagesForTest_: function(backgroundColorsAndImages) {
       var checkbox = document.querySelector('.css-background-checkbox');
       if (backgroundColorsAndImages == checkbox.checked)
-        this.nativeLayer_.previewReadyForTest();
+        this.nativeLayer_.uiLoadedForTest();
       else
         checkbox.click();
     },
@@ -1172,12 +1191,12 @@ cr.define('print_preview', function() {
     setMarginsForTest_: function(margins) {
       var combobox = document.querySelector('.margin-settings-select');
       if (margins == combobox.selectedIndex) {
-        this.nativeLayer_.previewReadyForTest();
+        this.nativeLayer_.uiLoadedForTest();
       } else if (margins >= 0 && margins < combobox.length) {
         combobox.selectedIndex = margins;
         this.marginSettings_.onSelectChange_();
       } else {
-        this.nativeLayer_.previewFailedForTest();
+        this.nativeLayer_.uiFailedLoadingForTest();
       }
     },
 
@@ -1193,9 +1212,9 @@ cr.define('print_preview', function() {
         return true;
       var selectedDest = this.destinationStore_.selectedDestination;
       return !!selectedDest &&
-             selectedDest.origin == print_preview.DestinationOrigin.LOCAL &&
-             selectedDest.id !=
-                 print_preview.Destination.GooglePromotedId.SAVE_AS_PDF;
+          selectedDest.origin == print_preview.DestinationOrigin.LOCAL &&
+          selectedDest.id !=
+          print_preview.Destination.GooglePromotedId.SAVE_AS_PDF;
     },
 
     /**
@@ -1205,8 +1224,9 @@ cr.define('print_preview', function() {
      */
     onDestinationSelect_: function() {
       if ($('system-dialog-link')) {
-        setIsVisible(getRequiredElement('system-dialog-link'),
-                     this.shouldShowSystemDialogLink_());
+        setIsVisible(
+            getRequiredElement('system-dialog-link'),
+            this.shouldShowSystemDialogLink_());
       }
       // Reset if we had a bad settings fetch since the user selected a new
       // printer.
@@ -1225,15 +1245,13 @@ cr.define('print_preview', function() {
      * @private
      */
     onDestinationSearchDone_: function() {
-      var isPromoVisible = cr.isChromeOS &&
-          this.cloudPrintInterface_ &&
-          this.userInfo_.activeUser &&
-          !this.appState_.isGcpPromoDismissed &&
+      var isPromoVisible = cr.isChromeOS && this.cloudPrintInterface_ &&
+          this.userInfo_.activeUser && !this.appState_.isGcpPromoDismissed &&
           !this.destinationStore_.isLocalDestinationSearchInProgress &&
           !this.destinationStore_.isCloudDestinationSearchInProgress &&
           this.destinationStore_.hasOnlyDefaultCloudDestinations();
-      setIsVisible(this.getChildElement('#no-destinations-promo'),
-                   isPromoVisible);
+      setIsVisible(
+          this.getChildElement('#no-destinations-promo'), isPromoVisible);
       if (isPromoVisible) {
         new print_preview.GcpPromoMetricsContext().record(
             print_preview.Metrics.GcpPromoBucket.PROMO_SHOWN);
@@ -1261,16 +1279,15 @@ cr.define('print_preview', function() {
       new print_preview.GcpPromoMetricsContext().record(
           print_preview.Metrics.GcpPromoBucket.PROMO_CLICKED);
       this.appState_.persistIsGcpPromoDismissed(true);
-      window.open(this.cloudPrintInterface_.baseUrl + '?user=' +
-                  this.userInfo_.activeUser + '#printers');
-      this.close_();
+      window.open(
+          this.cloudPrintInterface_.baseUrl +
+          '?authuser=' + this.userInfo_.activeUser + '#printers');
+      this.close_(false);
     }
   };
 
   // Export
-  return {
-    PrintPreview: PrintPreview
-  };
+  return {PrintPreview: PrintPreview};
 });
 
 // Pull in all other scripts in a single shot.
diff --git a/chromium/chrome/browser/resources/print_preview/print_preview_animations.js b/chromium/chrome/browser/resources/print_preview/print_preview_animations.js
index d931694e1ce..86ead3a16b1 100644
--- a/chromium/chrome/browser/resources/print_preview/print_preview_animations.js
+++ b/chromium/chrome/browser/resources/print_preview/print_preview_animations.js
@@ -10,8 +10,7 @@ var animationEventTracker = new EventTracker();
 function addAnimation(code) {
   var name = 'anim' + animationCounter;
   animationCounter++;
-  var rules = document.createTextNode(
-      '@keyframes ' + name + ' {' + code + '}');
+  var rules = document.createTextNode('@keyframes ' + name + ' {' + code + '}');
   var el = document.createElement('style');
   el.type = 'text/css';
   el.appendChild(rules);
@@ -110,7 +109,7 @@ function onFadeInAnimationEnd(event) {
  */
 function fadeInAnimationCleanup(element) {
   if (element.style.animationName) {
-    var animEl = document.getElementById(element.style.animationName);
+    var animEl = $(element.style.animationName);
     if (animEl)
       animEl.parentNode.removeChild(animEl);
     element.style.animationName = '';
@@ -130,11 +129,11 @@ function fadeInOption(el, opt_justShow) {
   // To make the option visible during the first fade in.
   el.hidden = false;
 
-  var leftColumn = assertInstanceof(el.querySelector('.left-column'),
-                                    HTMLElement);
+  var leftColumn =
+      assertInstanceof(el.querySelector('.left-column'), HTMLElement);
   wrapContentsInDiv(leftColumn, ['invisible']);
-  var rightColumn = assertInstanceof(el.querySelector('.right-column'),
-                                     HTMLElement);
+  var rightColumn =
+      assertInstanceof(el.querySelector('.right-column'), HTMLElement);
   wrapContentsInDiv(rightColumn, ['invisible']);
 
   var toAnimate = el.querySelectorAll('.collapsible');
@@ -153,11 +152,11 @@ function fadeOutOption(el, opt_justHide) {
   if (!el.classList.contains('visible'))
     return;
 
-  var leftColumn = assertInstanceof(el.querySelector('.left-column'),
-                                    HTMLElement);
+  var leftColumn =
+      assertInstanceof(el.querySelector('.left-column'), HTMLElement);
   wrapContentsInDiv(leftColumn, ['visible']);
-  var rightColumn = assertInstanceof(el.querySelector('.right-column'),
-                                     HTMLElement);
+  var rightColumn =
+      assertInstanceof(el.querySelector('.right-column'), HTMLElement);
   if (rightColumn)
     wrapContentsInDiv(rightColumn, ['visible']);
 
diff --git a/chromium/chrome/browser/resources/print_preview/print_preview_focus_manager.js b/chromium/chrome/browser/resources/print_preview/print_preview_focus_manager.js
index 921b53ad585..47bb04b81d1 100644
--- a/chromium/chrome/browser/resources/print_preview/print_preview_focus_manager.js
+++ b/chromium/chrome/browser/resources/print_preview/print_preview_focus_manager.js
@@ -11,8 +11,7 @@ cr.define('print_preview', function() {
    * @constructor
    * @extends {cr.ui.FocusManager}
    */
-  function PrintPreviewFocusManager() {
-  }
+  function PrintPreviewFocusManager() {}
 
   cr.addSingletonGetter(PrintPreviewFocusManager);
 
@@ -30,7 +29,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    PrintPreviewFocusManager: PrintPreviewFocusManager
-  };
+  return {PrintPreviewFocusManager: PrintPreviewFocusManager};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/print_preview_utils.js b/chromium/chrome/browser/resources/print_preview/print_preview_utils.js
index 56e2813eaf6..7836ad7956d 100644
--- a/chromium/chrome/browser/resources/print_preview/print_preview_utils.js
+++ b/chromium/chrome/browser/resources/print_preview/print_preview_utils.js
@@ -46,10 +46,9 @@ function areRangesEqual(array1, array2) {
   if (array1.length != array2.length)
     return false;
   for (var i = 0; i < array1.length; i++)
-    if (array1[i].from != array2[i].from ||
-        array1[i].to != array2[i].to) {
-    return false;
-  }
+    if (array1[i].from != array2[i].from || array1[i].to != array2[i].to) {
+      return false;
+    }
   return true;
 }
 
@@ -73,11 +72,7 @@ function removeDuplicates(inArray) {
 }
 
 /** @enum {number} */
-var PageRangeStatus = {
-  NO_ERROR: 0,
-  SYNTAX_ERROR: -1,
-  LIMIT_ERROR: -2
-};
+var PageRangeStatus = {NO_ERROR: 0, SYNTAX_ERROR: -1, LIMIT_ERROR: -2};
 
 /**
  * Returns a list of ranges in |pageRangeText|. The ranges are
@@ -111,8 +106,8 @@ function pageRangeTextToPageRanges(pageRangeText, opt_totalPageCount) {
   }
 
   var MAX_PAGE_NUMBER = 1000000000;
-  var totalPageCount = opt_totalPageCount ? opt_totalPageCount :
-                                            MAX_PAGE_NUMBER;
+  var totalPageCount =
+      opt_totalPageCount ? opt_totalPageCount : MAX_PAGE_NUMBER;
 
   var regex = /^\s*([0-9]*)\s*-\s*([0-9]*)\s*$/;
   var parts = pageRangeText.split(/,/);
@@ -159,8 +154,8 @@ function pageRangeTextToPageList(pageRangeText, totalPageCount) {
   var pageList = [];
   if (pageRanges instanceof Array) {
     for (var i = 0; i < pageRanges.length; ++i) {
-      for (var j = pageRanges[i].from; j <= Math.min(pageRanges[i].to,
-                                                     totalPageCount); ++j) {
+      for (var j = pageRanges[i].from;
+           j <= Math.min(pageRanges[i].to, totalPageCount); ++j) {
         pageList.push(j);
       }
     }
@@ -183,7 +178,7 @@ function pageListToPageSet(pageList) {
     return pageSet;
   pageSet = pageList.slice(0);
   pageSet.sort(function(a, b) {
-    return /** @type {number} */(a) - /** @type {number} */(b);
+    return /** @type {number} */ (a) - /** @type {number} */ (b);
   });
   pageSet = removeDuplicates(pageSet);
   return pageSet;
@@ -240,6 +235,5 @@ function getStringForLocale(localizedStrings, locale) {
 function getStringForCurrentLocale(localizedStrings) {
   // First try to find an exact match and then look for the language only.
   return getStringForLocale(localizedStrings, navigator.language) ||
-         getStringForLocale(localizedStrings,
-                            navigator.language.split('-')[0]);
+      getStringForLocale(localizedStrings, navigator.language.split('-')[0]);
 }
diff --git a/chromium/chrome/browser/resources/print_preview/search/cloud_destination_list.js b/chromium/chrome/browser/resources/print_preview/search/cloud_destination_list.js
index 1b8d2aae693..7f0bcdd353d 100644
--- a/chromium/chrome/browser/resources/print_preview/search/cloud_destination_list.js
+++ b/chromium/chrome/browser/resources/print_preview/search/cloud_destination_list.js
@@ -14,9 +14,7 @@ cr.define('print_preview', function() {
    */
   function CloudDestinationList(eventTarget) {
     print_preview.DestinationList.call(
-        this,
-        eventTarget,
-        loadTimeData.getString('cloudDestinationsTitle'),
+        this, eventTarget, loadTimeData.getString('cloudDestinationsTitle'),
         loadTimeData.getString('manage'));
   }
 
@@ -30,13 +28,12 @@ cr.define('print_preview', function() {
       var docsId = print_preview.Destination.GooglePromotedId.DOCS;
       this.setActionLinkTextInternal(loadTimeData.getString(
           destinations.length == 1 && destinations[0].id == docsId ?
-              'setupCloudPrinters' : 'manage'));
+              'setupCloudPrinters' :
+              'manage'));
       print_preview.DestinationList.prototype.updateDestinations.call(
           this, destinations);
     }
   };
 
-  return {
-    CloudDestinationList: CloudDestinationList
-  };
+  return {CloudDestinationList: CloudDestinationList};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/search/destination_list.js b/chromium/chrome/browser/resources/print_preview/search/destination_list.js
index a668637e0d0..5d0d6664d91 100644
--- a/chromium/chrome/browser/resources/print_preview/search/destination_list.js
+++ b/chromium/chrome/browser/resources/print_preview/search/destination_list.js
@@ -145,10 +145,10 @@ cr.define('print_preview', function() {
       numItems = Math.min(numItems, this.destinations_.length);
       var headerHeight =
           this.getChildElement('.destination-list > header').offsetHeight;
-      return headerHeight + (numItems > 0 ?
-          numItems * DestinationList.HEIGHT_OF_ITEM_ :
-          // To account for "No destinations found" message.
-          DestinationList.HEIGHT_OF_ITEM_);
+      return headerHeight +
+          (numItems > 0 ? numItems * DestinationList.HEIGHT_OF_ITEM_ :
+                          // To account for "No destinations found" message.
+               DestinationList.HEIGHT_OF_ITEM_);
     },
 
     /**
@@ -181,8 +181,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     createDom: function() {
-      this.setElementInternal(this.cloneTemplateInternal(
-          'destination-list-template'));
+      this.setElementInternal(
+          this.cloneTemplateInternal('destination-list-template'));
       this.getChildElement('.title').textContent = this.title_;
       if (this.actionLinkLabel_) {
         var actionLinkEl = this.getChildElement('.action-link');
@@ -195,12 +195,10 @@ cr.define('print_preview', function() {
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
       this.tracker.add(
-          this.getChildElement('.action-link'),
-          'click',
+          this.getChildElement('.action-link'), 'click',
           this.onActionLinkClick_.bind(this));
       this.tracker.add(
-          this.getChildElement('.show-all-button'),
-          'click',
+          this.getChildElement('.show-all-button'), 'click',
           this.setIsShowAll.bind(this, true));
     },
 
@@ -232,7 +230,8 @@ cr.define('print_preview', function() {
     getDestinationItem: function(destinationId) {
       return this.listItems_.find(function(listItem) {
         return listItem.destination.id == destinationId;
-      }) || null;
+      }) ||
+          null;
     },
 
     /**
@@ -276,8 +275,9 @@ cr.define('print_preview', function() {
      */
     renderDestinationsList_: function(destinations) {
       // Update item counters, footers and other misc controls.
-      setIsVisible(this.getChildElement('.no-destinations-message'),
-                   destinations.length == 0);
+      setIsVisible(
+          this.getChildElement('.no-destinations-message'),
+          destinations.length == 0);
       setIsVisible(this.getChildElement('.destination-list > footer'), false);
       var numItems = destinations.length;
       if (destinations.length > this.shortListSize_ && !this.isShowAll_) {
@@ -309,7 +309,8 @@ cr.define('print_preview', function() {
       // We need to use activeElement instead of :focus selector, which doesn't
       // work in an inactive page. See crbug.com/723579.
       var focusedEl = listEl.contains(document.activeElement) ?
-          document.activeElement : null;
+          document.activeElement :
+          null;
       for (var i = 0; i < numItems; i++) {
         var destination = assert(destinations[i]);
         var listItem = visibleListItems[destination.id];
@@ -335,8 +336,8 @@ cr.define('print_preview', function() {
 
       var itemEl = listItem.getElement();
       // Preserve focused inner element, if there's one.
-      var focusedInnerEl = focusedEl && itemEl.contains(focusedEl) ?
-          focusedEl : null;
+      var focusedInnerEl =
+          focusedEl && itemEl.contains(focusedEl) ? focusedEl : null;
       if (focusedEl)
         itemEl.classList.add('moving');
       // Move it to the end of the list.
@@ -368,13 +369,11 @@ cr.define('print_preview', function() {
      * @private
      */
     onActionLinkClick_: function() {
-      cr.dispatchSimpleEvent(this,
-                             DestinationList.EventType.ACTION_LINK_ACTIVATED);
+      cr.dispatchSimpleEvent(
+          this, DestinationList.EventType.ACTION_LINK_ACTIVATED);
     }
   };
 
   // Export
-  return {
-    DestinationList: DestinationList
-  };
+  return {DestinationList: DestinationList};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/search/destination_list_item.js b/chromium/chrome/browser/resources/print_preview/search/destination_list_item.js
index acaa95b7f96..d925eef5bda 100644
--- a/chromium/chrome/browser/resources/print_preview/search/destination_list_item.js
+++ b/chromium/chrome/browser/resources/print_preview/search/destination_list_item.js
@@ -58,8 +58,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     createDom: function() {
-      this.setElementInternal(this.cloneTemplateInternal(
-          'destination-list-item-template'));
+      this.setElementInternal(
+          this.cloneTemplateInternal('destination-list-item-template'));
       this.updateUi_();
     },
 
@@ -70,8 +70,7 @@ cr.define('print_preview', function() {
       this.tracker.add(
           this.getElement(), 'keydown', this.onKeyDown_.bind(this));
       this.tracker.add(
-          this.getChildElement('.register-promo-button'),
-          'click',
+          this.getChildElement('.register-promo-button'), 'click',
           this.onRegisterPromoClicked_.bind(this));
     },
 
@@ -130,8 +129,7 @@ cr.define('print_preview', function() {
         this.onDestinationActivated_();
       } else {
         this.updateConfiguringMessage_(false);
-        setIsVisible(
-            this.getChildElement('.configuring-failed-text'), true);
+        setIsVisible(this.getChildElement('.configuring-failed-text'), true);
       }
     },
 
@@ -182,15 +180,14 @@ cr.define('print_preview', function() {
 
         var extensionIconEl = this.getChildElement('.extension-icon');
         extensionIconEl.style.backgroundImage = '-webkit-image-set(' +
-             'url(chrome://extension-icon/' +
-                  this.destination_.extensionId + '/24/1) 1x,' +
-             'url(chrome://extension-icon/' +
-                  this.destination_.extensionId + '/48/1) 2x)';
+            'url(chrome://extension-icon/' + this.destination_.extensionId +
+            '/24/1) 1x,' +
+            'url(chrome://extension-icon/' + this.destination_.extensionId +
+            '/48/1) 2x)';
         extensionIconEl.title = loadTimeData.getStringF(
-            'extensionDestinationIconTooltip',
-            this.destination_.extensionName);
+            'extensionDestinationIconTooltip', this.destination_.extensionName);
         extensionIconEl.onclick = this.onExtensionIconClicked_.bind(this);
-        extensionIconEl.onkeydown = /** @type {function(Event)} */(
+        extensionIconEl.onkeydown = /** @type {function(Event)} */ (
             this.onExtensionIconKeyDown_.bind(this));
       }
 
@@ -213,8 +210,7 @@ cr.define('print_preview', function() {
       if (cr.isChromeOS) {
         // Reset the configuring messages for CUPS printers.
         this.updateConfiguringMessage_(false);
-        setIsVisible(
-            this.getChildElement('.configuring-failed-text'), false);
+        setIsVisible(this.getChildElement('.configuring-failed-text'), false);
       }
     },
 
@@ -246,8 +242,7 @@ cr.define('print_preview', function() {
      * @private
      */
     updateConfiguringMessage_: function(show) {
-      setIsVisible(
-          this.getChildElement('.configuring-in-progress-text'), show);
+      setIsVisible(this.getChildElement('.configuring-in-progress-text'), show);
       this.getChildElement('.configuring-text-jumping-dots')
           .classList.toggle('jumping-dots', show);
     },
@@ -278,7 +273,7 @@ cr.define('print_preview', function() {
      */
     onDestinationActivated_: function() {
       if (this.destination_.connectionStatus !=
-              print_preview.DestinationConnectionStatus.UNREGISTERED) {
+          print_preview.DestinationConnectionStatus.UNREGISTERED) {
         var selectEvt = new Event(DestinationListItem.EventType.SELECT);
         selectEvt.destination = this.destination_;
         this.eventTarget_.dispatchEvent(selectEvt);
@@ -295,7 +290,8 @@ cr.define('print_preview', function() {
       if (!hasKeyModifiers(e)) {
         if (e.keyCode == 13) {
           var activeElementTag = document.activeElement ?
-              document.activeElement.tagName.toUpperCase() : '';
+              document.activeElement.tagName.toUpperCase() :
+              '';
           if (activeElementTag == 'LI') {
             e.stopPropagation();
             e.preventDefault();
@@ -310,8 +306,8 @@ cr.define('print_preview', function() {
      * @private
      */
     onRegisterPromoClicked_: function() {
-      var promoClickedEvent = new Event(
-          DestinationListItem.EventType.REGISTER_PROMO_CLICKED);
+      var promoClickedEvent =
+          new Event(DestinationListItem.EventType.REGISTER_PROMO_CLICKED);
       promoClickedEvent.destination = this.destination_;
       this.eventTarget_.dispatchEvent(promoClickedEvent);
     },
@@ -344,7 +340,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    DestinationListItem: DestinationListItem
-  };
+  return {DestinationListItem: DestinationListItem};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/search/destination_search.js b/chromium/chrome/browser/resources/print_preview/search/destination_search.js
index c791bf68d3d..741d3c5e547 100644
--- a/chromium/chrome/browser/resources/print_preview/search/destination_search.js
+++ b/chromium/chrome/browser/resources/print_preview/search/destination_search.js
@@ -24,44 +24,44 @@ cr.define('print_preview', function() {
 
     /**
      * Data store containing the destinations to search through.
-     * @type {!print_preview.DestinationStore}
-     * @private
+     * @private {!print_preview.DestinationStore}
      */
     this.destinationStore_ = destinationStore;
 
     /**
      * Data store holding printer sharing invitations.
-     * @type {!print_preview.InvitationStore}
-     * @private
+     * @private {!print_preview.InvitationStore}
      */
     this.invitationStore_ = invitationStore;
 
     /**
      * Event target that contains information about the logged in user.
-     * @type {!print_preview.UserInfo}
-     * @private
+     * @private {!print_preview.UserInfo}
      */
     this.userInfo_ = userInfo;
 
     /**
+     * Instance of native layer used to send metrics to C++ metrics handler.
+     * @private {!print_preview.NativeLayer}
+     */
+    this.nativeLayer_ = print_preview.NativeLayer.getInstance();
+
+    /**
      * Currently displayed printer sharing invitation.
-     * @type {print_preview.Invitation}
-     * @private
+     * @private {print_preview.Invitation}
      */
     this.invitation_ = null;
 
     /**
      * Used to record usage statistics.
-     * @type {!print_preview.DestinationSearchMetricsContext}
-     * @private
+     * @private {!print_preview.DestinationSearchMetricsContext}
      */
     this.metrics_ = new print_preview.DestinationSearchMetricsContext();
 
     /**
      * Whether or not a UMA histogram for the register promo being shown was
      * already recorded.
-     * @type {boolean}
-     * @private
+     * @private {boolean}
      */
     this.registerPromoShownMetricRecorded_ = false;
 
@@ -81,8 +81,7 @@ cr.define('print_preview', function() {
 
     /**
      * Search box used to search through the destination lists.
-     * @type {!print_preview.SearchBox}
-     * @private
+     * @private {!print_preview.SearchBox}
      */
     this.searchBox_ = new print_preview.SearchBox(
         loadTimeData.getString('searchBoxPlaceholder'));
@@ -90,28 +89,25 @@ cr.define('print_preview', function() {
 
     /**
      * Destination list containing recent destinations.
-     * @type {!print_preview.DestinationList}
-     * @private
+     * @private {!print_preview.DestinationList}
      */
     this.recentList_ = new print_preview.RecentDestinationList(this);
     this.addChild(this.recentList_);
 
     /**
      * Destination list containing local destinations.
-     * @type {!print_preview.DestinationList}
-     * @private
+     * @private {!print_preview.DestinationList}
      */
     this.localList_ = new print_preview.DestinationList(
-        this,
-        loadTimeData.getString('localDestinationsTitle'),
+        this, loadTimeData.getString('localDestinationsTitle'),
         loadTimeData.getBoolean('showLocalManageButton') ?
-            loadTimeData.getString('manage') : null);
+            loadTimeData.getString('manage') :
+            null);
     this.addChild(this.localList_);
 
     /**
      * Destination list containing cloud destinations.
-     * @type {!print_preview.DestinationList}
-     * @private
+     * @private {!print_preview.DestinationList}
      */
     this.cloudList_ = new print_preview.CloudDestinationList(this);
     this.addChild(this.cloudList_);
@@ -155,9 +151,7 @@ cr.define('print_preview', function() {
         if (getIsVisible(this.getChildElement('.cloudprint-promo'))) {
           this.metrics_.record(
               print_preview.Metrics.DestinationSearchBucket.SIGNIN_PROMPT);
-          chrome.send(
-              'metricsHandler:recordAction',
-              ['Signin_Impression_FromCloudPrint']);
+          this.nativeLayer_.recordAction('Signin_Impression_FromCloudPrint');
         }
         if (this.userInfo_.initialized)
           this.onUsersChanged_();
@@ -179,8 +173,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     onCancelInternal: function() {
-      this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
-          DESTINATION_CLOSED_UNCHANGED);
+      this.metrics_.record(print_preview.Metrics.DestinationSearchBucket
+                               .DESTINATION_CLOSED_UNCHANGED);
     },
 
     /** Shows the Google Cloud Print promotion banner. */
@@ -189,9 +183,7 @@ cr.define('print_preview', function() {
       if (this.getIsVisible()) {
         this.metrics_.record(
             print_preview.Metrics.DestinationSearchBucket.SIGNIN_PROMPT);
-        chrome.send(
-            'metricsHandler:recordAction',
-            ['Signin_Impression_FromCloudPrint']);
+        this.nativeLayer_.recordAction('Signin_Impression_FromCloudPrint');
       }
       this.reflowLists_();
     },
@@ -201,46 +193,38 @@ cr.define('print_preview', function() {
       print_preview.Overlay.prototype.enterDocument.call(this);
 
       this.tracker.add(
-          this.getChildElement('.account-select'),
-          'change',
+          this.getChildElement('.account-select'), 'change',
           this.onAccountChange_.bind(this));
 
       this.tracker.add(
-          this.getChildElement('.sign-in'),
-          'click',
+          this.getChildElement('.sign-in'), 'click',
           this.onSignInActivated_.bind(this));
 
       this.tracker.add(
-          this.getChildElement('.invitation-accept-button'),
-          'click',
+          this.getChildElement('.invitation-accept-button'), 'click',
           this.onInvitationProcessButtonClick_.bind(this, true /*accept*/));
       this.tracker.add(
-          this.getChildElement('.invitation-reject-button'),
-          'click',
+          this.getChildElement('.invitation-reject-button'), 'click',
           this.onInvitationProcessButtonClick_.bind(this, false /*accept*/));
 
       this.tracker.add(
-          this.getChildElement('.cloudprint-promo > .close-button'),
-          'click',
+          this.getChildElement('.cloudprint-promo > .close-button'), 'click',
           this.onCloudprintPromoCloseButtonClick_.bind(this));
       this.tracker.add(
-          this.searchBox_,
-          print_preview.SearchBox.EventType.SEARCH,
+          this.searchBox_, print_preview.SearchBox.EventType.SEARCH,
           this.onSearch_.bind(this));
       this.tracker.add(
-          this,
-          print_preview.DestinationListItem.EventType.CONFIGURE_REQUEST,
+          this, print_preview.DestinationListItem.EventType.CONFIGURE_REQUEST,
           this.onDestinationConfigureRequest_.bind(this));
       this.tracker.add(
-          this,
-          print_preview.DestinationListItem.EventType.SELECT,
+          this, print_preview.DestinationListItem.EventType.SELECT,
           this.onDestinationSelect_.bind(this));
       this.tracker.add(
           this,
           print_preview.DestinationListItem.EventType.REGISTER_PROMO_CLICKED,
           function() {
-            this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
-                REGISTER_PROMO_SELECTED);
+            this.metrics_.record(print_preview.Metrics.DestinationSearchBucket
+                                     .REGISTER_PROMO_SELECTED);
           }.bind(this));
 
       this.tracker.add(
@@ -284,13 +268,11 @@ cr.define('print_preview', function() {
           this.onManageCloudDestinationsActivated_.bind(this));
 
       this.tracker.add(
-          this.userInfo_,
-          print_preview.UserInfo.EventType.USERS_CHANGED,
+          this.userInfo_, print_preview.UserInfo.EventType.USERS_CHANGED,
           this.onUsersChanged_.bind(this));
 
       this.tracker.add(
-          this.getChildElement('.button-strip .cancel-button'),
-          'click',
+          this.getChildElement('.button-strip .cancel-button'), 'click',
           this.cancel.bind(this));
 
       this.tracker.add(window, 'resize', this.onWindowResize_.bind(this));
@@ -308,8 +290,7 @@ cr.define('print_preview', function() {
       this.localList_.render(this.getChildElement('.local-list'));
       this.cloudList_.render(this.getChildElement('.cloud-list'));
       this.getChildElement('.promo-text').innerHTML = loadTimeData.getStringF(
-          'cloudPrintPromotion',
-          '<a is="action-link" class="sign-in">',
+          'cloudPrintPromotion', '<a is="action-link" class="sign-in">',
           '</a>');
       this.getChildElement('.account-select-label').textContent =
           loadTimeData.getString('accountSelectTitle');
@@ -371,7 +352,7 @@ cr.define('print_preview', function() {
           localDestinations.push(destination);
         } else {
           if (destination.connectionStatus ==
-                print_preview.DestinationConnectionStatus.UNREGISTERED) {
+              print_preview.DestinationConnectionStatus.UNREGISTERED) {
             unregisteredCloudDestinations.push(destination);
           } else {
             cloudDestinations.push(destination);
@@ -386,11 +367,13 @@ cr.define('print_preview', function() {
         this.registerPromoShownMetricRecorded_ = true;
       }
 
-      var finalCloudDestinations = unregisteredCloudDestinations.slice(
-        0, DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_).concat(
-          cloudDestinations,
-          unregisteredCloudDestinations.slice(
-            DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_));
+      var finalCloudDestinations =
+          unregisteredCloudDestinations
+              .slice(0, DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_)
+              .concat(
+                  cloudDestinations,
+                  unregisteredCloudDestinations.slice(
+                      DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_));
 
       this.recentList_.updateDestinations(recentDestinations);
       this.localList_.updateDestinations(localDestinations);
@@ -420,7 +403,9 @@ cr.define('print_preview', function() {
         }, 0);
       };
       var getCounts = function(lists, count) {
-        return lists.map(function(list) { return count; });
+        return lists.map(function(list) {
+          return count;
+        });
       };
 
       var availableHeight = this.getAvailableListsHeight_();
@@ -488,11 +473,12 @@ cr.define('print_preview', function() {
      */
     updateInvitations_: function() {
       var invitations = this.userInfo_.activeUser ?
-          this.invitationStore_.invitations(this.userInfo_.activeUser) : [];
+          this.invitationStore_.invitations(this.userInfo_.activeUser) :
+          [];
       if (invitations.length > 0) {
         if (this.invitation_ != invitations[0]) {
-          this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
-              INVITATION_AVAILABLE);
+          this.metrics_.record(print_preview.Metrics.DestinationSearchBucket
+                                   .INVITATION_AVAILABLE);
         }
         this.invitation_ = invitations[0];
         this.showInvitation_(this.invitation_);
@@ -512,14 +498,12 @@ cr.define('print_preview', function() {
       var invitationText = '';
       if (invitation.asGroupManager) {
         invitationText = loadTimeData.getStringF(
-            'groupPrinterSharingInviteText',
-            HTMLEscape(invitation.sender),
+            'groupPrinterSharingInviteText', HTMLEscape(invitation.sender),
             HTMLEscape(invitation.destination.displayName),
             HTMLEscape(invitation.receiver));
       } else {
         invitationText = loadTimeData.getStringF(
-            'printerSharingInviteText',
-            HTMLEscape(invitation.sender),
+            'printerSharingInviteText', HTMLEscape(invitation.sender),
             HTMLEscape(invitation.destination.displayName));
       }
       this.getChildElement('.invitation-text').innerHTML = invitationText;
@@ -556,7 +540,8 @@ cr.define('print_preview', function() {
         accountSelectEl.add(option);
 
         accountSelectEl.selectedIndex = this.userInfo_.activeUser ?
-            this.userInfo_.users.indexOf(this.userInfo_.activeUser) : -1;
+            this.userInfo_.users.indexOf(this.userInfo_.activeUser) :
+            -1;
       }
 
       setIsVisible(this.getChildElement('.user-info'), loggedIn);
@@ -591,10 +576,11 @@ cr.define('print_preview', function() {
       var destinationItem =
           (destination.isLocal ||
            destination.origin == print_preview.DestinationOrigin.DEVICE) ?
-               this.localList_.getDestinationItem(destination.id) :
-               this.cloudList_.getDestinationItem(destination.id);
-      assert(destinationItem != null,
-            'User does not select a valid destination item.');
+          this.localList_.getDestinationItem(destination.id) :
+          this.cloudList_.getDestinationItem(destination.id);
+      assert(
+          destinationItem != null,
+          'User does not select a valid destination item.');
 
       // Another printer setup is in process or the printer doesn't need to be
       // set up. Reject the setup request directly.
@@ -616,24 +602,26 @@ cr.define('print_preview', function() {
      * @private
      */
     handleConfigureDestination_: function(destination) {
-      assert(destination.origin == print_preview.DestinationOrigin.CROS,
-             'Only local printer on Chrome OS requires setup.');
+      assert(
+          destination.origin == print_preview.DestinationOrigin.CROS,
+          'Only local printer on Chrome OS requires setup.');
       this.destinationInConfiguring_ = destination;
-      this.destinationStore_.resolveCrosDestination(destination).then(
-          /**
-           * @param {!print_preview.PrinterSetupResponse} response
-           */
-          function(response) {
-            this.destinationInConfiguring_ = null;
-            this.localList_.getDestinationItem(destination.id)
-                .onConfigureResolved(response);
-          }.bind(this),
-          function() {
-            this.destinationInConfiguring_ = null;
-            this.localList_.getDestinationItem(destination.id)
-                .onConfigureResolved({printerId: destination.id,
-                                      success: false});
-          }.bind(this));
+      this.destinationStore_.resolveCrosDestination(destination)
+          .then(
+              /**
+               * @param {!print_preview.PrinterSetupResponse} response
+               */
+              function(response) {
+                this.destinationInConfiguring_ = null;
+                this.localList_.getDestinationItem(destination.id)
+                    .onConfigureResolved(response);
+              }.bind(this),
+              function() {
+                this.destinationInConfiguring_ = null;
+                this.localList_.getDestinationItem(destination.id)
+                    .onConfigureResolved(
+                        {printerId: destination.id, success: false});
+              }.bind(this));
     },
 
     /**
@@ -655,18 +643,20 @@ cr.define('print_preview', function() {
      */
     handleOnDestinationSelect_: function(destination) {
       if (destination.isProvisional) {
-        assert(!this.provisionalDestinationResolver_,
-               'Provisional destination resolver already exists.');
+        assert(
+            !this.provisionalDestinationResolver_,
+            'Provisional destination resolver already exists.');
         this.provisionalDestinationResolver_ =
             print_preview.ProvisionalDestinationResolver.create(
                 this.destinationStore_, destination);
-        assert(!!this.provisionalDestinationResolver_,
-               'Unable to create provisional destination resolver');
+        assert(
+            !!this.provisionalDestinationResolver_,
+            'Unable to create provisional destination resolver');
 
         var lastFocusedElement = document.activeElement;
         this.addChild(this.provisionalDestinationResolver_);
-        this.provisionalDestinationResolver_.run(this.getElement()).
-            then(
+        this.provisionalDestinationResolver_.run(this.getElement())
+            .then(
                 /**
                  * @param {!print_preview.Destination} resolvedDestination
                  *    Destination to which the provisional destination was
@@ -674,34 +664,31 @@ cr.define('print_preview', function() {
                  */
                 function(resolvedDestination) {
                   this.handleOnDestinationSelect_(resolvedDestination);
-                }.bind(this)).
-            catch(
-                function() {
-                  console.error('Failed to resolve provisional destination: ' +
-                                destination.id);
-                }).
-            then(
-                function() {
-                  this.removeChild(
-                      assert(this.provisionalDestinationResolver_));
-                  this.provisionalDestinationResolver_ = null;
-
-                  // Restore focus to the previosly focused element if it's
-                  // still shown in the search.
-                  if (lastFocusedElement &&
-                      this.getIsVisible() &&
-                      getIsVisible(lastFocusedElement) &&
-                      this.getElement().contains(lastFocusedElement)) {
-                    lastFocusedElement.focus();
-                  }
-                }.bind(this));
+                }.bind(this))
+            .catch(function() {
+              console.error(
+                  'Failed to resolve provisional destination: ' +
+                  destination.id);
+            })
+            .then(function() {
+              this.removeChild(assert(this.provisionalDestinationResolver_));
+              this.provisionalDestinationResolver_ = null;
+
+              // Restore focus to the previosly focused element if it's
+              // still shown in the search.
+              if (lastFocusedElement && this.getIsVisible() &&
+                  getIsVisible(lastFocusedElement) &&
+                  this.getElement().contains(lastFocusedElement)) {
+                lastFocusedElement.focus();
+              }
+            }.bind(this));
         return;
       }
 
       this.setIsVisible(false);
       this.destinationStore_.selectDestination(destination);
-      this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
-          DESTINATION_CLOSED_CHANGED);
+      this.metrics_.record(print_preview.Metrics.DestinationSearchBucket
+                               .DESTINATION_CLOSED_CHANGED);
     },
 
     /**
@@ -812,9 +799,11 @@ cr.define('print_preview', function() {
      * @private
      */
     onInvitationProcessButtonClick_: function(accept) {
-      this.metrics_.record(accept ?
-          print_preview.Metrics.DestinationSearchBucket.INVITATION_ACCEPTED :
-          print_preview.Metrics.DestinationSearchBucket.INVITATION_REJECTED);
+      this.metrics_.record(
+          accept ? print_preview.Metrics.DestinationSearchBucket
+                       .INVITATION_ACCEPTED :
+                   print_preview.Metrics.DestinationSearchBucket
+                       .INVITATION_REJECTED);
       this.invitationStore_.processInvitation(assert(this.invitation_), accept);
       this.updateInvitations_();
     },
@@ -839,7 +828,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    DestinationSearch: DestinationSearch
-  };
+  return {DestinationSearch: DestinationSearch};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/search/provisional_destination_resolver.js b/chromium/chrome/browser/resources/print_preview/search/provisional_destination_resolver.js
index 9eb9566e0ef..29dc741bcee 100644
--- a/chromium/chrome/browser/resources/print_preview/search/provisional_destination_resolver.js
+++ b/chromium/chrome/browser/resources/print_preview/search/provisional_destination_resolver.js
@@ -60,7 +60,7 @@ cr.define('print_preview', function() {
    */
   ProvisionalDestinationResolver.create = function(store, destination) {
     if (destination.provisionalType !=
-            print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION) {
+        print_preview.DestinationProvisionalType.NEEDS_USB_PERMISSION) {
       return null;
     }
     return new ProvisionalDestinationResolver(store, destination);
@@ -74,13 +74,10 @@ cr.define('print_preview', function() {
       print_preview.Overlay.prototype.enterDocument.call(this);
 
       this.tracker.add(
-          this.getChildElement('.usb-permission-ok-button'),
-          'click',
+          this.getChildElement('.usb-permission-ok-button'), 'click',
           this.startResolveDestination_.bind(this));
       this.tracker.add(
-          this.getChildElement('.cancel'),
-          'click',
-          this.cancel.bind(this));
+          this.getChildElement('.cancel'), 'click', this.cancel.bind(this));
 
       this.tracker.add(
           this.destinationStore_,
@@ -92,15 +89,17 @@ cr.define('print_preview', function() {
     /** @override */
     onSetVisibleInternal: function(visible) {
       if (visible) {
-        assert(this.state_ == print_preview.ResolverState.INITIAL,
-               'Showing overlay while not in initial state.');
+        assert(
+            this.state_ == print_preview.ResolverState.INITIAL,
+            'Showing overlay while not in initial state.');
         assert(!this.promiseResolver_, 'Promise resolver already set.');
         this.setState_(print_preview.ResolverState.ACTIVE);
         this.promiseResolver_ = new PromiseResolver();
         this.getChildElement('.default').focus();
       } else if (this.state_ != print_preview.ResolverState.DONE) {
-        assert(this.state_ != print_preview.ResolverState.INITIAL,
-              'Hiding in initial state');
+        assert(
+            this.state_ != print_preview.ResolverState.INITIAL,
+            'Hiding in initial state');
         this.setState_(print_preview.ResolverState.DONE);
         this.promiseResolver_.reject();
         this.promiseResolver_ = null;
@@ -109,8 +108,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     createDom: function() {
-      this.setElementInternal(this.cloneTemplateInternal(
-          'extension-usb-resolver'));
+      this.setElementInternal(
+          this.cloneTemplateInternal('extension-usb-resolver'));
 
       var extNameEl = this.getChildElement('.usb-permission-extension-name');
       extNameEl.title = this.destination_.extensionName;
@@ -118,10 +117,10 @@ cr.define('print_preview', function() {
 
       var extIconEl = this.getChildElement('.usb-permission-extension-icon');
       extIconEl.style.backgroundImage = '-webkit-image-set(' +
-          'url(chrome://extension-icon/' +
-               this.destination_.extensionId + '/24/1) 1x,' +
-          'url(chrome://extension-icon/' +
-               this.destination_.extensionId + '/48/1) 2x)';
+          'url(chrome://extension-icon/' + this.destination_.extensionId +
+          '/24/1) 1x,' +
+          'url(chrome://extension-icon/' + this.destination_.extensionId +
+          '/48/1) 2x)';
     },
 
     /**
@@ -129,8 +128,9 @@ cr.define('print_preview', function() {
      * @private
      */
     startResolveDestination_: function() {
-      assert(this.state_ == print_preview.ResolverState.ACTIVE,
-             'Invalid state in request grant permission');
+      assert(
+          this.state_ == print_preview.ResolverState.ACTIVE,
+          'Invalid state in request grant permission');
 
       this.setState_(print_preview.ResolverState.GRANTING_PERMISSION);
       this.destinationStore_.resolveProvisionalDestination(this.destination_);
@@ -187,18 +187,20 @@ cr.define('print_preview', function() {
       if (this.state_ != print_preview.ResolverState.ACTIVE)
         this.getChildElement('.cancel').focus();
 
-      this.getChildElement('.throbber-placeholder').classList.toggle(
-          'throbber',
-          this.state_ == print_preview.ResolverState.GRANTING_PERMISSION);
+      this.getChildElement('.throbber-placeholder')
+          .classList.toggle(
+              'throbber',
+              this.state_ == print_preview.ResolverState.GRANTING_PERMISSION);
 
       this.getChildElement('.usb-permission-extension-desc').hidden =
           this.state_ == print_preview.ResolverState.ERROR;
 
       this.getChildElement('.usb-permission-message').textContent =
           this.state_ == print_preview.ResolverState.ERROR ?
-              loadTimeData.getStringF('resolveExtensionUSBErrorMessage',
-                                      this.destination_.extensionName) :
-              loadTimeData.getString('resolveExtensionUSBPermissionMessage');
+          loadTimeData.getStringF(
+              'resolveExtensionUSBErrorMessage',
+              this.destination_.extensionName) :
+          loadTimeData.getString('resolveExtensionUSBPermissionMessage');
     },
 
     /**
@@ -217,7 +219,5 @@ cr.define('print_preview', function() {
     }
   };
 
-  return {
-    ProvisionalDestinationResolver: ProvisionalDestinationResolver
-  };
+  return {ProvisionalDestinationResolver: ProvisionalDestinationResolver};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/search/recent_destination_list.js b/chromium/chrome/browser/resources/print_preview/search/recent_destination_list.js
index 47aff4e4424..57f7d97e159 100644
--- a/chromium/chrome/browser/resources/print_preview/search/recent_destination_list.js
+++ b/chromium/chrome/browser/resources/print_preview/search/recent_destination_list.js
@@ -15,11 +15,8 @@ cr.define('print_preview', function() {
    */
   function RecentDestinationList(eventTarget) {
     print_preview.DestinationList.call(
-        this,
-        eventTarget,
-        loadTimeData.getString('recentDestinationsTitle'),
-        null /*actionLinkLabel*/,
-        true /*opt_showAll*/);
+        this, eventTarget, loadTimeData.getString('recentDestinationsTitle'),
+        null /*actionLinkLabel*/, true /*opt_showAll*/);
   }
 
   RecentDestinationList.prototype = {
@@ -32,7 +29,5 @@ cr.define('print_preview', function() {
     }
   };
 
-  return {
-    RecentDestinationList: RecentDestinationList
-  };
+  return {RecentDestinationList: RecentDestinationList};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/advanced_options_settings.js b/chromium/chrome/browser/resources/print_preview/settings/advanced_options_settings.js
index 62e735b1b97..2469dbe006e 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/advanced_options_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/advanced_options_settings.js
@@ -60,19 +60,18 @@ cr.define('print_preview', function() {
     enterDocument: function() {
       print_preview.SettingsSection.prototype.enterDocument.call(this);
 
-      this.tracker.add(
-          this.getButton_(), 'click', function() {
-            cr.dispatchSimpleEvent(
-                this, AdvancedOptionsSettings.EventType.BUTTON_ACTIVATED);
-          }.bind(this));
+      this.tracker.add(this.getButton_(), 'click', function() {
+        cr.dispatchSimpleEvent(
+            this, AdvancedOptionsSettings.EventType.BUTTON_ACTIVATED);
+      }.bind(this));
       this.tracker.add(
           this.destinationStore_,
           print_preview.DestinationStore.EventType.DESTINATION_SELECT,
           this.onDestinationChanged_.bind(this));
       this.tracker.add(
           this.destinationStore_,
-          print_preview.DestinationStore.EventType.
-              SELECTED_DESTINATION_CAPABILITIES_READY,
+          print_preview.DestinationStore.EventType
+              .SELECTED_DESTINATION_CAPABILITIES_READY,
           this.onDestinationChanged_.bind(this));
     },
 
@@ -94,7 +93,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    AdvancedOptionsSettings: AdvancedOptionsSettings
-  };
+  return {AdvancedOptionsSettings: AdvancedOptionsSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings.js b/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings.js
index afc4125bb05..42edd3a98d1 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings.js
@@ -59,8 +59,8 @@ cr.define('print_preview', function() {
       assert(!this.destination_);
       this.destination_ = destination;
       this.getChildElement('.advanced-settings-title').textContent =
-          loadTimeData.getStringF('advancedSettingsDialogTitle',
-                                  this.destination_.displayName);
+          loadTimeData.getStringF(
+              'advancedSettingsDialogTitle', this.destination_.displayName);
       this.setIsVisible(true);
       this.renderSettings_();
     },
@@ -70,18 +70,15 @@ cr.define('print_preview', function() {
       print_preview.Overlay.prototype.enterDocument.call(this);
 
       this.tracker.add(
-          this.getChildElement('.button-strip .cancel-button'),
-          'click',
+          this.getChildElement('.button-strip .cancel-button'), 'click',
           this.cancel.bind(this));
 
       this.tracker.add(
-          this.getChildElement('.button-strip .done-button'),
-          'click',
+          this.getChildElement('.button-strip .done-button'), 'click',
           this.onApplySettings_.bind(this));
 
       this.tracker.add(
-          assert(this.searchBox_),
-          print_preview.SearchBox.EventType.SEARCH,
+          assert(this.searchBox_), print_preview.SearchBox.EventType.SEARCH,
           this.onSearch_.bind(this));
     },
 
@@ -94,8 +91,8 @@ cr.define('print_preview', function() {
     onSetVisibleInternal: function(isVisible) {
       if (isVisible) {
         this.searchBox_.focus();
-        this.metrics_.record(print_preview.Metrics.PrintSettingsUiBucket.
-            ADVANCED_SETTINGS_DIALOG_SHOWN);
+        this.metrics_.record(print_preview.Metrics.PrintSettingsUiBucket
+                                 .ADVANCED_SETTINGS_DIALOG_SHOWN);
       } else {
         this.resetSearch_();
         this.destination_ = null;
@@ -104,8 +101,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     onCancelInternal: function() {
-      this.metrics_.record(print_preview.Metrics.PrintSettingsUiBucket.
-          ADVANCED_SETTINGS_DIALOG_CANCELED);
+      this.metrics_.record(print_preview.Metrics.PrintSettingsUiBucket
+                               .ADVANCED_SETTINGS_DIALOG_CANCELED);
     },
 
     /** @override */
@@ -145,8 +142,7 @@ cr.define('print_preview', function() {
           lastVisibleItemWithBubble = item;
       });
       setIsVisible(
-          this.getChildElement('.no-settings-match-hint'),
-          !atLeastOneMatch);
+          this.getChildElement('.no-settings-match-hint'), !atLeastOneMatch);
       setIsVisible(
           this.getChildElement('.' + AdvancedSettings.Classes_.EXTRA_PADDING),
           !!lastVisibleItemWithBubble);
@@ -236,7 +232,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    AdvancedSettings: AdvancedSettings
-  };
+  return {AdvancedSettings: AdvancedSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.js b/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.js
index bbba5593aff..40e4be31452 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.js
@@ -75,8 +75,8 @@ cr.define('print_preview', function() {
 
     /** @override */
     createDom: function() {
-      this.setElementInternal(this.cloneTemplateInternal(
-          'advanced-settings-item-template'));
+      this.setElementInternal(
+          this.cloneTemplateInternal('advanced-settings-item-template'));
 
       this.tracker_.add(
           this.select_, 'change', this.onSelectChange_.bind(this));
@@ -135,7 +135,7 @@ cr.define('print_preview', function() {
      * @private
      */
     get text_() {
-      return /** @type {!HTMLSelectElement} */(
+      return /** @type {!HTMLSelectElement} */ (
           this.getChildElement('.advanced-settings-item-value-text-control'));
     },
 
@@ -195,8 +195,8 @@ cr.define('print_preview', function() {
           for (var i = 0; i < this.select_.length && !optionMatches; i++)
             optionMatches = this.select_.options[i].text.match(this.query_);
         } else {
-          optionMatches = (this.text_.value || this.text_.placeholder || '')
-              .match(this.query_);
+          optionMatches = (this.text_.value || this.text_.placeholder ||
+                           '').match(this.query_);
         }
       }
       var matches = nameMatches || !!optionMatches;
@@ -267,8 +267,9 @@ cr.define('print_preview', function() {
      * @private
      */
     initializeSelectValue_: function() {
-      setIsVisible(assert(this.getChildElement(
-          '.advanced-settings-item-value-select')), true);
+      setIsVisible(
+          assert(this.getChildElement('.advanced-settings-item-value-select')),
+          true);
       var selectEl = this.select_;
       var indexToSelect = 0;
       this.capability_.select_cap.option.forEach(function(option, index) {
@@ -293,15 +294,16 @@ cr.define('print_preview', function() {
      * @private
      */
     initializeTextValue_: function() {
-      setIsVisible(assert(this.getChildElement(
-          '.advanced-settings-item-value-text')), true);
+      setIsVisible(
+          assert(this.getChildElement('.advanced-settings-item-value-text')),
+          true);
 
       var defaultValue = null;
       if (this.capability_.type == 'TYPED_VALUE' &&
           this.capability_.typed_value_cap) {
         defaultValue = this.capability_.typed_value_cap.default || null;
-      } else if (this.capability_.type == 'RANGE' &&
-                 this.capability_.range_cap) {
+      } else if (
+          this.capability_.type == 'RANGE' && this.capability_.range_cap) {
         defaultValue = this.capability_.range_cap.default || null;
       }
 
@@ -332,7 +334,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    AdvancedSettingsItem: AdvancedSettingsItem
-  };
+  return {AdvancedSettingsItem: AdvancedSettingsItem};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/color_settings.js b/chromium/chrome/browser/resources/print_preview/settings/color_settings.js
index 24d9cce57b7..c2df674dfc6 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/color_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/color_settings.js
@@ -45,8 +45,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.SettingsSection.prototype.enterDocument.call(this);
-      this.tracker.add(
-          this.select_, 'change', this.onSelectChange_.bind(this));
+      this.tracker.add(this.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker.add(
           this.colorTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
@@ -69,7 +68,7 @@ cr.define('print_preview', function() {
      * @private
      */
     get select_() {
-      return /** @type {!HTMLSelectElement} */(
+      return /** @type {!HTMLSelectElement} */ (
           this.getChildElement('.color-settings-select'));
     },
 
@@ -93,7 +92,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    ColorSettings: ColorSettings
-  };
+  return {ColorSettings: ColorSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/copies_settings.js b/chromium/chrome/browser/resources/print_preview/settings/copies_settings.js
index 369d4005886..6aaab6ed74d 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/copies_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/copies_settings.js
@@ -88,20 +88,13 @@ cr.define('print_preview', function() {
       this.inputField_ = this.getChildElement('input.user-value');
       print_preview.SettingsSection.prototype.enterDocument.call(this);
       this.tracker.add(
-          this.inputField_,
-          'keydown',
-          this.onTextfieldKeyDown_.bind(this));
+          this.inputField_, 'keydown', this.onTextfieldKeyDown_.bind(this));
       this.tracker.add(
-          this.inputField_,
-          'input',
-          this.onTextfieldInput_.bind(this));
+          this.inputField_, 'input', this.onTextfieldInput_.bind(this));
       this.tracker.add(
-          this.inputField_,
-          'blur',
-          this.onTextfieldBlur_.bind(this));
+          this.inputField_, 'blur', this.onTextfieldBlur_.bind(this));
       this.tracker.add(
-          this.getChildElement('input.collate'),
-          'click',
+          this.getChildElement('input.collate'), 'click',
           this.onCollateCheckboxClick_.bind(this));
       this.tracker.add(
           this.copiesTicketItem_,
@@ -131,8 +124,8 @@ cr.define('print_preview', function() {
         this.inputField_.classList.remove('invalid');
         fadeOutElement(this.getChildElement('.hint'));
         if (!(this.getChildElement('.collate-container').hidden =
-               !this.collateTicketItem_.isCapabilityAvailable() ||
-               this.copiesTicketItem_.getValueAsNumber() <= 1)) {
+                  !this.collateTicketItem_.isCapabilityAvailable() ||
+                  this.copiesTicketItem_.getValueAsNumber() <= 1)) {
           this.getChildElement('input.collate').checked =
               this.collateTicketItem_.getValue();
         }
@@ -146,9 +139,10 @@ cr.define('print_preview', function() {
      */
     onTextfieldTimeout_: function() {
       this.textfieldTimeout_ = null;
-      var newValue = (this.inputField_.validity.valid &&
-                      this.inputField_.value != '') ?
-                      this.inputField_.valueAsNumber.toString() : '';
+      var newValue =
+          (this.inputField_.validity.valid && this.inputField_.value != '') ?
+          this.inputField_.valueAsNumber.toString() :
+          '';
       if (this.copiesTicketItem_.getValue() === newValue) {
         this.updateState_();
         return;
@@ -195,9 +189,11 @@ cr.define('print_preview', function() {
           // No need to update the ticket, but change the display to match.
           this.inputField_.value = '1';
         } else {
-          setTimeout((function() {
-            this.copiesTicketItem_.updateValue('1');
-          }).bind(this), 0);
+          setTimeout(
+              (function() {
+                this.copiesTicketItem_.updateValue('1');
+              }).bind(this),
+              0);
         }
       }
     },
@@ -213,7 +209,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    CopiesSettings: CopiesSettings
-  };
+  return {CopiesSettings: CopiesSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/destination_settings.js b/chromium/chrome/browser/resources/print_preview/settings/destination_settings.js
index bad6fd4910a..f9941182b45 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/destination_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/destination_settings.js
@@ -98,8 +98,8 @@ cr.define('print_preview', function() {
           this.onDestinationSelect_.bind(this));
       this.tracker_.add(
           this.destinationStore_,
-          print_preview.DestinationStore.EventType.
-              CACHED_SELECTED_DESTINATION_INFO_READY,
+          print_preview.DestinationStore.EventType
+              .CACHED_SELECTED_DESTINATION_INFO_READY,
           this.onSelectedDestinationNameSet_.bind(this));
     },
 
@@ -168,7 +168,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    DestinationSettings: DestinationSettings
-  };
+  return {DestinationSettings: DestinationSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/dpi_settings.js b/chromium/chrome/browser/resources/print_preview/settings/dpi_settings.js
index 00c01b38bd9..4e44a50198e 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/dpi_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/dpi_settings.js
@@ -24,17 +24,15 @@ cr.define('print_preview', function() {
       var hDpi = option.horizontal_dpi || 0;
       var vDpi = option.vertical_dpi || 0;
       if (hDpi > 0 && vDpi > 0 && hDpi != vDpi) {
-        return loadTimeData.getStringF('nonIsotropicDpiItemLabel',
-                                       hDpi.toLocaleString(),
-                                       vDpi.toLocaleString());
+        return loadTimeData.getStringF(
+            'nonIsotropicDpiItemLabel', hDpi.toLocaleString(),
+            vDpi.toLocaleString());
       }
-      return loadTimeData.getStringF('dpiItemLabel',
-                                     (hDpi || vDpi).toLocaleString());
+      return loadTimeData.getStringF(
+          'dpiItemLabel', (hDpi || vDpi).toLocaleString());
     }
   };
 
   // Export
-  return {
-    DpiSettings: DpiSettings
-  };
+  return {DpiSettings: DpiSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/layout_settings.js b/chromium/chrome/browser/resources/print_preview/settings/layout_settings.js
index cd1aeed5fcb..acb018e86f0 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/layout_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/layout_settings.js
@@ -45,8 +45,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.SettingsSection.prototype.enterDocument.call(this);
-      this.tracker.add(
-          this.select_, 'change', this.onSelectChange_.bind(this));
+      this.tracker.add(this.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker.add(
           this.landscapeTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
@@ -71,7 +70,7 @@ cr.define('print_preview', function() {
      * @private
      */
     get select_() {
-      return /** @type {!HTMLSelectElement} */(
+      return /** @type {!HTMLSelectElement} */ (
           this.getChildElement('.layout-settings-select'));
     },
 
@@ -97,7 +96,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    LayoutSettings: LayoutSettings
-  };
+  return {LayoutSettings: LayoutSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/margin_settings.js b/chromium/chrome/browser/resources/print_preview/settings/margin_settings.js
index 2d86be504a4..f99b3de2fa8 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/margin_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/margin_settings.js
@@ -29,9 +29,7 @@ cr.define('print_preview', function() {
    * @enum {string}
    * @private
    */
-  MarginSettings.Classes_ = {
-    SELECT: 'margin-settings-select'
-  };
+  MarginSettings.Classes_ = {SELECT: 'margin-settings-select'};
 
   MarginSettings.prototype = {
     __proto__: print_preview.SettingsSection.prototype,
@@ -108,7 +106,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    MarginSettings: MarginSettings
-  };
+  return {MarginSettings: MarginSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/media_size_settings.js b/chromium/chrome/browser/resources/print_preview/settings/media_size_settings.js
index c7a43199095..ca63b57eea8 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/media_size_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/media_size_settings.js
@@ -26,7 +26,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    MediaSizeSettings: MediaSizeSettings
-  };
+  return {MediaSizeSettings: MediaSizeSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/more_settings.js b/chromium/chrome/browser/resources/print_preview/settings/more_settings.js
index ebdc78f8dcf..25bb73933a8 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/more_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/more_settings.js
@@ -58,8 +58,8 @@ cr.define('print_preview', function() {
           this.onDestinationChanged_.bind(this));
       this.tracker.add(
           this.destinationStore_,
-          print_preview.DestinationStore.EventType.
-              SELECTED_DESTINATION_CAPABILITIES_READY,
+          print_preview.DestinationStore.EventType
+              .SELECTED_DESTINATION_CAPABILITIES_READY,
           this.onDestinationCapabilitiesReady_.bind(this));
       this.settingsSections_.forEach(function(section) {
         this.tracker.add(
@@ -79,9 +79,11 @@ cr.define('print_preview', function() {
     onClick_: function() {
       this.showAll_ = !this.showAll_;
       this.updateState_(false);
-      this.metrics_.record(this.isExpanded ?
-          print_preview.Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED :
-          print_preview.Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED);
+      this.metrics_.record(
+          this.isExpanded ? print_preview.Metrics.PrintSettingsUiBucket
+                                .MORE_SETTINGS_CLICKED :
+                            print_preview.Metrics.PrintSettingsUiBucket
+                                .LESS_SETTINGS_CLICKED);
     },
 
     /**
@@ -120,21 +122,20 @@ cr.define('print_preview', function() {
         return;
 
       this.getChildElement('.more-settings-label').textContent =
-          loadTimeData.getString(this.isExpanded ? 'lessOptionsLabel' :
-                                                   'moreOptionsLabel');
+          loadTimeData.getString(
+              this.isExpanded ? 'lessOptionsLabel' : 'moreOptionsLabel');
       var iconEl = this.getChildElement('.more-settings-icon');
       iconEl.classList.toggle('more-settings-icon-plus', !this.isExpanded);
       iconEl.classList.toggle('more-settings-icon-minus', this.isExpanded);
 
-      var availableSections = this.settingsSections_.reduce(
-          function(count, section) {
+      var availableSections =
+          this.settingsSections_.reduce(function(count, section) {
             return count + (section.isAvailable() ? 1 : 0);
           }, 0);
 
       // Magic 6 is chosen as the number of sections when it still feels like
       // manageable and not too crowded.
-      var hasSectionsToToggle =
-          availableSections > 6 &&
+      var hasSectionsToToggle = availableSections > 6 &&
           this.settingsSections_.some(function(section) {
             return section.hasCollapsibleContent();
           });
@@ -152,7 +153,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    MoreSettings: MoreSettings
-  };
+  return {MoreSettings: MoreSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/other_options_settings.js b/chromium/chrome/browser/resources/print_preview/settings/other_options_settings.js
index 35cfeff8a8a..24e04b266ef 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/other_options_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/other_options_settings.js
@@ -69,9 +69,8 @@ cr.define('print_preview', function() {
 
     /** Initializes container and checkbox */
     decorate: function() {
-      this.container_ = /** @type {HTMLElement} */(
-          document.getElementById(this.cssId_));
-      this.checkbox_ = /** @type {HTMLElement} */(
+      this.container_ = $(this.cssId_);
+      this.checkbox_ = /** @type {HTMLElement} */ (
           this.container_.querySelector('.checkbox'));
     },
 
@@ -104,7 +103,7 @@ cr.define('print_preview', function() {
      */
     isVisible: function(collapseContent) {
       return this.ticketItem_.isCapabilityAvailable() &&
-             (!this.collapsible_ || !collapseContent);
+          (!this.collapsible_ || !collapseContent);
     },
 
     /**
@@ -143,7 +142,7 @@ cr.define('print_preview', function() {
      *     enabled.
      */
     this.rasterizeEnabled_ = (!cr.isWindows && !cr.isMac) &&
-                             loadTimeData.getBoolean('printPdfAsImageEnabled');
+        loadTimeData.getBoolean('printPdfAsImageEnabled');
 
     /**
      * @private {!Array<!CheckboxTicketItemElement>} checkbox ticket item
@@ -151,20 +150,20 @@ cr.define('print_preview', function() {
      *      Selection only must always be the last element in the array.
      */
     this.elements_ = [
-      new CheckboxTicketItemElement(headerFooter, true,
-                                    'header-footer-container'),
-      new CheckboxTicketItemElement(fitToPage, false,
-                                    'fit-to-page-container'),
+      new CheckboxTicketItemElement(
+          headerFooter, true, 'header-footer-container'),
+      new CheckboxTicketItemElement(fitToPage, false, 'fit-to-page-container'),
       new CheckboxTicketItemElement(duplex, false, 'duplex-container'),
-      new CheckboxTicketItemElement(cssBackground, true,
-                                    'css-background-container'),
-      new CheckboxTicketItemElement(selectionOnly, true,
-                                    'selection-only-container')
+      new CheckboxTicketItemElement(
+          cssBackground, true, 'css-background-container'),
+      new CheckboxTicketItemElement(
+          selectionOnly, true, 'selection-only-container')
     ];
     if (this.rasterizeEnabled_) {
-      this.elements_.splice(4, 0,
-                            new CheckboxTicketItemElement(rasterize, true,
-                                'rasterize-container'));
+      this.elements_.splice(
+          4, 0,
+          new CheckboxTicketItemElement(
+              rasterize, true, 'rasterize-container'));
     }
   }
 
@@ -200,8 +199,7 @@ cr.define('print_preview', function() {
       print_preview.SettingsSection.prototype.enterDocument.call(this);
       this.elements_.forEach(function(element) {
         this.tracker.add(
-            assert(element.checkbox),
-            'click',
+            assert(element.checkbox), 'click',
             element.onCheckboxClick.bind(element));
         this.tracker.add(
             element.ticketItem,
@@ -243,7 +241,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    OtherOptionsSettings: OtherOptionsSettings
-  };
+  return {OtherOptionsSettings: OtherOptionsSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/page_settings.js b/chromium/chrome/browser/resources/print_preview/settings/page_settings.js
index e5ddd6a4899..f8f70eea821 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/page_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/page_settings.js
@@ -105,25 +105,15 @@ cr.define('print_preview', function() {
       this.tracker.add(
           assert(this.allRadio_), 'click', this.onAllRadioClick_.bind(this));
       this.tracker.add(
-          assert(this.customRadio_),
-          'click',
+          assert(this.customRadio_), 'click',
           this.onCustomRadioClick_.bind(this));
+      this.tracker.add(customInput, 'blur', this.onCustomInputBlur_.bind(this));
       this.tracker.add(
-          customInput,
-          'blur',
-          this.onCustomInputBlur_.bind(this));
+          customInput, 'focus', this.onCustomInputFocus_.bind(this));
       this.tracker.add(
-          customInput,
-          'focus',
-          this.onCustomInputFocus_.bind(this));
+          customInput, 'keydown', this.onCustomInputKeyDown_.bind(this));
       this.tracker.add(
-          customInput,
-          'keydown',
-          this.onCustomInputKeyDown_.bind(this));
-      this.tracker.add(
-          customInput,
-          'input',
-          this.onCustomInputChange_.bind(this));
+          customInput, 'input', this.onCustomInputChange_.bind(this));
       this.tracker.add(
           this.pageRangeTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
@@ -156,29 +146,28 @@ cr.define('print_preview', function() {
      * @private
      */
     setInvalidStateVisible_: function(validity) {
-      if (validity !== PageRangeStatus.NO_ERROR) {
-        var message;
-        if (validity === PageRangeStatus.LIMIT_ERROR) {
-          if (this.pageRangeTicketItem_.getDocumentNumPages()) {
-            message = loadTimeData.getStringF(
-                'pageRangeLimitInstructionWithValue',
-                this.pageRangeTicketItem_.getDocumentNumPages());
-          } else {
-            message = loadTimeData.getString(
-                'pageRangeLimitInstruction');
-          }
-        } else {
+      if (validity === PageRangeStatus.NO_ERROR) {
+        this.customInput_.classList.remove('invalid');
+        fadeOutElement(this.customHintEl_);
+        return;
+      }
+      var message;
+      if (validity === PageRangeStatus.LIMIT_ERROR) {
+        if (this.pageRangeTicketItem_.getDocumentNumPages()) {
           message = loadTimeData.getStringF(
-              'pageRangeSyntaxInstruction',
-              loadTimeData.getString('examplePageRangeText'));
+              'pageRangeLimitInstructionWithValue',
+              this.pageRangeTicketItem_.getDocumentNumPages());
+        } else {
+          message = loadTimeData.getString('pageRangeLimitInstruction');
         }
-        this.customHintEl_.textContent = message;
-        this.customInput_.classList.add('invalid');
-        fadeInElement(this.customHintEl_);
       } else {
-        this.customInput_.classList.remove('invalid');
-        fadeOutElement(this.customHintEl_);
+        message = loadTimeData.getStringF(
+            'pageRangeSyntaxInstruction',
+            loadTimeData.getString('examplePageRangeText'));
       }
+      this.customHintEl_.textContent = message;
+      this.customInput_.classList.add('invalid');
+      fadeInElement(this.customHintEl_);
     },
 
     /**
@@ -283,7 +272,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    PageSettings: PageSettings
-  };
+  return {PageSettings: PageSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/scaling_settings.js b/chromium/chrome/browser/resources/print_preview/settings/scaling_settings.js
index 40ce29a7d80..99d752c8409 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/scaling_settings.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/scaling_settings.js
@@ -52,7 +52,6 @@ cr.define('print_preview', function() {
      * @private {HTMLElement}
      */
     this.inputField_ = null;
-
   }
 
   /**
@@ -88,17 +87,11 @@ cr.define('print_preview', function() {
       this.inputField_ = assert(this.getChildElement('input.user-value'));
       print_preview.SettingsSection.prototype.enterDocument.call(this);
       this.tracker.add(
-          this.inputField_,
-          'keydown',
-          this.onTextfieldKeyDown_.bind(this));
+          this.inputField_, 'keydown', this.onTextfieldKeyDown_.bind(this));
       this.tracker.add(
-          this.inputField_,
-          'input',
-          this.onTextfieldInput_.bind(this));
+          this.inputField_, 'input', this.onTextfieldInput_.bind(this));
       this.tracker.add(
-          this.inputField_,
-          'blur',
-          this.onTextfieldBlur_.bind(this));
+          this.inputField_, 'blur', this.onTextfieldBlur_.bind(this));
       this.tracker.add(
           this.scalingTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
@@ -115,7 +108,7 @@ cr.define('print_preview', function() {
      */
     isFitToPageSelected: function() {
       return this.fitToPageTicketItem_.isCapabilityAvailable() &&
-             !!this.fitToPageTicketItem_.getValue();
+          !!this.fitToPageTicketItem_.getValue();
     },
 
     /**
@@ -140,8 +133,9 @@ cr.define('print_preview', function() {
      * @private
      */
     displayMatchesFitToPage: function() {
-      return (this.getInputAsNumber() == this.fitToPageScaling_ ||
-              (this.inputField_.value == '' && !this.fitToPageScaling_));
+      return (
+          this.getInputAsNumber() == this.fitToPageScaling_ ||
+          (this.inputField_.value == '' && !this.fitToPageScaling_));
     },
 
     /**
@@ -195,8 +189,9 @@ cr.define('print_preview', function() {
       if (this.isFitToPageSelected()) {
         // Fit to page was checked. Set scaling to the fit to page scaling.
         this.displayFitToPageScaling();
-      } else if (this.fitToPageTicketItem_.isCapabilityAvailable() &&
-                 this.displayMatchesFitToPage()) {
+      } else if (
+          this.fitToPageTicketItem_.isCapabilityAvailable() &&
+          this.displayMatchesFitToPage()) {
         // Fit to page unchecked. Return to last scaling.
         this.inputField_.value = this.scalingTicketItem_.getValue();
       }
@@ -208,7 +203,7 @@ cr.define('print_preview', function() {
      */
     onTextfieldTimeout_: function() {
       this.textfieldTimeout_ = null;
-      if (!this.inputField_.validity.valid){
+      if (!this.inputField_.validity.valid) {
         this.updateState_();
         return;
       }
@@ -226,7 +221,7 @@ cr.define('print_preview', function() {
       if (this.inputField_.value == '')
         return;
       this.scalingTicketItem_.updateValue(
-        this.inputField_.valueAsNumber.toString());
+          this.inputField_.valueAsNumber.toString());
     },
 
     /**
@@ -280,7 +275,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    ScalingSettings: ScalingSettings
-  };
+  return {ScalingSettings: ScalingSettings};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/settings_section.js b/chromium/chrome/browser/resources/print_preview/settings/settings_section.js
index 4be825047b0..6deb0aa3393 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/settings_section.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/settings_section.js
@@ -116,7 +116,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    SettingsSection: SettingsSection
-  };
+  return {SettingsSection: SettingsSection};
 });
diff --git a/chromium/chrome/browser/resources/print_preview/settings/settings_section_select.js b/chromium/chrome/browser/resources/print_preview/settings/settings_section_select.js
index 713c950ebec..62ec25c45a3 100644
--- a/chromium/chrome/browser/resources/print_preview/settings/settings_section_select.js
+++ b/chromium/chrome/browser/resources/print_preview/settings/settings_section_select.js
@@ -41,12 +41,12 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.SettingsSection.prototype.enterDocument.call(this);
-      this.tracker.add(assert(this.select_),
-                       'change',
-                       this.onSelectChange_.bind(this));
-      this.tracker.add(this.ticketItem_,
-                       print_preview.ticket_items.TicketItem.EventType.CHANGE,
-                       this.onTicketItemChange_.bind(this));
+      this.tracker.add(
+          assert(this.select_), 'change', this.onSelectChange_.bind(this));
+      this.tracker.add(
+          this.ticketItem_,
+          print_preview.ticket_items.TicketItem.EventType.CHANGE,
+          this.onTicketItemChange_.bind(this));
     },
 
     /**
@@ -80,7 +80,7 @@ cr.define('print_preview', function() {
         this.ticketItem_.capability.option.forEach(function(option, index) {
           var selectOption = document.createElement('option');
           selectOption.text = this.getCustomDisplayName_(option) ||
-                              this.getDefaultDisplayName_(option);
+              this.getDefaultDisplayName_(option);
           selectOption.value = JSON.stringify(option);
           select.appendChild(selectOption);
           if (option.is_default)
@@ -144,7 +144,5 @@ cr.define('print_preview', function() {
   };
 
   // Export
-  return {
-    SettingsSectionSelect: SettingsSectionSelect
-  };
+  return {SettingsSectionSelect: SettingsSectionSelect};
 });
diff --git a/chromium/chrome/browser/resources/profiler/profiler.js b/chromium/chrome/browser/resources/profiler/profiler.js
index 423392e0766..81b1250b8aa 100644
--- a/chromium/chrome/browser/resources/profiler/profiler.js
+++ b/chromium/chrome/browser/resources/profiler/profiler.js
@@ -30,8 +30,7 @@ var BrowserBridge = (function() {
   /**
    * @constructor
    */
-  function BrowserBridge() {
-  }
+  function BrowserBridge() {}
 
   BrowserBridge.prototype = {
     //--------------------------------------------------------------------------
@@ -182,7 +181,9 @@ var MainView = (function() {
     };
 
     return {
-      create: function(key) { return new Aggregator(key); }
+      create: function(key) {
+        return new Aggregator(key);
+      }
     };
   })();
 
@@ -210,7 +211,9 @@ var MainView = (function() {
     };
 
     return {
-      create: function(key) { return new Aggregator(key); }
+      create: function(key) {
+        return new Aggregator(key);
+      }
     };
   })();
 
@@ -318,7 +321,9 @@ var MainView = (function() {
     };
 
     return {
-      create: function(key) { return new Aggregator(key); }
+      create: function(key) {
+        return new Aggregator(key);
+      }
     };
   })();
 
@@ -328,15 +333,14 @@ var MainView = (function() {
 
   // Custom comparator for thread names (sorts main thread and IO thread
   // higher than would happen lexicographically.)
-  var threadNameComparator =
-      createLexicographicComparatorWithExceptions([
-          'CrBrowserMain',
-          'Chrome_IOThread',
-          'Chrome_FileThread',
-          'Chrome_HistoryThread',
-          'Chrome_DBThread',
-          'Still_Alive',
-      ]);
+  var threadNameComparator = createLexicographicComparatorWithExceptions([
+    'CrBrowserMain',
+    'Chrome_IOThread',
+    'Chrome_FileThread',
+    'Chrome_HistoryThread',
+    'Chrome_DBThread',
+    'Still_Alive',
+  ]);
 
   function diffFuncForCount(a, b) {
     return b - a;
@@ -492,8 +496,8 @@ var MainView = (function() {
       cellAlignment: 'right',
       sortDescending: true,
       textPrinter: formatNumberAsText,
-      aggregator: AvgDiffAggregator.create(KEY_MEMORY_ALLOCATED_BYTES,
-                                           KEY_MEMORY_FREED_BYTES, KEY_COUNT),
+      aggregator: AvgDiffAggregator.create(
+          KEY_MEMORY_ALLOCATED_BYTES, KEY_MEMORY_FREED_BYTES, KEY_COUNT),
     };
 
     KEY_PROPERTIES[KEY_MEMORY_ALLOC_OPS] = {
@@ -758,7 +762,7 @@ var MainView = (function() {
     var orig = x.toFixed(0);
 
     var parts = [];
-    for (var end = orig.length; end > 0; ) {
+    for (var end = orig.length; end > 0;) {
       var chunk = Math.min(end, 3);
       parts.push(orig.substr(end - chunk, chunk));
       end -= chunk;
@@ -850,7 +854,7 @@ var MainView = (function() {
    */
   function deleteValuesFromArray(array, valuesToDelete) {
     var valueSet = arrayToSet(valuesToDelete);
-    for (var i = 0; i < array.length; ) {
+    for (var i = 0; i < array.length;) {
       if (valueSet[array[i]]) {
         array.splice(i, 1);
       } else {
@@ -866,7 +870,7 @@ var MainView = (function() {
     // Build up set of each entry in array.
     var seenSoFar = {};
 
-    for (var i = 0; i < array.length; ) {
+    for (var i = 0; i < array.length;) {
       var value = array[i];
       if (seenSoFar[value]) {
         array.splice(i, 1);
@@ -922,8 +926,7 @@ var MainView = (function() {
    * slashes or backslashes.
    */
   function getFilenameFromPath(path) {
-    var lastSlash = Math.max(path.lastIndexOf('/'),
-                             path.lastIndexOf('\\'));
+    var lastSlash = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'));
     if (lastSlash == -1)
       return path;
 
@@ -980,7 +983,7 @@ var MainView = (function() {
       e[KEY_MEMORY_AVG_FREE_OPS] = e[KEY_MEMORY_FREE_OPS] / e[KEY_COUNT];
       e[KEY_MEMORY_AVG_NET_BYTES] =
           (e[KEY_MEMORY_ALLOCATED_BYTES] - e[KEY_MEMORY_FREED_BYTES]) /
-              e[KEY_COUNT];
+          e[KEY_COUNT];
     }
   }
 
@@ -1039,8 +1042,8 @@ var MainView = (function() {
    * flat list. Otherwise the result will be a dictionary, where each row
    * has a unique key.
    */
-  function mergeRows(origRows, mergeKeys, mergeSimilarThreads,
-                     outputAsDictionary) {
+  function mergeRows(
+      origRows, mergeKeys, mergeSimilarThreads, outputAsDictionary) {
     // Define a translation function for each property. Normally we copy over
     // properties as-is, but if we have been asked to "merge similar threads" we
     // we will remap the thread names that end in a numeric suffix.
@@ -1058,7 +1061,9 @@ var MainView = (function() {
         return value;
       };
     } else {
-      propertyGetterFunc = function(row, key) { return row[key]; };
+      propertyGetterFunc = function(row, key) {
+        return row[key];
+      };
     }
 
     // Determine which sets of properties a row needs to match on to be
@@ -1126,10 +1131,10 @@ var MainView = (function() {
     // final row.
     var COMPUTED_AGGREGATE_KEYS = [KEY_AVG_QUEUE_TIME, KEY_AVG_RUN_TIME];
     if (loadTimeData.getBoolean('enableMemoryTaskProfiler')) {
-       COMPUTED_AGGREGATE_KEYS = COMPUTED_AGGREGATE_KEYS.concat([
-          KEY_MEMORY_AVG_ALLOC_OPS,
-          KEY_MEMORY_AVG_FREE_OPS,
-          KEY_MEMORY_AVG_NET_BYTES]);
+      COMPUTED_AGGREGATE_KEYS = COMPUTED_AGGREGATE_KEYS.concat([
+        KEY_MEMORY_AVG_ALLOC_OPS, KEY_MEMORY_AVG_FREE_OPS,
+        KEY_MEMORY_AVG_NET_BYTES
+      ]);
     }
 
     // These are the keys which determine row equality. Since we are not doing
@@ -1235,8 +1240,8 @@ var MainView = (function() {
         var link = addNode(td, 'a', filename + ' [' + linenumber + ']');
 
         link.href = 'https://code.google.com/p/chromium/codesearch#search/&q=' +
-                    encodeURIComponent(filename) + ':' + linenumber +
-                    '&sq=package:chromium&type=cs';
+            encodeURIComponent(filename) + ':' + linenumber +
+            '&sq=package:chromium&type=cs';
         link.target = '_blank';
         return;
       }
@@ -1509,11 +1514,9 @@ var MainView = (function() {
 
         // Explain that what is being shown is the difference between two
         // snapshots.
-        summaryDiv.innerText =
-            'Showing the difference between snapshots #' +
-            selectedSnapshots[0] + ' and #' +
-            selectedSnapshots[1] + ' (' + timeDeltaInSeconds +
-            ' seconds worth of data)';
+        summaryDiv.innerText = 'Showing the difference between snapshots #' +
+            selectedSnapshots[0] + ' and #' + selectedSnapshots[1] + ' (' +
+            timeDeltaInSeconds + ' seconds worth of data)';
       } else {
         // This shouldn't be possible...
         throw 'Unexpected number of selected snapshots';
@@ -1531,31 +1534,24 @@ var MainView = (function() {
       // between two snapshots, or just displaying a single snapshot.
       if (selectedSnapshots.length == 1) {
         var snapshot = this.snapshots_[selectedSnapshots[0]];
-        this.mergedData_ = mergeRows(snapshot.flatData,
-                                     mergeColumns,
-                                     shouldMergeSimilarThreads,
-                                     false);
+        this.mergedData_ = mergeRows(
+            snapshot.flatData, mergeColumns, shouldMergeSimilarThreads, false);
 
       } else if (selectedSnapshots.length == 2) {
         var snapshot1 = this.snapshots_[selectedSnapshots[0]];
         var snapshot2 = this.snapshots_[selectedSnapshots[1]];
 
         // Merge the data for snapshot1.
-        var mergedRows1 = mergeRows(snapshot1.flatData,
-                                    mergeColumns,
-                                    shouldMergeSimilarThreads,
-                                    true);
+        var mergedRows1 = mergeRows(
+            snapshot1.flatData, mergeColumns, shouldMergeSimilarThreads, true);
 
         // Merge the data for snapshot2.
-        var mergedRows2 = mergeRows(snapshot2.flatData,
-                                    mergeColumns,
-                                    shouldMergeSimilarThreads,
-                                    true);
+        var mergedRows2 = mergeRows(
+            snapshot2.flatData, mergeColumns, shouldMergeSimilarThreads, true);
 
         // Do a diff between the two snapshots.
-        this.mergedData_ = subtractSnapshots(mergedRows1,
-                                             mergedRows2,
-                                             mergeColumns);
+        this.mergedData_ =
+            subtractSnapshots(mergedRows1, mergedRows2, mergeColumns);
       } else {
         throw 'Unexpected number of selected snapshots';
       }
@@ -1723,8 +1719,8 @@ var MainView = (function() {
       this.drawAggregateRow_(thead, data.aggregates, columns);
       this.drawTableHeader_(thead, columns);
       this.drawTableBody_(tbody, data.rows, columns, limit);
-      this.drawTruncationRow_(tbody, data.rows.length, limit, columns.length,
-                              groupKey);
+      this.drawTruncationRow_(
+          tbody, data.rows.length, limit, columns.length, groupKey);
     },
 
     drawTableHeader_: function(thead, columns) {
@@ -1939,9 +1935,10 @@ var MainView = (function() {
     saveSnapshots_: function() {
       var snapshots = [];
       for (var i = 0; i < this.snapshots_.length; ++i) {
-        snapshots.push({ data: this.snapshots_[i].origData,
-                         timestamp: Math.floor(
-                                 this.snapshots_[i].time / 1000) });
+        snapshots.push({
+          data: this.snapshots_[i].origData,
+          timestamp: Math.floor(this.snapshots_[i].time / 1000)
+        });
       }
 
       var dump = {
@@ -1951,8 +1948,8 @@ var MainView = (function() {
       };
 
       var dumpText = JSON.stringify(dump, null, ' ');
-      var textBlob = new Blob([dumpText],
-                              { type: 'octet/stream', endings: 'native' });
+      var textBlob =
+          new Blob([dumpText], {type: 'octet/stream', endings: 'native'});
       var blobUrl = window.URL.createObjectURL(textBlob);
       $(DOWNLOAD_ANCHOR_ID).href = blobUrl;
       $(DOWNLOAD_ANCHOR_ID).click();
@@ -2011,8 +2008,8 @@ var MainView = (function() {
 
       for (var i = 0; i < content.snapshots.length; ++i) {
         var snapshot = content.snapshots[i];
-        this.snapshots_.push({flatData: [], origData: [],
-                              time: snapshot.timestamp * 1000});
+        this.snapshots_.push(
+            {flatData: [], origData: [], time: snapshot.timestamp * 1000});
         this.addSnapshotToList_(this.snapshots_.length - 1);
         var snapshotData = snapshot.data;
         for (var j = 0; j < snapshotData.length; ++j) {
@@ -2092,7 +2089,9 @@ var MainView = (function() {
       // was just checked, then uncheck one of the earlier ones so we only have
       // 2.
       var checked = this.getSelectedSnapshotBoxes_();
-      checked.sort(function(a, b) { return b.__time - a.__time; });
+      checked.sort(function(a, b) {
+        return b.__time - a.__time;
+      });
       if (checked.length > 2) {
         for (var i = 2; i < checked.length; ++i)
           checked[i].checked = false;
@@ -2310,9 +2309,7 @@ var MainView = (function() {
 
         for (var i = 0; i < groupKey1.length; ++i) {
           var comparison = compareValuesForKey(
-              groupKey1[i].key,
-              groupKey1[i].value,
-              groupKey2[i].value);
+              groupKey1[i].key, groupKey1[i].value, groupKey2[i].value);
 
           if (comparison != 0)
             return comparison;
@@ -2361,8 +2358,7 @@ var MainView = (function() {
         var groupKey = [];
 
         for (var i = 0; i < groupings.length; ++i) {
-          var entry = {key: groupings[i],
-                       value: e[groupings[i]]};
+          var entry = {key: groupings[i], value: e[groupings[i]]};
           groupKey.push(entry);
         }
 
diff --git a/chromium/chrome/browser/resources/quota_internals/event_handler.js b/chromium/chrome/browser/resources/quota_internals/event_handler.js
index a718545e13d..5505ea9764f 100644
--- a/chromium/chrome/browser/resources/quota_internals/event_handler.js
+++ b/chromium/chrome/browser/resources/quota_internals/event_handler.js
@@ -106,8 +106,7 @@ function numBytesToText_(value) {
   if (segments.length > 1) {
     var UNIT = [' B', ' KB', ' MB', ' GB', ' TB', ' PB'];
     result = segments[0] + '.' + segments[1].slice(0, 2) +
-        UNIT[Math.min(segments.length, UNIT.length) - 1] +
-        ' (' + result + ')';
+        UNIT[Math.min(segments.length, UNIT.length) - 1] + ' (' + result + ')';
   }
 
   return result;
@@ -202,10 +201,8 @@ function getStorageObject(type) {
   var treeViewObject = getTreeViewObject();
   var storageObject = treeViewObject.detail.children[type];
   if (!storageObject) {
-    storageObject = new cr.ui.TreeItem({
-        label: type,
-        detail: {payload: {}, children: {}}
-    });
+    storageObject =
+        new cr.ui.TreeItem({label: type, detail: {payload: {}, children: {}}});
     storageObject.mayHaveChildren_ = true;
     treeViewObject.detail.children[type] = storageObject;
     treeViewObject.add(storageObject);
@@ -224,10 +221,8 @@ function getHostObject(type, host) {
   var storageObject = getStorageObject(type);
   var hostObject = storageObject.detail.children[host];
   if (!hostObject) {
-    hostObject = new cr.ui.TreeItem({
-        label: host,
-        detail: {payload: {}, children: {}}
-    });
+    hostObject =
+        new cr.ui.TreeItem({label: host, detail: {payload: {}, children: {}}});
     hostObject.mayHaveChildren_ = true;
     storageObject.detail.children[host] = hostObject;
     storageObject.add(hostObject);
@@ -247,10 +242,8 @@ function getOriginObject(type, host, origin) {
   var hostObject = getHostObject(type, host);
   var originObject = hostObject.detail.children[origin];
   if (!originObject) {
-    originObject = new cr.ui.TreeItem({
-        label: origin,
-        detail: {payload: {}, children: {}}
-    });
+    originObject = new cr.ui.TreeItem(
+        {label: origin, detail: {payload: {}, children: {}}});
     originObject.mayHaveChildren_ = false;
     hostObject.detail.children[origin] = originObject;
     hostObject.add(originObject);
@@ -303,7 +296,6 @@ function handleGlobalInfo(event) {
   storageObject.reveal();
   if (getTreeViewObject().selectedItem == storageObject)
     updateDescription();
-
 }
 
 /**
@@ -340,7 +332,6 @@ function handlePerHostInfo(event) {
     hostObject.reveal();
     if (getTreeViewObject().selectedItem == hostObject)
       updateDescription();
-
   }
 }
 
@@ -410,8 +401,7 @@ function handleStatistics(event) {
       statistics[key] = entry;
     }
     entry.detail = data[key];
-    entry.innerHTML =
-        '<td>' + stringToText_(key) + '</td>' +
+    entry.innerHTML = '<td>' + stringToText_(key) + '</td>' +
         '<td>' + stringToText_(entry.detail) + '</td>';
     localize_(entry);
   }
@@ -427,20 +417,15 @@ function updateDescription() {
   tbody.innerHTML = '';
 
   if (item) {
-    var keyAndLabel = [['type', 'Storage Type'],
-                       ['host', 'Host Name'],
-                       ['origin', 'Origin URL'],
-                       ['usage', 'Total Storage Usage', numBytesToText_],
-                       ['unlimitedUsage', 'Usage of Unlimited Origins',
-                        numBytesToText_],
-                       ['quota', 'Quota', numBytesToText_],
-                       ['inUse', 'Origin is in use?'],
-                       ['usedCount', 'Used count'],
-                       ['lastAccessTime', 'Last Access Time',
-                        dateToText],
-                       ['lastModifiedTime', 'Last Modified Time',
-                        dateToText]
-                      ];
+    var keyAndLabel = [
+      ['type', 'Storage Type'], ['host', 'Host Name'], ['origin', 'Origin URL'],
+      ['usage', 'Total Storage Usage', numBytesToText_],
+      ['unlimitedUsage', 'Usage of Unlimited Origins', numBytesToText_],
+      ['quota', 'Quota', numBytesToText_], ['inUse', 'Origin is in use?'],
+      ['usedCount', 'Used count'],
+      ['lastAccessTime', 'Last Access Time', dateToText],
+      ['lastModifiedTime', 'Last Modified Time', dateToText]
+    ];
     for (var i = 0; i < keyAndLabel.length; ++i) {
       var key = keyAndLabel[i][0];
       var label = keyAndLabel[i][1];
@@ -451,8 +436,7 @@ function updateDescription() {
       var normalize = keyAndLabel[i][2] || stringToText_;
 
       var row = cr.doc.createElement('tr');
-      row.innerHTML =
-          '<td>' + label + '</td>' +
+      row.innerHTML = '<td>' + label + '</td>' +
           '<td>' + normalize(entry) + '</td>';
       localize_(row);
       tbody.appendChild(row);
@@ -501,30 +485,23 @@ function dumpStatisticsToObj() {
 function dump() {
   var separator = '========\n';
 
-  $('dump-field').textContent =
-      separator +
-      'Summary\n' +
-      separator +
+  $('dump-field').textContent = separator + 'Summary\n' + separator +
       JSON.stringify({availableSpace: availableSpace}, null, 2) + '\n' +
-      separator +
-      'Usage And Quota\n' +
-      separator +
-      JSON.stringify(dumpTreeToObj(), null, 2) + '\n' +
-      separator +
-      'Misc Statistics\n' +
-      separator +
+      separator + 'Usage And Quota\n' + separator +
+      JSON.stringify(dumpTreeToObj(), null, 2) + '\n' + separator +
+      'Misc Statistics\n' + separator +
       JSON.stringify(dumpStatisticsToObj(), null, 2);
 }
 
 function onLoad() {
   cr.ui.decorate('tabbox', cr.ui.TabBox);
 
-  cr.quota.onAvailableSpaceUpdated.addEventListener('update',
-                                                    handleAvailableSpace);
+  cr.quota.onAvailableSpaceUpdated.addEventListener(
+      'update', handleAvailableSpace);
   cr.quota.onGlobalInfoUpdated.addEventListener('update', handleGlobalInfo);
   cr.quota.onPerHostInfoUpdated.addEventListener('update', handlePerHostInfo);
-  cr.quota.onPerOriginInfoUpdated.addEventListener('update',
-                                                   handlePerOriginInfo);
+  cr.quota.onPerOriginInfoUpdated.addEventListener(
+      'update', handlePerOriginInfo);
   cr.quota.onStatisticsUpdated.addEventListener('update', handleStatistics);
   cr.quota.requestInfo();
 
diff --git a/chromium/chrome/browser/resources/sandbox_internals/sandbox_internals.js b/chromium/chrome/browser/resources/sandbox_internals/sandbox_internals.js
index 02479b54f3b..81c4ad5cf7c 100644
--- a/chromium/chrome/browser/resources/sandbox_internals/sandbox_internals.js
+++ b/chromium/chrome/browser/resources/sandbox_internals/sandbox_internals.js
@@ -3,137 +3,138 @@
 // found in the LICENSE file.
 
 (function() {
-  let GOOD = 'good';
-  let BAD = 'bad';
-  let INFO = 'info';
-
-  /**
-   * Adds a row to the sandbox status table.
-   * @param {string} name The name of the status item.
-   * @param {string} value The status of the item.
-   * @param {string?} cssClass A CSS class to apply to the row.
-   * @return {Element} The newly added TR.
-   */
-  function addStatusRow(name, value, cssClass) {
-    let row = cr.doc.createElement('tr');
-
-    let nameCol = row.appendChild(cr.doc.createElement('td'));
-    let valueCol = row.appendChild(cr.doc.createElement('td'));
-
-    nameCol.textContent = name;
-    valueCol.textContent = value;
-
-    if (cssClass != null) {
-      nameCol.classList.add(cssClass);
-      valueCol.classList.add(cssClass);
-    }
-
-    $('sandbox-status').appendChild(row);
-    return row;
-  }
-
-  /**
-   * Adds a status row that reports either Yes or No.
-   * @param {string} name The name of the status item.
-   * @param {boolean} result The status (good/bad) result.
-   * @return {Element} The newly added TR.
-   */
-  function addGoodBadRow(name, result) {
-    return addStatusRow(name, result ? 'Yes' : 'No', result ? GOOD : BAD);
+let GOOD = 'good';
+let BAD = 'bad';
+let INFO = 'info';
+
+/**
+ * Adds a row to the sandbox status table.
+ * @param {string} name The name of the status item.
+ * @param {string} value The status of the item.
+ * @param {string?} cssClass A CSS class to apply to the row.
+ * @return {Element} The newly added TR.
+ */
+function addStatusRow(name, value, cssClass) {
+  let row = cr.doc.createElement('tr');
+
+  let nameCol = row.appendChild(cr.doc.createElement('td'));
+  let valueCol = row.appendChild(cr.doc.createElement('td'));
+
+  nameCol.textContent = name;
+  valueCol.textContent = value;
+
+  if (cssClass != null) {
+    nameCol.classList.add(cssClass);
+    valueCol.classList.add(cssClass);
   }
 
-  /**
-   * Reports the overall sandbox status evaluation message.
-   * @param {boolean}
-   */
-  function setEvaluation(result) {
-    let message = result ? 'You are adequately sandboxed.'
-                         : 'You are NOT adequately sandboxed.';
-    $('evaluation').innerText = message;
-  }
-
-  /**
-   * Main page handler for Android.
-   */
-  function androidHandler() {
-    chrome.getAndroidSandboxStatus((status) => {
-      var isIsolated = false;
-      var isTsync = false;
-      var isChromeSeccomp = false;
-
-      addStatusRow('PID', status.pid, INFO);
-      addStatusRow('UID', status.uid, INFO);
-      isIsolated = status.secontext.indexOf(':isolated_app:') != -1;
-      addStatusRow('SELinux Context', status.secontext,
-          isIsolated ? GOOD : BAD);
-
-      let procStatus = status.procStatus.split('\n');
-      for (let line of procStatus) {
-        if (line.startsWith('Seccomp')) {
-          var value = line.split(':')[1].trim();
-          var cssClass = BAD;
-          if (value == '2') {
-            value = 'Yes - TSYNC (' + line + ')';
-            cssClass = GOOD;
-            isTsync = true;
-          } else if (value == '1') {
-            value = 'Yes (' + line + ')';
-          } else {
-            value = line;
-          }
-          addStatusRow('Seccomp-BPF Enabled (Kernel)', value, cssClass);
-          break;
+  $('sandbox-status').appendChild(row);
+  return row;
+}
+
+/**
+ * Adds a status row that reports either Yes or No.
+ * @param {string} name The name of the status item.
+ * @param {boolean} result The status (good/bad) result.
+ * @return {Element} The newly added TR.
+ */
+function addGoodBadRow(name, result) {
+  return addStatusRow(name, result ? 'Yes' : 'No', result ? GOOD : BAD);
+}
+
+/**
+ * Reports the overall sandbox status evaluation message.
+ * @param {boolean}
+ */
+function setEvaluation(result) {
+  let message = result ? 'You are adequately sandboxed.' :
+                         'You are NOT adequately sandboxed.';
+  $('evaluation').innerText = message;
+}
+
+/**
+ * Main page handler for Android.
+ */
+function androidHandler() {
+  chrome.getAndroidSandboxStatus((status) => {
+    var isIsolated = false;
+    var isTsync = false;
+    var isChromeSeccomp = false;
+
+    addStatusRow('PID', status.pid, INFO);
+    addStatusRow('UID', status.uid, INFO);
+    isIsolated = status.secontext.indexOf(':isolated_app:') != -1;
+    addStatusRow('SELinux Context', status.secontext, isIsolated ? GOOD : BAD);
+
+    let procStatus = status.procStatus.split('\n');
+    for (let line of procStatus) {
+      if (line.startsWith('Seccomp')) {
+        var value = line.split(':')[1].trim();
+        var cssClass = BAD;
+        if (value == '2') {
+          value = 'Yes - TSYNC (' + line + ')';
+          cssClass = GOOD;
+          isTsync = true;
+        } else if (value == '1') {
+          value = 'Yes (' + line + ')';
+        } else {
+          value = line;
         }
+        addStatusRow('Seccomp-BPF Enabled (Kernel)', value, cssClass);
+        break;
       }
+    }
 
-      var seccompStatus = 'Unknown';
-      switch (status.seccompStatus) {
-        case 0:
-          seccompStatus = 'Not Supported';
-          break;
-        case 1:
-          seccompStatus = 'Run-time Detection Failed';
-          break;
-        case 2:
-          seccompStatus = 'Disabled by Field Trial';
-          break;
-        case 3:
-          seccompStatus = 'Enabled by Field Trial (not started)';
-          break;
-        case 4:
-          seccompStatus = 'Sandbox Started';
-          isChromeSeccomp = true;
-          break;
-      }
-      addStatusRow('Seccomp-BPF Enabled (Chrome)', seccompStatus,
-          status.seccompStatus == 4 ? GOOD : BAD);
-
-      addStatusRow('Android Build ID', status.androidBuildId, INFO);
+    var seccompStatus = 'Unknown';
+    switch (status.seccompStatus) {
+      case 0:
+        seccompStatus = 'Not Supported';
+        break;
+      case 1:
+        seccompStatus = 'Run-time Detection Failed';
+        break;
+      case 2:
+        seccompStatus = 'Disabled by Field Trial';
+        break;
+      case 3:
+        seccompStatus = 'Enabled by Field Trial (not started)';
+        break;
+      case 4:
+        seccompStatus = 'Sandbox Started';
+        isChromeSeccomp = true;
+        break;
+    }
+    addStatusRow(
+        'Seccomp-BPF Enabled (Chrome)', seccompStatus,
+        status.seccompStatus == 4 ? GOOD : BAD);
 
-      setEvaluation(isIsolated && isTsync && isChromeSeccomp);
-    });
-  }
+    addStatusRow('Android Build ID', status.androidBuildId, INFO);
 
-  /**
-   * Main page handler for desktop Linux.
-   */
-  function linuxHandler() {
-    addGoodBadRow('SUID Sandbox', loadTimeData.getBoolean('suid'));
-    addGoodBadRow('Namespace Sandbox', loadTimeData.getBoolean('userNs'));
-    addGoodBadRow('PID namespaces', loadTimeData.getBoolean('pidNs'));
-    addGoodBadRow('Network namespaces', loadTimeData.getBoolean('netNs'));
-    addGoodBadRow('Seccomp-BPF sandbox', loadTimeData.getBoolean('seccompBpf'));
-    addGoodBadRow('Seccomp-BPF sandbox supports TSYNC',
-        loadTimeData.getBoolean('seccompTsync'));
-    addGoodBadRow('Yama LSM Enforcing', loadTimeData.getBoolean('yama'));
-    setEvaluation(loadTimeData.getBoolean('sandboxGood'));
-  }
-
-  document.addEventListener('DOMContentLoaded', () => {
-    if (cr.isAndroid) {
-      androidHandler();
-    } else {
-      linuxHandler();
-    }
+    setEvaluation(isIsolated && isTsync && isChromeSeccomp);
   });
+}
+
+/**
+ * Main page handler for desktop Linux.
+ */
+function linuxHandler() {
+  addGoodBadRow('SUID Sandbox', loadTimeData.getBoolean('suid'));
+  addGoodBadRow('Namespace Sandbox', loadTimeData.getBoolean('userNs'));
+  addGoodBadRow('PID namespaces', loadTimeData.getBoolean('pidNs'));
+  addGoodBadRow('Network namespaces', loadTimeData.getBoolean('netNs'));
+  addGoodBadRow('Seccomp-BPF sandbox', loadTimeData.getBoolean('seccompBpf'));
+  addGoodBadRow(
+      'Seccomp-BPF sandbox supports TSYNC',
+      loadTimeData.getBoolean('seccompTsync'));
+  addGoodBadRow('Yama LSM Enforcing', loadTimeData.getBoolean('yama'));
+  setEvaluation(loadTimeData.getBoolean('sandboxGood'));
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  if (cr.isAndroid) {
+    androidHandler();
+  } else {
+    linuxHandler();
+  }
+});
 })();
diff --git a/chromium/chrome/browser/resources/set_as_default_browser.js b/chromium/chrome/browser/resources/set_as_default_browser.js
index 34f83a9086e..254704b5e74 100644
--- a/chromium/chrome/browser/resources/set_as_default_browser.js
+++ b/chromium/chrome/browser/resources/set_as_default_browser.js
@@ -3,14 +3,14 @@
 // found in the LICENSE file.
 
 (function() {
-  // Since all we want here is forwarding of certain commands, all can be done
-  // in the anonymous function's scope.
+// Since all we want here is forwarding of certain commands, all can be done
+// in the anonymous function's scope.
 
-  function wireUpWindow() {
-    $('launch-button').addEventListener('click', function() {
-      chrome.send('SetAsDefaultBrowser:LaunchSetDefaultBrowserFlow');
-    });
-  }
+function wireUpWindow() {
+  $('launch-button').addEventListener('click', function() {
+    chrome.send('SetAsDefaultBrowser:LaunchSetDefaultBrowserFlow');
+  });
+}
 
-  window.addEventListener('DOMContentLoaded', wireUpWindow);
+window.addEventListener('DOMContentLoaded', wireUpWindow);
 })();
diff --git a/chromium/chrome/browser/resources/settings/BUILD.gn b/chromium/chrome/browser/resources/settings/BUILD.gn
index 30c997005ad..72ce39094c8 100644
--- a/chromium/chrome/browser/resources/settings/BUILD.gn
+++ b/chromium/chrome/browser/resources/settings/BUILD.gn
@@ -61,6 +61,10 @@ polymer_css_build("build") {
 
 grit("flattened_resources") {
   source = "settings_resources.grd"
+
+  # The .grd contains references to generated files.
+  source_is_generated = true
+
   defines = chrome_grit_defines
   outputs = [
     "grit/settings_resources.h",
diff --git a/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.js b/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.js
index 5f236ee6f15..add54039ddb 100644
--- a/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.js
+++ b/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.js
@@ -33,20 +33,22 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-// <if expr="chromeos">
-        map.set(
-            settings.Route.MANAGE_ACCESSIBILITY.path,
-            '#subpage-trigger .subpage-arrow');
-// </if>
+        // <if expr="chromeos">
+        if (settings.routes.MANAGE_ACCESSIBILITY) {
+          map.set(
+              settings.routes.MANAGE_ACCESSIBILITY.path,
+              '#subpage-trigger .subpage-arrow');
+        }
+        // </if>
         return map;
       },
     },
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /** @private */
   onManageAccessibilityFeaturesTap_: function() {
-    settings.navigateTo(settings.Route.MANAGE_ACCESSIBILITY);
+    settings.navigateTo(settings.routes.MANAGE_ACCESSIBILITY);
   },
-// </if>
+  // </if>
 });
diff --git a/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html b/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
index cfb077b1eaa..bae7631d2f4 100644
--- a/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
+++ b/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
@@ -2,7 +2,6 @@
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../i18n_setup.html">
@@ -131,12 +130,12 @@
         <settings-toggle-button
             pref="{{prefs.settings.a11y.switch_access}}"
             label="$i18n{switchAccessLabel}">
-          <paper-icon-button icon="cr:settings_icon"
-              class="more-actions"
+          <button is="paper-icon-button-light"
+              class="icon-settings more-actions"
               on-tap="onSwitchAccessSettingsTap_"
               hidden="[[!prefs.settings.a11y.switch_access.value]]"
               aria-label="$i18n{selectToSpeakOptionsLabel}">
-          </paper-icon-button>
+          </button>
         </settings-toggle-button>
       </div>
     </template>
diff --git a/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.js b/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.js
index 848bd570b12..79e39c1dd0e 100644
--- a/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.js
+++ b/chromium/chrome/browser/resources/settings/a11y_page/manage_a11y_page.js
@@ -27,16 +27,20 @@ Polymer({
         // If these values get changed then those strings need to be changed as
         // well.
         return [
-          {value: 600,
-           name: loadTimeData.getString('delayBeforeClickExtremelyShort')},
-          {value: 800,
-           name: loadTimeData.getString('delayBeforeClickVeryShort')},
-          {value: 1000,
-           name: loadTimeData.getString('delayBeforeClickShort')},
-          {value: 2000,
-           name: loadTimeData.getString('delayBeforeClickLong')},
-          {value: 4000,
-           name: loadTimeData.getString('delayBeforeClickVeryLong')},
+          {
+            value: 600,
+            name: loadTimeData.getString('delayBeforeClickExtremelyShort')
+          },
+          {
+            value: 800,
+            name: loadTimeData.getString('delayBeforeClickVeryShort')
+          },
+          {value: 1000, name: loadTimeData.getString('delayBeforeClickShort')},
+          {value: 2000, name: loadTimeData.getString('delayBeforeClickLong')},
+          {
+            value: 4000,
+            name: loadTimeData.getString('delayBeforeClickVeryLong')
+          },
         ];
       },
     },
@@ -55,7 +59,9 @@ Polymer({
     /** @private */
     isGuest_: {
       type: Boolean,
-      value: function() { return loadTimeData.getBoolean('isGuest'); }
+      value: function() {
+        return loadTimeData.getBoolean('isGuest');
+      }
     },
   },
 
@@ -77,28 +83,28 @@ Polymer({
   /** @private */
   onDisplayTap_: function() {
     settings.navigateTo(
-        settings.Route.DISPLAY,
+        settings.routes.DISPLAY,
         /* dynamicParams */ null, /* removeSearch */ true);
   },
 
   /** @private */
   onAppearanceTap_: function() {
     settings.navigateTo(
-        settings.Route.APPEARANCE,
+        settings.routes.APPEARANCE,
         /* dynamicParams */ null, /* removeSearch */ true);
   },
 
   /** @private */
   onKeyboardTap_: function() {
     settings.navigateTo(
-        settings.Route.KEYBOARD,
+        settings.routes.KEYBOARD,
         /* dynamicParams */ null, /* removeSearch */ true);
   },
 
   /** @private */
   onMouseTap_: function() {
     settings.navigateTo(
-        settings.Route.POINTERS,
+        settings.routes.POINTERS,
         /* dynamicParams */ null, /* removeSearch */ true);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page.html b/chromium/chrome/browser/resources/settings/about_page/about_page.html
index f4da9748796..3e050878b50 100644
--- a/chromium/chrome/browser/resources/settings/about_page/about_page.html
+++ b/chromium/chrome/browser/resources/settings/about_page/about_page.html
@@ -35,10 +35,6 @@
         --about-page-image-space: 10px;
       }
 
-      .copyable {
-        -webkit-user-select: text;
-      }
-
       .info-section {
         margin-bottom: 12px;
       }
@@ -68,7 +64,7 @@
       }
 
       iron-icon[icon='settings:error'] {
-        fill: var(--paper-red-600);
+        fill: var(--google-red-700);
       }
 
       .settings-box .start {
@@ -124,7 +120,7 @@
                     $i18n{learnMore}
                   </a>
                 </span>
-                <div class="secondary copyable">$i18n{aboutBrowserVersion}</div>
+                <div class="secondary">$i18n{aboutBrowserVersion}</div>
               </div>
               <div class="separator" hidden="[[!showButtonContainer_]]"></div>
               <span id="buttonContainer" hidden="[[!showButtonContainer_]]">
@@ -203,7 +199,7 @@
       </settings-section>
 
       <settings-section>
-        <div class="settings-box padded block copyable">
+        <div class="settings-box padded block">
           <div class="info-section">
             <div class="secondary">$i18n{aboutProductTitle}</div>
             <div class="secondary">$i18n{aboutProductCopyright}</div>
diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page.js b/chromium/chrome/browser/resources/settings/about_page/about_page.js
index 9d990aa5697..c9842d519b7 100644
--- a/chromium/chrome/browser/resources/settings/about_page/about_page.js
+++ b/chromium/chrome/browser/resources/settings/about_page/about_page.js
@@ -19,7 +19,7 @@ Polymer({
       value: {message: '', progress: 0, status: UpdateStatus.DISABLED},
     },
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @private */
     hasCheckedForUpdates_: {
       type: Boolean,
@@ -34,12 +34,12 @@ Polymer({
 
     /** @private {?RegulatoryInfo} */
     regulatoryInfo_: Object,
-// </if>
+    // </if>
 
-// <if expr="_google_chrome and is_macosx">
+    // <if expr="_google_chrome and is_macosx">
     /** @private {!PromoteUpdaterStatus} */
     promoteUpdaterStatus_: Object,
-// </if>
+    // </if>
 
     /** @private {!{obsolete: boolean, endOfLine: boolean}} */
     obsoleteSystemInfo_: {
@@ -61,7 +61,7 @@ Polymer({
     /** @private */
     showRelaunch_: Boolean,
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @private */
     showRelaunchAndPowerwash_: {
       type: Boolean,
@@ -81,9 +81,11 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.DETAILED_BUILD_INFO.path,
-            '#detailed-build-info-trigger');
+        if (settings.routes.DETAILED_BUILD_INFO) {
+          map.set(
+              settings.routes.DETAILED_BUILD_INFO.path,
+              '#detailed-build-info-trigger');
+        }
         return map;
       },
     },
@@ -96,18 +98,18 @@ Polymer({
 
     /** @private {!AboutPageUpdateInfo|undefined} */
     updateInfo_: Object,
-// </if>
+    // </if>
   },
 
   observers: [
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     'updateShowUpdateStatus_(' +
         'obsoleteSystemInfo_, currentUpdateStatusEvent_)',
     'updateShowRelaunch_(currentUpdateStatusEvent_)',
     'updateShowButtonContainer_(showRelaunch_)',
-// </if>
+    // </if>
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     'updateShowUpdateStatus_(' +
         'obsoleteSystemInfo_, currentUpdateStatusEvent_,' +
         'hasCheckedForUpdates_)',
@@ -115,7 +117,7 @@ Polymer({
         'currentChannel_)',
     'updateShowButtonContainer_(' +
         'showRelaunch_, showRelaunchAndPowerwash_, showCheckUpdates_)',
-// </if>
+    // </if>
   ],
 
 
@@ -133,7 +135,7 @@ Polymer({
     this.lifetimeBrowserProxy_ =
         settings.LifetimeBrowserProxyImpl.getInstance();
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     this.addEventListener('target-channel-changed', function(e) {
       this.targetChannel_ = e.detail;
     }.bind(this));
@@ -147,10 +149,10 @@ Polymer({
     this.aboutBrowserProxy_.getRegulatoryInfo().then(function(info) {
       this.regulatoryInfo_ = info;
     }.bind(this));
-// </if>
-// <if expr="not chromeos">
+    // </if>
+    // <if expr="not chromeos">
     this.startListening_();
-// </if>
+    // </if>
     if (settings.getQueryParameters().get('checkForUpdate') == 'true') {
       this.onCheckUpdatesTap_();
     }
@@ -159,13 +161,12 @@ Polymer({
   /** @private */
   startListening_: function() {
     this.addWebUIListener(
-        'update-status-changed',
-        this.onUpdateStatusChanged_.bind(this));
-// <if expr="_google_chrome and is_macosx">
+        'update-status-changed', this.onUpdateStatusChanged_.bind(this));
+    // <if expr="_google_chrome and is_macosx">
     this.addWebUIListener(
         'promotion-state-changed',
         this.onPromoteUpdaterStatusChanged_.bind(this));
-// </if>
+    // </if>
     this.aboutBrowserProxy_.refreshUpdateStatus();
   },
 
@@ -174,18 +175,18 @@ Polymer({
    * @private
    */
   onUpdateStatusChanged_: function(event) {
-// <if expr="chromeos">
+    // <if expr="chromeos">
     if (event.status == UpdateStatus.CHECKING) {
       this.hasCheckedForUpdates_ = true;
     } else if (event.status == UpdateStatus.NEED_PERMISSION_TO_UPDATE) {
       this.showUpdateWarningDialog_ = true;
       this.updateInfo_ = {version: event.version, size: event.size};
     }
-// </if>
+    // </if>
     this.currentUpdateStatusEvent_ = event;
   },
 
-// <if expr="_google_chrome and is_macosx">
+  // <if expr="_google_chrome and is_macosx">
   /**
    * @param {!PromoteUpdaterStatus} status
    * @private
@@ -215,7 +216,7 @@ Polymer({
     // actionable items won't trigger action.
     event.stopPropagation();
   },
-// </if>
+  // </if>
 
   /** @private */
   onHelpTap_: function() {
@@ -229,7 +230,7 @@ Polymer({
 
   /** @private */
   updateShowUpdateStatus_: function() {
-// <if expr="chromeos">
+    // <if expr="chromeos">
     // Do not show the "updated" status if we haven't checked yet or the update
     // warning dialog is shown to user.
     if (this.currentUpdateStatusEvent_.status == UpdateStatus.UPDATED &&
@@ -237,7 +238,7 @@ Polymer({
       this.showUpdateStatus_ = false;
       return;
     }
-// </if>
+    // </if>
     this.showUpdateStatus_ =
         this.currentUpdateStatusEvent_.status != UpdateStatus.DISABLED &&
         !this.obsoleteSystemInfo_.endOfLine;
@@ -249,24 +250,24 @@ Polymer({
    * @private
    */
   updateShowButtonContainer_: function() {
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     this.showButtonContainer_ = this.showRelaunch_;
-// </if>
-// <if expr="chromeos">
+    // </if>
+    // <if expr="chromeos">
     this.showButtonContainer_ = this.showRelaunch_ ||
         this.showRelaunchAndPowerwash_ || this.showCheckUpdates_;
-// </if>
+    // </if>
   },
 
   /** @private */
   updateShowRelaunch_: function() {
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     this.showRelaunch_ = this.checkStatus_(UpdateStatus.NEARLY_UPDATED);
-// </if>
-// <if expr="chromeos">
+    // </if>
+    // <if expr="chromeos">
     this.showRelaunch_ = this.checkStatus_(UpdateStatus.NEARLY_UPDATED) &&
         !this.isTargetChannelMoreStable_();
-// </if>
+    // </if>
   },
 
   /**
@@ -277,40 +278,45 @@ Polymer({
     switch (this.currentUpdateStatusEvent_.status) {
       case UpdateStatus.CHECKING:
       case UpdateStatus.NEED_PERMISSION_TO_UPDATE:
-        return this.i18n('aboutUpgradeCheckStarted');
+        return this.i18nAdvanced('aboutUpgradeCheckStarted');
       case UpdateStatus.NEARLY_UPDATED:
-// <if expr="chromeos">
+        // <if expr="chromeos">
         if (this.currentChannel_ != this.targetChannel_)
-          return this.i18n('aboutUpgradeSuccessChannelSwitch');
-// </if>
-        return this.i18n('aboutUpgradeRelaunch');
+          return this.i18nAdvanced('aboutUpgradeSuccessChannelSwitch');
+        // </if>
+        return this.i18nAdvanced('aboutUpgradeRelaunch');
       case UpdateStatus.UPDATED:
-        return this.i18n('aboutUpgradeUpToDate');
+        return this.i18nAdvanced('aboutUpgradeUpToDate');
       case UpdateStatus.UPDATING:
         assert(typeof this.currentUpdateStatusEvent_.progress == 'number');
         var progressPercent = this.currentUpdateStatusEvent_.progress + '%';
 
-// <if expr="chromeos">
+        // <if expr="chromeos">
         if (this.currentChannel_ != this.targetChannel_) {
-          return this.i18n(
-              'aboutUpgradeUpdatingChannelSwitch',
-              this.i18n(settings.browserChannelToI18nId(this.targetChannel_)),
-              progressPercent);
+          return this.i18nAdvanced('aboutUpgradeUpdatingChannelSwitch', {
+            substitutions: [
+              this.i18nAdvanced(
+                  settings.browserChannelToI18nId(this.targetChannel_)),
+              progressPercent
+            ]
+          });
         }
-// </if>
+        // </if>
         if (this.currentUpdateStatusEvent_.progress > 0) {
           // NOTE(dbeam): some platforms (i.e. Mac) always send 0% while
           // updating (they don't support incremental upgrade progress). Though
           // it's certainly quite possible to validly end up here with 0% on
           // platforms that support incremental progress, nobody really likes
           // seeing that they're 0% done with something.
-          return this.i18n('aboutUpgradeUpdatingPercent', progressPercent);
+          return this.i18nAdvanced('aboutUpgradeUpdatingPercent', {
+            substitutions: [progressPercent],
+          });
         }
-        return this.i18n('aboutUpgradeUpdating');
+        return this.i18nAdvanced('aboutUpgradeUpdating');
       default:
         function formatMessage(msg) {
-          return parseHtmlSubset(
-              '<b>' + msg + '</b>', ['br', 'pre']).firstChild.innerHTML;
+          return parseHtmlSubset('<b>' + msg + '</b>', ['br', 'pre'])
+              .firstChild.innerHTML;
         }
         var result = '';
         var message = this.currentUpdateStatusEvent_.message;
@@ -372,7 +378,7 @@ Polymer({
     return this.currentUpdateStatusEvent_.status == status;
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @return {boolean}
    * @private
@@ -386,7 +392,7 @@ Polymer({
 
   /** @private */
   onDetailedBuildInfoTap_: function() {
-    settings.navigateTo(settings.Route.DETAILED_BUILD_INFO);
+    settings.navigateTo(settings.routes.DETAILED_BUILD_INFO);
   },
 
   /** @private */
@@ -416,8 +422,8 @@ Polymer({
   computeShowCheckUpdates_: function() {
     // Enable the update button if we are in a stale 'updated' status or
     // update has failed. Disable it otherwise.
-    var staleUpdatedStatus = !this.hasCheckedForUpdates_ &&
-        this.checkStatus_(UpdateStatus.UPDATED);
+    var staleUpdatedStatus =
+        !this.hasCheckedForUpdates_ && this.checkStatus_(UpdateStatus.UPDATED);
 
     return staleUpdatedStatus || this.checkStatus_(UpdateStatus.FAILED);
   },
@@ -437,22 +443,24 @@ Polymer({
     // dialog and then intends to check for update again.
     this.hasCheckedForUpdates_ = false;
   },
-// </if>
+  // </if>
 
   /** @private */
   onProductLogoTap_: function() {
-    this.$['product-logo'].animate({
-      transform: ['none', 'rotate(-10turn)'],
-    }, {
-      duration: 500,
-      easing: 'cubic-bezier(1, 0, 0, 1)',
-    });
+    this.$['product-logo'].animate(
+        {
+          transform: ['none', 'rotate(-10turn)'],
+        },
+        {
+          duration: 500,
+          easing: 'cubic-bezier(1, 0, 0, 1)',
+        });
   },
 
-// <if expr="_google_chrome">
+  // <if expr="_google_chrome">
   /** @private */
   onReportIssueTap_: function() {
     this.aboutBrowserProxy_.openFeedbackDialog();
   },
-// </if>
+  // </if>
 });
diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js
index 892ceca55f2..beb4b67e2ec 100644
--- a/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js
@@ -100,9 +100,12 @@ cr.define('settings', function() {
    */
   function browserChannelToI18nId(channel) {
     switch (channel) {
-      case BrowserChannel.BETA: return 'aboutChannelBeta';
-      case BrowserChannel.DEV: return 'aboutChannelDev';
-      case BrowserChannel.STABLE: return 'aboutChannelStable';
+      case BrowserChannel.BETA:
+        return 'aboutChannelBeta';
+      case BrowserChannel.DEV:
+        return 'aboutChannelDev';
+      case BrowserChannel.STABLE:
+        return 'aboutChannelStable';
     }
 
     assertNotReached();
@@ -127,35 +130,34 @@ cr.define('settings', function() {
   }
 
   /** @interface */
-  function AboutPageBrowserProxy() {}
-
-  AboutPageBrowserProxy.prototype = {
+  class AboutPageBrowserProxy {
     /**
      * Indicates to the browser that the page is ready.
      */
-    pageReady: function() {},
+    pageReady() {}
 
     /**
      * Request update status from the browser. It results in one or more
      * 'update-status-changed' WebUI events.
      */
-    refreshUpdateStatus: function() {},
+    refreshUpdateStatus() {}
 
     /** Opens the help page. */
-    openHelpPage: function() {},
+    openHelpPage() {}
 
-// <if expr="_google_chrome">
+    // <if expr="_google_chrome">
     /**
      * Opens the feedback dialog.
      */
-    openFeedbackDialog: function() {},
-// </if>
+    openFeedbackDialog() {}
 
-// <if expr="chromeos">
+    // </if>
+
+    // <if expr="chromeos">
     /**
      * Checks for available update and applies if it exists.
      */
-    requestUpdate: function() {},
+    requestUpdate() {}
 
     /**
      * Checks for the update with specified version and size and applies over
@@ -167,101 +169,102 @@ cr.define('settings', function() {
      * @param {string} target_version
      * @param {string} target_size
      */
-    requestUpdateOverCellular: function(target_version, target_size) {},
+    requestUpdateOverCellular(target_version, target_size) {}
 
     /**
      * @param {!BrowserChannel} channel
      * @param {boolean} isPowerwashAllowed
      */
-    setChannel: function(channel, isPowerwashAllowed) {},
+    setChannel(channel, isPowerwashAllowed) {}
 
     /** @return {!Promise<!ChannelInfo>} */
-    getChannelInfo: function() {},
+    getChannelInfo() {}
 
     /** @return {!Promise<!VersionInfo>} */
-    getVersionInfo: function() {},
+    getVersionInfo() {}
 
     /** @return {!Promise<?RegulatoryInfo>} */
-    getRegulatoryInfo: function() {},
-// </if>
+    getRegulatoryInfo() {}
 
-// <if expr="_google_chrome and is_macosx">
+    // </if>
+
+    // <if expr="_google_chrome and is_macosx">
     /**
      * Triggers setting up auto-updates for all users.
      */
-    promoteUpdater: function() {},
-// </if>
-  };
+    promoteUpdater() {}
+    // </if>
+  }
 
   /**
    * @implements {settings.AboutPageBrowserProxy}
-   * @constructor
    */
-  function AboutPageBrowserProxyImpl() {}
-  cr.addSingletonGetter(AboutPageBrowserProxyImpl);
-
-  AboutPageBrowserProxyImpl.prototype = {
+  class AboutPageBrowserProxyImpl {
     /** @override */
-    pageReady: function() {
+    pageReady() {
       chrome.send('aboutPageReady');
-    },
+    }
 
     /** @override */
-    refreshUpdateStatus: function() {
+    refreshUpdateStatus() {
       chrome.send('refreshUpdateStatus');
-    },
+    }
 
-// <if expr="_google_chrome and is_macosx">
+    // <if expr="_google_chrome and is_macosx">
     /** @override */
-    promoteUpdater: function() {
+    promoteUpdater() {
       chrome.send('promoteUpdater');
-    },
-// </if>
+    }
+
+    // </if>
 
     /** @override */
-    openHelpPage: function() {
+    openHelpPage() {
       chrome.send('openHelpPage');
-    },
+    }
 
-// <if expr="_google_chrome">
+    // <if expr="_google_chrome">
     /** @override */
-    openFeedbackDialog: function() {
+    openFeedbackDialog() {
       chrome.send('openFeedbackDialog');
-    },
-// </if>
+    }
 
-// <if expr="chromeos">
+    // </if>
+
+    // <if expr="chromeos">
     /** @override */
-    requestUpdate: function() {
+    requestUpdate() {
       chrome.send('requestUpdate');
-    },
+    }
 
     /** @override */
-    requestUpdateOverCellular: function(target_version, target_size) {
+    requestUpdateOverCellular(target_version, target_size) {
       chrome.send('requestUpdateOverCellular', [target_version, target_size]);
-    },
+    }
 
     /** @override */
-    setChannel: function(channel, isPowerwashAllowed) {
+    setChannel(channel, isPowerwashAllowed) {
       chrome.send('setChannel', [channel, isPowerwashAllowed]);
-    },
+    }
 
     /** @override */
-    getChannelInfo: function() {
+    getChannelInfo() {
       return cr.sendWithPromise('getChannelInfo');
-    },
+    }
 
     /** @override */
-    getVersionInfo: function() {
+    getVersionInfo() {
       return cr.sendWithPromise('getVersionInfo');
-    },
+    }
 
     /** @override */
-    getRegulatoryInfo: function() {
+    getRegulatoryInfo() {
       return cr.sendWithPromise('getRegulatoryInfo');
     }
-// </if>
-  };
+    // </if>
+  }
+
+  cr.addSingletonGetter(AboutPageBrowserProxyImpl);
 
   return {
     AboutPageBrowserProxy: AboutPageBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.html b/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.html
index 8c9db5bf2fa..11845c1d0da 100644
--- a/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.html
+++ b/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.html
@@ -12,8 +12,8 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{aboutChangeChannel}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{aboutChangeChannel}</div>
+      <div class="body" slot="body">
         <!-- TODO(dbeam): this can be policy-controlled. Show this in the UI.
              https://www.chromium.org/administrators/policy-list-3#ChromeOsReleaseChannel
         -->
@@ -34,7 +34,7 @@
           <div>[[warning_.description]]</div>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_"
             id="cancel">$i18n{cancel}</paper-button>
         <paper-button id="changeChannel" class="action-button"
diff --git a/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.js b/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.js
index b98a22d6ec8..ceb0322b676 100644
--- a/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.js
+++ b/chromium/chrome/browser/resources/settings/about_page/channel_switcher_dialog.js
@@ -139,7 +139,7 @@ Polymer({
     }
 
     if (settings.isTargetChannelMoreStable(
-        this.currentChannel_, selectedChannel)) {
+            this.currentChannel_, selectedChannel)) {
       // More stable channel selected. For non managed devices, notify the user
       // about powerwash.
       if (loadTimeData.getBoolean('aboutEnterpriseManaged')) {
diff --git a/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html
index 38de1f0f03c..a1ae3142cd9 100644
--- a/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html
+++ b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html
@@ -13,12 +13,8 @@
 <dom-module id="settings-detailed-build-info">
   <template>
     <style include="settings-shared">
-      .secondary {
-        -webkit-user-select: text;
-      }
-
       cr-policy-indicator {
-        -webkit-margin-start: 8px;
+        -webkit-margin-start: var(--cr-controlled-by-spacing);
       }
 
       /* The command line string can contain very long substrings that
diff --git a/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js
index 654ac5ddb9d..8a5842bf2b8 100644
--- a/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js
+++ b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js
@@ -65,7 +65,8 @@ Polymer({
    * @private
    */
   getChangeChannelIndicatorSourceName_: function(canChangeChannel) {
-    return loadTimeData.getBoolean('aboutEnterpriseManaged') ? '' :
+    return loadTimeData.getBoolean('aboutEnterpriseManaged') ?
+        '' :
         loadTimeData.getString('ownerEmail');
   },
 
diff --git a/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.html b/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.html
index 734b20d6a68..1ad1bd610ef 100644
--- a/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.html
+++ b/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.html
@@ -10,11 +10,11 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{aboutUpdateWarningTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{aboutUpdateWarningTitle}</div>
+      <div class="body" slot="body">
         <div id="update-warning-message"></div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="cancel" class="cancel-button"
             on-tap="onCancelTap_">$i18n{cancel}</paper-button>
         <paper-button id="continue" class="action-button"
diff --git a/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.js b/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.js
index d9388919351..4e62fc88900 100644
--- a/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.js
+++ b/chromium/chrome/browser/resources/settings/about_page/update_warning_dialog.js
@@ -40,16 +40,16 @@ Polymer({
 
   /** @private */
   onContinueTap_: function() {
-    this.browserProxy_.requestUpdateOverCellular(this.updateInfo.version,
-                                                 this.updateInfo.size);
+    this.browserProxy_.requestUpdateOverCellular(
+        this.updateInfo.version, this.updateInfo.size);
     this.$.dialog.close();
   },
 
   /** @private */
   updateInfoChanged_: function() {
-    this.$$("#update-warning-message").innerHTML =
-        this.i18n("aboutUpdateWarningMessage",
-                  // Convert bytes to megabytes
-                  Math.floor(Number(this.updateInfo.size) / (1024 * 1024)));
+    this.$$('#update-warning-message').innerHTML = this.i18n(
+        'aboutUpdateWarningMessage',
+        // Convert bytes to megabytes
+        Math.floor(Number(this.updateInfo.size) / (1024 * 1024)));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_browser_proxy.js b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_browser_proxy.js
index 0c5c3d56a44..6cb17f5f63a 100644
--- a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_browser_proxy.js
@@ -21,41 +21,34 @@ var AndroidAppsInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function AndroidAppsBrowserProxy() {
-  }
-
-  AndroidAppsBrowserProxy.prototype = {
-    requestAndroidAppsInfo: function() {},
+  class AndroidAppsBrowserProxy {
+    requestAndroidAppsInfo() {}
 
     /**
      * @param {boolean} keyboardAction True if the app was opened using a
      *     keyboard action.
      */
-    showAndroidAppsSettings: function(keyboardAction) {},
-  };
+    showAndroidAppsSettings(keyboardAction) {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.AndroidAppsBrowserProxy}
    */
-  function AndroidAppsBrowserProxyImpl() {
-  }
-
-  // The singleton instance_ can be replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(AndroidAppsBrowserProxyImpl);
-
-  AndroidAppsBrowserProxyImpl.prototype = {
+  class AndroidAppsBrowserProxyImpl {
     /** @override */
-    requestAndroidAppsInfo: function() {
+    requestAndroidAppsInfo() {
       chrome.send('requestAndroidAppsInfo');
-    },
+    }
 
     /** @override */
-    showAndroidAppsSettings: function(keyboardAction) {
+    showAndroidAppsSettings(keyboardAction) {
       chrome.send('showAndroidAppsSettings', [keyboardAction]);
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ can be replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(AndroidAppsBrowserProxyImpl);
 
   return {
     AndroidAppsBrowserProxy: AndroidAppsBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.html b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.html
index 1f3c4fc0aa7..0fed226e58a 100644
--- a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.html
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.html
@@ -20,33 +20,40 @@
     <settings-animated-pages id="pages" section="androidApps"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
-        <div id="android-apps" class="settings-box two-line first" actionable
-            on-tap="onSubpageTap_">
-          <div class="start">
-            $i18n{androidAppsPageLabel}
-            <div class="secondary" id="secondaryText"
-                inner-h-t-m-l="[[i18n('androidAppsSubtext')]]">
+        <template is="dom-if" if="[[havePlayStoreApp]]" restamp>
+          <div id="android-apps" class="settings-box two-line first" actionable
+              on-tap="onSubpageTap_">
+            <div class="start">
+              $i18n{androidAppsPageLabel}
+              <div class="secondary" id="secondaryText"
+                  inner-h-t-m-l="[[i18nAdvanced('androidAppsSubtext')]]">
+              </div>
             </div>
+            <cr-policy-pref-indicator pref="[[prefs.arc.enabled]]"
+                icon-aria-label="$i18n{androidAppsPageTitle}">
+            </cr-policy-pref-indicator>
+            <template is="dom-if" if="[[androidAppsInfo.playStoreEnabled]]">
+              <button class="subpage-arrow" is="paper-icon-button-light"
+                  aria-label="$i18n{androidAppsPageTitle}"
+                  aria-describedby="secondaryText">
+              </button>
+            </template>
+            <template is="dom-if" if="[[!androidAppsInfo.playStoreEnabled]]">
+              <div class="separator"></div>
+              <paper-button id="enable" class="secondary-button"
+                  disabled="[[isEnforced_(prefs.arc.enabled)]]"
+                  on-tap="onEnableTap_"
+                  aria-label="$i18n{androidAppsPageTitle}"
+                  aria-describedby="secondaryText">
+                $i18n{androidAppsEnable}
+              </paper-button>
+            </template>
           </div>
-          <cr-policy-pref-indicator pref="[[prefs.arc.enabled]]"
-              icon-aria-label="$i18n{androidAppsPageTitle}">
-          </cr-policy-pref-indicator>
-          <template is="dom-if" if="[[androidAppsInfo_.playStoreEnabled]]">
-            <button class="subpage-arrow" is="paper-icon-button-light"
-                aria-label="$i18n{androidAppsPageTitle}"
-                aria-describedby="secondaryText">
-            </button>
-          </template>
-          <template is="dom-if" if="[[!androidAppsInfo_.playStoreEnabled]]">
-            <div class="separator"></div>
-            <paper-button id="enable" class="secondary-button"
-                on-tap="onEnableTap_"
-                aria-label="$i18n{androidAppsPageTitle}"
-                aria-describedby="secondaryText">
-              $i18n{androidAppsEnable}
-            </paper-button>
-          </template>
-        </div>
+        </template>
+        <template is="dom-if" if="[[!havePlayStoreApp]]" restamp>
+          <settings-android-settings-element>
+          </settings-android-settings-element>
+        </template>
       </neon-animatable>
 
       <template is="dom-if" route-path="/androidApps/details">
@@ -54,7 +61,7 @@
             associated-control="[[$$('#android-apps')]]"
             page-title="$i18n{androidAppsPageLabel}">
           <settings-android-apps-subpage
-              android-apps-info="[[androidAppsInfo_]]" prefs="{{prefs}}">
+              android-apps-info="[[androidAppsInfo]]" prefs="{{prefs}}">
           </settings-android-apps-subpage>
         </settings-subpage>
       </template>
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.js b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.js
index e5f9cba60d5..580849a8348 100644
--- a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.js
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_page.js
@@ -19,55 +19,27 @@ Polymer({
       notify: true,
     },
 
-    /** @private {!AndroidAppsInfo|undefined} */
-    androidAppsInfo_: Object,
+    havePlayStoreApp: Boolean,
+
+    androidAppsInfo: Object,
 
     /** @private {!Map<string, string>} */
     focusConfig_: {
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.ANDROID_APPS_DETAILS.path,
-            '#android-apps .subpage-arrow');
+        if (settings.routes.ANDROID_APPS_DETAILS) {
+          map.set(
+              settings.routes.ANDROID_APPS_DETAILS.path,
+              '#android-apps .subpage-arrow');
+        }
         return map;
       },
     },
   },
 
-  /** @private {?settings.AndroidAppsBrowserProxy} */
-  browserProxy_: null,
-
-  /** @private {?WebUIListener} */
-  listener_: null,
-
-  /** @override */
-  created: function() {
-    this.browserProxy_ = settings.AndroidAppsBrowserProxyImpl.getInstance();
-  },
-
-  /** @override */
-  attached: function() {
-    this.listener_ = cr.addWebUIListener(
-        'android-apps-info-update', this.androidAppsInfoUpdate_.bind(this));
-    this.browserProxy_.requestAndroidAppsInfo();
-  },
-
-  /** @override */
-  detached: function() {
-    cr.removeWebUIListener(this.listener_);
-  },
-
-  /**
-   * @param {AndroidAppsInfo} info
-   * @private
-   */
-  androidAppsInfoUpdate_: function(info) {
-    this.androidAppsInfo_ = info;
-  },
-
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onEnableTap_: function(event) {
@@ -75,9 +47,14 @@ Polymer({
     event.stopPropagation();
   },
 
+  /** @return {boolean} */
+  isEnforced_: function(pref) {
+    return pref.enforcement == chrome.settingsPrivate.Enforcement.ENFORCED;
+  },
+
   /** @private */
   onSubpageTap_: function() {
-    if (this.androidAppsInfo_.playStoreEnabled)
-      settings.navigateTo(settings.Route.ANDROID_APPS_DETAILS);
+    if (this.androidAppsInfo.playStoreEnabled)
+      settings.navigateTo(settings.routes.ANDROID_APPS_DETAILS);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.html b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.html
index 691cb34a261..87b6511ae99 100644
--- a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.html
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.html
@@ -4,25 +4,21 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="android_apps_browser_proxy.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="android_settings_element.html">
 
 <dom-module id="settings-android-apps-subpage">
   <template>
     <style include="settings-shared"></style>
 
-    <div id="manageApps" class="settings-box first"
-        on-keydown="onManageAndroidAppsKeydown_"
-        on-tap="onManageAndroidAppsTap_" actionable
-        hidden="[[!androidAppsInfo.settingsAppAvailable]]">
-      <div class="start">
-        <div>$i18n{androidAppsManageApps}</div>
-      </div>
-      <button class="icon-external" is="paper-icon-button-light">
-      </button>
-    </div>
+    <template is="dom-if" if="[[androidAppsInfo.settingsAppAvailable]]" restamp>
+      <settings-android-settings-element>
+      </settings-android-settings-element>
+    </template>
 
     <template is="dom-if" if="[[allowRemove_(prefs.arc.enabled.*)]]">
       <div id="remove" class="settings-box" actionable on-tap="onRemoveTap_">
@@ -37,9 +33,9 @@
     <dialog is="cr-dialog" id="confirmDisableDialog" close-text="$i18n{close}"
         on-cancel="onConfirmDisableDialogCancel_"
         on-close="onConfirmDisableDialogClose_">
-      <div class="title">$i18n{androidAppsDisableDialogTitle}</div>
-      <div class="body" inner-h-t-m-l="[[dialogBody_]]"></div>
-      <div class="button-container">
+      <div class="title" slot="title">$i18n{androidAppsDisableDialogTitle}</div>
+      <div class="body" slot="body" inner-h-t-m-l="[[dialogBody_]]"></div>
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button"
             on-tap="onConfirmDisableDialogCancel_">
           $i18n{cancel}
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.js b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.js
index bb987f74538..a0699eace97 100644
--- a/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.js
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.js
@@ -50,22 +50,6 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
-   * @private
-   */
-  onManageAndroidAppsKeydown_: function(event) {
-    if (event.key != 'Enter' && event.key != ' ')
-      return;
-    this.browserProxy_.showAndroidAppsSettings(true /** keyboardAction */);
-    event.stopPropagation();
-  },
-
-  /** @private */
-  onManageAndroidAppsTap_: function(event) {
-    this.browserProxy_.showAndroidAppsSettings(false /** keyboardAction */);
-  },
-
-  /**
    * @return {boolean}
    * @private
    */
@@ -76,7 +60,7 @@ Polymer({
 
   /**
    * Shows a confirmation dialog when disabling android apps.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onRemoveTap_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_settings_element.html b/chromium/chrome/browser/resources/settings/android_apps_page/android_settings_element.html
new file mode 100644
index 00000000000..17b6e861109
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_settings_element.html
@@ -0,0 +1,24 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="android_apps_browser_proxy.html">
+
+<dom-module id="settings-android-settings-element">
+  <template>
+    <style include="settings-shared"></style>
+    <div id="manageApps" class="settings-box first"
+        on-keydown="onManageAndroidAppsKeydown_"
+        on-tap="onManageAndroidAppsTap_" actionable>
+      <div class="start">
+        <div>$i18n{androidAppsManageApps}</div>
+      </div>
+      <button class="icon-external" is="paper-icon-button-light">
+      </button>
+    </div>
+  </template>
+  <script src="android_settings_element.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/android_settings_element.js b/chromium/chrome/browser/resources/settings/android_apps_page/android_settings_element.js
new file mode 100644
index 00000000000..b8132c10152
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/android_settings_element.js
@@ -0,0 +1,36 @@
+// Copyright 2017 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
+ * 'android-settings-element' is the element to open Android settings.
+ */
+
+Polymer({
+  is: 'settings-android-settings-element',
+
+  /** @private {?settings.AndroidAppsBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  created: function() {
+    this.browserProxy_ = settings.AndroidAppsBrowserProxyImpl.getInstance();
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onManageAndroidAppsKeydown_: function(event) {
+    if (event.key != 'Enter' && event.key != ' ')
+      return;
+    this.browserProxy_.showAndroidAppsSettings(true /** keyboardAction */);
+    event.stopPropagation();
+  },
+
+  /** @private */
+  onManageAndroidAppsTap_: function(event) {
+    this.browserProxy_.showAndroidAppsSettings(false /** keyboardAction */);
+  },
+});
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/android_apps_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/android_apps_page/compiled_resources2.gyp
index a80a158c9c4..548dae1cc58 100644
--- a/chromium/chrome/browser/resources/settings/android_apps_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/android_apps_page/compiled_resources2.gyp
@@ -19,7 +19,7 @@
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(EXTERNS_GYP):settings_private',
         'android_apps_browser_proxy',
-      ], 
+      ],
      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
diff --git a/chromium/chrome/browser/resources/settings/animation/animation.js b/chromium/chrome/browser/resources/settings/animation/animation.js
index 7e07a996b9c..8f369ce9865 100644
--- a/chromium/chrome/browser/resources/settings/animation/animation.js
+++ b/chromium/chrome/browser/resources/settings/animation/animation.js
@@ -48,6 +48,7 @@ cr.define('settings.animation', function() {
         self.queueDispatch_(e);
       });
       self.animation_.addEventListener('cancel', function(e) {
+        // clang-format off
         reject(new
             /**
              * @see https://heycam.github.io/webidl/#es-DOMException-call
@@ -55,6 +56,7 @@ cr.define('settings.animation', function() {
              */(
                 DOMException
             )('', 'AbortError'));
+        // clang-format on
         self.queueDispatch_(e);
       });
     });
diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js b/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js
index 65b7698028c..779818bd13a 100644
--- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js
@@ -4,90 +4,89 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function AppearanceBrowserProxy() {}
-
-  AppearanceBrowserProxy.prototype = {
+  class AppearanceBrowserProxy {
     /** @return {!Promise<number>} */
-    getDefaultZoom: assertNotReached,
+    getDefaultZoom() {}
 
     /**
      * @param {string} themeId
      * @return {!Promise<!chrome.management.ExtensionInfo>} Theme info.
      */
-    getThemeInfo: assertNotReached,
+    getThemeInfo(themeId) {}
 
     /** @return {boolean} Whether the current profile is supervised. */
-    isSupervised: assertNotReached,
+    isSupervised() {}
+
+    // <if expr="chromeos">
+    openWallpaperManager() {}
+
+    // </if>
 
-// <if expr="chromeos">
-    openWallpaperManager: assertNotReached,
-// </if>
+    useDefaultTheme() {}
 
-    useDefaultTheme: assertNotReached,
+    // <if expr="is_linux and not chromeos">
+    useSystemTheme() {}
 
-// <if expr="is_linux and not chromeos">
-    useSystemTheme: assertNotReached,
-// </if>
+    // </if>
 
     /**
      * @param {string} url The url of which to check validity.
      * @return {!Promise<boolean>}
      */
-    validateStartupPage: assertNotReached,
-  };
+    validateStartupPage(url) {}
+  }
 
   /**
    * @implements {settings.AppearanceBrowserProxy}
-   * @constructor
    */
-  function AppearanceBrowserProxyImpl() {}
-
-  cr.addSingletonGetter(AppearanceBrowserProxyImpl);
-
-  AppearanceBrowserProxyImpl.prototype = {
+  class AppearanceBrowserProxyImpl {
     /** @override */
-    getDefaultZoom: function() {
+    getDefaultZoom() {
       return new Promise(function(resolve) {
         chrome.settingsPrivate.getDefaultZoom(resolve);
       });
-    },
+    }
 
     /** @override */
-    getThemeInfo: function(themeId) {
+    getThemeInfo(themeId) {
       return new Promise(function(resolve) {
         chrome.management.get(themeId, resolve);
       });
-    },
+    }
 
     /** @override */
-    isSupervised: function() {
+    isSupervised() {
       return loadTimeData.getBoolean('isSupervised');
-    },
+    }
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @override */
-    openWallpaperManager: function() {
+    openWallpaperManager() {
       chrome.send('openWallpaperManager');
-    },
-// </if>
+    }
+
+    // </if>
 
     /** @override */
-    useDefaultTheme: function() {
+    useDefaultTheme() {
       chrome.send('useDefaultTheme');
-    },
+    }
 
-// <if expr="is_linux and not chromeos">
+    // <if expr="is_linux and not chromeos">
     /** @override */
-    useSystemTheme: function() {
+    useSystemTheme() {
       chrome.send('useSystemTheme');
-    },
-// </if>
+    }
+
+    // </if>
 
     /** @override */
-    validateStartupPage: function(url) {
+    validateStartupPage(url) {
       return cr.sendWithPromise('validateStartupPage', url);
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(AppearanceBrowserProxyImpl);
 
   return {
     AppearanceBrowserProxy: AppearanceBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js b/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js
index f70b9e812b2..b50fe910da4 100644
--- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js
+++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js
@@ -3,138 +3,137 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
+'use strict';
 
-  /** @const @private {!Array<number>} */
-  var FONT_SIZE_RANGE_ = [
-    9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36,
-    40, 44, 48, 56, 64, 72,
-  ];
+/** @const @private {!Array<number>} */
+var FONT_SIZE_RANGE_ = [
+  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24,
+  26, 28, 30, 32, 34, 36, 40, 44, 48, 56, 64, 72,
+];
 
-  /** @const @private {!Array<number>} */
-  var MINIMUM_FONT_SIZE_RANGE_ = [
-    6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24
-  ];
+/** @const @private {!Array<number>} */
+var MINIMUM_FONT_SIZE_RANGE_ =
+    [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24];
 
-  /**
-   * 'settings-appearance-fonts-page' is the settings page containing appearance
-   * settings.
-   */
-  Polymer({
-    is: 'settings-appearance-fonts-page',
-
-    behaviors: [I18nBehavior, WebUIListenerBehavior],
-
-    properties: {
-      /** @private */
-      advancedExtensionSublabel_: String,
-
-      /** @private {!DropdownMenuOptionList} */
-      fontOptions_: Object,
-
-      /** @private */
-      isGuest_: {
-        type: Boolean,
-        value: function() { return loadTimeData.getBoolean('isGuest'); }
-      },
-
-      /**
-       * Common font sizes.
-       * @private {!Array<number>}
-       */
-      fontSizeRange_: {
-        readOnly: true,
-        type: Array,
-        value: FONT_SIZE_RANGE_,
-      },
-
-      /**
-       * Reasonable, minimum font sizes.
-       * @private {!Array<number>}
-       */
-      minimumFontSizeRange_: {
-        readOnly: true,
-        type: Array,
-        value: MINIMUM_FONT_SIZE_RANGE_,
-      },
-
-      /**
-       * Preferences state.
-       */
-      prefs: {
-        type: Object,
-        notify: true,
-      },
-    },
-
-    /** @private {?settings.FontsBrowserProxy} */
-    browserProxy_: null,
+/**
+ * 'settings-appearance-fonts-page' is the settings page containing appearance
+ * settings.
+ */
+Polymer({
+  is: 'settings-appearance-fonts-page',
 
-    /** @private {boolean} */
-    advancedExtensionInstalled_: false,
-
-    /** @private {?string} */
-    advancedExtensionUrl_: null,
-
-    /** @override */
-    created: function() {
-      this.browserProxy_ = settings.FontsBrowserProxyImpl.getInstance();
-    },
+  behaviors: [I18nBehavior, WebUIListenerBehavior],
 
-    /** @override */
-    ready: function() {
-      this.addWebUIListener('advanced-font-settings-installed',
-          this.setAdvancedExtensionInstalled_.bind(this));
-      this.browserProxy_.observeAdvancedFontExtensionAvailable();
+  properties: {
+    /** @private */
+    advancedExtensionSublabel_: String,
 
-      this.browserProxy_.fetchFontsData().then(
-          this.setFontsData_.bind(this));
-    },
+    /** @private {!DropdownMenuOptionList} */
+    fontOptions_: Object,
 
     /** @private */
-    openAdvancedExtension_: function() {
-      if (this.advancedExtensionInstalled_)
-        this.browserProxy_.openAdvancedFontSettings();
-      else
-        window.open(this.advancedExtensionUrl_);
+    isGuest_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('isGuest');
+      }
     },
 
     /**
-     * @param {boolean} isInstalled Whether the advanced font settings
-     *     extension is installed.
-     * @private
+     * Common font sizes.
+     * @private {!Array<number>}
      */
-    setAdvancedExtensionInstalled_: function(isInstalled) {
-      this.advancedExtensionInstalled_ = isInstalled;
-      this.advancedExtensionSublabel_ = this.i18n(isInstalled ?
-          'openAdvancedFontSettings' : 'requiresWebStoreExtension');
+    fontSizeRange_: {
+      readOnly: true,
+      type: Array,
+      value: FONT_SIZE_RANGE_,
     },
 
     /**
-     * @param {!FontsData} response A list of fonts and the advanced
-     *     font settings extension URL.
-     * @private
+     * Reasonable, minimum font sizes.
+     * @private {!Array<number>}
      */
-    setFontsData_: function(response) {
-      var fontMenuOptions = [];
-      for (var i = 0; i < response.fontList.length; ++i) {
-        fontMenuOptions.push({
-          value: response.fontList[i][0],
-          name: response.fontList[i][1]
-        });
-      }
-      this.fontOptions_ = fontMenuOptions;
-      this.advancedExtensionUrl_ = response.extensionUrl;
+    minimumFontSizeRange_: {
+      readOnly: true,
+      type: Array,
+      value: MINIMUM_FONT_SIZE_RANGE_,
     },
 
     /**
-     * Get the minimum font size, accounting for unset prefs.
-     * @return {?}
-     * @private
+     * Preferences state.
      */
-    computeMinimumFontSize_: function() {
-      return this.get('prefs.webkit.webprefs.minimum_font_size.value') ||
-          MINIMUM_FONT_SIZE_RANGE_[0];
+    prefs: {
+      type: Object,
+      notify: true,
     },
-  });
+  },
+
+  /** @private {?settings.FontsBrowserProxy} */
+  browserProxy_: null,
+
+  /** @private {boolean} */
+  advancedExtensionInstalled_: false,
+
+  /** @private {?string} */
+  advancedExtensionUrl_: null,
+
+  /** @override */
+  created: function() {
+    this.browserProxy_ = settings.FontsBrowserProxyImpl.getInstance();
+  },
+
+  /** @override */
+  ready: function() {
+    this.addWebUIListener(
+        'advanced-font-settings-installed',
+        this.setAdvancedExtensionInstalled_.bind(this));
+    this.browserProxy_.observeAdvancedFontExtensionAvailable();
+
+    this.browserProxy_.fetchFontsData().then(this.setFontsData_.bind(this));
+  },
+
+  /** @private */
+  openAdvancedExtension_: function() {
+    if (this.advancedExtensionInstalled_)
+      this.browserProxy_.openAdvancedFontSettings();
+    else
+      window.open(this.advancedExtensionUrl_);
+  },
+
+  /**
+   * @param {boolean} isInstalled Whether the advanced font settings
+   *     extension is installed.
+   * @private
+   */
+  setAdvancedExtensionInstalled_: function(isInstalled) {
+    this.advancedExtensionInstalled_ = isInstalled;
+    this.advancedExtensionSublabel_ = this.i18n(
+        isInstalled ? 'openAdvancedFontSettings' : 'requiresWebStoreExtension');
+  },
+
+  /**
+   * @param {!FontsData} response A list of fonts and the advanced
+   *     font settings extension URL.
+   * @private
+   */
+  setFontsData_: function(response) {
+    var fontMenuOptions = [];
+    for (var i = 0; i < response.fontList.length; ++i) {
+      fontMenuOptions.push(
+          {value: response.fontList[i][0], name: response.fontList[i][1]});
+    }
+    this.fontOptions_ = fontMenuOptions;
+    this.advancedExtensionUrl_ = response.extensionUrl;
+  },
+
+  /**
+   * Get the minimum font size, accounting for unset prefs.
+   * @return {?}
+   * @private
+   */
+  computeMinimumFontSize_: function() {
+    return this.get('prefs.webkit.webprefs.minimum_font_size.value') ||
+        MINIMUM_FONT_SIZE_RANGE_[0];
+  },
+});
 })();
diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js b/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js
index 289e20bdbd4..8b22e8fe6d8 100644
--- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js
+++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js
@@ -107,9 +107,11 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.FONTS.path,
-            '#customize-fonts-subpage-trigger .subpage-arrow');
+        if (settings.routes.FONTS) {
+          map.set(
+              settings.routes.FONTS.path,
+              '#customize-fonts-subpage-trigger .subpage-arrow');
+        }
         return map;
       },
     },
@@ -122,10 +124,10 @@ Polymer({
     'defaultFontSizeChanged_(prefs.webkit.webprefs.default_font_size.value)',
     'themeChanged_(prefs.extensions.theme.id.value, useSystemTheme_)',
 
-// <if expr="is_linux and not chromeos">
+    // <if expr="is_linux and not chromeos">
     // NOTE: this pref only exists on Linux.
     'useSystemThemePrefChanged_(prefs.extensions.theme.use_system.value)',
-// </if>
+    // </if>
   ],
 
   /** @override */
@@ -169,7 +171,7 @@ Polymer({
 
   /** @private */
   onCustomizeFontsTap_: function() {
-    settings.navigateTo(settings.Route.FONTS);
+    settings.navigateTo(settings.routes.FONTS);
   },
 
   /** @private */
@@ -198,7 +200,7 @@ Polymer({
     return this.themeUrl_ || loadTimeData.getString('themesGalleryUrl');
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * ChromeOS only.
    * @private
@@ -206,14 +208,14 @@ Polymer({
   openWallpaperManager_: function() {
     this.browserProxy_.openWallpaperManager();
   },
-// </if>
+  // </if>
 
   /** @private */
   onUseDefaultTap_: function() {
     this.browserProxy_.useDefaultTheme();
   },
 
-// <if expr="is_linux and not chromeos">
+  // <if expr="is_linux and not chromeos">
   /**
    * @param {boolean} useSystemTheme
    * @private
@@ -251,14 +253,14 @@ Polymer({
    */
   showThemesSecondary_: function(themeId, useSystemTheme) {
     return this.showUseClassic_(themeId, useSystemTheme) ||
-           this.showUseSystem_(themeId, useSystemTheme);
+        this.showUseSystem_(themeId, useSystemTheme);
   },
 
   /** @private */
   onUseSystemTap_: function() {
     this.browserProxy_.useSystemTheme();
   },
-// </if>
+  // </if>
 
   /**
    * @param {string} themeId
@@ -278,12 +280,12 @@ Polymer({
     }
 
     var i18nId;
-// <if expr="is_linux and not chromeos">
+    // <if expr="is_linux and not chromeos">
     i18nId = useSystemTheme ? 'systemTheme' : 'classicTheme';
-// </if>
-// <if expr="not is_linux or chromeos">
+    // </if>
+    // <if expr="not is_linux or chromeos">
     i18nId = 'chooseFromWebStore';
-// </if>
+    // </if>
     this.themeSublabel_ = this.i18n(i18nId);
     this.themeUrl_ = '';
   },
diff --git a/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp
index 67937b8e249..f69539b2998 100644
--- a/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp
@@ -38,7 +38,7 @@
         '../compiled_resources2.gyp:route',
         '../controls/compiled_resources2.gyp:settings_dropdown_menu',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
-        '../settings_ui/compiled_resources2.gyp:settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility',
         'appearance_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
diff --git a/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js b/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js
index b8b1263af39..d513b3ad19e 100644
--- a/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js
@@ -12,44 +12,39 @@ var FontsData;
 
 cr.define('settings', function() {
   /** @interface */
-  function FontsBrowserProxy() {}
-
-  FontsBrowserProxy.prototype = {
+  class FontsBrowserProxy {
     /**
      * @return {!Promise<!FontsData>} Fonts and the advanced font settings
      *     extension URL.
      */
-    fetchFontsData: assertNotReached,
+    fetchFontsData() {}
 
-    observeAdvancedFontExtensionAvailable: assertNotReached,
+    observeAdvancedFontExtensionAvailable() {}
 
-    openAdvancedFontSettings: assertNotReached,
-  };
+    openAdvancedFontSettings() {}
+  }
 
   /**
    * @implements {settings.FontsBrowserProxy}
-   * @constructor
    */
-  function FontsBrowserProxyImpl() {}
-
-  cr.addSingletonGetter(FontsBrowserProxyImpl);
-
-  FontsBrowserProxyImpl.prototype = {
+  class FontsBrowserProxyImpl {
     /** @override */
-    fetchFontsData: function() {
+    fetchFontsData() {
       return cr.sendWithPromise('fetchFontsData');
-    },
+    }
 
     /** @override */
-    observeAdvancedFontExtensionAvailable: function() {
+    observeAdvancedFontExtensionAvailable() {
       chrome.send('observeAdvancedFontExtensionAvailable');
-    },
+    }
 
     /** @override */
-    openAdvancedFontSettings: function() {
+    openAdvancedFontSettings() {
       chrome.send('openAdvancedFontSettings');
     }
-  };
+  }
+
+  cr.addSingletonGetter(FontsBrowserProxyImpl);
 
   return {
     FontsBrowserProxy: FontsBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/appearance_page/home_url_input.html b/chromium/chrome/browser/resources/settings/appearance_page/home_url_input.html
index 6b14fa4559c..facd4895307 100644
--- a/chromium/chrome/browser/resources/settings/appearance_page/home_url_input.html
+++ b/chromium/chrome/browser/resources/settings/appearance_page/home_url_input.html
@@ -12,10 +12,11 @@
     <style>
       :host {
         cursor: auto;
-        display: inline-block;
       }
 
       #outerDiv {
+        align-items: center;
+        display: flex;
         justify-content: space-between;
       }
     </style>
diff --git a/chromium/chrome/browser/resources/settings/basic_page/basic_page.html b/chromium/chrome/browser/resources/settings/basic_page/basic_page.html
index 6163d01fafd..26f5b266b49 100644
--- a/chromium/chrome/browser/resources/settings/basic_page/basic_page.html
+++ b/chromium/chrome/browser/resources/settings/basic_page/basic_page.html
@@ -1,6 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../appearance_page/appearance_page.html">
 <link rel="import" href="../controls/settings_idle_load.html">
 <link rel="import" href="../on_startup_page/on_startup_page.html">
@@ -13,16 +14,22 @@
 <link rel="import" href="../settings_vars_css.html">
 
 <if expr="chromeos">
+<link rel="import" href="../android_apps_page/android_apps_browser_proxy.html">
 <link rel="import" href="../android_apps_page/android_apps_page.html">
 <link rel="import" href="../bluetooth_page/bluetooth_page.html">
 <link rel="import" href="../device_page/device_page.html">
 <link rel="import" href="../internet_page/internet_page.html">
+<link rel="import" href="../multidevice_page/multidevice_page.html">
 </if>
 
 <if expr="not chromeos">
 <link rel="import" href="../default_browser_page/default_browser_page.html">
 </if>
 
+<if expr="is_win">
+<link rel="import" href="../chrome_cleanup_page/chrome_cleanup_page.html">
+</if>
+
 <!-- TODO(michaelpg): Rename to something better than "basic" now that this page
      includes both the basic and advanced settings. -->
 <dom-module id="settings-basic-page">
@@ -116,6 +123,13 @@
           </settings-section>
         </template>
 </if>
+<if expr="is_win">
+        <template is="dom-if" if="[[showChromeCleanup]]" restamp>
+          <settings-section section="chromeCleanup">
+            <settings-chrome-cleanup-page></settings-chrome-cleanup-page>
+          </settings-section>
+        </template>
+</if>
         <template is="dom-if" if="[[showPage_(pageVisibility.people)]]" restamp>
           <settings-section page-title="$i18n{peoplePageTitle}"
               section="people">
@@ -147,11 +161,13 @@
         </template>
 <if expr="chromeos">
         <template is="dom-if"
-            if="[[shouldShowAndroidApps_(showAndroidApps, pageVisibility)]]"
+            if="[[shouldShowAndroidApps_(showAndroidApps, androidAppsInfo, pageVisibility)]]"
             restamp>
           <settings-section page-title="$i18n{androidAppsPageTitle}"
               section="androidApps">
-            <settings-android-apps-page prefs="{{prefs}}">
+            <settings-android-apps-page prefs="{{prefs}}"
+                android-apps-info="[[androidAppsInfo]]"
+                have-play-store-app="[[havePlayStoreApp]]">
             </settings-android-apps-page>
           </settings-section>
         </template>
@@ -248,6 +264,17 @@
               </settings-printing-page>
             </settings-section>
           </template>
+<if expr="chromeos">
+          <template is="dom-if"
+              if="[[shouldShowMultidevice_(showMultidevice, pageVisibility)]]"
+              restamp>
+            <settings-section page-title="$i18n{multidevicePageTitle}"
+                section="multidevice">
+              <settings-multidevice-page prefs="{{prefs}}">
+              </settings-multidevice-page>
+            </settings-section>
+          </template>
+</if>
           <template is="dom-if" if="[[showPage_(pageVisibility.a11y)]]" restamp>
             <settings-section page-title="$i18n{a11yPageTitle}" section="a11y">
               <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
diff --git a/chromium/chrome/browser/resources/settings/basic_page/basic_page.js b/chromium/chrome/browser/resources/settings/basic_page/basic_page.js
index f8cc1d7da2c..d2c1e42107a 100644
--- a/chromium/chrome/browser/resources/settings/basic_page/basic_page.js
+++ b/chromium/chrome/browser/resources/settings/basic_page/basic_page.js
@@ -9,7 +9,7 @@
 Polymer({
   is: 'settings-basic-page',
 
-  behaviors: [MainPageBehavior],
+  behaviors: [MainPageBehavior, WebUIListenerBehavior],
 
   properties: {
     /** Preferences state. */
@@ -18,15 +18,34 @@ Polymer({
       notify: true,
     },
 
+    // <if expr="chromeos">
     showAndroidApps: Boolean,
 
+    showMultidevice: Boolean,
+
+    havePlayStoreApp: Boolean,
+    // </if>
+
+    /** @type {!AndroidAppsInfo|undefined} */
+    androidAppsInfo: Object,
+
+    showChromeCleanup: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.valueExists('chromeCleanupEnabled') &&
+            loadTimeData.getBoolean('chromeCleanupEnabled');
+      },
+    },
+
     /**
      * Dictionary defining page visibility.
      * @type {!GuestModePageVisibility}
      */
     pageVisibility: {
       type: Object,
-      value: function() { return {}; },
+      value: function() {
+        return {};
+      },
     },
 
     advancedToggleExpanded: {
@@ -56,7 +75,7 @@ Polymer({
       },
     },
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /**
      * Whether the user is a secondary user. Computed so that it is calculated
      * correctly after loadTimeData is available.
@@ -66,7 +85,7 @@ Polymer({
       type: Boolean,
       computed: 'computeShowSecondaryUserBanner_(hasExpandedSection_)',
     },
-// </if>
+    // </if>
 
     /** @private {!settings.Route|undefined} */
     currentRoute_: Object,
@@ -79,6 +98,17 @@ Polymer({
   /** @override */
   attached: function() {
     this.currentRoute_ = settings.getCurrentRoute();
+
+    this.addEventListener('chrome-cleanup-dismissed', function(e) {
+      this.showChromeCleanup = false;
+    }.bind(this));
+
+    if (settings.AndroidAppsBrowserProxyImpl) {
+      cr.addWebUIListener(
+          'android-apps-info-update', this.androidAppsInfoUpdate_.bind(this));
+      settings.AndroidAppsBrowserProxyImpl.getInstance()
+          .requestAndroidAppsInfo();
+    }
   },
 
   /**
@@ -89,7 +119,7 @@ Polymer({
   currentRouteChanged: function(newRoute, oldRoute) {
     this.currentRoute_ = newRoute;
 
-    if (settings.Route.ADVANCED.contains(newRoute))
+    if (settings.routes.ADVANCED && settings.routes.ADVANCED.contains(newRoute))
       this.advancedToggleExpanded = true;
 
     if (oldRoute && oldRoute.isSubpage()) {
@@ -126,8 +156,8 @@ Polymer({
     ];
 
     if (this.pageVisibility.advancedSettings !== false) {
-      whenSearchDone.push(this.$$('#advancedPageTemplate').get().then(
-          function(advancedPage) {
+      whenSearchDone.push(
+          this.$$('#advancedPageTemplate').get().then(function(advancedPage) {
             return settings.getSearchManager().search(query, advancedPage);
           }));
     }
@@ -135,7 +165,9 @@ Polymer({
     return Promise.all(whenSearchDone).then(function(requests) {
       // Combine the SearchRequests results to a single SearchResult object.
       return {
-        canceled: requests.some(function(r) { return r.canceled; }),
+        canceled: requests.some(function(r) {
+          return r.canceled;
+        }),
         didFindMatches: requests.some(function(r) {
           return r.didFindMatches();
         }),
@@ -146,7 +178,7 @@ Polymer({
     });
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @return {boolean}
    * @private
@@ -155,7 +187,7 @@ Polymer({
     return !this.hasExpandedSection_ &&
         loadTimeData.getBoolean('isSecondaryUser');
   },
-// </if>
+  // </if>
 
   /** @private */
   onResetProfileBannerClosed_: function() {
@@ -163,13 +195,42 @@ Polymer({
   },
 
   /**
+   * @param {!AndroidAppsInfo} info
+   * @private
+   */
+  androidAppsInfoUpdate_: function(info) {
+    this.androidAppsInfo = info;
+  },
+
+  /**
    * @return {boolean}
    * @private
    */
   shouldShowAndroidApps_: function() {
     var visibility = /** @type {boolean|undefined} */ (
         this.get('pageVisibility.androidApps'));
-    return this.showAndroidApps && this.showPage_(visibility);
+    if (!this.showAndroidApps || !this.showPage_(visibility)) {
+      return false;
+    }
+
+    // Section is invisible in case we don't have the Play Store app and
+    // settings app is not yet available.
+    if (!this.havePlayStoreApp &&
+        (!this.androidAppsInfo || !this.androidAppsInfo.settingsAppAvailable)) {
+      return false;
+    }
+
+    return true;
+  },
+
+  /**
+   * @return {boolean} Whether to show the multidevice settings page.
+   * @private
+   */
+  shouldShowMultidevice_: function() {
+    var visibility = /** @type {boolean|undefined} */ (
+        this.get('pageVisibility.multidevice'));
+    return this.showMultidevice && this.showPage_(visibility);
   },
 
   /**
@@ -211,7 +272,7 @@ Polymer({
    * @private
    */
   showBasicPage_: function(currentRoute, inSearchMode, hasExpandedSection) {
-    return !hasExpandedSection || settings.Route.BASIC.contains(currentRoute);
+    return !hasExpandedSection || settings.routes.BASIC.contains(currentRoute);
   },
 
   /**
@@ -226,7 +287,8 @@ Polymer({
   showAdvancedPage_: function(
       currentRoute, inSearchMode, hasExpandedSection, advancedToggleExpanded) {
     return hasExpandedSection ?
-        settings.Route.ADVANCED.contains(currentRoute) :
+        (settings.routes.ADVANCED &&
+         settings.routes.ADVANCED.contains(currentRoute)) :
         advancedToggleExpanded || inSearchMode;
   },
 
diff --git a/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp
index 6a4313103ff..4af32638dfe 100644
--- a/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp
@@ -7,10 +7,13 @@
       'target_name': 'basic_page',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
+        '../android_apps_page/compiled_resources2.gyp:android_apps_browser_proxy',
+        '../chrome_cleanup_page/compiled_resources2.gyp:chrome_cleanup_proxy',
         '../compiled_resources2.gyp:route',
         '../compiled_resources2.gyp:search_settings',
         '../settings_page/compiled_resources2.gyp:main_page_behavior',
-        '../settings_ui/compiled_resources2.gyp:settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html
index 7fc49f2172e..7c27747542f 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html
@@ -70,8 +70,8 @@
     </style>
     <dialog is="cr-dialog" id="dialog" on-cancel="onDialogCanceled_"
         close-text="$i18n{close}" on-closed="onDialogCanceled_">
-      <div class="title">$i18n{bluetoothPairDevicePageTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{bluetoothPairDevicePageTitle}</div>
+      <div class="body" slot="body">
         <div class="contents layout vertical center center-justified">
           <template is="dom-if" if="[[isDialogType_(dialogId, 'pairDevice')]]">
             <div id="pairing" class="settings-box first layout vertical center
@@ -112,7 +112,7 @@
           </template>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <template is="dom-if" if="[[isDialogType_('pairDevice', dialogId)]]">
           <paper-button hidden$="[[!showAcceptReject_(pairingEvent_)]]"
               on-tap="onAcceptTap_">$i18n{bluetoothAccept}</paper-button>
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
index f73b1ec1caf..117ddbbae3f 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
@@ -4,20 +4,20 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="bluetooth-device-list-item">
-  <style include="settings-shared">
-    .name[connected] {
-      font-weight: 500;
-    }
-
-    .state[connected] {
-      color: var(--google-green-500);
-    }
-  </style>
   <template>
+    <style include="settings-shared">
+      .name[connected] {
+        font-weight: 500;
+      }
+
+      .state[connected] {
+        color: var(--google-green-500);
+      }
+    </style>
     <div class="list-item">
       <iron-icon id="deviceIcon" icon="[[getDeviceIcon_(device)]]">
       </iron-icon>
@@ -32,9 +32,10 @@
       </div>
       <span hidden$="[[!device.connecting]]">$i18n{bluetoothConnecting}</span>
       <div hidden$="[[!device.paired]]">
-        <paper-icon-button icon="cr:more-vert" on-tap="onMenuButtonTap_"
-            tabindex$="[[tabindex]]" title="$i18n{moreActions}">
-        </paper-icon-button>
+        <button is="paper-icon-button-light" class="icon-more-vert"
+            on-tap="onMenuButtonTap_" tabindex$="[[tabindex]]"
+            title="$i18n{moreActions}" on-keydown="ignoreEnterKey_">
+        </button>
         <dialog id="dotsMenu" is="cr-action-menu">
           <button class="dropdown-item" role="option"
               on-tap="onConnectActionTap_">
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.js b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.js
index 5f0dee2bdde..e8fb8c47c24 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.js
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.js
@@ -25,6 +25,16 @@ Polymer({
    * @param {!Event} event
    * @private
    */
+  ignoreEnterKey_: function(event) {
+    if (event.key == 'Enter') {
+      event.stopPropagation();
+    }
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
   onMenuButtonTap_: function(event) {
     var button = /** @type {!HTMLElement} */ (event.target);
     var menu = /** @type {!CrActionMenuElement} */ (this.$.dotsMenu);
@@ -131,8 +141,8 @@ Polymer({
       case 'mouse':
         return 'settings:mouse';
       default:
-        return device.connected ?
-            'settings:bluetooth-connected' : 'settings:bluetooth';
+        return device.connected ? 'settings:bluetooth-connected' :
+                                  'settings:bluetooth';
     }
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
index 3a8bee6acbf..bcb20f6001c 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
@@ -7,6 +7,7 @@
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../prefs/prefs.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">
 <link rel="import" href="../settings_page/settings_subpage.html">
 <link rel="import" href="../settings_shared_css.html">
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js
index 3a52fbd804a..a626139e025 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js
@@ -25,6 +25,8 @@ var bluetoothApis = bluetoothApis || {
 Polymer({
   is: 'settings-bluetooth-page',
 
+  behaviors: [PrefsBehavior],
+
   properties: {
     /** Preferences state. */
     prefs: {
@@ -70,9 +72,11 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.BLUETOOTH_DEVICES.path,
-            '#bluetoothDevices .subpage-arrow');
+        if (settings.routes.BLUETOOTH_DEVICES) {
+          map.set(
+              settings.routes.BLUETOOTH_DEVICES.path,
+              '#bluetoothDevices .subpage-arrow');
+        }
         return map;
       },
     },
@@ -164,6 +168,7 @@ Polymer({
     this.adapterState_ = state;
     this.bluetoothToggleState_ = state.powered;
     this.bluetoothToggleDisabled_ = !state.available;
+    this.setPrefValue('ash.user.bluetooth.adapter_enabled', state.powered);
   },
 
   /** @private */
@@ -177,7 +182,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} e
+   * @param {!Event} e
    * @private
    */
   stopTap_: function(e) {
@@ -185,7 +190,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} e
+   * @param {!Event} e
    * @private
    */
   onSubpageArrowTap_: function(e) {
@@ -212,6 +217,6 @@ Polymer({
 
   /** @private */
   openSubpage_: function() {
-    settings.navigateTo(settings.Route.BLUETOOTH_DEVICES);
+    settings.navigateTo(settings.routes.BLUETOOTH_DEVICES);
   }
 });
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.html
index 0417109b7c3..21352c70c0b 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.html
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.html
@@ -62,12 +62,12 @@
     <div id="pairedContainer" class="container"
         scrollable on-device-event="onDeviceEvent_"
         hidden="[[!showDevices_(bluetoothToggleState, pairedDeviceList_)]]">
-      <iron-list id="pairedDevices" class="vertical-list"
+      <iron-list id="pairedDevices" class="vertical-list" preserve-focus
           items="[[pairedDeviceList_]]"
           selection-enabled selected-item="{{selectedPairedItem_}}"
           scroll-target="pairedContainer">
         <template>
-          <bluetooth-device-list-item device="[[item]]"
+          <bluetooth-device-list-item actionable device="[[item]]"
               tabindex$="[[tabIndex]]">
           </bluetooth-device-list-item>
         </template>
@@ -87,12 +87,12 @@
     <div id="unpairedContainer" class="container"
         scrollable on-device-event="onDeviceEvent_"
         hidden="[[!showDevices_(bluetoothToggleState, unpairedDeviceList_)]]">
-      <iron-list id="unpairedDevices" class="vertical-list"
+      <iron-list id="unpairedDevices" class="vertical-list" preserve-focus
           items="[[unpairedDeviceList_]]"
           selection-enabled selected-item="{{selectedUnpairedItem_}}"
           scroll-target="unpairedContainer">
         <template>
-          <bluetooth-device-list-item device="[[item]]"
+          <bluetooth-device-list-item actionable device="[[item]]"
               tabindex$="[[tabIndex]]">
           </bluetooth-device-list-item>
         </template>
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.js b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.js
index 1a11a1bc816..731f9d523d4 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.js
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.js
@@ -98,7 +98,7 @@ Polymer({
 
     /**
      * Set to the name of the dialog to show. This page uses a single
-     * paper-dialog to host one of two dialog elements: 'pairDevice' or
+     * dialog to host one of two dialog elements: 'pairDevice' or
      * 'connectError'. This allows a seamless transition between dialogs.
      * Note: This property should be set before opening the dialog and setting
      * the property will not itself cause the dialog to open.
@@ -240,7 +240,7 @@ Polymer({
   updateDiscovery_: function() {
     if (!this.adapterState || !this.adapterState.powered)
       return;
-    if (settings.getCurrentRoute() == settings.Route.BLUETOOTH_DEVICES)
+    if (settings.getCurrentRoute() == settings.routes.BLUETOOTH_DEVICES)
       this.startDiscovery_();
     else
       this.stopDiscovery_();
diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp
index e19b0d80b0d..733b6c23190 100644
--- a/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp
@@ -7,6 +7,7 @@
       'target_name': 'bluetooth_page',
       'dependencies': [
         '../compiled_resources2.gyp:route',
+        '../prefs/compiled_resources2.gyp:prefs_behavior',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.html
index 5c2dcd972b8..59062f7844b 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.html
@@ -22,8 +22,10 @@
     </style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{certificateManagerCaTrustEditDialogTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">
+        $i18n{certificateManagerCaTrustEditDialogTitle}
+      </div>
+      <div class="body" slot="body">
         <div>[[explanationText_]]</div>
         <div id="description">
           $i18n{certificateManagerCaTrustEditDialogDescription}
@@ -38,7 +40,7 @@
           $i18n{certificateManagerCaTrustEditDialogObjSign}
         </paper-checkbox>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-spinner id="spinner"></paper-spinner>
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.js
index 3139be38f91..92d2f241103 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/ca_trust_edit_dialog.js
@@ -33,18 +33,18 @@ Polymer({
   /** @override */
   attached: function() {
     this.explanationText_ = loadTimeData.getStringF(
-        'certificateManagerCaTrustEditDialogExplanation',
-        this.model.name);
+        'certificateManagerCaTrustEditDialogExplanation', this.model.name);
 
     // A non existing |model.id| indicates that a new certificate is being
     // imported, otherwise an existing certificate is being edited.
     if (this.model.id) {
-      this.browserProxy_.getCaCertificateTrust(this.model.id).then(
-          /** @param {!CaTrustInfo} trustInfo */
-          function(trustInfo) {
-            this.trustInfo_ = trustInfo;
-            this.$.dialog.showModal();
-          }.bind(this));
+      this.browserProxy_.getCaCertificateTrust(this.model.id)
+          .then(
+              /** @param {!CaTrustInfo} trustInfo */
+              function(trustInfo) {
+                this.trustInfo_ = trustInfo;
+                this.$.dialog.showModal();
+              }.bind(this));
     } else {
       /** @type {!CrDialogElement} */ (this.$.dialog).showModal();
     }
@@ -61,19 +61,20 @@ Polymer({
 
     var whenDone = this.model.id ?
         this.browserProxy_.editCaCertificateTrust(
-            this.model.id, this.$.ssl.checked,
-            this.$.email.checked, this.$.objSign.checked) :
+            this.model.id, this.$.ssl.checked, this.$.email.checked,
+            this.$.objSign.checked) :
         this.browserProxy_.importCaCertificateTrustSelected(
             this.$.ssl.checked, this.$.email.checked, this.$.objSign.checked);
 
-    whenDone.then(function() {
-      this.$.spinner.active = false;
-      /** @type {!CrDialogElement} */ (this.$.dialog).close();
-    }.bind(this),
-    /** @param {!CertificatesError} error */
-    function(error) {
-      /** @type {!CrDialogElement} */ (this.$.dialog).close();
-      this.fire('certificates-error', {error: error, anchor: null});
-    }.bind(this));
+    whenDone.then(
+        function() {
+          this.$.spinner.active = false;
+          /** @type {!CrDialogElement} */ (this.$.dialog).close();
+        }.bind(this),
+        /** @param {!CertificatesError} error */
+        function(error) {
+          /** @type {!CrDialogElement} */ (this.$.dialog).close();
+          this.fire('certificates-error', {error: error, anchor: null});
+        }.bind(this));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.html
index 3679a58d974..e27c9db1a0d 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.html
@@ -10,11 +10,13 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[getTitleText_(model, certificateType)]]</div>
-      <div class="body">
+      <div class="title" slot="title">
+        [[getTitleText_(model, certificateType)]]
+      </div>
+      <div class="body" slot="body">
         <div>[[getDescriptionText_(model, certificateType)]]</div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.js
index 0ed718010ad..6abeecef1d9 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_delete_confirmation_dialog.js
@@ -82,14 +82,15 @@ Polymer({
 
   /** @private */
   onOkTap_: function() {
-    this.browserProxy_.deleteCertificate(this.model.id).then(
-        function() {
-          /** @type {!CrDialogElement} */ (this.$.dialog).close();
-        }.bind(this),
-        /** @param {!CertificatesError} error */
-        function(error) {
-          /** @type {!CrDialogElement} */ (this.$.dialog).close();
-          this.fire('certificates-error', {error: error, anchor: null});
-        }.bind(this));
+    this.browserProxy_.deleteCertificate(this.model.id)
+        .then(
+            function() {
+              /** @type {!CrDialogElement} */ (this.$.dialog).close();
+            }.bind(this),
+            /** @param {!CertificatesError} error */
+            function(error) {
+              /** @type {!CrDialogElement} */ (this.$.dialog).close();
+              this.fire('certificates-error', {error: error, anchor: null});
+            }.bind(this));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js
index 33e9e46665b..83cedff7d92 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js
@@ -13,13 +13,15 @@ Polymer({
     /** @type {!Array<!Certificate>} */
     certificates: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
 
     /** @type {!CertificateType} */
     certificateType: String,
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @private */
     isGuest_: {
       type: Boolean,
@@ -27,7 +29,7 @@ Polymer({
         return loadTimeData.getBoolean('isGuest');
       }
     },
-// </if>
+    // </if>
   },
 
   behaviors: [I18nBehavior],
@@ -62,7 +64,7 @@ Polymer({
     return this.certificateType != CertificateType.OTHER;
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @return {boolean}
    * @private
@@ -70,7 +72,7 @@ Polymer({
   canImportAndBind_: function() {
     return !this.isGuest_ && this.certificateType == CertificateType.PERSONAL;
   },
-// </if>
+  // </if>
 
   /**
    * Handles a rejected Promise returned from |browserProxy_|.
@@ -112,20 +114,20 @@ Polymer({
    * @private
    */
   onImportTap_: function(e) {
-    this.handleImport_(false, /** @type {!HTMLElement} */ (
-        Polymer.dom(e).localTarget));
+    this.handleImport_(
+        false, /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget));
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @private
    * @param {!Event} e
    */
   onImportAndBindTap_: function(e) {
-    this.handleImport_(true, /** @type {!HTMLElement} */ (
-        Polymer.dom(e).localTarget));
+    this.handleImport_(
+        true, /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget));
   },
-// </if>
+  // </if>
 
   /**
    * @param {boolean} useHardwareBacked
@@ -135,18 +137,15 @@ Polymer({
   handleImport_: function(useHardwareBacked, anchor) {
     var browserProxy = settings.CertificatesBrowserProxyImpl.getInstance();
     if (this.certificateType == CertificateType.PERSONAL) {
-      browserProxy.importPersonalCertificate(useHardwareBacked).then(
-          function(showPasswordPrompt) {
+      browserProxy.importPersonalCertificate(useHardwareBacked)
+          .then(function(showPasswordPrompt) {
             if (showPasswordPrompt)
               this.dispatchImportActionEvent_(null, anchor);
-          }.bind(this),
-          this.onRejected_.bind(this, anchor));
+          }.bind(this), this.onRejected_.bind(this, anchor));
     } else if (this.certificateType == CertificateType.CA) {
-      browserProxy.importCaCertificate().then(
-          function(certificateName) {
-            this.dispatchImportActionEvent_({name: certificateName}, anchor);
-          }.bind(this),
-          this.onRejected_.bind(this, anchor));
+      browserProxy.importCaCertificate().then(function(certificateName) {
+        this.dispatchImportActionEvent_({name: certificateName}, anchor);
+      }.bind(this), this.onRejected_.bind(this, anchor));
     } else if (this.certificateType == CertificateType.SERVER) {
       browserProxy.importServerCertificate().catch(
           this.onRejected_.bind(this, anchor));
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
index 3532bf06c23..3f97ff66273 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
@@ -22,11 +22,18 @@
       }
 
       paper-tabs {
+        font-size: inherit;
         height: 40px;
         margin-bottom: 24px;
       }
 
       paper-tab {
+        --paper-tab-content: {
+          color: var(--paper-grey-800);
+        };
+        --paper-tab-content-unselected: {
+          color: var(--paper-grey-600);
+        };
         text-transform: uppercase;
       }
     </style>
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
index 3d28a8865c1..9433f7c3dcf 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
@@ -21,25 +21,33 @@ Polymer({
     /** @type {!Array<!Certificate>} */
     personalCerts: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
 
     /** @type {!Array<!Certificate>} */
     serverCerts: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
 
     /** @type {!Array<!Certificate>} */
     caCerts: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
 
     /** @type {!Array<!Certificate>} */
     otherCerts: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
 
     /** @private */
@@ -117,10 +125,8 @@ Polymer({
         if (event.detail.certificateType == CertificateType.PERSONAL) {
           this.openDialog_(
               'settings-certificate-password-decryption-dialog',
-              'showPasswordDecryptionDialog_',
-              event.detail.anchor);
-        } else if (event.detail.certificateType ==
-            CertificateType.CA) {
+              'showPasswordDecryptionDialog_', event.detail.anchor);
+        } else if (event.detail.certificateType == CertificateType.CA) {
           this.openDialog_(
               'settings-ca-trust-edit-dialog', 'showCaTrustEditDialog_',
               event.detail.anchor);
@@ -134,8 +140,7 @@ Polymer({
           this.openDialog_(
               'settings-certificate-delete-confirmation-dialog',
               'showDeleteConfirmationDialog_', event.detail.anchor);
-        } else if (event.detail.action ==
-            CertificateAction.EXPORT_PERSONAL) {
+        } else if (event.detail.action == CertificateAction.EXPORT_PERSONAL) {
           this.openDialog_(
               'settings-certificate-password-encryption-dialog',
               'showPasswordEncryptionDialog_', event.detail.anchor);
@@ -149,8 +154,7 @@ Polymer({
       var detail = /** @type {!CertificatesErrorEventDetail} */ (event.detail);
       this.errorDialogModel_ = detail.error;
       this.openDialog_(
-          'settings-certificates-error-dialog',
-          'showErrorDialog_',
+          'settings-certificates-error-dialog', 'showErrorDialog_',
           detail.anchor);
       event.stopPropagation();
     }.bind(this));
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.html
index 68e869ec983..6dffa38e0dc 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.html
@@ -11,13 +11,15 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{certificateManagerDecryptPasswordTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">
+        $i18n{certificateManagerDecryptPasswordTitle}
+      </div>
+      <div class="body" slot="body">
         <paper-input type="password" id="password"
             label="$i18n{certificateManagerPassword}" value="{{password_}}">
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.js
index 3ecc2f0aa11..cdc846e93b4 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_decryption_dialog.js
@@ -37,8 +37,8 @@ Polymer({
 
   /** @private */
   onOkTap_: function() {
-    this.browserProxy_.importPersonalCertificatePasswordSelected(
-        this.password_).then(
+    this.browserProxy_.importPersonalCertificatePasswordSelected(this.password_)
+        .then(
             function() {
               /** @type {!CrDialogElement} */ (this.$.dialog).close();
             }.bind(this),
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html
index 9d0904b06a7..035727e2e96 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html
@@ -15,8 +15,10 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{certificateManagerEncryptPasswordTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">
+        $i18n{certificateManagerEncryptPasswordTitle}
+      </div>
+      <div class="body" slot="body">
         <div>$i18n{certificateManagerEncryptPasswordDescription}</div>
         <div class="password-buttons">
           <paper-input type="password" value="{{password_}}" id="password"
@@ -28,7 +30,7 @@
               on-input="validate_"></paper-input>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.js
index a768879d0df..ed74927c56a 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.js
@@ -46,8 +46,8 @@ Polymer({
 
   /** @private */
   onOkTap_: function() {
-    this.browserProxy_.exportPersonalCertificatePasswordSelected(
-        this.password_).then(
+    this.browserProxy_.exportPersonalCertificatePasswordSelected(this.password_)
+        .then(
             function() {
               this.$.dialog.close();
             }.bind(this),
@@ -60,8 +60,8 @@ Polymer({
 
   /** @private */
   validate_: function() {
-    var isValid = this.password_ != '' &&
-        this.password_ == this.confirmPassword_;
+    var isValid =
+        this.password_ != '' && this.password_ == this.confirmPassword_;
     this.$.ok.disabled = !isValid;
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html
index 856a4dc77da..8286ba0d820 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html
@@ -3,7 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="certificate_manager_types.html">
 <link rel="import" href="certificates_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -31,8 +31,8 @@
         $i18n{certificateManagerUntrusted}
       </div>
       <div class="name">[[model.name]]</div>
-      <paper-icon-button id="dots" icon="cr:more-vert"
-          title="$i18n{moreActions}" on-tap="onDotsTap_"></paper-icon-button>
+      <button is="paper-icon-button-light" class="icon-more-vert" id="dots"
+          title="$i18n{moreActions}" on-tap="onDotsTap_"></button>
       <template is="cr-lazy-render" id="menu">
         <dialog is="cr-action-menu">
           <button class="dropdown-item" role="option" id="view"
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js
index cd76f4b9d55..9c858be8b98 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js
@@ -107,12 +107,11 @@ Polymer({
   onExportTap_: function(event) {
     this.closePopupMenu_();
     if (this.certificateType == CertificateType.PERSONAL) {
-      this.browserProxy_.exportPersonalCertificate(this.model.id).then(
-          function() {
+      this.browserProxy_.exportPersonalCertificate(this.model.id)
+          .then(function() {
             this.dispatchCertificateActionEvent_(
                 CertificateAction.EXPORT_PERSONAL);
-          }.bind(this),
-          this.onRejected_.bind(this));
+          }.bind(this), this.onRejected_.bind(this));
     } else {
       this.browserProxy_.exportCertificate(this.model.id);
     }
@@ -157,8 +156,7 @@ Polymer({
 
   /** @private */
   onDotsTap_: function() {
-    var actionMenu = /** @type {!CrActionMenuElement} */(
-        this.$.menu.get());
+    var actionMenu = /** @type {!CrActionMenuElement} */ (this.$.menu.get());
     actionMenu.showAt(this.$.dots);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js
index eb890205946..3501b77acc1 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js
@@ -83,36 +83,33 @@ var CertificateType = {
 var CertificatesImportError;
 
 cr.define('settings', function() {
-
   /** @interface */
-  function CertificatesBrowserProxy() {}
-
-  CertificatesBrowserProxy.prototype = {
+  class CertificatesBrowserProxy {
     /**
      * Triggers 5 events in the following order
      * 1x 'certificates-model-ready' event.
      * 4x 'certificates-changed' event, one for each certificate category.
      */
-    refreshCertificates: function() {},
+    refreshCertificates() {}
 
     /** @param {string} id */
-    viewCertificate: function(id) {},
+    viewCertificate(id) {}
 
     /** @param {string} id */
-    exportCertificate: function(id) {},
+    exportCertificate(id) {}
 
     /**
      * @param {string} id
      * @return {!Promise} A promise resolved when the certificate has been
      *     deleted successfully or rejected with a CertificatesError.
      */
-    deleteCertificate: function(id) {},
+    deleteCertificate(id) {}
 
     /**
      * @param {string} id
      * @return {!Promise<!CaTrustInfo>}
      */
-    getCaCertificateTrust: function(id) {},
+    getCaCertificateTrust(id) {}
 
     /**
      * @param {string} id
@@ -121,9 +118,9 @@ cr.define('settings', function() {
      * @param {boolean} objSign
      * @return {!Promise}
      */
-    editCaCertificateTrust: function(id, ssl, email, objSign) {},
+    editCaCertificateTrust(id, ssl, email, objSign) {}
 
-    cancelImportExportCertificate: function() {},
+    cancelImportExportCertificate() {}
 
     /**
      * @param {string} id
@@ -133,13 +130,13 @@ cr.define('settings', function() {
      *     passed back via a call to
      *     exportPersonalCertificatePasswordSelected().
      */
-    exportPersonalCertificate: function(id) {},
+    exportPersonalCertificate(id) {}
 
     /**
      * @param {string} password
      * @return {!Promise}
      */
-    exportPersonalCertificatePasswordSelected: function(password) {},
+    exportPersonalCertificatePasswordSelected(password) {}
 
     /**
      * @param {boolean} useHardwareBacked
@@ -148,13 +145,13 @@ cr.define('settings', function() {
      *     the user, and the password should be passed back via a call to
      *     importPersonalCertificatePasswordSelected().
      */
-    importPersonalCertificate: function(useHardwareBacked) {},
+    importPersonalCertificate(useHardwareBacked) {}
 
     /**
      * @param {string} password
      * @return {!Promise}
      */
-    importPersonalCertificatePasswordSelected: function(password) {},
+    importPersonalCertificatePasswordSelected(password) {}
 
     /**
      * @return {!Promise} A promise firing once the user has selected
@@ -163,7 +160,7 @@ cr.define('settings', function() {
      *     trust levels, and that information should be passed back via a call
      *     to importCaCertificateTrustSelected().
      */
-    importCaCertificate: function() {},
+    importCaCertificate() {}
 
     /**
      * @param {boolean} ssl
@@ -174,100 +171,98 @@ cr.define('settings', function() {
      *     error occurred with either a CertificatesError or
      *     CertificatesImportError.
      */
-    importCaCertificateTrustSelected: function(ssl, email, objSign) {},
+    importCaCertificateTrustSelected(ssl, email, objSign) {}
 
     /**
      * @return {!Promise} A promise firing once the certificate has been
      *     imported. The promise is rejected if an error occurred, with either
      *     a CertificatesError or CertificatesImportError.
      */
-    importServerCertificate: function() {},
-  };
+    importServerCertificate() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.CertificatesBrowserProxy}
    */
-  function CertificatesBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(CertificatesBrowserProxyImpl);
-
-  CertificatesBrowserProxyImpl.prototype = {
+  class CertificatesBrowserProxyImpl {
     /** @override */
-    refreshCertificates: function() {
+    refreshCertificates() {
       chrome.send('refreshCertificates');
-    },
+    }
 
     /** @override */
-    viewCertificate: function(id) {
+    viewCertificate(id) {
       chrome.send('viewCertificate', [id]);
-    },
+    }
 
     /** @override */
-    exportCertificate: function(id) {
+    exportCertificate(id) {
       chrome.send('exportCertificate', [id]);
-    },
+    }
 
     /** @override */
-    deleteCertificate: function(id) {
+    deleteCertificate(id) {
       return cr.sendWithPromise('deleteCertificate', id);
-    },
+    }
 
     /** @override */
-    exportPersonalCertificate: function(id) {
+    exportPersonalCertificate(id) {
       return cr.sendWithPromise('exportPersonalCertificate', id);
-    },
+    }
 
     /** @override */
-    exportPersonalCertificatePasswordSelected: function(password) {
+    exportPersonalCertificatePasswordSelected(password) {
       return cr.sendWithPromise(
           'exportPersonalCertificatePasswordSelected', password);
-    },
+    }
 
     /** @override */
-    importPersonalCertificate: function(useHardwareBacked) {
+    importPersonalCertificate(useHardwareBacked) {
       return cr.sendWithPromise('importPersonalCertificate', useHardwareBacked);
-    },
+    }
 
     /** @override */
-    importPersonalCertificatePasswordSelected: function(password) {
+    importPersonalCertificatePasswordSelected(password) {
       return cr.sendWithPromise(
           'importPersonalCertificatePasswordSelected', password);
-    },
+    }
 
     /** @override */
-    getCaCertificateTrust: function(id) {
+    getCaCertificateTrust(id) {
       return cr.sendWithPromise('getCaCertificateTrust', id);
-    },
+    }
 
     /** @override */
-    editCaCertificateTrust: function(id, ssl, email, objSign) {
+    editCaCertificateTrust(id, ssl, email, objSign) {
       return cr.sendWithPromise(
           'editCaCertificateTrust', id, ssl, email, objSign);
-    },
+    }
 
     /** @override */
-    importCaCertificateTrustSelected: function(ssl, email, objSign) {
+    importCaCertificateTrustSelected(ssl, email, objSign) {
       return cr.sendWithPromise(
           'importCaCertificateTrustSelected', ssl, email, objSign);
-    },
+    }
 
     /** @override */
-    cancelImportExportCertificate: function() {
+    cancelImportExportCertificate() {
       chrome.send('cancelImportExportCertificate');
-    },
+    }
 
     /** @override */
-    importCaCertificate: function() {
+    importCaCertificate() {
       return cr.sendWithPromise('importCaCertificate');
-    },
+    }
 
     /** @override */
-    importServerCertificate: function() {
+    importServerCertificate() {
       return cr.sendWithPromise('importServerCertificate');
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(CertificatesBrowserProxyImpl);
 
   return {
     CertificatesBrowserProxy: CertificatesBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_error_dialog.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_error_dialog.html
index 56ef73aeba2..b7d519de92c 100644
--- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_error_dialog.html
+++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificates_error_dialog.html
@@ -9,8 +9,8 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[model.title]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[model.title]]</div>
+      <div class="body" slot="body">
         <div>[[model.description]]</div>
         <template is="dom-if" if="[[model.certificateErrors]]">
           <template is="dom-repeat" items="[[model.certificateErrors]]">
@@ -18,7 +18,7 @@
           </template>
         </template>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="ok" class="action-button" on-tap="onOkTap_">
           $i18n{ok}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html
new file mode 100644
index 00000000000..cec56678904
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html
@@ -0,0 +1,153 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/util.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="../controls/controlled_button.html">
+<link rel="import" href="../controls/settings_toggle_button.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="chrome_cleanup_proxy.html">
+
+<dom-module id="settings-chrome-cleanup-page">
+  <template>
+    <style include="settings-shared">
+      #cleaning-spinner {
+        height: 20px;
+        width: 20px;
+      }
+
+      #files-to-remove-container {
+        padding: 0 var(--settings-box-row-padding);
+        /* Use the full available width for file paths to avoid inconsistent
+         *  line breaks when zooming in or out */
+        width: calc(var(--settings-card-max-width) -
+            2 * var(--settings-box-row-padding));
+      }
+
+      #files-to-remove-list {
+        margin: 0;
+        word-break: break-all;
+      }
+
+      #learn-more {
+        -webkit-margin-start: 0;
+      }
+
+      #powered-by-settings-box {
+        min-height: 1em;
+      }
+
+      #powered-by-container {
+        align-items: center;
+        display: flex;
+        min-height: var(--settings-row-min-height);
+        width: 100%;
+      }
+
+      /* Used by |chromeCleanupPoweredByHTML| */
+      #powered-by-logo {
+        -webkit-padding-end: 2px;
+        -webkit-padding-start: 5px;
+        content: url(chrome://settings/partner-logo.svg);
+        height: 13px;
+      }
+
+      #status-icon {
+        height: 20px;
+        vertical-align: top;
+        width: 20px;
+      }
+
+      .status-icon-container {
+        -webkit-padding-end: var(--settings-box-row-padding);
+      }
+
+      .status-icon-remove {
+        --iron-icon-fill-color: var(--paper-grey-700);
+      }
+
+      .status-icon-done {
+        --iron-icon-fill-color: var(--google-blue-500);
+      }
+
+      .status-icon-warning {
+        --iron-icon-fill-color: var(--google-red-700);
+      }
+
+      .top-aligned-settings-box {
+        align-items: start;
+        /* override settings-box min-height since we use vertical padding */
+        min-height: 0;
+        padding: 15px var(--settings-box-row-padding);
+      }
+    </style>
+    <div class$="settings-box first [[getTopSettingsBoxClass_(showDetails_)]]">
+      <div class="status-icon-container">
+        <paper-spinner id="cleaning-spinner" active="[[isRemoving_]]"
+            hidden="[[!isRemoving_]]">
+        </paper-spinner>
+        <iron-icon icon="[[statusIcon_]]" hidden="[[isRemoving_]]"
+            class$="[[statusIconClassName_]]" id="status-icon"></iron-icon>
+      </div>
+      <div class="start">
+        <div>[[title_]]</div>
+        <div class="secondary">
+          <span hidden="[[!showDetails_]]">
+            $i18n{chromeCleanupExplanation}
+          </span>
+          <a id="learn-more" href="$i18n{chromeCleanupLearnMoreUrl}"
+              target="_blank" hidden="[[!showLearnMore_]]">
+            $i18n{learnMore}
+          </a>
+        </div>
+      </div>
+      <template is="dom-if" if="[[showActionButton_]]">
+        <div class="separator"></div>
+        <paper-button id="action-button" class="primary-button"
+            on-tap="proceed_">
+          [[actionButtonLabel_]]
+        </paper-button>
+      </template>
+    </div>
+    <div class="settings-box" hidden="[[!showLogsPermission_]]">
+      <settings-toggle-button class="start"
+              id="chromeCleanupLogsUploadControl"
+              label="$i18n{chromeCleanupLogsUploadPermission}"
+              pref="[[logsUploadPref_]]"
+              on-settings-boolean-control-change="changeLogsPermission_">
+      </settings-toggle-button>
+    </div>
+    <div id="show-files-button" class="settings-box" actionable
+        on-tap="toggleExpandButton_" hidden="[[!showDetails_]]">
+      <div class="start">
+        $i18n{chromeCleanupLinkShowFiles}
+      </div>
+      <cr-expand-button expanded="{{showFilesToRemove_}}"
+          alt="$i18n{chromeCleanupLinkShowFiles}">
+      </cr-expand-button>
+    </div>
+    <iron-collapse opened="[[showFilesToRemove_]]">
+      <div id="files-to-remove-container">
+        <ul id="files-to-remove-list" class="secondary">
+          <template is="dom-repeat" items="[[filesToRemove_]]" as="fileName">
+            <li>[[fileName]]</li>
+          </template>
+        </ul>
+      </div>
+      <div id="powered-by-settings-box" class="settings-box continuation">
+        <div id="powered-by-container" class="secondary"
+            hidden="[[!isPartnerPowered_]]">
+          $i18nRaw{chromeCleanupPoweredByHtml}
+        </div>
+      </div>
+    </iron-collapse>
+  </template>
+  <script src="chrome_cleanup_page.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.js b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.js
new file mode 100644
index 00000000000..3ecbfeb3d01
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.js
@@ -0,0 +1,419 @@
+// Copyright 2015 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.
+
+/**
+ * The reason why the controller is in state kIdle.
+ * Must be kept in sync with ChromeCleanerController::IdleReason.
+ * @enum {string}
+ */
+settings.ChromeCleanupIdleReason = {
+  INITIAL: 'initial',
+  SCANNING_FOUND_NOTHING: 'scanning_found_nothing',
+  SCANNING_FAILED: 'scanning_failed',
+  CONNECTION_LOST: 'connection_lost',
+  USER_DECLINED_CLEANUP: 'user_declined_cleanup',
+  CLEANING_FAILED: 'cleaning_failed',
+  CLEANING_SUCCEEDED: 'cleaning_succeeded',
+};
+
+/**
+ * @fileoverview
+ * 'settings-chrome-cleanup-page' is the settings page containing Chrome
+ * Cleanup settings.
+ *
+ * Example:
+ *
+ *    <iron-animated-pages>
+ *      <settings-chrome-cleanup-page></settings-chrome-cleanup-page>
+ *      ... other pages ...
+ *    </iron-animated-pages>
+ */
+Polymer({
+  is: 'settings-chrome-cleanup-page',
+
+  behaviors: [I18nBehavior, WebUIListenerBehavior],
+
+  properties: {
+    /** @private */
+    title_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private */
+    isRemoving_: {
+      type: Boolean,
+      value: '',
+    },
+
+    /** @private */
+    showActionButton_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private */
+    actionButtonLabel_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private */
+    showDetails_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Learn more should only be visible for the infected, cleaning and error
+     * states.
+     * @private
+     */
+    showLearnMore_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private */
+    showLogsPermission_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private */
+    showFilesToRemove_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private */
+    filesToRemove_: {
+      type: Array,
+      value: [],
+    },
+
+    /** @private */
+    statusIcon_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private */
+    statusIconClassName_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private {chrome.settingsPrivate.PrefObject} */
+    logsUploadPref_: {
+      type: Object,
+      value: function() {
+        return /** @type {chrome.settingsPrivate.PrefObject} */ ({});
+      },
+    },
+
+    /** @private */
+    isPartnerPowered_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.valueExists('cleanupPoweredByPartner') &&
+            loadTimeData.getBoolean('cleanupPoweredByPartner');
+      },
+    },
+  },
+
+  /** @private {?settings.ChromeCleanupProxy} */
+  browserProxy_: null,
+
+  /** @private {?function()} */
+  doAction_: null,
+
+  /** @override */
+  attached: function() {
+    this.browserProxy_ = settings.ChromeCleanupProxyImpl.getInstance();
+
+    this.addWebUIListener('chrome-cleanup-on-idle', this.onIdle_.bind(this));
+    this.addWebUIListener(
+        'chrome-cleanup-on-scanning', this.onScanning_.bind(this));
+    this.addWebUIListener(
+        'chrome-cleanup-on-infected', this.onInfected_.bind(this));
+    this.addWebUIListener(
+        'chrome-cleanup-on-cleaning', this.onCleaning_.bind(this));
+    this.addWebUIListener(
+        'chrome-cleanup-on-reboot-required', this.onRebootRequired_.bind(this));
+    this.addWebUIListener(
+        'chrome-cleanup-on-dismiss', this.onDismiss_.bind(this));
+    this.addWebUIListener(
+        'chrome-cleanup-upload-permission-change',
+        this.onUploadPermissionChange_.bind(this));
+
+    this.browserProxy_.registerChromeCleanerObserver();
+  },
+
+  /**
+   * Implements the action for the only visible button in the UI, which can be
+   * either to start a cleanup or to restart the computer.
+   * @private
+   */
+  proceed_: function() {
+    listenOnce(this, 'transitionend', this.doAction_.bind(this));
+  },
+
+  getTopSettingsBoxClass_: function(showDetails) {
+    return showDetails ? 'top-aligned-settings-box' : 'two-line';
+  },
+
+  /**
+   * Toggles the expand button within the element being listened to.
+   * @param {!Event} e
+   * @private
+   */
+  toggleExpandButton_: function(e) {
+    // The expand button handles toggling itself.
+    var expandButtonTag = 'CR-EXPAND-BUTTON';
+    if (e.target.tagName == expandButtonTag)
+      return;
+
+    /** @type {!CrExpandButtonElement} */
+    var expandButton = e.currentTarget.querySelector(expandButtonTag);
+    assert(expandButton);
+    expandButton.expanded = !expandButton.expanded;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showPoweredBy_: function() {
+    return this.showFilesToRemove_ && this.isPartnerPowered_;
+  },
+
+  /**
+   * Listener of event 'chrome-cleanup-on-idle'.
+   * @param {number} idleReason
+   * @private
+   */
+  onIdle_: function(idleReason) {
+    if (idleReason == settings.ChromeCleanupIdleReason.CLEANING_SUCCEEDED) {
+      this.title_ = this.i18n('chromeCleanupTitleRemoved');
+      this.enableActionButton_(
+          this.i18n('chromeCleanupDoneButtonLabel'), this.dismiss_.bind(this));
+      this.setIconDone_();
+      this.showLearnMore_ = false;
+    } else if (idleReason == settings.ChromeCleanupIdleReason.INITIAL) {
+      this.dismiss_();
+    } else {
+      // Scanning-related idle reasons are unexpected. Show an error message for
+      // all reasons other than |CLEANING_SUCCEEDED| and |INITIAL|.
+      this.title_ = this.i18n('chromeCleanupTitleErrorCantRemove');
+      this.enableActionButton_(
+          this.i18n('chromeCleanupDoneButtonLabel'), this.dismiss_.bind(this));
+      this.setIconWarning_();
+      this.showLearnMore_ = true;
+    }
+
+    this.isRemoving_ = false;
+    this.disableDetails_();
+  },
+
+  /**
+   * Listener of event 'chrome-cleanup-on-scanning'.
+   * No UI will be shown in the Settings page on that state, so we simply hide
+   * the card and cleanup this element's fields.
+   * @private
+   */
+  onScanning_: function() {
+    this.title_ = '';
+    this.isRemoving_ = false;
+    this.disableActionButton_();
+    this.disableDetails_();
+  },
+
+  /**
+   * Listener of event 'chrome-cleanup-on-infected'.
+   * Offers a cleanup to the user and enables presenting files to be removed.
+   * @param {!Array<!string>} files The list of files to present to the user.
+   * @private
+   */
+  onInfected_: function(files) {
+    this.title_ = this.i18n('chromeCleanupTitleRemove');
+    this.isRemoving_ = false;
+    this.setIconRemove_();
+    this.enableActionButton_(
+        this.i18n('chromeCleanupRemoveButtonLabel'),
+        this.startCleanup_.bind(this));
+    this.enableDetails_(files);
+  },
+
+  /**
+   * Listener of event 'chrome-cleanup-on-cleaning'.
+   * Shows a spinner indicating that an on-going action and enables presenting
+   * files to be removed.
+   * @param {!Array<!string>} files The list of files to present to the user.
+   * @private
+   */
+  onCleaning_: function(files) {
+    this.title_ = this.i18n('chromeCleanupTitleRemoving');
+    this.isRemoving_ = true;
+    this.resetIcon_();
+    this.disableActionButton_();
+    this.enableDetails_(files);
+    this.showLogsPermission_ = false;
+  },
+
+  /**
+   * Listener of event 'chrome-cleanup-on-reboot-required'.
+   * No UI will be shown in the Settings page on that state, so we simply hide
+   * the card and cleanup this element's fields.
+   * @private
+   */
+  onRebootRequired_: function() {
+    this.title_ = this.i18n('chromeCleanupTitleRestart');
+    this.isRemoving_ = false;
+    this.showLearnMore_ = false;
+    this.setIconDone_();
+    this.enableActionButton_(
+        this.i18n('chromeCleanupRestartButtonLabel'),
+        this.restartComputer_.bind(this));
+    this.disableDetails_();
+  },
+
+  /**
+   * Listener of event 'chrome-cleanup-dismiss'.
+   * Hides the Cleanup card.
+   * @private
+   */
+  onDismiss_: function() {
+    this.fire('chrome-cleanup-dismissed');
+  },
+
+  /**
+   * @param {boolean} enabled Whether logs upload is enabled.
+   * @private
+   */
+  onUploadPermissionChange_: function(enabled) {
+    this.logsUploadPref_ = {
+      key: '',
+      type: chrome.settingsPrivate.PrefType.BOOLEAN,
+      value: enabled,
+    };
+  },
+
+  /**
+   * @param {boolean} enabled Whether to enable logs upload.
+   * @private
+   */
+  changeLogsPermission_: function(enabled) {
+    var enabled = this.$.chromeCleanupLogsUploadControl.checked;
+    this.browserProxy_.setLogsUploadPermission(enabled);
+  },
+
+  /**
+   * Dismiss the card.
+   * @private
+   */
+  dismiss_: function() {
+    this.browserProxy_.dismissCleanupPage();
+  },
+
+  /**
+   * Hides the action button in the card when no action is available.
+   * @private
+   */
+  disableActionButton_: function() {
+    this.showActionButton_ = false;
+    this.actionButtonLabel_ = '';
+    this.doAction_ = null;
+  },
+
+  /**
+   * Shows the action button in the card with an associated label and action
+   * function.
+   * @param {!string} buttonLabel The label for the action button.
+   * @param {!function()} action The function associated with the on-tap event.
+   * @private
+   */
+  enableActionButton_: function(buttonLabel, action) {
+    this.showActionButton_ = true;
+    this.actionButtonLabel_ = buttonLabel;
+    this.doAction_ = action;
+  },
+
+  /**
+   * Disables the details section on the card.
+   * @private
+   */
+  disableDetails_: function() {
+    this.showDetails_ = false;
+    this.showLogsPermission_ = false;
+    this.showFilesToRemove_ = false;
+    this.filesToRemove_ = [];
+  },
+
+  /**
+   * Enables the details section on the card.
+   * @param {!Array<!string>} files The list of files to present to the user.
+   * @private
+   */
+  enableDetails_: function(files) {
+    this.showDetails_ = true;
+    this.showLogsPermission_ = true;
+    this.showLearnMore_ = true;
+    // Note: doesn't change the state of this.showFilesToRemove_.
+    this.filesToRemove_ = files;
+  },
+
+  /**
+   * Sends an action to the browser proxy to start the cleanup.
+   * @private
+   */
+  startCleanup_: function() {
+    this.browserProxy_.startCleanup(
+        this.$.chromeCleanupLogsUploadControl.checked);
+  },
+
+  /**
+   * Sends an action to the browser proxy to restart the machine.
+   * @private
+   */
+  restartComputer_: function() {
+    this.browserProxy_.restartComputer();
+  },
+
+  /**
+   * Sets the card's icon as the cleanup offered indication.
+   * @private
+   */
+  setIconRemove_: function() {
+    this.statusIcon_ = 'settings:security';
+    this.statusIconClassName_ = 'status-icon-remove';
+  },
+
+  /**
+   * Sets the card's icon as a warning (in case of failure).
+   * @private
+   */
+  setIconWarning_: function() {
+    this.statusIcon_ = 'settings:error';
+    this.statusIconClassName_ = 'status-icon-warning';
+  },
+
+  /**
+   * Sets the card's icon as a completed or reboot required indication.
+   * @private
+   */
+  setIconDone_: function() {
+    this.statusIcon_ = 'settings:check-circle';
+    this.statusIconClassName_ = 'status-icon-done';
+  },
+
+  /**
+   * Resets the card's icon.
+   * @private
+   */
+  resetIcon_: function() {
+    this.statusIcon_ = '';
+    this.statusIconClassName_ = '';
+  },
+});
diff --git a/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_proxy.html b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_proxy.html
new file mode 100644
index 00000000000..f1a87133a46
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_proxy.html
@@ -0,0 +1,3 @@
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome_cleanup_proxy.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_proxy.js b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_proxy.js
new file mode 100644
index 00000000000..135379ae9ff
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_proxy.js
@@ -0,0 +1,73 @@
+// Copyright 2017 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.
+
+cr.define('settings', function() {
+  /** @interface */
+  class ChromeCleanupProxy {
+    /**
+     * Registers the current ChromeCleanupHandler as an observer of
+     * ChromeCleanerController events.
+     */
+    registerChromeCleanerObserver() {}
+
+    /**
+     * Starts a cleanup on the user's computer.
+     * @param {boolean} logsUploadEnabled
+     */
+    startCleanup(logsUploadEnabled) {}
+
+    /**
+     * Restarts the user's computer.
+     */
+    restartComputer() {}
+
+    /**
+     * Hides the Cleanup page from the settings menu.
+     */
+    dismissCleanupPage() {}
+
+    /**
+     * Updates the cleanup logs upload permission status.
+     * @param {boolean} enabled
+     */
+    setLogsUploadPermission(enabled) {}
+  }
+
+  /**
+   * @implements {settings.ChromeCleanupProxy}
+   */
+  class ChromeCleanupProxyImpl {
+    /** @override */
+    registerChromeCleanerObserver() {
+      chrome.send('registerChromeCleanerObserver');
+    }
+
+    /** @override */
+    startCleanup(logsUploadEnabled) {
+      chrome.send('startCleanup', [logsUploadEnabled]);
+    }
+
+    /** @override */
+    restartComputer() {
+      chrome.send('restartComputer');
+    }
+
+    /** @override */
+    dismissCleanupPage() {
+      chrome.send('dismissCleanupPage');
+    }
+
+    /** @override */
+    setLogsUploadPermission(enabled) {
+      chrome.send('setLogsUploadPermission', [enabled]);
+    }
+  }
+
+  cr.addSingletonGetter(ChromeCleanupProxyImpl);
+
+  return {
+    ChromeCleanupProxy: ChromeCleanupProxy,
+    ChromeCleanupProxyImpl: ChromeCleanupProxyImpl,
+  };
+});
diff --git a/chromium/chrome/browser/resources/cleanup_tool/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/compiled_resources2.gyp
index 7e5b6af69d7..34c9d87491b 100644
--- a/chromium/chrome/browser/resources/cleanup_tool/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/chrome_cleanup_page/compiled_resources2.gyp
@@ -4,30 +4,26 @@
 {
   'targets': [
     {
-      'target_name': 'cleanup_browser_proxy',
+      'target_name': 'chrome_cleanup_proxy',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
       ],
-      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'manager',
+      'target_name': 'chrome_cleanup_page',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_expand_button/compiled_resources2.gyp:cr_expand_button',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
-        '<(DEPTH)/ui/webui/resources/js/cr/compiled_resources2.gyp:ui',
-        'cleanup_browser_proxy',
-      ],
-      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
-    },
-    {
-      'target_name': 'toolbar',
-      'dependencies': [
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
+        '<(EXTERNS_GYP):settings_private',
+        'chrome_cleanup_proxy',
       ],
-      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
   ],
 }
diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js
index 20e2ffe83a9..24bdd364009 100644
--- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js
@@ -26,52 +26,48 @@ var ImportantSite;
 
 cr.define('settings', function() {
   /** @interface */
-  function ClearBrowsingDataBrowserProxy() {}
-
-  ClearBrowsingDataBrowserProxy.prototype = {
+  class ClearBrowsingDataBrowserProxy {
     /**
      * @param {!Array<!ImportantSite>} importantSites
      * @return {!Promise<void>}
      *     A promise resolved when data clearing has completed.
      */
-    clearBrowsingData: function(importantSites) {},
+    clearBrowsingData(importantSites) {}
 
     /**
      * @return {!Promise<!Array<!ImportantSite>>}
      *     A promise resolved when imporant sites are retrieved.
      */
-    getImportantSites: function() {},
+    getImportantSites() {}
 
     /**
      * Kick off counter updates and return initial state.
      * @return {!Promise<void>} Signal when the setup is complete.
      */
-    initialize: function() {},
-  };
+    initialize() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.ClearBrowsingDataBrowserProxy}
    */
-  function ClearBrowsingDataBrowserProxyImpl() {}
-  cr.addSingletonGetter(ClearBrowsingDataBrowserProxyImpl);
-
-  ClearBrowsingDataBrowserProxyImpl.prototype = {
+  class ClearBrowsingDataBrowserProxyImpl {
     /** @override */
-    clearBrowsingData: function(importantSites) {
+    clearBrowsingData(importantSites) {
       return cr.sendWithPromise('clearBrowsingData', importantSites);
-    },
+    }
 
     /** @override */
-    getImportantSites: function() {
+    getImportantSites() {
       return cr.sendWithPromise('getImportantSites');
-    },
+    }
 
     /** @override */
-    initialize: function() {
+    initialize() {
       return cr.sendWithPromise('initializeClearBrowsingData');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(ClearBrowsingDataBrowserProxyImpl);
 
   return {
     ClearBrowsingDataBrowserProxy: ClearBrowsingDataBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
index 6ee440c4b88..347d949b5e9 100644
--- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
+++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
@@ -87,6 +87,10 @@
 
       #clearFrom {
         -webkit-margin-start: 0.5em;
+        /* Adjust for md-select-underline and 1px additional bottom padding
+         * to keep md-select's text (without the underline) aligned with
+         * neighboring text that does not have an underline. */
+        margin-top: 3px;
       }
 
       .title .secondary {
@@ -110,8 +114,8 @@
     <dialog is="cr-dialog" id="clearBrowsingDataDialog"
         on-close="onClearBrowsingDataDialogClose_"
         close-text="$i18n{close}" ignore-popstate>
-      <div class="title">$i18n{clearBrowsingData}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{clearBrowsingData}</div>
+      <div class="body" slot="body">
         <div class="row">
           $i18n{clearFollowingItemsFrom}
           <settings-dropdown-menu id="clearFrom"
@@ -175,7 +179,7 @@
             disabled="[[clearingInProgress_]]">
         </settings-checkbox>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-spinner active="[[clearingInProgress_]]"></paper-spinner>
         <paper-button class="cancel-button" disabled="[[clearingInProgress_]]"
             on-tap="onCancelTap_">$i18n{cancel}</paper-button>
@@ -185,7 +189,7 @@
             $i18n{clearBrowsingData}
         </paper-button>
       </div>
-      <div class="footer">
+      <div class="footer" slot="footer">
         <div id="googleFooter" class="clear-browsing-data-footer">
           <iron-icon icon="settings:googleg"></iron-icon>
           <div class="footer-text">$i18nRaw{otherFormsOfBrowsingHistory}</div>
@@ -206,13 +210,19 @@
     <template is="dom-if" if="[[showImportantSitesDialog_]]">
       <dialog is="cr-dialog" id="importantSitesDialog" close-text="$i18n{close}"
           show-scroll-borders ignore-popstate>
-        <div class="title">
+        <div class="title" slot="title">
           $i18n{clearBrowsingData}
           <div class="secondary">
-            $i18n{importantSitesSubtitle}
+            <template is="dom-if"
+                if="[[!prefs.browser.clear_data.cache.value]]">
+              $i18n{importantSitesSubtitleCookies}
+            </template>
+            <template is="dom-if" if="[[prefs.browser.clear_data.cache.value]]">
+              $i18n{importantSitesSubtitleCookiesAndCache}
+            </template>
           </div>
         </div>
-        <div class="body">
+        <div class="body" slot="body">
           <template is="dom-repeat" items="[[importantSites_]]">
             <div class="row">
               <important-site-checkbox
@@ -222,7 +232,7 @@
             </div>
           </template>
         </div>
-        <div class="button-container">
+        <div class="button-container" slot="button-container">
           <paper-spinner active="[[clearingInProgress_]]"></paper-spinner>
           <paper-button class="cancel-button" disabled="[[clearingInProgress_]]"
               on-tap="onImportantSitesCancelTap_">$i18n{cancel}</paper-button>
diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js
index d4385d12164..cc194f286a9 100644
--- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js
+++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js
@@ -87,10 +87,7 @@ Polymer({
     },
 
     /** @private */
-    showImportantSitesDialog_: {
-      type: Boolean,
-      value: false
-    },
+    showImportantSitesDialog_: {type: Boolean, value: false},
   },
 
   /** @private {settings.ClearBrowsingDataBrowserProxy} */
@@ -99,12 +96,9 @@ Polymer({
   /** @override */
   ready: function() {
     this.$.clearFrom.menuOptions = this.clearFromOptions_;
+    this.addWebUIListener('update-footer', this.updateFooter_.bind(this));
     this.addWebUIListener(
-        'update-footer',
-        this.updateFooter_.bind(this));
-    this.addWebUIListener(
-        'update-counter-text',
-        this.updateCounterText_.bind(this));
+        'update-counter-text', this.updateCounterText_.bind(this));
   },
 
   /** @override */
@@ -243,7 +237,7 @@ Polymer({
 
   /** @private */
   onImportantSitesCancelTap_: function() {
-    this.$$('#importantSitesDialog').cancel();
+    /** @type {!CrDialogElement} */ (this.$$('#importantSitesDialog')).cancel();
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/compiled_resources2.gyp
index 1d1c69ac8b8..518e48ef804 100644
--- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/compiled_resources2.gyp
@@ -6,6 +6,7 @@
     {
       'target_name': 'clear_browsing_data_browser_proxy',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp:cr_dialog',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.html b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.html
index a3af86b468e..eee0badbca2 100644
--- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.html
+++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.html
@@ -8,9 +8,9 @@
     <style include="settings-shared"></style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{historyDeletionDialogTitle}</div>
-      <div class="body">$i18nRaw{historyDeletionDialogBody}</div>
-      <div class="button-container">
+      <div class="title" slot="title">$i18n{historyDeletionDialogTitle}</div>
+      <div class="body" slot="body">$i18nRaw{historyDeletionDialogBody}</div>
+      <div class="button-container" slot="button-container">
         <paper-button class="action-button" on-tap="onOkTap_">
           $i18n{historyDeletionDialogOK}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.js b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.js
index 3c111d72343..5cf45a4c17e 100644
--- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.js
+++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/history_deletion_dialog.js
@@ -24,4 +24,3 @@ Polymer({
     this.$.dialog.close();
   },
 });
-
diff --git a/chromium/chrome/browser/resources/settings/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/compiled_resources2.gyp
index ed5c8767ee8..f655815f2fa 100644
--- a/chromium/chrome/browser/resources/settings/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/compiled_resources2.gyp
@@ -6,7 +6,6 @@
     {
       'target_name': 'direction_delegate',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
       ],
@@ -49,6 +48,15 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        'page_visibility'
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'page_visibility',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -71,6 +79,7 @@
         'basic_page/compiled_resources2.gyp:*',
         'bluetooth_page/compiled_resources2.gyp:*',
         'certificate_manager_page/compiled_resources2.gyp:*',
+        'chrome_cleanup_page/compiled_resources2.gyp:*',
         'clear_browsing_data_dialog/compiled_resources2.gyp:*',
         'controls/compiled_resources2.gyp:*',
         'date_time_page/compiled_resources2.gyp:*',
diff --git a/chromium/chrome/browser/resources/settings/controls/controlled_button.html b/chromium/chrome/browser/resources/settings/controls/controlled_button.html
index 5cc109a4e2c..e0134790c7d 100644
--- a/chromium/chrome/browser/resources/settings/controls/controlled_button.html
+++ b/chromium/chrome/browser/resources/settings/controls/controlled_button.html
@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="pref_control_behavior.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -13,8 +14,8 @@
     <style include="settings-shared">
       :host {
         --justify-margin: 8px;
-        -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
-        -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-end: calc(var(--cr-button-edge-spacing) * -1);
+        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
         align-items: center;
         display: flex;
       }
diff --git a/chromium/chrome/browser/resources/settings/controls/controlled_radio_button.html b/chromium/chrome/browser/resources/settings/controls/controlled_radio_button.html
index c5ad8092feb..10b1bca7fe2 100644
--- a/chromium/chrome/browser/resources/settings/controls/controlled_radio_button.html
+++ b/chromium/chrome/browser/resources/settings/controls/controlled_radio_button.html
@@ -128,7 +128,7 @@
 
     <div id="labelWrapper">
       <span id="label" hidden$="[[!label]]">[[label]]</span>
-      <content></content>
+      <slot></slot>
     </div>
 
     <template is="dom-if" if="[[showIndicator_(controlled_, name, pref.*)]]">
diff --git a/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.html b/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.html
index 85702c8112f..ff53538c98f 100644
--- a/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.html
+++ b/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.html
@@ -21,7 +21,10 @@
         -webkit-margin-end: 16px;
       }
 
-      span {
+      /* Using ">" operator to ensure that this CSS rule will not accidentally
+       * be applied to a search highlight span (which is inserted dynamically if
+       * when search "hit" occurs within this element. */
+      :host > span {
         -webkit-margin-end: 8px;
         flex: 1;
       }
diff --git a/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.js b/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.js
index a5737c90113..71feaafe052 100644
--- a/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.js
+++ b/chromium/chrome/browser/resources/settings/controls/extension_controlled_indicator.js
@@ -21,9 +21,11 @@ Polymer({
    */
   getLabel_: function(extensionId, extensionName) {
     var manageUrl = 'chrome://extensions/?id=' + assert(this.extensionId);
-    return this.i18n('controlledByExtension',
-        '<a href="' + manageUrl + '" target="_blank">' +
-        assert(this.extensionName) + '</a>');
+    return this.i18nAdvanced('controlledByExtension', {
+      substitutions:
+          ['<a href="' + manageUrl + '" target="_blank">' +
+           assert(this.extensionName) + '</a>'],
+    });
   },
 
   /** @private */
diff --git a/chromium/chrome/browser/resources/settings/controls/pref_control_behavior.js b/chromium/chrome/browser/resources/settings/controls/pref_control_behavior.js
index 29da24c6647..dd3e55b4cfe 100644
--- a/chromium/chrome/browser/resources/settings/controls/pref_control_behavior.js
+++ b/chromium/chrome/browser/resources/settings/controls/pref_control_behavior.js
@@ -40,4 +40,3 @@ var PrefControlBehavior = {
     }.bind(this));
   },
 };
-
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html b/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html
index bfe19b447bc..3274746ca4c 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html
+++ b/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html
@@ -39,7 +39,7 @@
       <paper-checkbox id="checkbox" checked="{{checked}}"
           on-change="notifyChangedByUserInteraction"
           disabled="[[controlDisabled_(disabled, pref.*)]]">
-        <div class="label">[[label]] <content></content></div>
+        <div class="label">[[label]] <slot></slot></div>
         <div class="secondary label">[[subLabel]]</div>
       </paper-checkbox>
       <template is="dom-if" if="[[pref.controlledBy]]">
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js b/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js
index 4bc6c65582e..e3fddcf7fc3 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js
+++ b/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js
@@ -76,8 +76,8 @@ Polymer({
     if (selected == this.notFoundValue_)
       return;
 
-    var prefValue = Settings.PrefUtil.stringToPrefValue(
-        selected, assert(this.pref));
+    var prefValue =
+        Settings.PrefUtil.stringToPrefValue(selected, assert(this.pref));
     if (prefValue !== undefined)
       this.set('pref.value', prefValue);
   },
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html
index 9d6bf89d5af..19c4b1bb1d6 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html
+++ b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html
@@ -7,12 +7,12 @@
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-radio-group">
-  <style include="settings-shared"></style>
   <template>
+    <style include="settings-shared"></style>
     <div>[[label]]</div>
     <paper-radio-group selected="{{selected}}"
         selectable="paper-radio-button, controlled-radio-button">
-      <content></content>
+      <slot></slot>
     </paper-radio-group>
   </template>
   <script src="settings_radio_group.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.js b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.js
index c56d803f686..07549b309ae 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.js
+++ b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.js
@@ -21,11 +21,7 @@ Polymer({
     /**
      * IronSelectableBehavior selected attribute.
      */
-    selected: {
-      type: String,
-      notify: true,
-      observer: 'selectedChanged_'
-    },
+    selected: {type: String, notify: true, observer: 'selectedChanged_'},
   },
 
   hostAttributes: {
@@ -38,7 +34,7 @@ Polymer({
 
   /** @private */
   prefChanged_: function() {
-    var pref = /** @type {!chrome.settingsPrivate.PrefObject} */(this.pref);
+    var pref = /** @type {!chrome.settingsPrivate.PrefObject} */ (this.pref);
     this.selected = Settings.PrefUtil.prefToString(pref);
   },
 
@@ -46,7 +42,7 @@ Polymer({
   selectedChanged_: function(selected) {
     if (!this.pref)
       return;
-    this.set('pref.value',
-             Settings.PrefUtil.stringToPrefValue(selected, this.pref));
+    this.set(
+        'pref.value', Settings.PrefUtil.stringToPrefValue(selected, this.pref));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_slider.html b/chromium/chrome/browser/resources/settings/controls/settings_slider.html
index 7981bbd05b4..c3b61dc2a03 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_slider.html
+++ b/chromium/chrome/browser/resources/settings/controls/settings_slider.html
@@ -67,7 +67,7 @@
       <paper-slider id="slider"
           disabled$="[[disableSlider_]]" snaps
           on-immediate-value-changed="onSliderChanged_" max="[[max]]"
-          min="[[min]]">
+          min="[[min]]" on-up="resetTrackLock_">
       </paper-slider>
       <div id="labels" disabled$="[[disableSlider_]]">
         <div id="label-begin">[[labelMin]]</div>
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_slider.js b/chromium/chrome/browser/resources/settings/controls/settings_slider.js
index 5c5388af35f..aa661510b4a 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_slider.js
+++ b/chromium/chrome/browser/resources/settings/controls/settings_slider.js
@@ -60,9 +60,9 @@ Polymer({
    * @private
    */
   onSliderChanged_: function() {
-    var sliderValue = isNaN(this.$.slider.immediateValue)
-                         ? this.$.slider.value
-                         : this.$.slider.immediateValue;
+    var sliderValue = isNaN(this.$.slider.immediateValue) ?
+        this.$.slider.value :
+        this.$.slider.immediateValue;
 
     var newValue;
     if (this.tickValues && this.tickValues.length > 0)
@@ -148,4 +148,13 @@ Polymer({
     assert(typeof closestIndex != 'undefined');
     return closestIndex;
   },
+
+  /**
+   * TODO(scottchen): temporary fix until polymer gesture bug resolved. See:
+   * https://github.com/PolymerElements/paper-slider/issues/186
+   * @private
+   */
+  resetTrackLock_: function() {
+    Polymer.Gestures.gestures.tap.reset();
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.html b/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.html
index e939cf69c8c..b2087e32293 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.html
+++ b/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.html
@@ -53,7 +53,7 @@
       </template>
       <paper-toggle-button id="control" checked="{{checked}}"
           on-change="notifyChangedByUserInteraction" aria-labelledby="label"
-          aria-describedby="subLabel"
+          aria-describedby="subLabel" on-up="resetTrackLock_"
           disabled="[[controlDisabled_(disabled, pref)]]">
       </paper-toggle-button>
     </div>
diff --git a/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.js b/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.js
index 5a05d7199ca..5b4c77f1537 100644
--- a/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.js
+++ b/chromium/chrome/browser/resources/settings/controls/settings_toggle_button.js
@@ -31,4 +31,13 @@ Polymer({
     this.checked = !this.checked;
     this.notifyChangedByUserInteraction();
   },
+
+  /**
+   * TODO(scottchen): temporary fix until polymer gesture bug resolved. See:
+   * https://github.com/PolymerElements/paper-slider/issues/186
+   * @private
+   */
+  resetTrackLock_: function() {
+    Polymer.Gestures.gestures.tap.reset();
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_browser_proxy.js b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_browser_proxy.js
index e4f34daae06..bb8703a8409 100644
--- a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_browser_proxy.js
@@ -19,42 +19,38 @@ var DefaultBrowserInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function DefaultBrowserBrowserProxy() {}
-
-  DefaultBrowserBrowserProxy.prototype = {
+  class DefaultBrowserBrowserProxy {
     /**
      * Get the initial DefaultBrowserInfo and begin sending updates to
      * 'settings.updateDefaultBrowserState'.
      * @return {!Promise<DefaultBrowserInfo>}
      */
-    requestDefaultBrowserState: function() {},
+    requestDefaultBrowserState() {}
 
     /*
      * Try to set the current browser as the default browser. The new status of
      * the settings will be sent to 'settings.updateDefaultBrowserState'.
      */
-    setAsDefaultBrowser: function() {},
-  };
+    setAsDefaultBrowser() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.DefaultBrowserBrowserProxy}
    */
-  function DefaultBrowserBrowserProxyImpl() {}
-  cr.addSingletonGetter(DefaultBrowserBrowserProxyImpl);
-
-  DefaultBrowserBrowserProxyImpl.prototype = {
+  class DefaultBrowserBrowserProxyImpl {
     /** @override */
-    requestDefaultBrowserState: function() {
+    requestDefaultBrowserState() {
       return cr.sendWithPromise(
           'SettingsDefaultBrowser.requestDefaultBrowserState');
-    },
+    }
 
     /** @override */
-    setAsDefaultBrowser: function() {
+    setAsDefaultBrowser() {
       chrome.send('SettingsDefaultBrowser.setAsDefaultBrowser');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(DefaultBrowserBrowserProxyImpl);
 
   return {
     DefaultBrowserBrowserProxy: DefaultBrowserBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js
index cced69f3966..752fb89a9d7 100644
--- a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js
+++ b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js
@@ -36,7 +36,8 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.addWebUIListener('settings.updateDefaultBrowserState',
+    this.addWebUIListener(
+        'settings.updateDefaultBrowserState',
         this.updateDefaultBrowserState_.bind(this));
 
     this.browserProxy_.requestDefaultBrowserState().then(
@@ -57,7 +58,8 @@ Polymer({
       this.isDefault_ = true;
     else if (!defaultBrowserState.canBeDefault)
       this.isSecondaryInstall_ = true;
-    else if (!defaultBrowserState.isDisabledByPolicy &&
+    else if (
+        !defaultBrowserState.isDisabledByPolicy &&
         !defaultBrowserState.isUnknownError)
       this.maySetDefaultBrowser_ = true;
     else
diff --git a/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp
index 58a55e6be26..14450adbb38 100644
--- a/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp
@@ -45,7 +45,9 @@
     {
       'target_name': 'stylus',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_indicator',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '../prefs/compiled_resources2.gyp:prefs_types',
         'device_page_browser_proxy'
       ],
@@ -105,10 +107,20 @@
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'night_light_slider',
+      'dependencies': [
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior/compiled_resources2.gyp:iron-a11y-keys-behavior-extracted',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-behaviors/compiled_resources2.gyp:paper-inky-focus-behavior-extracted',
+        '../prefs/compiled_resources2.gyp:prefs_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'power',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
+        '<(EXTERNS_GYP):settings_private',
         '../compiled_resources2.gyp:route',
         '../prefs/compiled_resources2.gyp:prefs_types',
         'device_page_browser_proxy'
diff --git a/chromium/chrome/browser/resources/settings/device_page/device_page.js b/chromium/chrome/browser/resources/settings/device_page/device_page.js
index dc714a08bbf..47f6b670e37 100644
--- a/chromium/chrome/browser/resources/settings/device_page/device_page.js
+++ b/chromium/chrome/browser/resources/settings/device_page/device_page.js
@@ -57,18 +57,18 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.POINTERS.path, '#pointersRow .subpage-arrow');
-        map.set(
-            settings.Route.KEYBOARD.path, '#keyboardRow .subpage-arrow');
-        map.set(
-            settings.Route.STYLUS.path, '#stylusRow .subpage-arrow');
-        map.set(
-            settings.Route.DISPLAY.path, '#displayRow .subpage-arrow');
-        map.set(
-            settings.Route.STORAGE.path, '#storageRow .subpage-arrow');
-        map.set(
-            settings.Route.POWER.path, '#powerRow .subpage-arrow');
+        if (settings.routes.POINTERS)
+          map.set(settings.routes.POINTERS.path, '#pointersRow .subpage-arrow');
+        if (settings.routes.KEYBOARD)
+          map.set(settings.routes.KEYBOARD.path, '#keyboardRow .subpage-arrow');
+        if (settings.routes.STYLUS)
+          map.set(settings.routes.STYLUS.path, '#stylusRow .subpage-arrow');
+        if (settings.routes.DISPLAY)
+          map.set(settings.routes.DISPLAY.path, '#displayRow .subpage-arrow');
+        if (settings.routes.STORAGE)
+          map.set(settings.routes.STORAGE.path, '#storageRow .subpage-arrow');
+        if (settings.routes.POWER)
+          map.set(settings.routes.POWER.path, '#powerRow .subpage-arrow');
         return map;
       },
     },
@@ -110,7 +110,7 @@ Polymer({
    * @private
    */
   onPointersTap_: function() {
-    settings.navigateTo(settings.Route.POINTERS);
+    settings.navigateTo(settings.routes.POINTERS);
   },
 
   /**
@@ -118,7 +118,7 @@ Polymer({
    * @private
    */
   onKeyboardTap_: function() {
-    settings.navigateTo(settings.Route.KEYBOARD);
+    settings.navigateTo(settings.routes.KEYBOARD);
   },
 
   /**
@@ -126,7 +126,7 @@ Polymer({
    * @private
    */
   onStylusTap_: function() {
-    settings.navigateTo(settings.Route.STYLUS);
+    settings.navigateTo(settings.routes.STYLUS);
   },
 
   /**
@@ -134,7 +134,7 @@ Polymer({
    * @private
    */
   onDisplayTap_: function() {
-    settings.navigateTo(settings.Route.DISPLAY);
+    settings.navigateTo(settings.routes.DISPLAY);
   },
 
   /**
@@ -142,7 +142,7 @@ Polymer({
    * @private
    */
   onStorageTap_: function() {
-    settings.navigateTo(settings.Route.STORAGE);
+    settings.navigateTo(settings.routes.STORAGE);
   },
 
   /**
@@ -150,7 +150,7 @@ Polymer({
    * @private
    */
   onPowerTap_: function() {
-    settings.navigateTo(settings.Route.POWER);
+    settings.navigateTo(settings.routes.POWER);
   },
 
   /** @protected */
@@ -175,8 +175,8 @@ Polymer({
   checkPointerSubpage_: function() {
     // Check that the properties have explicitly been set to false.
     if (this.hasMouse_ === false && this.hasTouchpad_ === false &&
-        settings.getCurrentRoute() == settings.Route.POINTERS) {
-      settings.navigateTo(settings.Route.DEVICE);
+        settings.getCurrentRoute() == settings.routes.POINTERS) {
+      settings.navigateTo(settings.routes.DEVICE);
     }
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js
index 267ef20ef2c..29d311905c1 100644
--- a/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js
@@ -34,140 +34,224 @@ settings.PowerSource;
 settings.BatteryStatus;
 
 /**
+ * Mirrors chromeos::settings::PowerHandler::IdleBehavior.
+ * @enum {number}
+ */
+settings.IdleBehavior = {
+  DISPLAY_OFF_SLEEP: 0,
+  DISPLAY_OFF: 1,
+  DISPLAY_ON: 2,
+  OTHER: 3,
+};
+
+/**
+ * Mirrors chromeos::PowerPolicyController::Action.
+ * @enum {number}
+ */
+settings.LidClosedBehavior = {
+  SUSPEND: 0,
+  STOP_SESSION: 1,
+  SHUT_DOWN: 2,
+  DO_NOTHING: 3,
+};
+
+/**
+ * @typedef {{
+ *   idleBehavior: settings.IdleBehavior,
+ *   idleControlled: boolean,
+ *   lidClosedBehavior: settings.LidClosedBehavior,
+ *   lidClosedControlled: boolean,
+ *   hasLid: boolean,
+ * }}
+ */
+settings.PowerManagementSettings;
+
+/**
+ * A note app's availability for running as note handler app from lock screen.
+ * Mirrors chromeos::NoteTakingLockScreenSupport.
+ * @enum {number}
+ */
+settings.NoteAppLockScreenSupport = {
+  NOT_SUPPORTED: 0,
+  NOT_ALLOWED_BY_POLICY: 1,
+  SUPPORTED: 2,
+  ENABLED: 3
+};
+
+/**
  * @typedef {{name:string,
  *            value:string,
  *            preferred:boolean,
- *            supportsLockScreen: boolean}}
+ *            lockScreenSupport: settings.NoteAppLockScreenSupport}}
  */
 settings.NoteAppInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function DevicePageBrowserProxy() {}
-
-  DevicePageBrowserProxy.prototype = {
+  class DevicePageBrowserProxy {
     /** Initializes the mouse and touchpad handler. */
-    initializePointers: function() {},
+    initializePointers() {}
 
     /** Initializes the stylus handler. */
-    initializeStylus: function() {},
+    initializeStylus() {}
 
     /**
      * Override to interact with the on-tap/on-keydown event on the Learn More
      * link.
      * @param {!Event} e
      */
-    handleLinkEvent: function(e) {},
+    handleLinkEvent(e) {}
 
     /** Initializes the keyboard WebUI handler. */
-    initializeKeyboard: function() {},
+    initializeKeyboard() {}
 
     /** Shows the Ash keyboard shortcuts overlay. */
-    showKeyboardShortcutsOverlay: function() {},
+    showKeyboardShortcutsOverlay() {}
 
     /** Requests a power status update. */
-    updatePowerStatus: function() {},
+    updatePowerStatus() {}
 
     /**
      * Sets the ID of the power source to use.
      * @param {string} powerSourceId ID of the power source. '' denotes the
      *     battery (no external power source).
      */
-    setPowerSource: function(powerSourceId) {},
+    setPowerSource(powerSourceId) {}
+
+    /** Requests the current power management settings. */
+    requestPowerManagementSettings() {}
+
+    /**
+     * Sets the idle power management behavior.
+     * @param {settings.IdleBehavior} behavior Idle behavior.
+     */
+    setIdleBehavior(behavior) {}
+
+    /**
+     * Sets the lid-closed power management behavior.
+     * @param {settings.LidClosedBehavior} behavior Lid-closed behavior.
+     */
+    setLidClosedBehavior(behavior) {}
 
     /**
      * |callback| is run when there is new note-taking app information
      * available or after |requestNoteTakingApps| has been called.
      * @param {function(Array<settings.NoteAppInfo>, boolean):void} callback
      */
-    setNoteTakingAppsUpdatedCallback: function(callback) {},
+    setNoteTakingAppsUpdatedCallback(callback) {}
 
     /**
      * Open up the play store with the given URL.
      * @param {string} url
      */
-    showPlayStore: function(url) {},
+    showPlayStore(url) {}
 
     /**
      * Request current note-taking app info. Invokes any callback registered in
      * |onNoteTakingAppsUpdated|.
      */
-    requestNoteTakingApps: function() {},
+    requestNoteTakingApps() {}
 
     /**
      * Changes the preferred note taking app.
      * @param {string} appId The app id. This should be a value retrieved from a
      *     |onNoteTakingAppsUpdated| callback.
      */
-    setPreferredNoteTakingApp: function(appId) {},
-  };
+    setPreferredNoteTakingApp(appId) {}
+
+    /**
+     * Sets whether the preferred note taking app should be enabled to run as a
+     * lock screen note action handler.
+     * @param {boolean} enabled Whether the app should be enabled to handle note
+     *     actions from the lock screen.
+     */
+    setPreferredNoteTakingAppEnabledOnLockScreen(enabled) {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.DevicePageBrowserProxy}
    */
-  function DevicePageBrowserProxyImpl() {}
-  cr.addSingletonGetter(DevicePageBrowserProxyImpl);
-
-  DevicePageBrowserProxyImpl.prototype = {
+  class DevicePageBrowserProxyImpl {
     /** @override */
-    initializePointers: function() {
+    initializePointers() {
       chrome.send('initializePointerSettings');
-    },
+    }
 
     /** @override */
-    initializeStylus: function() {
+    initializeStylus() {
       chrome.send('initializeStylusSettings');
-    },
+    }
 
     /** override */
-    handleLinkEvent: function(e) {
+    handleLinkEvent(e) {
       // Prevent the link from activating its parent element when tapped or
       // when Enter is pressed.
       if (e.type != 'keydown' || e.keyCode == 13)
         e.stopPropagation();
-    },
+    }
 
     /** @override */
-    initializeKeyboard: function() {
+    initializeKeyboard() {
       chrome.send('initializeKeyboardSettings');
-    },
+    }
 
     /** @override */
-    showKeyboardShortcutsOverlay: function() {
+    showKeyboardShortcutsOverlay() {
       chrome.send('showKeyboardShortcutsOverlay');
-    },
+    }
 
     /** @override */
-    updatePowerStatus: function() {
+    updatePowerStatus() {
       chrome.send('updatePowerStatus');
-    },
+    }
 
     /** @override */
-    setPowerSource: function(powerSourceId) {
+    setPowerSource(powerSourceId) {
       chrome.send('setPowerSource', [powerSourceId]);
-    },
+    }
 
     /** @override */
-    setNoteTakingAppsUpdatedCallback: function(callback) {
+    requestPowerManagementSettings() {
+      chrome.send('requestPowerManagementSettings');
+    }
+
+    /** @override */
+    setIdleBehavior(behavior) {
+      chrome.send('setIdleBehavior', [behavior]);
+    }
+
+    /** @override */
+    setLidClosedBehavior(behavior) {
+      chrome.send('setLidClosedBehavior', [behavior]);
+    }
+
+    /** @override */
+    setNoteTakingAppsUpdatedCallback(callback) {
       cr.addWebUIListener('onNoteTakingAppsUpdated', callback);
-    },
+    }
 
     /** @override */
-    showPlayStore: function(url) {
+    showPlayStore(url) {
       chrome.send('showPlayStoreApps', [url]);
-    },
+    }
 
     /** @override */
-    requestNoteTakingApps: function() {
+    requestNoteTakingApps() {
       chrome.send('requestNoteTakingApps');
-    },
+    }
 
     /** @override */
-    setPreferredNoteTakingApp: function(appId) {
+    setPreferredNoteTakingApp(appId) {
       chrome.send('setPreferredNoteTakingApp', [appId]);
-    },
-  };
+    }
+
+    /** @override */
+    setPreferredNoteTakingAppEnabledOnLockScreen(enabled) {
+      chrome.send('setPreferredNoteTakingAppEnabledOnLockScreen', [enabled]);
+    }
+  }
+
+  cr.addSingletonGetter(DevicePageBrowserProxyImpl);
 
   return {
     DevicePageBrowserProxy: DevicePageBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/device_page/display.html b/chromium/chrome/browser/resources/settings/device_page/display.html
index 9e0676cfc1c..e28512cea44 100644
--- a/chromium/chrome/browser/resources/settings/device_page/display.html
+++ b/chromium/chrome/browser/resources/settings/device_page/display.html
@@ -11,6 +11,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="display_layout.html">
 <link rel="import" href="display_overscan_dialog.html">
+<link rel="import" href="night_light_slider.html">
+<link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -55,6 +57,10 @@
      #controlsDiv > .settings-box:first-of-type {
        border-top: none;
      }
+
+     #nightLightSlider {
+       margin-top: 20px;
+     }
     </style>
     <div class="settings-box first layout vertical self-stretch">
       <h2 class="layout self-start">
@@ -228,6 +234,29 @@
               pref="{{prefs.ash.night_light.color_temperature}}">
           </settings-slider>
         </div>
+        <!-- Schedule settings -->
+        <div class="settings-box embedded">
+          <div id="nightLightScheduleLabel" class="start textarea">
+            $i18n{displayNightLightScheduleLabel}
+          </div>
+          <settings-dropdown-menu
+              id="nightLightScheduleTypeDropDown"
+              aria-labelledby="nightLightScheduleLabel"
+              pref="{{prefs.ash.night_light.schedule_type}}"
+              menu-options="[[scheduleTypesList_]]">
+          </settings-dropdown-menu>
+        </div>
+        <!-- Custom schedule slider -->
+        <div class="settings-box embedded continuation">
+          <iron-collapse id="nightLightCustomScheduleCollapse"
+              class="start textarea layout vertical"
+              opened="[[shouldOpenCustomScheduleCollapse_]]">
+            <div class="settings-box embedded continuation">
+              <night-light-slider id="nightLightSlider" prefs="{{prefs}}">
+              </night-light-slider>
+            </div>
+          </iron-collapse>
+        </div>
       </div>
     </template>
 
diff --git a/chromium/chrome/browser/resources/settings/device_page/display.js b/chromium/chrome/browser/resources/settings/device_page/display.js
index d7c2bd72236..d5eea9360e0 100644
--- a/chromium/chrome/browser/resources/settings/device_page/display.js
+++ b/chromium/chrome/browser/resources/settings/device_page/display.js
@@ -7,6 +7,17 @@
  * 'settings-display' is the settings subpage for display settings.
  */
 
+/**
+ * The types of Night Light automatic schedule. The values of the enum values
+ * are synced with the pref "prefs.ash.night_light.schedule_type".
+ * @enum {number}
+ */
+var NightLightScheduleType = {
+  NEVER: 0,
+  SUNSET_TO_SUNRISE: 1,
+  CUSTOM: 2,
+};
+
 cr.define('settings.display', function() {
   var systemDisplayApi = /** @type {!SystemDisplay} */ (chrome.system.display);
 
@@ -93,8 +104,40 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    scheduleTypesList_: {
+      type: Array,
+      value: function() {
+        return [
+          {
+            name: loadTimeData.getString('displayNightLightScheduleNever'),
+            value: NightLightScheduleType.NEVER
+          },
+          {
+            name: loadTimeData.getString(
+                'displayNightLightScheduleSunsetToSunRise'),
+            value: NightLightScheduleType.SUNSET_TO_SUNRISE
+          },
+          {
+            name: loadTimeData.getString('displayNightLightScheduleCustom'),
+            value: NightLightScheduleType.CUSTOM
+          }
+        ];
+      },
+    },
+
+    /** @private */
+    shouldOpenCustomScheduleCollapse_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
+  observers: [
+    'onScheduleTypeChanged_(prefs.ash.night_light.schedule_type.*)',
+  ],
+
   /** @private {number} Selected mode index received from chrome. */
   currentSelectedModeIndex_: -1,
 
@@ -203,8 +246,8 @@ Polymer({
       this.currentSelectedModeIndex_ = 0;
     } else {
       this.modeValues_ = Array.from(Array(numModes).keys());
-      this.currentSelectedModeIndex_ = this.getSelectedModeIndex_(
-        selectedDisplay);
+      this.currentSelectedModeIndex_ =
+          this.getSelectedModeIndex_(selectedDisplay);
     }
     // Set |selectedDisplay| first since only the resolution slider depends
     // on |selectedModePref_|.
@@ -346,7 +389,7 @@ Polymer({
           this.selectedDisplay.bounds.height.toString());
     }
     var mode = this.selectedDisplay.modes[
-        /** @type {number} */(this.selectedModePref_.value)];
+        /** @type {number} */ (this.selectedModePref_.value)];
     assert(mode);
     var best =
         this.selectedDisplay.isInternal ? mode.uiScale == 1.0 : mode.isNative;
@@ -431,7 +474,7 @@ Polymer({
     }
     /** @type {!chrome.system.display.DisplayProperties} */ var properties = {
       displayMode: this.selectedDisplay.modes[
-          /** @type {number} */(this.selectedModePref_.value)]
+          /** @type {number} */ (this.selectedModePref_.value)]
     };
     settings.display.systemDisplayApi.setDisplayProperties(
         this.selectedDisplay.id, properties,
@@ -532,4 +575,11 @@ Polymer({
           'setDisplayProperties Error: ' + chrome.runtime.lastError.message);
     }
   },
+
+  /** @private */
+  onScheduleTypeChanged_: function() {
+    this.shouldOpenCustomScheduleCollapse_ =
+        this.getPref('ash.night_light.schedule_type').value ==
+        NightLightScheduleType.CUSTOM;
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/device_page/display_layout.html b/chromium/chrome/browser/resources/settings/device_page/display_layout.html
index ded9ec1ee6f..d5a610f0db7 100644
--- a/chromium/chrome/browser/resources/settings/device_page/display_layout.html
+++ b/chromium/chrome/browser/resources/settings/device_page/display_layout.html
@@ -1,14 +1,14 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material-shared-styles.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="drag_behavior.html">
 <link rel="import" href="layout_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="display-layout">
   <template>
-    <style include="settings-shared paper-material-shared-styles">
+    <style include="settings-shared">
       /* Use relative position with no offset so that display divs (children),
          which have absolute positions, are offset from the displayArea div. */
       #displayArea {
diff --git a/chromium/chrome/browser/resources/settings/device_page/display_layout.js b/chromium/chrome/browser/resources/settings/device_page/display_layout.js
index 76aac196c24..7063a7c0a80 100644
--- a/chromium/chrome/browser/resources/settings/device_page/display_layout.js
+++ b/chromium/chrome/browser/resources/settings/device_page/display_layout.js
@@ -42,7 +42,9 @@ Polymer({
   visualOffset_: {left: 0, top: 0},
 
   /** @override */
-  detached: function() { this.initializeDrag(false); },
+  detached: function() {
+    this.initializeDrag(false);
+  },
 
   /**
    * Called explicitly when |this.displays| and their associated |this.layouts|
diff --git a/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.html b/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.html
index a0bf0909e7f..d4f6cf4142c 100644
--- a/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.html
+++ b/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.html
@@ -45,8 +45,8 @@
     </style>
     <dialog is="cr-dialog" id="dialog" on-close="close"
         close-text="$i18n{close}">
-      <div class="title">$i18n{displayOverscanPageTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{displayOverscanPageTitle}</div>
+      <div class="body" slot="body">
         <div class="subtitle" >$i18n{displayOverscanSubtitle}</div>
         <div class="instructions" >$i18n{displayOverscanInstructions}</div>
         <div class="details layout horizontal around-justified self-stretch">
@@ -73,7 +73,7 @@
           </div>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="reset" class="cancel-button" on-tap="onResetTap_">
           $i18n{displayOverscanReset}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.js b/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.js
index e9f245c42c1..891a7146d06 100644
--- a/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.js
+++ b/chromium/chrome/browser/resources/settings/device_page/display_overscan_dialog.js
@@ -76,7 +76,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   handleKeyEvent_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/device_page/drag_behavior.js b/chromium/chrome/browser/resources/settings/device_page/drag_behavior.js
index c08cf0ccc95..2c555447282 100644
--- a/chromium/chrome/browser/resources/settings/device_page/drag_behavior.js
+++ b/chromium/chrome/browser/resources/settings/device_page/drag_behavior.js
@@ -121,7 +121,7 @@ var DragBehavior = {
   },
 
   /**
-   * @param {Event} e The mouse down event.
+   * @param {!Event} e The mouse down event.
    * @return {boolean}
    * @private
    */
@@ -134,7 +134,7 @@ var DragBehavior = {
   },
 
   /**
-   * @param {Event} e The mouse move event.
+   * @param {!Event} e The mouse move event.
    * @return {boolean}
    * @private
    */
@@ -144,7 +144,7 @@ var DragBehavior = {
   },
 
   /**
-   * @param {Event} e The touch start event.
+   * @param {!Event} e The touch start event.
    * @return {boolean}
    * @private
    */
@@ -160,7 +160,7 @@ var DragBehavior = {
   },
 
   /**
-   * @param {Event} e The touch move event.
+   * @param {!Event} e The touch move event.
    * @return {boolean}
    * @private
    */
@@ -197,7 +197,7 @@ var DragBehavior = {
   },
 
   /**
-   * @param {Event} e
+   * @param {!Event} e
    * @return {boolean}
    * @private
    */
@@ -211,7 +211,7 @@ var DragBehavior = {
   },
 
   /**
-   * @param {Event} e The event which triggers this drag.
+   * @param {!Event} e The event which triggers this drag.
    * @param {DragPosition} eventLocation The location of the event.
    * @return {boolean}
    * @private
diff --git a/chromium/chrome/browser/resources/settings/device_page/drive_cache_dialog.html b/chromium/chrome/browser/resources/settings/device_page/drive_cache_dialog.html
index 57d3fc16491..b142f5601c0 100644
--- a/chromium/chrome/browser/resources/settings/device_page/drive_cache_dialog.html
+++ b/chromium/chrome/browser/resources/settings/device_page/drive_cache_dialog.html
@@ -9,11 +9,13 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{storageClearDriveCacheDialogTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">
+        $i18n{storageClearDriveCacheDialogTitle}
+      </div>
+      <div class="body" slot="body">
         <span>$i18n{storageClearDriveCacheDialogDescription}</span>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="cancelButton" class="cancel-button"
             on-tap="onCancelTap_">
           $i18n{cancel}
diff --git a/chromium/chrome/browser/resources/settings/device_page/keyboard.js b/chromium/chrome/browser/resources/settings/device_page/keyboard.js
index f4a4534ea63..e10766d145b 100644
--- a/chromium/chrome/browser/resources/settings/device_page/keyboard.js
+++ b/chromium/chrome/browser/resources/settings/device_page/keyboard.js
@@ -80,28 +80,36 @@ Polymer({
    */
   setUpKeyMapTargets_: function() {
     // Ordering is according to UX, but values match settings.ModifierKey.
-    this.keyMapTargets_ = [{
-      value: settings.ModifierKey.SEARCH_KEY,
-      name: loadTimeData.getString('keyboardKeySearch'),
-    }, {
-      value: settings.ModifierKey.CONTROL_KEY,
-      name: loadTimeData.getString('keyboardKeyCtrl')
-    }, {
-      value: settings.ModifierKey.ALT_KEY,
-      name: loadTimeData.getString('keyboardKeyAlt')
-    }, {
-      value: settings.ModifierKey.CAPS_LOCK_KEY,
-      name: loadTimeData.getString('keyboardKeyCapsLock')
-    }, {
-      value: settings.ModifierKey.ESCAPE_KEY,
-      name: loadTimeData.getString('keyboardKeyEscape')
-    }, {
-      value: settings.ModifierKey.BACKSPACE_KEY,
-      name: loadTimeData.getString('keyboardKeyBackspace')
-    }, {
-      value: settings.ModifierKey.VOID_KEY,
-      name: loadTimeData.getString('keyboardKeyDisabled')
-    }];
+    this.keyMapTargets_ = [
+      {
+        value: settings.ModifierKey.SEARCH_KEY,
+        name: loadTimeData.getString('keyboardKeySearch'),
+      },
+      {
+        value: settings.ModifierKey.CONTROL_KEY,
+        name: loadTimeData.getString('keyboardKeyCtrl')
+      },
+      {
+        value: settings.ModifierKey.ALT_KEY,
+        name: loadTimeData.getString('keyboardKeyAlt')
+      },
+      {
+        value: settings.ModifierKey.CAPS_LOCK_KEY,
+        name: loadTimeData.getString('keyboardKeyCapsLock')
+      },
+      {
+        value: settings.ModifierKey.ESCAPE_KEY,
+        name: loadTimeData.getString('keyboardKeyEscape')
+      },
+      {
+        value: settings.ModifierKey.BACKSPACE_KEY,
+        name: loadTimeData.getString('keyboardKeyBackspace')
+      },
+      {
+        value: settings.ModifierKey.VOID_KEY,
+        name: loadTimeData.getString('keyboardKeyDisabled')
+      }
+    ];
   },
 
   /**
@@ -121,6 +129,6 @@ Polymer({
   },
 
   onShowLanguageInputTap_: function() {
-    settings.navigateTo(settings.Route.LANGUAGES);
+    settings.navigateTo(settings.routes.LANGUAGES);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/device_page/layout_behavior.js b/chromium/chrome/browser/resources/settings/device_page/layout_behavior.js
index 77a56a3fc0e..d1665050e38 100644
--- a/chromium/chrome/browser/resources/settings/device_page/layout_behavior.js
+++ b/chromium/chrome/browser/resources/settings/device_page/layout_behavior.js
@@ -208,8 +208,8 @@ var LayoutBehavior = {
     assert(bounds);
     this.calculatedBoundsMap_.set(
         displayId,
-        /** @type {!chrome.system.display.Bounds} */ (
-            Object.assign({}, bounds)));
+        /** @type {!chrome.system.display.Bounds} */
+        (Object.assign({}, bounds)));
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/device_page/night_light_slider.html b/chromium/chrome/browser/resources/settings/device_page/night_light_slider.html
new file mode 100644
index 00000000000..bd0db71050e
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/device_page/night_light_slider.html
@@ -0,0 +1,195 @@
+<html><head>
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-inky-focus-behavior.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+</head><body><dom-module id="night-light-slider">
+  <template>
+    <style>
+      :host {
+        cursor: default;
+        font-family: 'Roboto', sans-serif;
+        text-align: center;
+        user-select: none;
+      }
+
+      #sliderContainer {
+        display: inline-block;
+        position: relative;
+        user-select: none;
+        width: 570px;
+      }
+
+      #sliderBar {
+        background-color: #ccc;
+        background-size: 100%;
+        display: inline-block;
+        height: 2px;
+        position: relative;
+        width: inherit;
+      }
+
+      .knob {
+        height: 32px;
+        margin-left: -16px;
+        margin-top: -15px;
+        position: absolute;
+        width: 32px;
+      }
+
+      .knob:focus {
+        outline: none;
+      }
+
+      .knob-inner {
+        background: var(--google-blue-700);
+        border-radius: 6px;
+        height: 12px;
+        left: 0;
+        margin-left: 10px;
+        margin-top: 10px;
+        position: absolute;
+        width: 12px;
+        z-index: 3;
+      }
+
+      .knob-inner:focus {
+        outline: none;
+      }
+
+      .expanded-knob {
+        transform: scale(1.25);
+        z-index: 3;
+      }
+
+      #progressContainer {
+        height: 100%;
+        overflow: hidden;
+        position: absolute;
+        width: 100%;
+      }
+
+      .progress {
+        background: var(--google-blue-700);
+        height: 100%;
+        position: absolute;
+        z-index: 1;
+      }
+
+      #labelContainer {
+        height: 1.75em;
+      }
+
+      .label {
+        background: var(--google-blue-700);
+        border-radius: 14px;
+        color: white;
+        font-size: 12px;
+        left: 0;
+        line-height: 1.5em;
+        margin-left: -2.5em;
+        position: absolute;
+        text-align: center;
+        transition: margin-top 200ms cubic-bezier(0, 0, 0.2, 1);
+        vertical-align: middle;
+        width: 5em;
+      }
+
+      .end-label-overlap {
+        margin-top: -2em;
+      }
+
+      #markersContainer {
+        display: flex;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+
+      .markers {
+        background-color: black;
+        border-radius: 50%;
+        display: block;
+        height: 100%;
+        margin-left: -1px;
+        padding: 0;
+        position: absolute;
+        width: 2PX;
+        z-index: 2;
+      }
+
+      #legendContainer {
+        height: 10px;
+        position: relative;
+        width: inherit;
+      }
+
+      #legendContainer > div {
+        color: rgb(100, 100, 100);
+        font-size: 12px;
+        margin-left: -2.5em;
+        position: absolute;
+        text-align: center;
+        top: 5px;
+        width: 5em;
+      }
+
+      paper-ripple {
+        color: var(--google-blue-700);
+      }
+    </style>
+
+    <div id="sliderContainer">
+      <div id="labelContainer">
+        <div id="startLabel" class="label"
+            aria-label="$i18n{displayNightLightStartTime}">
+          [[startTime_]]
+        </div>
+        <div id="endLabel" class="label"
+            aria-label="$i18n{displayNightLightStopTime}">
+          [[endTime_]]
+        </div>
+      </div>
+      <div id="sliderBar">
+        <div id="progressContainer">
+          <div id="endProgress" class="progress"></div>
+          <div id="startProgress" class="progress"></div>
+        </div>
+        <div id="markersContainer">
+        </div>
+        <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_"
+            on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
+            on-blur="onBlur_">
+          <div class="knob-inner" tabindex="-1"></div>
+        </div>
+        <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
+            on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
+            on-blur="onBlur_">
+          <div class="knob-inner" tabindex="-1"></div>
+        </div>
+      </div>
+      <div id="legendContainer">
+        <div style="[[getLegendStyle_(0, isRTL_)]]">
+          [[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
+        </div>
+        <div style="[[getLegendStyle_(25, isRTL_)]]">
+          [[getLocaleTimeString_(0, 0, shouldUse24Hours_)]]
+        </div>
+        <div style="[[getLegendStyle_(50, isRTL_)]]">
+          [[getLocaleTimeString_(6, 0, shouldUse24Hours_)]]
+        </div>
+        <div style="[[getLegendStyle_(75, isRTL_)]]">
+          [[getLocaleTimeString_(12, 0, shouldUse24Hours_)]]
+        </div>
+        <div style="[[getLegendStyle_(100, isRTL_)]]">
+          [[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
+        </div>
+      </div>
+      <div id="dummyRippleContainer" hidden></div>
+    </div>
+
+  </template>
+</dom-module>
+<script src="night_light_slider.js"></script></body></html>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/device_page/night_light_slider.js b/chromium/chrome/browser/resources/settings/device_page/night_light_slider.js
new file mode 100644
index 00000000000..d948ecbf936
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/device_page/night_light_slider.js
@@ -0,0 +1,582 @@
+// Copyright 2017 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.
+
+(function() {
+
+/**
+ * @fileoverview
+ * night-light-slider is used to set the custom automatic schedule of the
+ * Night Light feature, so that users can set their desired start and end
+ * times.
+ */
+
+/** @const */ var HOURS_PER_DAY = 24;
+/** @const */ var MIN_KNOBS_DISTANCE_MINUTES = 60;
+/** @const */ var OFFSET_MINUTES_6PM = 18 * 60;
+/** @const */ var TOTAL_MINUTES_PER_DAY = 24 * 60;
+
+Polymer({
+  is: 'night-light-slider',
+
+  behaviors: [
+    PrefsBehavior,
+    Polymer.IronA11yKeysBehavior,
+    Polymer.PaperInkyFocusBehavior,
+  ],
+
+  properties: {
+    /**
+     * The start knob time as a string to be shown on the start label bubble.
+     * @private
+     */
+    startTime_: String,
+
+    /**
+     * The end knob time as a string to be shown on the end label bubble.
+     * @private
+     */
+    endTime_: String,
+
+    /**
+     * Whether the window is in RTL locales.
+     * @private
+     */
+    isRTL_: Boolean,
+
+    /**
+     * Whether to use the 24-hour format for the time shown in the label
+     * bubbles.
+     * @private
+     */
+    shouldUse24Hours_: Boolean,
+  },
+
+  observers: [
+    'customTimesChanged_(prefs.ash.night_light.custom_start_time.*, ' +
+        'prefs.ash.night_light.custom_end_time.*)',
+    'hourFormatChanged_(prefs.settings.clock.use_24hour_clock.*)',
+  ],
+
+  keyBindings: {
+    'left': 'onLeftKey_',
+    'right': 'onRightKey_',
+  },
+
+  /**
+   * The object currently being dragged. Either the start or end knobs.
+   * @type {?Object}
+   * @private
+   */
+  dragObject_: null,
+
+  /** @override */
+  attached: function() {
+    this.isRTL_ = window.getComputedStyle(this).direction == 'rtl';
+  },
+
+  /** @override */
+  ready: function() {
+    // Build the legend markers.
+    var markersContainer = this.$.markersContainer;
+    var width = markersContainer.offsetWidth;
+    for (var i = 0; i <= HOURS_PER_DAY; ++i) {
+      var marker = document.createElement('div');
+      marker.className = 'markers';
+      markersContainer.appendChild(marker);
+      marker.style.left = (i * 100 / HOURS_PER_DAY) + '%';
+    }
+
+    this.async(function() {
+      // Refresh the hour format as well as read the initial pref values and
+      // refresh the slider.
+      this.hourFormatChanged_();
+    });
+  },
+
+  /**
+   * Called when the value of the pref associated with whether to use the
+   * 24-hour clock format is changed. This will also refresh the slider.
+   * @private
+   */
+  hourFormatChanged_: function() {
+    this.shouldUse24Hours_ = /** @type {boolean} */ (
+        this.getPref('settings.clock.use_24hour_clock').value);
+
+    // Refresh the slider.
+    this.customTimesChanged_();
+  },
+
+  /**
+   * Gets the style of legend div determining its absolute left position.
+   * @param {number} percent The value of the div's left as a percent (0 - 100).
+   * @param {boolean} isRTL whether window is in RTL locale.
+   * @return {string} The CSS style of the legend div.
+   * @private
+   */
+  getLegendStyle_: function(percent, isRTL) {
+    percent = isRTL ? 100 - percent : percent;
+    return 'left: ' + percent + '%';
+  },
+
+  /**
+   * Expands or un-expands the knob being dragged along with its corresponding
+   * label bubble.
+   * @param {boolean} expand True to expand, and false to un-expand.
+   * @private
+   */
+  setExpanded_: function(expand) {
+    var knob = this.$.startKnob;
+    var label = this.$.startLabel;
+    if (this.dragObject_ == this.$.endKnob) {
+      knob = this.$.endKnob;
+      label = this.$.endLabel;
+    }
+
+    knob.classList.toggle('expanded-knob', expand);
+    label.classList.toggle('expanded-knob', expand);
+  },
+
+  /**
+   * If one of the two knobs is focused, this function blurs it.
+   * @private
+   */
+  blurAnyFocusedKnob_: function() {
+    var activeElement = this.shadowRoot.activeElement;
+    if (activeElement == this.$.startKnob || activeElement == this.$.endKnob)
+      activeElement.blur();
+  },
+
+  /**
+   * Start dragging the target knob.
+   * @private
+   */
+  startDrag_: function(event) {
+    event.preventDefault();
+
+    // Only handle start or end knobs. Use the "knob-inner" divs just to display
+    // the knobs.
+    if (event.target == this.$.startKnob ||
+        event.target == this.$.startKnob.firstElementChild) {
+      this.dragObject_ = this.$.startKnob;
+    } else if (event.target == this.$.endKnob ||
+               event.target == this.$.endKnob.firstElementChild) {
+      this.dragObject_ = this.$.endKnob;
+    } else {
+      return;
+    }
+
+    this.setExpanded_(true);
+
+    // Focus is only given to the knobs by means of keyboard tab navigations.
+    // When we start dragging, we don't want to see any focus halos around any
+    // knob.
+    this.blurAnyFocusedKnob_();
+
+    // However, our night-light-slider element must get the focus.
+    this.focus();
+  },
+
+  /**
+   * Continues dragging the selected knob if any.
+   * @private
+   */
+  continueDrag_: function(event) {
+    if (!this.dragObject_)
+      return;
+
+    event.stopPropagation();
+    switch (event.detail.state) {
+      case 'start':
+        this.startDrag_(event);
+        break;
+      case 'track':
+        this.doKnobTracking_(event);
+        break;
+      case 'end':
+        this.endDrag_(event);
+        break;
+    }
+  },
+
+  /**
+   * Updates the knob's corresponding pref value in response to dragging, which
+   * will in turn update the location of the knob and its corresponding label
+   * bubble and its text contents.
+   * @private
+   */
+  doKnobTracking_: function(event) {
+    var deltaRatio = Math.abs(event.detail.ddx) / this.$.sliderBar.offsetWidth;
+    var deltaMinutes = Math.floor(deltaRatio * TOTAL_MINUTES_PER_DAY);
+    if (deltaMinutes <= 0)
+      return;
+
+    var knobPref = this.dragObject_ == this.$.startKnob ?
+        'ash.night_light.custom_start_time' :
+        'ash.night_light.custom_end_time';
+
+    var ddx = this.isRTL_ ? event.detail.ddx * -1 : event.detail.ddx;
+    if (ddx > 0) {
+      // Increment the knob's pref by the amount of deltaMinutes.
+      this.incrementPref_(knobPref, deltaMinutes);
+    } else {
+      // Decrement the knob's pref by the amount of deltaMinutes.
+      this.decrementPref_(knobPref, deltaMinutes);
+    }
+  },
+
+  /**
+   * Ends the dragging.
+   * @private
+   */
+  endDrag_: function(event) {
+    event.preventDefault();
+    this.setExpanded_(false);
+    this.dragObject_ = null;
+  },
+
+  /**
+   * Gets the given knob's offset ratio with respect to its parent element
+   * (which is the slider bar).
+   * @param {HTMLDivElement} knob Either one of the two knobs.
+   * @return {number}
+   * @private
+   */
+  getKnobRatio_: function(knob) {
+    return parseFloat(knob.style.left) / this.$.sliderBar.offsetWidth;
+  },
+
+  /**
+   * Converts the time of day, given as |hour| and |minutes|, to its language-
+   * sensitive time string representation.
+   * @param {number} hour The hour of the day (0 - 23).
+   * @param {number} minutes The minutes of the hour (0 - 59).
+   * @param {boolean} shouldUse24Hours Whether to use the 24-hour time format.
+   * @return {string}
+   * @private
+   */
+  getLocaleTimeString_: function(hour, minutes, shouldUse24Hours) {
+    var d = new Date();
+    d.setHours(hour);
+    d.setMinutes(minutes);
+    d.setSeconds(0);
+    d.setMilliseconds(0);
+
+    return d.toLocaleTimeString(
+        [], {hour: '2-digit', minute: '2-digit', hour12: !shouldUse24Hours});
+  },
+
+  /**
+   * Converts the |offsetMinutes| value (which the number of minutes since
+   * 00:00) to its language-sensitive time string representation.
+   * @param {number} offsetMinutes The time of day represented as the number of
+   * minutes from 00:00.
+   * @return {string}
+   * @private
+   */
+  offsetMinutesToTimeString_: function(offsetMinutes) {
+    var hour = Math.floor(offsetMinutes / 60);
+    var minute = Math.floor(offsetMinutes % 60);
+
+    return this.getLocaleTimeString_(hour, minute, this.shouldUse24Hours_);
+  },
+
+  /**
+   * Handles changes in the start and end times prefs.
+   * @private
+   */
+  customTimesChanged_: function() {
+    var startOffsetMinutes = /** @type {number} */ (
+        this.getPref('ash.night_light.custom_start_time').value);
+    this.startTime_ = this.offsetMinutesToTimeString_(startOffsetMinutes);
+    this.updateKnobLeft_(this.$.startKnob, startOffsetMinutes);
+    var endOffsetMinutes = /** @type {number} */ (
+        this.getPref('ash.night_light.custom_end_time').value);
+    this.endTime_ = this.offsetMinutesToTimeString_(endOffsetMinutes);
+    this.updateKnobLeft_(this.$.endKnob, endOffsetMinutes);
+    this.refresh_();
+  },
+
+  /**
+   * Updates the absolute left coordinate of the given |knob| based on the time
+   * it represents given as an |offsetMinutes| value.
+   * @param {HTMLDivElement} knob
+   * @param {number} offsetMinutes
+   * @private
+   */
+  updateKnobLeft_: function(knob, offsetMinutes) {
+    var offsetAfter6pm =
+        (offsetMinutes + TOTAL_MINUTES_PER_DAY - OFFSET_MINUTES_6PM) %
+        TOTAL_MINUTES_PER_DAY;
+    var ratio = offsetAfter6pm / TOTAL_MINUTES_PER_DAY;
+
+    if (ratio == 0) {
+      // If the ratio is 0, then there are two possibilities:
+      // - The knob time is 6:00 PM on the left side of the slider.
+      // - The knob time is 6:00 PM on the right side of the slider.
+      // We need to check the current knob offset ratio to determine which case
+      // it is.
+      var currentKnobRatio = this.getKnobRatio_(knob);
+      ratio = currentKnobRatio > 0.5 ? 1.0 : 0.0;
+    }
+    ratio = this.isRTL_ ? (1.0 - ratio) : ratio;
+    knob.style.left = (ratio * this.$.sliderBar.offsetWidth) + 'px';
+  },
+
+  /**
+   * Refreshes elements of the slider other than the knobs (the label bubbles,
+   * and the progress bar).
+   * @private
+   */
+  refresh_: function() {
+    // The label bubbles have the same left coordinates as their corresponding
+    // knobs.
+    this.$.startLabel.style.left = this.$.startKnob.style.left;
+    this.$.endLabel.style.left = this.$.endKnob.style.left;
+
+    // In RTL locales, the relative positions of the knobs are flipped for the
+    // purpose of calculating the styles of the progress bars below.
+    var rtl = this.isRTL_;
+    var endKnob = rtl ? this.$.startKnob : this.$.endKnob;
+    var startKnob = rtl ? this.$.endKnob : this.$.startKnob;
+    var startProgress = rtl ? this.$.endProgress : this.$.startProgress;
+    var endProgress = rtl ? this.$.startProgress : this.$.endProgress;
+
+    // The end progress bar starts from either the start knob or the start of
+    // the slider (whichever is to its left) and ends at the end knob.
+    var endProgressLeft = startKnob.offsetLeft >= endKnob.offsetLeft ?
+        '0px' :
+        startKnob.style.left;
+    endProgress.style.left = endProgressLeft;
+    endProgress.style.width =
+        (parseFloat(endKnob.style.left) - parseFloat(endProgressLeft)) + 'px';
+
+    // The start progress bar starts at the start knob, and ends at either the
+    // end knob or the end of the slider (whichever is to its right).
+    var startProgressRight = endKnob.offsetLeft < startKnob.offsetLeft ?
+        this.$.sliderBar.offsetWidth :
+        endKnob.style.left;
+    startProgress.style.left = startKnob.style.left;
+    startProgress.style.width =
+        (parseFloat(startProgressRight) - parseFloat(startKnob.style.left)) +
+        'px';
+
+    this.fixLabelsOverlapIfAny_();
+  },
+
+  /**
+   * If the label bubbles overlap, this function fixes them by moving the end
+   * label up a little.
+   * @private
+   */
+  fixLabelsOverlapIfAny_: function() {
+    var startLabel = this.$.startLabel;
+    var endLabel = this.$.endLabel;
+    var distance = Math.abs(
+        parseFloat(startLabel.style.left) - parseFloat(endLabel.style.left));
+    // Both knobs have the same width, but the one being dragged is scaled up by
+    // 125%.
+    if (distance <= (1.25 * startLabel.offsetWidth)) {
+      // Shift the end label up so that it doesn't overlap with the start label.
+      endLabel.classList.add('end-label-overlap');
+    } else {
+      endLabel.classList.remove('end-label-overlap');
+    }
+  },
+
+  /**
+   * Given the |prefPath| that corresponds to one knob time, it gets the value
+   * of the pref that corresponds to the other knob.
+   * @param {string} prefPath
+   * @return {number}
+   * @private
+   */
+  getOtherKnobPrefValue_: function(prefPath) {
+    if (prefPath == 'ash.night_light.custom_start_time') {
+      return /** @type {number} */ (
+          this.getPref('ash.night_light.custom_end_time').value);
+    }
+
+    return /** @type {number} */ (
+        this.getPref('ash.night_light.custom_start_time').value);
+  },
+
+  /**
+   * Increments the value of the pref whose path is given by |prefPath| by the
+   * amount given in |increment|.
+   * @param {string} prefPath
+   * @param {number} increment
+   * @private
+   */
+  incrementPref_: function(prefPath, increment) {
+    var value = this.getPref(prefPath).value + increment;
+
+    var otherValue = this.getOtherKnobPrefValue_(prefPath);
+    if (otherValue > value &&
+        ((otherValue - value) < MIN_KNOBS_DISTANCE_MINUTES)) {
+      // We are incrementing the minutes offset moving towards the other knob.
+      // We have a minimum 60 minutes overlap threshold. Move this knob to the
+      // other side of the other knob.
+      //
+      // Was:
+      // ------ (+) --- 59 MIN --- + ------->>
+      //
+      // Now:
+      // ------ + --- 60 MIN --- (+) ------->>
+      //
+      // (+) ==> Knob being moved.
+      value = otherValue + MIN_KNOBS_DISTANCE_MINUTES;
+    }
+
+    // The knobs are allowed to wrap around.
+    this.setPrefValue(prefPath, (value % TOTAL_MINUTES_PER_DAY));
+  },
+
+  /**
+   * Decrements the value of the pref whose path is given by |prefPath| by the
+   * amount given in |decrement|.
+   * @param {string} prefPath
+   * @param {number} decrement
+   * @private
+   */
+  decrementPref_: function(prefPath, decrement) {
+    var value =
+        /** @type {number} */ (this.getPref(prefPath).value) - decrement;
+
+    var otherValue = this.getOtherKnobPrefValue_(prefPath);
+    if (value > otherValue &&
+        ((value - otherValue) < MIN_KNOBS_DISTANCE_MINUTES)) {
+      // We are decrementing the minutes offset moving towards the other knob.
+      // We have a minimum 60 minutes overlap threshold. Move this knob to the
+      // other side of the other knob.
+      //
+      // Was:
+      // <<------ + --- 59 MIN --- (+) -------
+      //
+      // Now:
+      // <<------ (+) --- 60 MIN --- + ------
+      //
+      // (+) ==> Knob being moved.
+      value = otherValue - MIN_KNOBS_DISTANCE_MINUTES;
+    }
+
+    // The knobs are allowed to wrap around.
+    if (value < 0)
+      value += TOTAL_MINUTES_PER_DAY;
+
+    this.setPrefValue(prefPath, Math.abs(value) % TOTAL_MINUTES_PER_DAY);
+  },
+
+  /**
+   * Gets the pref path of the currently focused knob. Returns null if no knob
+   * is currently focused.
+   * @return {?string}
+   * @private
+   */
+  getFocusedKnobPrefPathIfAny_: function() {
+    var focusedElement = this.shadowRoot.activeElement;
+    if (focusedElement == this.$.startKnob)
+      return 'ash.night_light.custom_start_time';
+
+    if (focusedElement == this.$.endKnob)
+      return 'ash.night_light.custom_end_time';
+
+    return null;
+  },
+
+  /**
+   * Handles the 'left' key event.
+   * @private
+   */
+  onLeftKey_: function(e) {
+    e.preventDefault();
+    var knobPref = this.getFocusedKnobPrefPathIfAny_();
+    if (!knobPref)
+      return;
+
+    if (this.isRTL_)
+      this.incrementPref_(knobPref, 1);
+    else
+      this.decrementPref_(knobPref, 1);
+  },
+
+  /**
+   * Handles the 'right' key event.
+   * @private
+   */
+  onRightKey_: function(e) {
+    e.preventDefault();
+    var knobPref = this.getFocusedKnobPrefPathIfAny_();
+    if (!knobPref)
+      return;
+
+    if (this.isRTL_)
+      this.decrementPref_(knobPref, 1);
+    else
+      this.incrementPref_(knobPref, 1);
+  },
+
+  /**
+   * @return {boolean} Whether either of the two knobs is focused.
+   * @private
+   */
+  isEitherKnobFocused_: function() {
+    var activeElement = this.shadowRoot.activeElement;
+    return activeElement == this.$.startKnob || activeElement == this.$.endKnob;
+  },
+
+  /**
+   * Overrides _createRipple() from PaperInkyFocusBehavior to create the ripple
+   * only on a knob if it's focused, or on a dummy hidden element so that it
+   * doesn't show.
+   * @private
+   */
+  _createRipple: function() {
+    if (this.isEitherKnobFocused_()) {
+      this._rippleContainer = this.shadowRoot.activeElement;
+    } else {
+      // We can't just skip the ripple creation and return early with null here.
+      // The code inherited from PaperInkyFocusBehavior expects that this
+      // function returns a ripple element. So to avoid crashes, we'll setup the
+      // ripple to be created under a hidden element.
+      this._rippleContainer = this.$.dummyRippleContainer;
+    }
+
+    return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
+  },
+
+  /**
+   * Handles focus events on the start and end knobs.
+   * @private
+   */
+  onFocus_: function() {
+    this.ensureRipple();
+
+    if (this.hasRipple()) {
+      this._ripple.style.display = '';
+      this._ripple.holdDown = true;
+    }
+  },
+
+  /**
+   * Handles blur events on the start and end knobs.
+   * @private
+   */
+  onBlur_: function() {
+    if (this.hasRipple()) {
+      this._ripple.remove();
+      this._ripple = null;
+    }
+  },
+
+  /** @private */
+  _focusedChanged: function(receivedFocusFromKeyboard) {
+    // Overrides the _focusedChanged() from the PaperInkyFocusBehavior so that
+    // it does nothing. This function is called only once for the entire
+    // night-light-slider element even when focus is moved between the two
+    // knobs. This doesn't allow us to decide on which knob the ripple will be
+    // created. Hence we handle focus and blur explicitly above.
+  }
+});
+
+})();
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/device_page/power.html b/chromium/chrome/browser/resources/settings/device_page/power.html
index 9250dfc59cb..f0ee3e457ac 100644
--- a/chromium/chrome/browser/resources/settings/device_page/power.html
+++ b/chromium/chrome/browser/resources/settings/device_page/power.html
@@ -1,9 +1,11 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -35,6 +37,35 @@
         [[powerSourceName_]]
       </div>
     </div>
+
+    <div class="settings-box">
+      <div class="start">$i18n{powerIdleLabel}</div>
+      <template is="dom-if" if="[[idleControlled_]]" restamp>
+        <cr-policy-indicator id="idleControlledIndicator"
+            indicator-type="devicePolicy"
+            icon-aria-label="$i18n{powerIdleLabel}">
+        </cr-policy-indicator>
+      </template>
+      <div class="md-select-wrapper">
+        <select id="idleSelect" class="md-select"
+            on-change="onIdleSelectChange_" disabled="[[idleControlled_]]"
+            aria-label="$i18n{powerIdleLabel}">
+          <template is="dom-repeat" items="[[idleOptions_]]">
+            <option value="[[item.value]]">[[item.name]]</option>
+          </template>
+        </select>
+        <span class="md-select-underline"></span>
+      </div>
+    </div>
+
+    <div id="lidClosedRow" class="settings-box continuation"
+        hidden$="[[!hasLid_]]">
+      <settings-toggle-button class="start" id="lidClosedToggle"
+          pref="[[lidClosedPref_]]" label="[[lidClosedLabel_]]"
+          on-settings-boolean-control-change="onLidClosedToggleChange_"
+          no-set-pref>
+      </settings-toggle-button>
+    </div>
   </template>
   <script src="power.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/device_page/power.js b/chromium/chrome/browser/resources/settings/device_page/power.js
index a04b51d6109..842ab2dcce7 100644
--- a/chromium/chrome/browser/resources/settings/device_page/power.js
+++ b/chromium/chrome/browser/resources/settings/device_page/power.js
@@ -27,6 +27,15 @@ Polymer({
     /** @private {boolean} Whether a low-power (USB) charger is being used. */
     lowPowerCharger_: Boolean,
 
+    /** @private {boolean} Whether the idle behavior is controlled by policy. */
+    idleControlled_: Boolean,
+
+    /** @private {string} Text for label describing the lid-closed behavior. */
+    lidClosedLabel_: String,
+
+    /** @private {boolean} Whether the system posesses a lid. */
+    hasLid_: Boolean,
+
     /**
      * List of available dual-role power sources, if enablePowerSettings is on.
      * @private {!Array<!settings.PowerSource>|undefined}
@@ -55,6 +64,20 @@ Polymer({
       type: String,
       computed: 'computePowerSourceName_(powerSources_, lowPowerCharger_)',
     },
+
+    /** @private */
+    idleOptions_: {
+      type: Array,
+      computed: 'computeIdleOptions_(idleControlled_)',
+    },
+
+    /** @private {!chrome.settingsPrivate.PrefObject} */
+    lidClosedPref_: {
+      type: Object,
+      value: function() {
+        return /** @type {!chrome.settingsPrivate.PrefObject} */ ({});
+      },
+    },
   },
 
   /** @override */
@@ -72,6 +95,12 @@ Polymer({
     this.addWebUIListener(
         'power-sources-changed', this.powerSourcesChanged_.bind(this));
     settings.DevicePageBrowserProxyImpl.getInstance().updatePowerStatus();
+
+    this.addWebUIListener(
+        'power-management-settings-changed',
+        this.powerManagementSettingsChanged_.bind(this));
+    settings.DevicePageBrowserProxyImpl.getInstance()
+        .requestPowerManagementSettings();
   },
 
   /**
@@ -113,9 +142,56 @@ Polymer({
     return '';
   },
 
+  /**
+   * @param {boolean} idleControlled
+   * @return {!Array<!{value: settings.IdleBehavior, name: string}>} Options to
+   *     display in idle-behavior select.
+   * @private
+   */
+  computeIdleOptions_: function(idleControlled) {
+    var options = [
+      {
+        value: settings.IdleBehavior.DISPLAY_OFF_SLEEP,
+        name: loadTimeData.getString('powerIdleDisplayOffSleep'),
+      },
+      {
+        value: settings.IdleBehavior.DISPLAY_OFF,
+        name: loadTimeData.getString('powerIdleDisplayOff'),
+      },
+      {
+        value: settings.IdleBehavior.DISPLAY_ON,
+        name: loadTimeData.getString('powerIdleDisplayOn'),
+      },
+    ];
+    if (idleControlled) {
+      options.push({
+        value: settings.IdleBehavior.OTHER,
+        name: loadTimeData.getString('powerIdleOther'),
+      });
+    }
+    return options;
+  },
+
+  /** @private */
   onPowerSourceChange_: function() {
     settings.DevicePageBrowserProxyImpl.getInstance().setPowerSource(
-        this.$$('#powerSource').value);
+        this.$.powerSource.value);
+  },
+
+  /** @private */
+  onIdleSelectChange_: function() {
+    var behavior = /** @type {settings.IdleBehavior} */
+        (parseInt(this.$.idleSelect.value, 10));
+    settings.DevicePageBrowserProxyImpl.getInstance().setIdleBehavior(behavior);
+  },
+
+  /** @private */
+  onLidClosedToggleChange_: function() {
+    // Other behaviors are only displayed when the setting is controlled, in
+    // which case the toggle can't be changed by the user.
+    settings.DevicePageBrowserProxyImpl.getInstance().setLidClosedBehavior(
+        this.$.lidClosedToggle.checked ? settings.LidClosedBehavior.SUSPEND :
+                                         settings.LidClosedBehavior.DO_NOTHING);
   },
 
   /**
@@ -132,6 +208,62 @@ Polymer({
   },
 
   /**
+   * @param {settings.LidClosedBehavior} behavior Current behavior.
+   * @param {boolean} isControlled Whether the underlying pref is controlled.
+   * @private
+   */
+  updateLidClosedLabelAndPref_: function(behavior, isControlled) {
+    var pref = {
+      key: '',
+      type: chrome.settingsPrivate.PrefType.BOOLEAN,
+      // Most behaviors get a dedicated label and appear as checked.
+      value: true,
+    };
+
+    switch (behavior) {
+      case settings.LidClosedBehavior.SUSPEND:
+      case settings.LidClosedBehavior.DO_NOTHING:
+        // "Suspend" and "do nothing" share the "sleep" label and communicate
+        // their state via the toggle state.
+        this.lidClosedLabel_ = loadTimeData.getString('powerLidSleepLabel');
+        pref.value = behavior == settings.LidClosedBehavior.SUSPEND;
+        break;
+      case settings.LidClosedBehavior.STOP_SESSION:
+        this.lidClosedLabel_ = loadTimeData.getString('powerLidSignOutLabel');
+        break;
+      case settings.LidClosedBehavior.SHUT_DOWN:
+        this.lidClosedLabel_ = loadTimeData.getString('powerLidShutDownLabel');
+        break;
+    }
+
+    if (isControlled) {
+      pref.enforcement = chrome.settingsPrivate.Enforcement.ENFORCED;
+      pref.controlledBy = chrome.settingsPrivate.ControlledBy.USER_POLICY;
+    }
+
+    this.lidClosedPref_ = pref;
+  },
+
+  /**
+   * @param {!settings.PowerManagementSettings} browserSettings Current power
+   *     management settings.
+   * @private
+   */
+  powerManagementSettingsChanged_: function(browserSettings) {
+    this.idleControlled_ = browserSettings.idleControlled;
+    this.hasLid_ = browserSettings.hasLid;
+    this.updateLidClosedLabelAndPref_(
+        browserSettings.lidClosedBehavior, browserSettings.lidClosedControlled);
+
+    // The idle behavior select element includes an "Other" option when
+    // controlled but omits it otherwise. Make sure that the option is there
+    // before we potentially try to select it.
+    this.async(function() {
+      this.$.idleSelect.value = browserSettings.idleBehavior;
+    });
+  },
+
+  /**
    * @param {*} lhs
    * @param {*} rhs
    * @return {boolean}
diff --git a/chromium/chrome/browser/resources/settings/device_page/storage.html b/chromium/chrome/browser/resources/settings/device_page/storage.html
index ae842875c60..a10225b2f15 100644
--- a/chromium/chrome/browser/resources/settings/device_page/storage.html
+++ b/chromium/chrome/browser/resources/settings/device_page/storage.html
@@ -216,9 +216,8 @@
           </div>
         </div>
         <button id="deleteButton" is="paper-icon-button-light"
-            aria-label="$i18n{storageItemDriveCache}"
+            class="icon-delete-gray" aria-label="$i18n{storageItemDriveCache}"
             aria-describedby="driveSizeCache">
-          <iron-icon icon="cr:delete"></iron-icon>
         </button>
       </div>
     </template>
diff --git a/chromium/chrome/browser/resources/settings/device_page/storage.js b/chromium/chrome/browser/resources/settings/device_page/storage.js
index 07c2fd06229..0e592fc1b49 100644
--- a/chromium/chrome/browser/resources/settings/device_page/storage.js
+++ b/chromium/chrome/browser/resources/settings/device_page/storage.js
@@ -76,8 +76,7 @@ Polymer({
   /** @override */
   ready: function() {
     cr.addWebUIListener(
-        'storage-size-stat-changed',
-        this.handleSizeStatChanged_.bind(this));
+        'storage-size-stat-changed', this.handleSizeStatChanged_.bind(this));
     cr.addWebUIListener(
         'storage-downloads-size-changed',
         this.handleDownloadsSizeChanged_.bind(this));
@@ -108,7 +107,7 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function() {
-    if (settings.getCurrentRoute() == settings.Route.STORAGE)
+    if (settings.getCurrentRoute() == settings.routes.STORAGE)
       this.onPageShown_();
   },
 
@@ -145,7 +144,7 @@ Polymer({
    * @private
    */
   onBrowsingDataTap_: function() {
-    settings.navigateTo(settings.Route.CLEAR_BROWSER_DATA);
+    settings.navigateTo(settings.routes.CLEAR_BROWSER_DATA);
   },
 
   /**
@@ -161,7 +160,7 @@ Polymer({
    * @private
    */
   onOtherUsersTap_: function() {
-    settings.navigateTo(settings.Route.ACCOUNTS);
+    settings.navigateTo(settings.routes.ACCOUNTS);
   },
 
   /**
@@ -248,7 +247,7 @@ Polymer({
     // We update the storage usage every 5 seconds.
     if (this.updateTimerId_ == -1) {
       this.updateTimerId_ = window.setInterval(function() {
-        if (settings.getCurrentRoute() != settings.Route.STORAGE) {
+        if (settings.getCurrentRoute() != settings.routes.STORAGE) {
           this.stopPeriodicUpdate_();
           return;
         }
diff --git a/chromium/chrome/browser/resources/settings/device_page/stylus.html b/chromium/chrome/browser/resources/settings/device_page/stylus.html
index 7f2e4a9d539..b0ace6ae19c 100644
--- a/chromium/chrome/browser/resources/settings/device_page/stylus.html
+++ b/chromium/chrome/browser/resources/settings/device_page/stylus.html
@@ -23,6 +23,14 @@
         margin-left: 12px;
         @apply(--cr-icon-height-width);
       }
+
+      cr-policy-indicator {
+        padding: 0 var(--cr-controlled-by-spacing);
+      }
+
+      #note-taking-app-lock-screen-settings {
+        padding: 0 var(--settings-box-row-padding);
+      }
     </style>
 
     <div class="settings-box continuation">
@@ -32,13 +40,15 @@
       </settings-toggle-button>
     </div>
 
-    <div class="settings-box">
-      <settings-toggle-button class="start"
-          pref="{{prefs.settings.launch_palette_on_eject_event}}"
-          label="$i18n{stylusAutoOpenStylusTools}"
-          disabled="[[!prefs.settings.enable_stylus_tools.value]]">
-      </settings-toggle-button>
-    </div>
+    <template is="dom-if" if="[[hasInternalStylus_]]">
+      <div class="settings-box">
+        <settings-toggle-button class="start"
+            pref="{{prefs.settings.launch_palette_on_eject_event}}"
+            label="$i18n{stylusAutoOpenStylusTools}"
+            disabled="[[!prefs.settings.enable_stylus_tools.value]]">
+        </settings-toggle-button>
+      </div>
+    </template>
 
     <div class="settings-box">
       <div id="stylusNoteTakingAppLabel" class="start">
@@ -69,16 +79,6 @@
       </div>
     </div>
 
-    <template is="dom-if" if="[[supportsLockScreen_(selectedApp_)]]">
-      <div class="settings-box">
-        <settings-toggle-button id="enable-app-on-lock-screen-toggle"
-            class="start"
-            pref="{{prefs.settings.note_taking_app_enabled_on_lock_screen}}"
-            label="$i18n{stylusNoteTakingAppEnabledOnLockScreen}">
-        </settings-toggle-button>
-      </div>
-    </template>
-
     <!-- TODO(scottchen): Make a proper a[href].settings-box with
          icon-external (see: https://crbug.com/684005)-->
     <div class="settings-box two-line" on-tap="onFindAppsTap_" actionable
@@ -94,6 +94,42 @@
           aria-describedby="stylusFindMoreAppsSecondary"></button>
     </div>
 
+    <template is="dom-if" if="[[supportsLockScreen_(selectedApp_)]]">
+      <div id="note-taking-app-lock-screen-settings">
+        <h2>$i18n{stylusNoteTakingAppLockScreenSettingsHeader}</h2>
+
+        <div class="settings-box first">
+          <div id="lock-screen-toggle-label" class="start"
+              actionable$="[[!disallowedOnLockScreenByPolicy_(selectedApp_)]]"
+              on-tap="toggleLockScreenSupport_">
+            $i18n{stylusNoteTakingAppEnabledOnLockScreen}
+          </div>
+          <template is="dom-if"
+              if="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]">
+            <cr-policy-indicator
+                id="enable-app-on-lock-screen-policy-indicator"
+                indicator-type="[[userPolicyIndicator_]]">
+            </cr-policy-indicator>
+          </template>
+          <paper-toggle-button id="enable-app-on-lock-screen-toggle"
+              aria-labelledby="lock-screen-toggle-label"
+              disabled="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]"
+              checked="[[lockScreenSupportEnabled_(selectedApp_)]]"
+              on-change="toggleLockScreenSupport_">
+          </paper-toggle-button>
+        </div>
+
+        <template is="dom-if" if="[[lockScreenSupportEnabled_(selectedApp_)]]">
+          <div class="settings-box">
+            <settings-toggle-button id="keep-last-note-on-lock-screen-toggle"
+                pref="{{prefs.settings.restore_last_lock_screen_note}}"
+                label="$i18n{stylusNoteTakingAppKeepsLastNoteOnLockScreen}">
+            </settings-toggle-button>
+          </div>
+        </template>
+      </div>
+    </template>
+
   </template>
   <script src="stylus.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/device_page/stylus.js b/chromium/chrome/browser/resources/settings/device_page/stylus.js
index fc55d8efbd0..5d0eee6d6e5 100644
--- a/chromium/chrome/browser/resources/settings/device_page/stylus.js
+++ b/chromium/chrome/browser/resources/settings/device_page/stylus.js
@@ -21,6 +21,18 @@ Polymer({
     },
 
     /**
+     * Policy indicator type for user policy - used for policy indicator UI
+     * shown when an app that is not allowed to run on lock screen by policy is
+     * selected.
+     * @const {CrPolicyIndicatorType}
+     * @private
+     */
+    userPolicyIndicator_: {
+      type: String,
+      value: CrPolicyIndicatorType.USER_POLICY,
+    },
+
+    /**
      * Note taking apps the user can pick between.
      * @private {Array<!settings.NoteAppInfo>}
      */
@@ -32,6 +44,18 @@ Polymer({
     },
 
     /**
+     * True if the device has an internal stylus.
+     * @private
+     */
+    hasInternalStylus_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('hasInternalStylus');
+      },
+      readOnly: true,
+    },
+
+    /**
      * Currently selected note taking app.
      * @private {?settings.NoteAppInfo}
      */
@@ -50,8 +74,37 @@ Polymer({
     },
   },
 
+  /**
+   * @return {boolean} Whether note taking from the lock screen is supported
+   *     by the selected note-taking app.
+   * @private
+   */
   supportsLockScreen_: function() {
-    return this.selectedApp_ && this.selectedApp_.supportsLockScreen;
+    return !!this.selectedApp_ &&
+        this.selectedApp_.lockScreenSupport !=
+        settings.NoteAppLockScreenSupport.NOT_SUPPORTED;
+  },
+
+  /**
+   * @return {boolean} Whether the selected app is disallowed to handle note
+   *     actions from lock screen as a result of a user policy.
+   * @private
+   */
+  disallowedOnLockScreenByPolicy_: function() {
+    return !!this.selectedApp_ &&
+        this.selectedApp_.lockScreenSupport ==
+        settings.NoteAppLockScreenSupport.NOT_ALLOWED_BY_POLICY;
+  },
+
+  /**
+   * @return {boolean} Whether the selected app is enabled as a note action
+   *     handler on the lock screen.
+   * @private
+   */
+  lockScreenSupportEnabled_: function() {
+    return !!this.selectedApp_ &&
+        this.selectedApp_.lockScreenSupport ==
+        settings.NoteAppLockScreenSupport.ENABLED;
   },
 
   /** @private {?settings.DevicePageBrowserProxy} */
@@ -78,7 +131,27 @@ Polymer({
   findApp_: function(id) {
     return this.appChoices_.find(function(app) {
       return app.value == id;
-    }) || null;
+    }) ||
+        null;
+  },
+
+  /**
+   * Toggles whether the selected app is enabled as a note action handler on
+   * the lock screen.
+   * @private
+   */
+  toggleLockScreenSupport_: function() {
+    assert(!!this.selectedApp_);
+    if (this.selectedApp_.lockScreenSupport !=
+            settings.NoteAppLockScreenSupport.ENABLED &&
+        this.selectedApp_.lockScreenSupport !=
+            settings.NoteAppLockScreenSupport.SUPPORTED) {
+      return;
+    }
+
+    this.browserProxy_.setPreferredNoteTakingAppEnabledOnLockScreen(
+        this.selectedApp_.lockScreenSupport ==
+        settings.NoteAppLockScreenSupport.SUPPORTED);
   },
 
   /** @private */
diff --git a/chromium/chrome/browser/resources/settings/direction_delegate.js b/chromium/chrome/browser/resources/settings/direction_delegate.js
index 3b8020a3562..6d5275337e9 100644
--- a/chromium/chrome/browser/resources/settings/direction_delegate.js
+++ b/chromium/chrome/browser/resources/settings/direction_delegate.js
@@ -4,26 +4,26 @@
 
 cr.exportPath('settings');
 
-/** @interface */
-settings.DirectionDelegate = function() {};
+cr.define('settings', function() {
+  /** @interface */
+  class DirectionDelegate {
+    /**
+     * @return {boolean} Whether the direction of the settings UI is
+     *     right-to-left.
+     */
+    isRtl() {}
+  }
 
-settings.DirectionDelegate.prototype = {
-  /**
-   * @return {boolean} Whether the direction of the settings UI is
-   *     right-to-left.
-   */
-  isRtl: assertNotReached,
-};
+  /** @implements {settings.DirectionDelegate} */
+  class DirectionDelegateImpl {
+    /** @override */
+    isRtl() {
+      return loadTimeData.getString('textdirection') == 'rtl';
+    }
+  }
 
-/**
- * @implements {settings.DirectionDelegate}
- * @constructor
- */
-settings.DirectionDelegateImpl = function() {};
-
-settings.DirectionDelegateImpl.prototype = {
-  /** @override */
-  isRtl: function() {
-    return loadTimeData.getString('textdirection') == 'rtl';
-  },
-};
+  return {
+    DirectionDelegate: DirectionDelegate,
+    DirectionDelegateImpl: DirectionDelegateImpl,
+  };
+});
diff --git a/chromium/chrome/browser/resources/settings/downloads_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/downloads_page/compiled_resources2.gyp
index 00906d3d4d1..038adccf689 100644
--- a/chromium/chrome/browser/resources/settings/downloads_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/downloads_page/compiled_resources2.gyp
@@ -18,7 +18,7 @@
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
-        '../settings_ui/compiled_resources2.gyp:settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility',
         'downloads_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
diff --git a/chromium/chrome/browser/resources/settings/downloads_page/downloads_browser_proxy.js b/chromium/chrome/browser/resources/settings/downloads_page/downloads_browser_proxy.js
index 2f510a1d012..88c41dbafbc 100644
--- a/chromium/chrome/browser/resources/settings/downloads_page/downloads_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/downloads_page/downloads_browser_proxy.js
@@ -4,40 +4,33 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function DownloadsBrowserProxy() {}
-
-  DownloadsBrowserProxy.prototype = {
-    initializeDownloads: assertNotReached,
-
-    selectDownloadLocation: assertNotReached,
-
-    resetAutoOpenFileTypes: assertNotReached,
-  };
+  class DownloadsBrowserProxy {
+    initializeDownloads() {}
+    selectDownloadLocation() {}
+    resetAutoOpenFileTypes() {}
+  }
 
   /**
    * @implements {settings.DownloadsBrowserProxy}
-   * @constructor
    */
-  function DownloadsBrowserProxyImpl() {}
-
-  cr.addSingletonGetter(DownloadsBrowserProxyImpl);
-
-  DownloadsBrowserProxyImpl.prototype = {
+  class DownloadsBrowserProxyImpl {
     /** @override */
-    initializeDownloads: function() {
+    initializeDownloads() {
       chrome.send('initializeDownloads');
-    },
+    }
 
     /** @override */
-    selectDownloadLocation: function() {
+    selectDownloadLocation() {
       chrome.send('selectDownloadLocation');
-    },
+    }
 
     /** @override */
-    resetAutoOpenFileTypes: function() {
+    resetAutoOpenFileTypes() {
       chrome.send('resetAutoOpenFileTypes');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(DownloadsBrowserProxyImpl);
 
   return {
     DownloadsBrowserProxy: DownloadsBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/extension_control_browser_proxy.js b/chromium/chrome/browser/resources/settings/extension_control_browser_proxy.js
index adbbd794efd..84b350ef2db 100644
--- a/chromium/chrome/browser/resources/settings/extension_control_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/extension_control_browser_proxy.js
@@ -4,36 +4,32 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function ExtensionControlBrowserProxy() {}
-
-  ExtensionControlBrowserProxy.prototype = {
+  class ExtensionControlBrowserProxy {
     // TODO(dbeam): should be be returning !Promise<boolean> to indicate whether
     // it succeeded?
     /** @param {string} extensionId */
-    disableExtension: assertNotReached,
+    disableExtension(extensionId) {}
 
     /** @param {string} extensionId */
-    manageExtension: assertNotReached,
-  };
+    manageExtension(extensionId) {}
+  }
 
   /**
    * @implements {settings.ExtensionControlBrowserProxy}
-   * @constructor
    */
-  function ExtensionControlBrowserProxyImpl() {}
-  cr.addSingletonGetter(ExtensionControlBrowserProxyImpl);
-
-  ExtensionControlBrowserProxyImpl.prototype = {
+  class ExtensionControlBrowserProxyImpl {
     /** @override */
-    disableExtension: function(extensionId) {
+    disableExtension(extensionId) {
       chrome.send('disableExtension', [extensionId]);
-    },
+    }
 
     /** @override */
-    manageExtension: function(extensionId) {
+    manageExtension(extensionId) {
       window.open('chrome://extensions?id=' + extensionId);
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(ExtensionControlBrowserProxyImpl);
 
   return {
     ExtensionControlBrowserProxy: ExtensionControlBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/focus_row_behavior.js b/chromium/chrome/browser/resources/settings/focus_row_behavior.js
index 286c4eb65d6..0946758d84f 100644
--- a/chromium/chrome/browser/resources/settings/focus_row_behavior.js
+++ b/chromium/chrome/browser/resources/settings/focus_row_behavior.js
@@ -14,12 +14,15 @@ function FocusRowDelegate(listItem) {
 
 FocusRowDelegate.prototype = {
   /**
+   * This function gets called when the [focus-row-control] element receives
+   * the focus event.
    * @override
    * @param {!cr.ui.FocusRow} row
    * @param {!Event} e
    */
   onFocus: function(row, e) {
     this.listItem_.lastFocused = e.path[0];
+    this.listItem_.tabIndex = -1;
   },
 
   /**
@@ -137,7 +140,10 @@ var FocusRowBehavior = {
     }
   },
 
-  /** @private */
+  /**
+   * This function gets called when the row itself receives the focus event.
+   * @private
+   */
   onFocus_: function() {
     if (this.mouseFocused_) {
       this.mouseFocused_ = false;  // Consume and reset flag.
diff --git a/chromium/chrome/browser/resources/settings/google_assistant_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/google_assistant_page/compiled_resources2.gyp
new file mode 100644
index 00000000000..2ce6c64c5c4
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/google_assistant_page/compiled_resources2.gyp
@@ -0,0 +1,25 @@
+# Copyright 2017 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.
+{
+  'targets': [
+    {
+      'target_name': 'google_assistant_browser_proxy',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(EXTERNS_GYP):chrome_send',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'google_assistant_page',
+      'dependencies': [
+        '../prefs/compiled_resources2.gyp:prefs_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        'google_assistant_browser_proxy',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_browser_proxy.html b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_browser_proxy.html
new file mode 100644
index 00000000000..81603a750e5
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_browser_proxy.html
@@ -0,0 +1,2 @@
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="google_assistant_browser_proxy.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_browser_proxy.js b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_browser_proxy.js
new file mode 100644
index 00000000000..27aa284f3ec
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_browser_proxy.js
@@ -0,0 +1,55 @@
+// Copyright 2017 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 A helper object used from the google assistant section
+ * to interact with the browser.
+ */
+
+cr.define('settings', function() {
+  /** @interface */
+  class GoogleAssistantBrowserProxy {
+    /**
+     * Enables or disables the Google Assistant.
+     * @param {boolean} enabled
+     */
+    setGoogleAssistantEnabled(enabled) {}
+
+    /**
+     * Enables or disables screen context for the Google Assistant.
+     * @param {boolean} enabled
+     */
+    setGoogleAssistantContextEnabled(enabled) {}
+
+    /** Launches into the Google Assistant app settings. */
+    launchGoogleAssistantSettings() {}
+  }
+
+  /** @implements {settings.GoogleAssistantBrowserProxy} */
+  class GoogleAssistantBrowserProxyImpl {
+    /** @override */
+    setGoogleAssistantEnabled(enabled) {
+      chrome.send('setGoogleAssistantEnabled', [enabled]);
+    }
+
+    /** @override */
+    setGoogleAssistantContextEnabled(enabled) {
+      chrome.send('setGoogleAssistantContextEnabled', [enabled]);
+    }
+
+    /** @override */
+    showGoogleAssistantSettings() {
+      chrome.send('showGoogleAssistantSettings');
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(GoogleAssistantBrowserProxyImpl);
+
+  return {
+    GoogleAssistantBrowserProxy: GoogleAssistantBrowserProxy,
+    GoogleAssistantBrowserProxyImpl: GoogleAssistantBrowserProxyImpl,
+  };
+});
diff --git a/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_page.html b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_page.html
new file mode 100644
index 00000000000..fec7261d939
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_page.html
@@ -0,0 +1,42 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="google_assistant_browser_proxy.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="settings-google-assistant-page">
+  <template>
+    <style include="settings-shared"></style>
+    <div class="settings-box first">
+      <settings-toggle-button id="googleAssistantEnable"
+          class="start primary-toggle"
+          pref="{{prefs.settings.voice_interaction.enabled}}"
+          label="[[getAssistantOnOffLabel_(
+              prefs.settings.voice_interaction.enabled.value)]]"
+          on-change="onGoogleAssistantEnableChange_">
+      </settings-toggle-button>
+    </div>
+    <template is="dom-if"
+        if="{{prefs.settings.voice_interaction.enabled.value}}">
+      <div class="settings-box continuation indented">
+        <settings-toggle-button id="googleAssistantContextEnable" class="start"
+            pref="{{prefs.settings.voice_interaction.context.enabled}}"
+            label="$i18n{googleAssistantEnableContext}"
+            sub-label="$i18n{googleAssistantEnableContextDescription}"
+            on-change="onGoogleAssistantContextEnableChange_">
+        </settings-toggle-button>
+      </div>
+      <div class="settings-box"
+          on-tap="onGoogleAssistantSettingsTapped_" actionable>
+        <div class="start">
+          $i18n{googleAssistantSettings}
+        </div>
+        <button class="icon-external" is="paper-icon-button-light">
+        </button>
+      </div>
+    </template>
+  </template>
+  <script src="google_assistant_page.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_page.js b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_page.js
new file mode 100644
index 00000000000..8db740bb379
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/google_assistant_page/google_assistant_page.js
@@ -0,0 +1,47 @@
+// Copyright 2017 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 'settings-google-assistant-page' is the settings page
+ * containing Google Assistant settings.
+ */
+Polymer({
+  is: 'settings-google-assistant-page',
+
+  behaviors: [I18nBehavior, PrefsBehavior],
+
+  /** @private {?settings.GoogleAssistantBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  created: function() {
+    this.browserProxy_ = settings.GoogleAssistantBrowserProxyImpl.getInstance();
+  },
+
+  /**
+   * @param {boolean} toggleValue
+   * @return {string}
+   * @private
+   */
+  getAssistantOnOffLabel_: function(toggleValue) {
+    return this.i18n(toggleValue ? 'toggleOn' : 'toggleOff');
+  },
+
+  /** @private */
+  onGoogleAssistantEnableChange_: function() {
+    this.browserProxy_.setGoogleAssistantEnabled(
+        !!this.getPref('settings.voice_interaction.enabled.value'));
+  },
+
+  /** @private */
+  onGoogleAssistantContextEnableChange_: function() {
+    this.browserProxy_.setGoogleAssistantContextEnabled(
+        !!this.getPref('settings.voice_interaction.context.enabled.value'));
+  },
+
+  /** @private */
+  onGoogleAssistantSettingsTapped_: function() {
+    this.browserProxy_.showGoogleAssistantSettings();
+  },
+});
diff --git a/chromium/chrome/browser/resources/settings/icons.html b/chromium/chrome/browser/resources/settings/icons.html
index 5e17a4a3ea9..c49d8fa899c 100644
--- a/chromium/chrome/browser/resources/settings/icons.html
+++ b/chromium/chrome/browser/resources/settings/icons.html
@@ -8,6 +8,13 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
 <iron-iconset-svg name="settings" size="24">
   <svg>
     <defs>
+      <!-- Ads icon in the Content Settings -->
+      <g id="ads">
+        <path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M11,15H9.5v-1.5h-2V15H6v-4.5V9h1.5h2H10h1V15z M18,14c0,0.55-0.45,1-1,1h-4V9h4c0.55,0,1,0.45,1,1V14z"></path>
+        <rect x="7.5" y="10.5" width="2" height="1.5"></rect>
+        <rect x="14.5" y="10.5" width="2" height="3"></rect>
+      </g>
+
       <!-- Cookie SVG obtained from rolfe@ -->
       <g id="cookie">
         <path d="M15.5 7.5V7c0-.98-.5-1.5-1.5-1.5h-.5c-.276 0-.5-.224-.5-.5V3c0-.98-1-1-1-1C6.3 2 1.712 6.77 2.014 12.54c.265 5.046 4.4 9.18 9.448 9.446C17.23 22.288 22 17.7 22 12v-1c0-.553-.447-1-1-1h-1.998c-.277 0-.502-.225-.502-.502V9c0-.938-.48-1.48-1.5-1.5h-1.5zm-9.706 4.972c-1.057.2-1.966-.71-1.766-1.766.112-.587.592-1.067 1.18-1.178 1.055-.2 1.965.71 1.764 1.765-.11.588-.59 1.068-1.178 1.18zm1.734-5.178c-.2-1.057.71-1.966 1.766-1.766.587.11 1.067.59 1.178 1.178.2 1.057-.708 1.966-1.765 1.766-.587-.11-1.068-.59-1.18-1.178zm3.766 12.178c-1.057.2-1.966-.71-1.766-1.766.112-.587.592-1.067 1.18-1.178 1.056-.2 1.965.71 1.764 1.766-.11.587-.59 1.067-1.178 1.178zM11.5 14c-.828 0-1.5-.67-1.5-1.5s.672-1.5 1.5-1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm5 2c-.828 0-1.5-.67-1.5-1.5s.672-1.5 1.5-1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" fill-rule="evenodd"></path>
@@ -30,10 +37,6 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="access-time"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g>
 </if>
       <g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"></path></g>
-<if expr="chromeos">
-      <g id="add-circle"><path fill="#4285f4" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></g>
-      <g id="add-wifi"><path fill="#4285f4" d="M10.92 16.85l-.91 1.14L10 18l-.01-.01L0 5.46C.387 5.164 4.227 2 10 2c5.765 0 9.613 3.165 10 3.46l-2.198 2.756C17.292 8.076 16.755 8 16.2 8c-3.314 0-6 2.686-6 6 0 1.03.26 2.002.72 2.85z" fill-opacity=".3"></path><path fill="#4285f4" d="M17 13v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path></g>
-</if>
       <g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"></path></g>
       <g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path></g>
       <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g>
@@ -47,9 +50,6 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
 <if expr="not chromeos">
       <g id="build"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path></g>
 </if>
-<if expr="chromeos">
-      <g id="camera-alt"><circle cx="12" cy="12" r="3.2"></circle><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path></g>
-</if>
       <g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g>
 <if expr="chromeos">
       <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"</path></g>
@@ -65,7 +65,6 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="error-outline"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></g>
 <if expr="chromeos">
       <g id="fingerprint"><path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"></path></g>
-      <g id="flip"><path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"></path></g>
       <g id="gamepad"><path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z"></path></g>
       <g id="headset"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"></path></g>
 </if>
@@ -120,7 +119,6 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
 </if>
       <g id="usb"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"></path></g>
       <g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g>
-      <g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></g>
       <g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></g>
 <if expr="chromeos">
       <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
diff --git a/chromium/chrome/browser/resources/settings/images/settings_icon_add_circle.svg b/chromium/chrome/browser/resources/settings/images/settings_icon_add_circle.svg
new file mode 100644
index 00000000000..245a9369655
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/images/settings_icon_add_circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><path fill="#4285f4" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/images/settings_icon_add_wifi.svg b/chromium/chrome/browser/resources/settings/images/settings_icon_add_wifi.svg
new file mode 100644
index 00000000000..08358d86470
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/images/settings_icon_add_wifi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><path fill="#4285f4" d="M10.92 16.85l-.91 1.14L10 18l-.01-.01L0 5.46C.387 5.164 4.227 2 10 2c5.765 0 9.613 3.165 10 3.46l-2.198 2.756C17.292 8.076 16.755 8 16.2 8c-3.314 0-6 2.686-6 6 0 1.03.26 2.002.72 2.85z" fill-opacity=".3"></path><path fill="#4285f4" d="M17 13v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/images/settings_icon_arrow_back.svg b/chromium/chrome/browser/resources/settings/images/settings_icon_arrow_back.svg
new file mode 100644
index 00000000000..838eb43618d
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/images/settings_icon_arrow_back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575" preserveAspectRatio="xMidYMid meet"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/images/settings_icon_visibility.svg b/chromium/chrome/browser/resources/settings/images/settings_icon_visibility.svg
new file mode 100644
index 00000000000..af7b42a957d
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/images/settings_icon_visibility.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575" preserveAspectRatio="xMidYMid meet"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/images/settings_icon_visibility_off.svg b/chromium/chrome/browser/resources/settings/images/settings_icon_visibility_off.svg
new file mode 100644
index 00000000000..bce77739f74
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/images/settings_icon_visibility_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575" preserveAspectRatio="xMidYMid meet"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp
index 40301162de1..06972b358cf 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp
@@ -8,7 +8,7 @@
       'dependencies': [
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(EXTERNS_GYP):chrome_send',
@@ -22,7 +22,7 @@
       'target_name': 'internet_config',
       'dependencies': [
         '../compiled_resources2.gyp:route',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(EXTERNS_GYP):networking_private',
@@ -34,7 +34,7 @@
       'target_name': 'internet_detail_page',
       'dependencies': [
         '../compiled_resources2.gyp:route',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
@@ -49,7 +49,7 @@
       'target_name': 'internet_known_networks_page',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_action_menu/compiled_resources2.gyp:cr_action_menu',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(EXTERNS_GYP):networking_private',
@@ -61,7 +61,7 @@
       'target_name': 'internet_subpage',
       'dependencies': [
         '../compiled_resources2.gyp:route',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
@@ -73,7 +73,7 @@
     {
       'target_name': 'network_apnlist',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -93,21 +93,21 @@
     {
       'target_name': 'network_ip_config',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'network_nameservers',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'network_property_list',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
@@ -120,7 +120,7 @@
         '../compiled_resources2.gyp:route',
         '../controls/compiled_resources2.gyp:settings_checkbox',
         '../prefs/compiled_resources2.gyp:prefs_behavior',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
@@ -131,7 +131,7 @@
     {
       'target_name': 'network_proxy_input',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -143,7 +143,7 @@
       'target_name': 'network_siminfo',
       'dependencies': [
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/cr/ui/compiled_resources2.gyp:focus_without_ink',
         '<(INTERFACES_GYP):networking_private_interface',
@@ -153,7 +153,7 @@
     {
       'target_name': 'network_summary',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(INTERFACES_GYP):networking_private_interface',
@@ -163,7 +163,7 @@
     {
       'target_name': 'network_summary_item',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_network_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
@@ -174,8 +174,8 @@
     {
       'target_name': 'tether_connection_dialog',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp:cr_dialog',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
       ],
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_config.html b/chromium/chrome/browser/resources/settings/internet_page/internet_config.html
index 8b8736ad77b..92d222ed9fc 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_config.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_config.html
@@ -1,5 +1,5 @@
-<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_config.js b/chromium/chrome/browser/resources/settings/internet_page/internet_config.js
index 9f121e2b67d..4760b53a5e0 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_config.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_config.js
@@ -193,7 +193,7 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(route) {
-    if (route != settings.Route.NETWORK_CONFIG)
+    if (route != settings.routes.NETWORK_CONFIG)
       return;
 
     this.propertiesSent_ = false;
@@ -222,7 +222,7 @@ Polymer({
 
   /** @private */
   close_: function() {
-    if (settings.getCurrentRoute() == settings.Route.NETWORK_CONFIG)
+    if (settings.getCurrentRoute() == settings.routes.NETWORK_CONFIG)
       settings.navigateToPreviousRoute();
   },
 
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html
index 37125c1bfe7..9bc0a37dbfd 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html
@@ -1,9 +1,9 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
@@ -49,14 +49,6 @@
         -webkit-margin-start: var(--settings-controlled-by-spacing);
       }
 
-      .indented {
-        -webkit-margin-start: var(--settings-box-row-padding);
-      }
-
-      .settings-box.stretch {
-        align-items: stretch;
-      }
-
       .settings-box:first-of-type {
         border-top: none;
       }
@@ -82,36 +74,34 @@
           </cr-policy-indicator>
         </template>
       </div>
-      <div id="buttonDiv" class="button-container">
-        <template is="dom-if" if="[[!isSecondaryUser_]]">
-          <paper-button class="secondary-button" on-tap="onForgetTap_"
-              hidden$="[[!showForget_(networkProperties)]]">
-            $i18n{networkButtonForget}
-          </paper-button>
-          <paper-button class="secondary-button" on-tap="onViewAccountTap_"
-              hidden$="[[!showViewAccount_(networkProperties)]]">
-            $i18n{networkButtonViewAccount}
-          </paper-button>
-          <paper-button class="secondary-button" on-tap="onActivateTap_"
-              hidden$="[[!showActivate_(networkProperties)]]">
-            $i18n{networkButtonActivate}
-          </paper-button>
-          <paper-button class="secondary-button" on-tap="onConfigureTap_"
-              hidden$="[[!showConfigure_(networkProperties, globalPolicy)]]">
-            $i18n{networkButtonConfigure}
-          </paper-button>
-        </template>
-        <paper-button class="primary-button" on-tap="onConnectTap_"
-            hidden$="[[!showConnect_(networkProperties, globalPolicy)]]"
-            disabled="[[!enableConnect_(networkProperties, defaultNetwork,
-                globalPolicy)]]">
-          $i18n{networkButtonConnect}
+      <template is="dom-if" if="[[!isSecondaryUser_]]">
+        <paper-button on-tap="onForgetTap_"
+            hidden$="[[!showForget_(networkProperties)]]">
+          $i18n{networkButtonForget}
         </paper-button>
-        <paper-button class="primary-button" on-tap="onDisconnectTap_"
-            hidden$="[[!showDisconnect_(networkProperties)]]">
-          $i18n{networkButtonDisconnect}
+        <paper-button on-tap="onViewAccountTap_"
+            hidden$="[[!showViewAccount_(networkProperties)]]">
+          $i18n{networkButtonViewAccount}
         </paper-button>
-      </div>
+        <paper-button on-tap="onActivateTap_"
+            hidden$="[[!showActivate_(networkProperties)]]">
+          $i18n{networkButtonActivate}
+        </paper-button>
+        <paper-button on-tap="onConfigureTap_"
+            hidden$="[[!showConfigure_(networkProperties, globalPolicy)]]">
+          $i18n{networkButtonConfigure}
+        </paper-button>
+      </template>
+      <paper-button class="primary-button" on-tap="onConnectTap_"
+          hidden$="[[!showConnect_(networkProperties, globalPolicy)]]"
+          disabled="[[!enableConnect_(networkProperties, defaultNetwork,
+              globalPolicy)]]">
+        $i18n{networkButtonConnect}
+      </paper-button>
+      <paper-button class="primary-button" on-tap="onDisconnectTap_"
+          hidden$="[[!showDisconnect_(networkProperties)]]">
+        $i18n{networkButtonDisconnect}
+      </paper-button>
     </div>
 
     <!-- Disabled by policy / Shared messages. -->
@@ -134,79 +124,86 @@
         </div>
       </div>
     </template>
+
     <template is="dom-if" if="[[!isSecondaryUser_]]">
-      <!-- Top level properties -->
-      <div class="layout vertical">
-        <!-- Prefer this network. -->
-        <template is="dom-if" if="[[showPreferNetwork_(networkProperties)]]">
-          <div class="settings-box">
-            <div id="preferNetworkToggleLabel"class="start">
-              $i18n{networkPrefer}
-            </div>
-            <cr-policy-network-indicator
-                property="[[networkProperties.Priority]]">
-            </cr-policy-network-indicator>
-            <paper-toggle-button checked="{{preferNetwork_}}"
-                disabled="[[isNetworkPolicyEnforced(
-                          networkProperties.Priority)]]"
-                aria-labelledby="preferNetworkToggleLabel">
-            </paper-toggle-button>
-          </div>
-        </template>
-        <!-- Autoconnect. -->
-        <template is="dom-if" if="[[showAutoConnect_(networkProperties)]]">
-          <div class="settings-box">
-            <div id="autoConnectToggleLabel" class="start">
-              $i18n{networkAutoConnect}
-            </div>
-            <cr-policy-network-indicator
-                property="[[getManagedAutoConnect_(networkProperties)]]">
-            </cr-policy-network-indicator>
-            <paper-toggle-button checked="{{autoConnect_}}"
-                disabled="[[!enableAutoConnect_(networkProperties,
-                          globalPolicy)]]"
-                aria-labelledby="autoConnectToggleLabel">
-            </paper-toggle-button>
-          </div>
-        </template>
-        <!-- Data roaming (Cellular only). -->
-        <template is="dom-if" if="[[isCellular_(networkProperties)]]">
-          <div class="settings-box">
-            <settings-toggle-button id="allowDataRoaming" class="start"
-                pref="{{prefs.cros.signed.data_roaming_enabled}}"
-                label="$i18n{networkAllowDataRoaming}">
-            </settings-toggle-button>
-          </div>
-        </template>
-        <!-- SIM Info (Cellular only). -->
-        <template is="dom-if" if="[[showCellularSim_(networkProperties)]]">
-          <div class="settings-box single-column stretch">
-            <network-siminfo
-                editable on-siminfo-change="onNetworkPropertyChange_"
-                network-properties="[[networkProperties]]"
-                networking-private="[[networkingPrivate]]">
-            </network-siminfo>
-          </div>
-        </template>
-        <!-- IP Address. -->
-        <template is="dom-if" if="[[IPAddress_]]">
-          <div class="settings-box two-line single-column stretch">
-            <div>$i18n{networkIPAddress}</div>
-            <div class="secondary">[[IPAddress_]]</div>
+      <!-- Prefer this network. -->
+      <template is="dom-if" if="[[showPreferNetwork_(networkProperties)]]">
+        <div class="settings-box">
+          <div id="preferNetworkToggleLabel"class="start">
+            $i18n{networkPrefer}
           </div>
-        </template>
-        <!-- Properties to always show if present. -->
-        <template is="dom-if" if="[[hasInfoFields_(networkProperties)]]">
-          <div class="settings-box single-column stretch">
-            <network-property-list
-                fields="[[getInfoFields_(networkProperties)]]"
-                edit-field-types="[[getInfoEditFieldTypes_(networkProperties)]]"
-                property-dict="[[networkProperties]]"
-                on-property-change="onNetworkPropertyChange_">
-            </network-property-list>
+          <cr-policy-network-indicator
+              property="[[networkProperties.Priority]]">
+          </cr-policy-network-indicator>
+          <paper-toggle-button checked="{{preferNetwork_}}"
+              disabled="[[isNetworkPolicyEnforced(networkProperties.Priority)]]"
+              aria-labelledby="preferNetworkToggleLabel">
+          </paper-toggle-button>
+        </div>
+      </template>
+      <!-- Autoconnect. -->
+      <template is="dom-if" if="[[showAutoConnect_(networkProperties)]]">
+        <div class="settings-box">
+          <div id="autoConnectToggleLabel" class="start">
+            $i18n{networkAutoConnect}
           </div>
-        </template>
-      </div>
+          <cr-policy-network-indicator
+              property="[[getManagedAutoConnect_(networkProperties)]]">
+          </cr-policy-network-indicator>
+          <paper-toggle-button checked="{{autoConnect_}}"
+              disabled="[[!enableAutoConnect_(networkProperties,
+                  globalPolicy)]]"
+              aria-labelledby="autoConnectToggleLabel">
+          </paper-toggle-button>
+        </div>
+      </template>
+      <!-- Choose Mobile Network (Cellular only). -->
+      <template is="dom-if"
+          if="[[showCellularChooseNetwork_(networkProperties)]]">
+        <div class="settings-box">
+          <div class="start">$i18n{networkChooseMobileDetail}</div>
+          <paper-button on-tap="onChooseMobileTap_">
+            $i18n{networkChooseMobileButton}
+          </paper-button>
+        </div>
+      </template>
+      <!-- Data roaming (Cellular only). -->
+      <template is="dom-if" if="[[isCellular_(networkProperties)]]">
+        <div class="settings-box">
+          <settings-toggle-button id="allowDataRoaming" class="start"
+              pref="{{prefs.cros.signed.data_roaming_enabled}}"
+              label="$i18n{networkAllowDataRoaming}">
+          </settings-toggle-button>
+        </div>
+      </template>
+      <!-- SIM Info (Cellular only). -->
+      <template is="dom-if" if="[[showCellularSim_(networkProperties)]]">
+        <div class="settings-box single-column stretch">
+          <network-siminfo
+              editable on-siminfo-change="onNetworkPropertyChange_"
+              network-properties="[[networkProperties]]"
+              networking-private="[[networkingPrivate]]">
+          </network-siminfo>
+        </div>
+      </template>
+      <!-- IP Address. -->
+      <template is="dom-if" if="[[IPAddress_]]">
+        <div class="settings-box two-line single-column stretch">
+          <div>$i18n{networkIPAddress}</div>
+          <div class="secondary">[[IPAddress_]]</div>
+        </div>
+      </template>
+      <!-- Properties to always show if present. -->
+      <template is="dom-if" if="[[hasInfoFields_(networkProperties)]]">
+        <div class="settings-box single-column stretch">
+          <network-property-list
+              fields="[[getInfoFields_(networkProperties)]]"
+              edit-field-types="[[getInfoEditFieldTypes_(networkProperties)]]"
+              property-dict="[[networkProperties]]"
+              on-property-change="onNetworkPropertyChange_">
+          </network-property-list>
+        </div>
+      </template>
 
       <template is="dom-if" if="[[showAdvanced_(networkProperties)]]">
         <!-- Advanced toggle. -->
@@ -219,22 +216,20 @@
 
         <!-- Advanced section -->
         <iron-collapse opened="[[advancedExpanded_]]">
-          <div class="layout vertical indented">
-            <div class="settings-box single-column stretch"
-                hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]">
-              <!-- Advanced properties -->
-              <network-property-list
-                  hidden$="[[!hasAdvancedFields_(networkProperties)]]"
-                  fields="[[getAdvancedFields_(networkProperties)]]"
-                  property-dict="[[networkProperties]]">
-              </network-property-list>
-              <!-- Device properties -->
-              <network-property-list
-                  hidden$="[[!hasDeviceFields_(networkProperties)]]"
-                  fields="[[getDeviceFields_(networkProperties)]]"
-                  property-dict="[[networkProperties]]">
-              </network-property-list>
-            </div>
+          <div class="settings-box single-column stretch indented"
+              hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]">
+            <!-- Advanced properties -->
+            <network-property-list
+                hidden$="[[!hasAdvancedFields_(networkProperties)]]"
+                fields="[[getAdvancedFields_(networkProperties)]]"
+                property-dict="[[networkProperties]]">
+            </network-property-list>
+            <!-- Device properties -->
+            <network-property-list
+                hidden$="[[!hasDeviceFields_(networkProperties)]]"
+                fields="[[getDeviceFields_(networkProperties)]]"
+                property-dict="[[networkProperties]]">
+            </network-property-list>
           </div>
         </iron-collapse>
       </template>
@@ -249,7 +244,7 @@
         </div>
 
         <iron-collapse opened="[[networkExpanded_]]">
-          <div class="layout vertical indented">
+          <div class="settings-box single-column stretch">
             <!-- APN -->
             <template is="dom-if" if="[[isCellular_(networkProperties)]]">
               <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
@@ -280,7 +275,7 @@
         </div>
 
         <iron-collapse opened="[[proxyExpanded_]]">
-          <div class="layout vertical indented">
+          <div class="settings-box single-column stretch">
             <network-proxy editable prefs="{{prefs}}"
                 on-proxy-change="onProxyChange_"
                 network-properties="[[networkProperties]]">
@@ -292,8 +287,7 @@
 
     <tether-connection-dialog id="tetherDialog"
         network-properties="[[networkProperties]]"
-        on-tether-connect="onTetherConnect_"
-        on-close="onTetherDialogClose_">
+        on-tether-connect="onTetherConnect_">
     </tether-connection-dialog>
   </template>
   <script src="internet_detail_page.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js
index 1695aae3d44..84dfabc12ef 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js
@@ -143,13 +143,7 @@ Polymer({
    * network properties have been fetched in networkPropertiesChanged_().
    * @private {boolean}
    */
-  shoudlShowConfigureWhenNetworkLoaded_: false,
-
-  /**
-   * Whether the previous route was also the network detail page.
-   * @private {boolean}
-   */
-  wasPreviousRouteNetworkDetailPage_: false,
+  shouldShowConfigureWhenNetworkLoaded_: false,
 
   /**
    * settings.RouteObserverBehavior
@@ -158,7 +152,7 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(route, oldRoute) {
-    if (route != settings.Route.NETWORK_DETAIL) {
+    if (route != settings.routes.NETWORK_DETAIL) {
       if (this.networksChangedListener_) {
         this.networkingPrivate.onNetworksChanged.removeListener(
             this.networksChangedListener_);
@@ -177,15 +171,15 @@ Polymer({
       console.error('No guid specified for page:' + route);
       this.close_();
     }
+
     // Set basic networkProperties until they are loaded.
     this.networkPropertiesReceived_ = false;
+    this.shouldShowConfigureWhenNetworkLoaded_ =
+        queryParams.get('showConfigure') == 'true';
+
     var type = /** @type {!chrome.networkingPrivate.NetworkType} */ (
                    queryParams.get('type')) ||
         CrOnc.Type.WI_FI;
-    this.shoudlShowConfigureWhenNetworkLoaded_ =
-        queryParams.get('showConfigure') == 'true';
-    this.wasPreviousRouteNetworkDetailPage_ =
-        oldRoute == settings.Route.NETWORK_DETAIL;
     var name = queryParams.get('name') || type;
     this.networkProperties = {
       GUID: this.guid,
@@ -242,8 +236,11 @@ Polymer({
       button.focus();
     }
 
-    if (this.shoudlShowConfigureWhenNetworkLoaded_
-        && this.networkProperties.Tether) {
+    if (this.shouldShowConfigureWhenNetworkLoaded_ &&
+        this.networkProperties.Tether) {
+      // Set |this.shouldShowConfigureWhenNetworkLoaded_| back to false to
+      // ensure that the Tether dialog is only shown once.
+      this.shouldShowConfigureWhenNetworkLoaded_ = false;
       this.showTetherDialog_();
     }
   },
@@ -562,26 +559,21 @@ Polymer({
 
   /** @private */
   onConnectTap_: function() {
+    if (CrOnc.shouldShowTetherDialogBeforeConnection(this.networkProperties)) {
+      this.showTetherDialog_();
+      return;
+    }
+
     this.fire('network-connect', {networkProperties: this.networkProperties});
   },
 
   /** @private */
   onTetherConnect_: function() {
     this.getTetherDialog_().close();
-    this.fire('network-connect',
-        {networkProperties: this.networkProperties,
-         bypassConnectionDialog: true});
-  },
-
-  /** @private */
-  onTetherDialogClose_: function() {
-    // The tether dialog is opened by specifying "showConfigure=true"
-    // in the query params. This may lead to the previous route also
-    // being the detail page, in which case we should navigate back to
-    // the previous route here so that when the user navigates back
-    // they will navigate to the previous non-detail page.
-    if (this.wasPreviousRouteNetworkDetailPage_)
-      settings.navigateToPreviousRoute();
+    this.fire('network-connect', {
+      networkProperties: this.networkProperties,
+      bypassConnectionDialog: true
+    });
   },
 
   /** @private */
@@ -615,6 +607,12 @@ Polymer({
     this.networkingPrivate.startActivate(this.guid);
   },
 
+  /** @private */
+  onChooseMobileTap_: function() {
+    // TODO(stevenjb): Integrate ChooseMobileNetworkDialog with WebUI.
+    chrome.send('addNetwork', [this.networkProperties.Type]);
+  },
+
   /** @const {string} */
   CR_EXPAND_BUTTON_TAG: 'CR-EXPAND-BUTTON',
 
@@ -624,7 +622,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   toggleAdvancedExpanded_: function(event) {
@@ -634,7 +632,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   toggleNetworkExpanded_: function(event) {
@@ -644,7 +642,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   toggleProxyExpanded_: function(event) {
@@ -727,8 +725,13 @@ Polymer({
         onc.StaticIPConfig =
             /** @type {!chrome.networkingPrivate.IPConfigProperties} */ ({});
       }
-      for (var key in value)
-        onc.StaticIPConfig[key] = value[key];
+      // Only copy Static IP properties.
+      var keysToCopy = ['Type', 'IPAddress', 'RoutingPrefix', 'Gateway'];
+      for (var i = 0; i < keysToCopy.length; ++i) {
+        var key = keysToCopy[i];
+        if (key in value)
+          onc.StaticIPConfig[key] = value[key];
+      }
     } else if (field == 'NameServers') {
       // If a StaticIPConfig property is specified and its NameServers value
       // matches the new value, no need to set anything.
@@ -905,8 +908,9 @@ Polymer({
    */
   getAdvancedFields_: function() {
     /** @type {!Array<string>} */ var fields = [];
-    fields.push('MacAddress');
     var type = this.networkProperties.Type;
+    if (type != CrOnc.Type.TETHER)
+      fields.push('MacAddress');
     if (type == CrOnc.Type.CELLULAR && !!this.networkProperties.Cellular) {
       fields.push(
           'Cellular.Carrier', 'Cellular.Family', 'Cellular.NetworkTechnology',
@@ -946,6 +950,11 @@ Polymer({
    * @private
    */
   showAdvanced_: function(networkProperties) {
+    if (networkProperties.Type == CrOnc.Type.TETHER) {
+      // These settings apply to the underlying WiFi network, not the Tether
+      // network.
+      return false;
+    }
     return this.hasAdvancedFields_() || this.hasDeviceFields_() ||
         this.isRememberedOrConnected_(networkProperties);
   },
@@ -980,6 +989,11 @@ Polymer({
    * @private
    */
   hasNetworkSection_: function(networkProperties) {
+    if (networkProperties.Type == CrOnc.Type.TETHER) {
+      // These settings apply to the underlying WiFi network, not the Tether
+      // network.
+      return false;
+    }
     if (networkProperties.Type == CrOnc.Type.VPN)
       return false;
     if (networkProperties.Type == CrOnc.Type.CELLULAR)
@@ -992,12 +1006,20 @@ Polymer({
    * @return {boolean}
    * @private
    */
+  showCellularChooseNetwork_: function(networkProperties) {
+    return networkProperties.Type == CrOnc.Type.CELLULAR &&
+        !!this.get('Cellular.SupportNetworkScan', this.networkProperties);
+  },
+
+  /**
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @return {boolean}
+   * @private
+   */
   showCellularSim_: function(networkProperties) {
-    if (networkProperties.Type != 'Cellular' ||
-        !networkProperties.Cellular) {
-      return false;
-    }
-    return networkProperties.Cellular.Family == 'GSM';
+    return networkProperties.Type == CrOnc.Type.CELLULAR &&
+        this.get('Cellular.Family', this.networkProperties) ==
+        CrOnc.NetworkTechnology.GSM;
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
index b0df9acbf1f..5a555b14dc8 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
@@ -3,7 +3,6 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -41,10 +40,10 @@
               aria-label$="[[item.Name]]">
           </button>
           <div class="separator"></div>
-          <paper-icon-button preferred icon="cr:more-vert"
-              tabindex$="[[tabindex]]" on-tap="onMenuButtonTap_"
+          <button is="paper-icon-button-light" class="icon-more-vert"
+              preferred tabindex$="[[tabindex]]" on-tap="onMenuButtonTap_"
               title="$i18n{moreActions}">
-          </paper-icon-button>
+          </button>
         </div>
       </template>
     </div>
@@ -68,9 +67,10 @@
               aria-label$="[[item.Name]]">
           </button>
           <div class="separator"></div>
-          <paper-icon-button icon="cr:more-vert"  tabindex$="[[tabindex]]"
-              on-tap="onMenuButtonTap_" title="$i18n{moreActions}">
-          </paper-icon-button>
+          <button is="paper-icon-button-light" class="icon-more-vert"
+              tabindex$="[[tabindex]]" on-tap="onMenuButtonTap_"
+              title="$i18n{moreActions}">
+          </button>
         </div>
       </template>
     </div>
@@ -84,7 +84,7 @@
           hidden="[[!showRemovePreferred_]]" on-tap="onRemovePreferredTap_">
         $i18n{knownNetworksMenuRemovePreferred}
       </button>
-      <button class="dropdown-item" disabled="[[!enableForget_]]" role="option"
+      <button class="dropdown-item" role="option" disabled="[[!enableForget_]]"
           on-tap="onForgetTap_">
         $i18n{knownNetworksMenuForget}
       </button>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.js b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.js
index 9c7c4a16438..30e4aadfb85 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.js
@@ -202,7 +202,7 @@ Polymer({
   /**
    * Fires a 'show-details' event with an item containing a |networkStateList_|
    * entry in the event model.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   fireShowDetails_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_page.html b/chromium/chrome/browser/resources/settings/internet_page/internet_page.html
index 4771c265198..a213bc61188 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_page.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_page.html
@@ -1,8 +1,8 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
@@ -65,9 +65,9 @@
               <template is="dom-repeat" items="[[thirdPartyVpnProviders_]]">
                 <div actionable class="list-item"
                     on-tap="onAddThirdPartyVpnTap_" provider="[[item]]">
-                  <div class="start">[[getAddThirdParrtyVpnLabel_(item)]]</div>
+                  <div class="start">[[getAddThirdPartyVpnLabel_(item)]]</div>
                   <button class="icon-external" is="paper-icon-button-light"
-                      aria-label$="[[getAddThirdParrtyVpnLabel_(item)]]">
+                      aria-label$="[[getAddThirdPartyVpnLabel_(item)]]">
                   </button>
                 </div>
               </template>
@@ -88,7 +88,7 @@
           </settings-internet-config>
         </settings-subpage>
       </template>
-      
+
       <template is="dom-if" route-path="/networkDetail" no-search>
         <settings-subpage page-title="$i18n{internetDetailPageTitle}">
           <settings-internet-detail-page prefs="{{prefs}}"
@@ -98,7 +98,7 @@
           </settings-internet-detail-page>
         </settings-subpage>
       </template>
-      
+
       <template is="dom-if" route-path="/knownNetworks" no-search>
         <settings-subpage page-title="$i18n{internetKnownNetworksPageTitle}">
           <settings-internet-known-networks-page
@@ -111,9 +111,10 @@
       <template is="dom-if" route-path="/networks" no-search>
         <settings-subpage page-title="[[getNetworksPageTitle_(subpageType_)]]"
             show-spinner="[[showSpinner_]]">
-          <settings-internet-subpage 
+          <settings-internet-subpage
               default-network="[[defaultNetwork]]"
-              device-state="[[get(subpageType_, deviceStates)]]"
+              device-state="[[getDeviceState_(subpageType_, deviceStates)]]"
+              tether-device-state="[[get('Tether', deviceStates)]]"
               global-policy="[[globalPolicy_]]"
               third-party-vpn-providers="[[thirdPartyVpnProviders_]]"
               networking-private="[[networkingPrivate]]"
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_page.js b/chromium/chrome/browser/resources/settings/internet_page/internet_page.js
index 45d9bee30c5..529d9c31adb 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_page.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_page.js
@@ -163,14 +163,14 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(route, oldRoute) {
-    if (route == settings.Route.INTERNET_NETWORKS) {
+    if (route == settings.routes.INTERNET_NETWORKS) {
       // Handle direct navigation to the networks page,
       // e.g. chrome://settings/internet/networks?type=WiFi
       var queryParams = settings.getQueryParameters();
       var type = queryParams.get('type');
       if (type)
         this.subpageType_ = type;
-    } else if (route == settings.Route.KNOWN_NETWORKS) {
+    } else if (route == settings.routes.KNOWN_NETWORKS) {
       // Handle direct navigation to the known networks page,
       // e.g. chrome://settings/internet/knownNetworks?type=WiFi
       var queryParams = settings.getQueryParameters();
@@ -178,17 +178,18 @@ Polymer({
       if (type)
         this.knownNetworksType_ = type;
     } else if (
-        route != settings.Route.INTERNET && route != settings.Route.BASIC) {
+        route != settings.routes.INTERNET && route != settings.routes.BASIC) {
       // If we are navigating to a non internet section, do not set focus.
       return;
     }
 
-    if (!settings.Route.INTERNET.contains(oldRoute))
+    if (!settings.routes.INTERNET ||
+        !settings.routes.INTERNET.contains(oldRoute))
       return;
 
     // Focus the subpage arrow where appropriate.
     var selector;
-    if (route == settings.Route.INTERNET_NETWORKS) {
+    if (route == settings.routes.INTERNET_NETWORKS) {
       // iron-list makes the correct timing to focus an item in the list
       // very complicated, and the item may not exist, so just focus the
       // entire list for now.
@@ -238,7 +239,7 @@ Polymer({
       params.append('guid', guid);
     if (name)
       params.append('name', name);
-    settings.navigateTo(settings.Route.NETWORK_CONFIG, params);
+    settings.navigateTo(settings.routes.NETWORK_CONFIG, params);
   },
 
   /**
@@ -252,7 +253,7 @@ Polymer({
     params.append('type', event.detail.Type);
     if (event.detail.Name)
       params.append('name', event.detail.Name);
-    settings.navigateTo(settings.Route.NETWORK_DETAIL, params);
+    settings.navigateTo(settings.routes.NETWORK_DETAIL, params);
   },
 
   /**
@@ -264,7 +265,7 @@ Polymer({
     var params = new URLSearchParams;
     params.append('type', event.detail.Type);
     this.subpageType_ = event.detail.Type;
-    settings.navigateTo(settings.Route.INTERNET_NETWORKS, params);
+    settings.navigateTo(settings.routes.INTERNET_NETWORKS, params);
   },
 
   /**
@@ -276,6 +277,22 @@ Polymer({
   },
 
   /**
+   * @param {string} subpageType
+   * @param {!Object<!CrOnc.DeviceStateProperties>|undefined} deviceStates
+   * @return {!CrOnc.DeviceStateProperties|undefined}
+   * @private
+   */
+  getDeviceState_: function(subpageType, deviceStates) {
+    // If both Tether and Cellular are enabled, use the Cellular device state
+    // when directly navigating to the Tether page.
+    if (subpageType == CrOnc.Type.TETHER &&
+        this.deviceStates[CrOnc.Type.CELLULAR]) {
+      subpageType = CrOnc.Type.CELLULAR;
+    }
+    return deviceStates[subpageType];
+  },
+
+  /**
    * @param {!{detail: {type: string}}} event
    * @private
    */
@@ -284,12 +301,12 @@ Polymer({
     var params = new URLSearchParams;
     params.append('type', event.detail.Type);
     this.knownNetworksType_ = event.detail.type;
-    settings.navigateTo(settings.Route.KNOWN_NETWORKS, params);
+    settings.navigateTo(settings.routes.KNOWN_NETWORKS, params);
   },
 
   /**
    * Event triggered when the 'Add connections' div is tapped.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onExpandAddConnectionsTap_: function(event) {
@@ -412,7 +429,7 @@ Polymer({
    * @param {!chrome.networkingPrivate.ThirdPartyVPNProperties} provider
    * @return {string}
    */
-  getAddThirdParrtyVpnLabel_: function(provider) {
+  getAddThirdPartyVpnLabel_: function(provider) {
     return this.i18n('internetAddThirdPartyVPN', provider.ProviderName);
   },
 
@@ -435,7 +452,7 @@ Polymer({
       params.append('name', CrOnc.getNetworkName(properties));
       params.append('showConfigure', true.toString());
 
-      settings.navigateTo(settings.Route.NETWORK_DETAIL, params);
+      settings.navigateTo(settings.routes.NETWORK_DETAIL, params);
       return;
     }
 
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_shared_css.html b/chromium/chrome/browser/resources/settings/internet_page/internet_shared_css.html
index bb74fbbbf6f..83858c7c304 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_shared_css.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_shared_css.html
@@ -9,7 +9,7 @@
       }
 
       iron-icon.policy {
-        -webkit-margin-end: 12px;
+        -webkit-margin-end: var(--cr-controlled-by-spacing);
       }
 
       paper-input-container {
@@ -22,16 +22,12 @@
         margin-top: -9px;
       }
 
-      .button-container {
-        align-items: center;
-        display: flex;
+      .settings-box.indented {
+        -webkit-margin-start: var(--settings-box-row-padding);
       }
 
-      .button-container paper-button {
-        /* Align text edge with trailing margin (12px button padding) */
-        -webkit-margin-end: -12px;
-        /* 8px spacing between highlight edges. */
-        -webkit-margin-start: calc(12px + 8px);
+      .settings-box.stretch {
+        align-items: stretch;
       }
 
       .title {
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.html b/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.html
index e865ab9286e..4316d2080aa 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.html
@@ -1,9 +1,9 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_list.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -17,7 +17,7 @@
             var(--cr-icon-ripple-padding));
         -webkit-padding-start: var(--settings-box-row-padding);
         margin-top: var(--settings-page-vertical-margin);
-        min-height: var(--settings-box-min-height);
+        min-height: var(--settings-row-min-height);
      }
 
       #addButton {
@@ -55,15 +55,15 @@
             '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
         </div>
         <!-- The add button in this row is only shown for WiFi networks. -->
-        <paper-icon-button id="addButton" icon="settings:add-wifi"
+        <button is="paper-icon-button-light" id="addButton"
             hidden$="[[!showAddButton_(deviceState, globalPolicy)]]"
-            aria-label="$i18n{internetAddWiFi}"
+            aria-label="$i18n{internetAddWiFi}" class="icon-add-wifi"
             on-tap="onAddButtonTap_" tabindex$="[[tabindex]]">
-        </paper-icon-button>
-        <paper-toggle-button  id="deviceEnabledButton"
+        </button>
+        <paper-toggle-button id="deviceEnabledButton"
             aria-label$="[[getToggleA11yString_(deviceState)]]"
             checked="[[deviceIsEnabled_(deviceState)]]"
-            enabled="[[enableToggleIsEnabled_(deviceState)]]"
+            disabled="[[!enableToggleIsEnabled_(deviceState)]]"
             on-tap="onDeviceEnabledTap_">
         </paper-toggle-button>
       </div>
@@ -84,20 +84,22 @@
         <div class="vpn-header layout horizontal center"
             hidden$="[[!isEqual_('VPN', deviceState.Type)]]">
           <div class="flex">$i18n{networkVpnBuiltin}</div>
-          <paper-icon-button icon="settings:add-circle"
+          <button is="paper-icon-button-light" class="icon-add-circle"
               aria-label="$i18n{internetAddVPN}"
               on-tap="onAddButtonTap_" tabindex$="[[tabindex]]">
-          </paper-icon-button>
+          </button>
         </div>
 
         <!-- List of networks or 'None'. -->
         <cr-network-list id="networkList" show-buttons
-            hidden$="[[!networkStateList_.length]]"
+            hidden$="[[!shouldShowNetworkList_(networkStateList_)]]"
             networks="[[networkStateList_]]"
             on-selected="onNetworkSelected_">
         </cr-network-list>
-        <div hidden$="[[networkStateList_.length]]" class="no-networks">
-          $i18n{internetNoNetworks}
+        <div hidden$="[[shouldShowNetworkList_(networkStateList_)]]"
+            inner-h-t-m-l=
+                "[[getNoNetworksString_(deviceState, tetherDeviceState)]]"
+            class="no-networks">
         </div>
 
         <!-- Third party VPNs. -->
@@ -106,10 +108,10 @@
             <div id="[[item.ProviderName]]"
                 class="vpn-header layout horizontal center">
               <div class="flex">[[item.ProviderName]]</div>
-              <paper-icon-button icon="settings:add-circle"
+              <button is="paper-icon-button-light" class="icon-add-circle"
                   aria-label$="[[getAddThirdPartyVpnA11yString_(item)]]"
                   on-tap="onAddThirdPartyVpnTap_" tabindex$="[[tabindex]]">
-              </paper-icon-button>
+              </button>
             </div>
             <cr-network-list show-buttons
                 hidden$="[[!haveThirdPartyVpnNetwork_(thirdPartyVpns_, item)]]"
@@ -124,6 +126,25 @@
         </template>
       </div>
 
+      <template is="dom-if"
+          if="[[tetherToggleIsVisible_(deviceState, tetherDeviceState)]]">
+        <div class="settings-box two-line" actionable
+            on-tap="onTetherEnabledTap_">
+          <div class="start">
+            $i18n{internetToggleTetherLabel}
+            <div id="tetherSecondary" class="secondary">
+              $i18n{internetToggleTetherSubtext}
+            </div>
+          </div>
+          <paper-toggle-button id="tetherEnabledButton"
+              aria-label="$i18n{internetToggleTetherLabel}"
+              aria-describedby="tetherSecondary"
+              checked="[[deviceIsEnabled_(tetherDeviceState)]]"
+              disabled="[[!tetherToggleIsEnabled_(deviceState,
+                  tetherDeviceState)]]">
+          </paper-toggle-button>
+        </div>
+      </template>
     </template>
 
   </template>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.js b/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.js
index 71ef1093333..24a5887f26e 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/internet_subpage.js
@@ -25,11 +25,20 @@ Polymer({
     defaultNetwork: Object,
 
     /**
-     * Device state for the network type.
+     * Device state for the network type. Note: when both Cellular and Tether
+     * are available this will always be set to the Cellular device state and
+     * |tetherDeviceState| will be set to the Tether device state.
      * @type {!CrOnc.DeviceStateProperties|undefined}
      */
     deviceState: Object,
 
+    /**
+     * If both Cellular and Tether technologies exist, we combine the subpages
+     * and set this to the device state for Tether.
+     * @type {!CrOnc.DeviceStateProperties|undefined}
+     */
+    tetherDeviceState: Object,
+
     /** @type {!chrome.networkingPrivate.GlobalPolicy|undefined} */
     globalPolicy: Object,
 
@@ -75,7 +84,7 @@ Polymer({
     },
   },
 
-  observers: ['updateScanning_(networkingPrivate, deviceState)'],
+  observers: ['deviceStateChanged_(networkingPrivate, deviceState)'],
 
   /** @private {number|null} */
   scanIntervalId_: null,
@@ -89,8 +98,6 @@ Polymer({
 
   /** override */
   attached: function() {
-    this.scanIntervalId_ = null;
-
     this.networkListChangedListener_ = this.networkListChangedListener_ ||
         this.onNetworkListChangedEvent_.bind(this);
     this.networkingPrivate.onNetworkListChanged.addListener(
@@ -110,7 +117,7 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(route) {
-    if (route != settings.Route.INTERNET_NETWORKS) {
+    if (route != settings.routes.INTERNET_NETWORKS) {
       this.stopScanning_();
       return;
     }
@@ -123,16 +130,50 @@ Polymer({
   },
 
   /** @private */
+  deviceStateChanged_: function() {
+    this.showSpinner = !!this.deviceState.Scanning;
+
+    // Scans should only be triggered by the "networks" subpage.
+    if (settings.getCurrentRoute() != settings.routes.INTERNET_NETWORKS) {
+      this.stopScanning_();
+      return;
+    }
+
+    this.updateScanning_();
+  },
+
+  /** @private */
   updateScanning_: function() {
     if (!this.deviceState)
       return;
-    if (this.deviceState.Type != CrOnc.Type.WI_FI) {
-      // deviceState probably changed, re-request networks.
-      this.getNetworkStateList_();
+
+    if (this.shouldStartScan_()) {
+      this.startScanning_();
       return;
     }
-    this.showSpinner = !!this.deviceState.Scanning;
-    this.startScanning_();
+
+    // deviceState probably changed, re-request networks.
+    this.getNetworkStateList_();
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldStartScan_: function() {
+    // Scans should be kicked off from the Wi-Fi networks subpage.
+    if (this.deviceState.Type == CrOnc.Type.WI_FI)
+      return true;
+
+    // Scans should be kicked off from the Mobile data subpage, as long as it
+    // includes Tether networks.
+    if (this.deviceState.Type == CrOnc.Type.TETHER ||
+        (this.deviceState.Type == CrOnc.Type.CELLULAR &&
+         this.tetherDeviceState)) {
+      return true;
+    }
+
+    return false;
   },
 
   /** @private */
@@ -171,15 +212,34 @@ Polymer({
       visible: true,
       configured: false
     };
-    this.networkingPrivate.getNetworks(filter, function(networkStates) {
-      if (!this.deviceState)
-        return;
-      if (this.deviceState.Type != CrOnc.Type.VPN) {
-        this.networkStateList_ = networkStates;
-        return;
-      }
-      // For VPNs, separate out third party VPNs.
-      var networkStateList = [];
+    this.networkingPrivate.getNetworks(filter, this.onGetNetworks_.bind(this));
+  },
+
+  /**
+   * @param {!Array<!CrOnc.NetworkStateProperties>} networkStates
+   * @private
+   */
+  onGetNetworks_: function(networkStates) {
+    if (!this.deviceState)
+      return;  // Edge case when device states change before this callback.
+
+    // For the Cellular/Mobile subpage, request Tether networks if available.
+    if (this.deviceState.Type == CrOnc.Type.CELLULAR &&
+        this.tetherDeviceState) {
+      var filter = {
+        networkType: CrOnc.Type.TETHER,
+        visible: true,
+        configured: false
+      };
+      this.networkingPrivate.getNetworks(filter, function(tetherNetworkStates) {
+        this.networkStateList_ = networkStates.concat(tetherNetworkStates);
+      }.bind(this));
+      return;
+    }
+
+    // For VPNs, separate out third party VPNs.
+    if (this.deviceState.Type == CrOnc.Type.VPN) {
+      var builtinNetworkStates = [];
       var thirdPartyVpns = {};
       for (var i = 0; i < networkStates.length; ++i) {
         var state = networkStates[i];
@@ -189,12 +249,14 @@ Polymer({
           thirdPartyVpns[providerType] = thirdPartyVpns[providerType] || [];
           thirdPartyVpns[providerType].push(state);
         } else {
-          networkStateList.push(state);
+          builtinNetworkStates.push(state);
         }
       }
-      this.networkStateList_ = networkStateList;
+      networkStates = builtinNetworkStates;
       this.thirdPartyVpns_ = thirdPartyVpns;
-    }.bind(this));
+    }
+
+    this.networkStateList_ = networkStates;
   },
 
   /**
@@ -246,7 +308,6 @@ Polymer({
       return '';
     switch (deviceState.Type) {
       case CrOnc.Type.TETHER:
-        return this.i18n('internetToggleTetherA11yLabel');
       case CrOnc.Type.CELLULAR:
         return this.i18n('internetToggleMobileA11yLabel');
       case CrOnc.Type.WI_FI:
@@ -405,11 +466,72 @@ Polymer({
   },
 
   /**
+   * @param {!CrOnc.DeviceStateProperties|undefined} deviceState
+   * @param {!CrOnc.DeviceStateProperties|undefined} tetherDeviceState
+   * @return {boolean}
+   * @private
+   */
+  tetherToggleIsVisible_: function(deviceState, tetherDeviceState) {
+    return !!deviceState && deviceState.Type == CrOnc.Type.CELLULAR &&
+        !!tetherDeviceState;
+  },
+
+  /**
+   * @param {!CrOnc.DeviceStateProperties|undefined} deviceState
+   * @param {!CrOnc.DeviceStateProperties|undefined} tetherDeviceState
+   * @return {boolean}
+   * @private
+   */
+  tetherToggleIsEnabled_: function(deviceState, tetherDeviceState) {
+    return this.tetherToggleIsVisible_(deviceState, tetherDeviceState) &&
+        this.enableToggleIsEnabled_(tetherDeviceState) &&
+        tetherDeviceState.State != CrOnc.DeviceState.UNINITIALIZED;
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onTetherEnabledTap_: function(event) {
+    this.fire('device-enabled-toggled', {
+      enabled: !this.deviceIsEnabled_(this.tetherDeviceState),
+      type: CrOnc.Type.TETHER,
+    });
+    event.stopPropagation();
+  },
+
+  /**
    * @param {*} lhs
    * @param {*} rhs
    * @return {boolean}
+   * @private
    */
   isEqual_: function(lhs, rhs) {
     return lhs === rhs;
   },
+
+  /**
+   * @param {!Array<!CrOnc.NetworkStateProperties>} networkStateList
+   * @return {boolean}
+   * @private
+   */
+  shouldShowNetworkList_: function(networkStateList) {
+    return networkStateList.length > 0;
+  },
+
+  /**
+   * @param {!CrOnc.DeviceStateProperties|undefined} deviceState
+   * @param {!CrOnc.DeviceStateProperties|undefined} tetherDeviceState
+   * @return {string}
+   * @private
+   */
+  getNoNetworksString_: function(deviceState, tetherDeviceState) {
+    var type = deviceState.Type;
+    if (type == CrOnc.Type.TETHER ||
+        (type == CrOnc.Type.CELLULAR && this.tetherDeviceState)) {
+      return this.i18nAdvanced('internetNoNetworksMobileData');
+    }
+
+    return this.i18n('internetNoNetworks');
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html
index a425a62fd26..2f72355c93f 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html
@@ -1,6 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="../settings_vars_css.html">
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.js b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.js
index 629e27c235f..b81f6cecccf 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.js
@@ -181,7 +181,7 @@ Polymer({
    * @private
    */
   onSelectApnChange_: function(event) {
-    var target = /** @type {!HTMLSelectElement} */(event.target);
+    var target = /** @type {!HTMLSelectElement} */ (event.target);
     var accessPointName = target.value;
     // When selecting 'Other', don't set a change event unless a valid
     // non-default value has been set for Other.
@@ -206,7 +206,7 @@ Polymer({
 
   /**
    * Event triggered when the Other APN 'Save' button is tapped.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onSaveOtherTap_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html
index 3f9e4b6433f..f8fb2f9b70f 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html
@@ -1,6 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="internet_shared_css.html">
 <link rel="import" href="network_property_list.html">
@@ -14,7 +14,8 @@
           aria-labelledby="autoIPConfigLabel">
       </paper-toggle-button>
     </div>
-    <div class="settings-box continuation" hidden$="[[!ipConfig_]]">
+    <div class="settings-box single-column continuation indented stretch"
+        hidden$="[[!ipConfig_]]">
       <network-property-list
           fields="[[ipConfigFields_]]" property-dict="[[ipConfig_]]"
           edit-field-types="[[getIPEditFields_(editable, automatic_)]]"
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.js b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.js
index f3b0ce7eda5..d8143ddbfa0 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.js
@@ -87,7 +87,7 @@ Polymer({
       this.savedStaticIp_ = undefined;
 
     // Update the 'automatic' property.
-    if (this.networkProperties.IPAddressConfigType ) {
+    if (this.networkProperties.IPAddressConfigType) {
       var ipConfigType =
           CrOnc.getActiveValue(this.networkProperties.IPAddressConfigType);
       this.automatic_ = (ipConfigType != CrOnc.IPConfigType.STATIC);
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html b/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html
index 9d1c4928be2..a26ed366d45 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html
@@ -1,6 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="../settings_vars_css.html">
@@ -28,7 +28,7 @@
       </div>
     </div>
 
-    <div class="settings-box continuation single-column"
+    <div class="settings-box continuation single-column indented"
         hidden$="[[!nameservers_.length]]">
       <template is="dom-repeat" items="[[nameservers_]]">
         <paper-input-container no-label-float>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html
index 7841ccec3f7..b3778cfec47 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html
@@ -1,15 +1,16 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="internet_shared_css.html">
 
 <dom-module id="network-property-list">
   <template>
-    <style include="internet-shared">
+    <style include="internet-shared iron-flex">
       paper-input-container {
         margin-bottom: -12px;
         margin-top: -8px;
@@ -32,10 +33,11 @@
     <template is="dom-repeat" items="[[fields]]"
         filter="[[computeFilter_(prefix, propertyDict, editFieldTypes)]]">
       <div class="settings-box single-column two-line">
-        <!-- Propety label -->
+        <!-- Property label -->
         <div>[[getPropertyLabel_(item, prefix)]]</div>
         <!-- Uneditable property value -->
-        <div hidden="[[isEditable_(item, '', propertyDict, editFieldTypes)]]">
+        <div class="layout horizontal"
+            hidden="[[isEditable_(item, '', propertyDict, editFieldTypes)]]">
           <div class="secondary">
             [[getPropertyValue_(item, prefix, propertyDict)]]
           </div>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.js b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.js
index fd434561add..006feca4d5a 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.js
@@ -58,7 +58,7 @@ Polymer({
    * Event triggered when an input field changes. Fires a 'property-change'
    * event with the field (property) name set to the target id, and the value
    * set to the target input value.
-   * @param {Event} event The input change event.
+   * @param {!Event} event The input change event.
    * @private
    */
   onValueChange_: function(event) {
@@ -204,9 +204,9 @@ Polymer({
 
     if (key == 'Tether.Carrier') {
       assert(typeof value == 'string');
-      return (!value || value == 'unknown-carrier')
-          ? this.i18n('tetherUnknownCarrier')
-          : value;
+      return (!value || value == 'unknown-carrier') ?
+          this.i18n('tetherUnknownCarrier') :
+          value;
     }
 
     return '';
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html
index 55e202cefbe..e6f9e298397 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html
@@ -1,8 +1,8 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
 <link rel="import" href="chrome://resources/html/assert.html">
@@ -21,7 +21,7 @@
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_vars_css.html">
 <link rel="import" href="internet_shared_css.html">
-<link rel="import" href="network_proxy_exclusions.html">
+link rel="import" href="network_proxy_exclusions.html">
 <link rel="import" href="network_proxy_input.html">
 
 <dom-module id="network-proxy">
@@ -44,6 +44,10 @@
         margin: 10px 0;
       }
 
+      .settings-box:first-of-type {
+        border-top: none;
+      }
+
       #manualProxy {
         @apply(--settings-list-frame-padding);
       }
@@ -52,7 +56,7 @@
     <!-- Policy indicator. Only one dom-if below will be shown. -->
     <template is="dom-if"
         if="[[shouldShowNetworkPolicyIndicator_(networkProperties)]]">
-      <div class="list-frame">
+      <div class="settings-box">
         <div class="layout horizontal center">
           <cr-policy-network-indicator
               property="[[networkProperties.ProxySettings.Type]]"
@@ -64,7 +68,7 @@
     </template>
     <template is="dom-if"
         if="[[shouldShowExtensionIndicator_(networkProperties)]]">
-      <div class="list-frame">
+      <div class="settings-box">
         <extension-controlled-indicator
             extension-id="[[prefs.proxy.extensionId]]"
             extension-name="[[prefs.proxy.controlledByName]]"
@@ -74,7 +78,7 @@
     </template>
 
     <!-- Allow shared proxies -->
-    <div class="settings-box continuation indent"
+    <div class="settings-box continuation"
         hidden$="[[!shouldShowAllowShared_(
             networkProperties.ProxySettings.Type)]]">
       <settings-toggle-button id="allowShared" class="start"
@@ -86,7 +90,7 @@
     </div>
 
     <!-- Proxy type dropdown -->
-    <div class="settings-box continuation indent">
+    <div class="settings-box continuation">
       <div class="start">$i18n{networkProxyConnectionType}</div>
       <div class="md-select-wrapper">
         <select id="proxyType" class="md-select" on-change="onTypeChange_"
@@ -103,7 +107,7 @@
     </div>
 
     <!-- Autoconfiguration (PAC) -->
-    <div class="settings-box continuation indent"
+    <div class="settings-box continuation"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.PAC)]]">
       <div>$i18n{networkProxyAutoConfig}</div>
       <paper-input no-label-float class="middle" value="{{proxy_.PAC}}"
@@ -114,14 +118,14 @@
     </div>
 
     <!-- Web Proxy Auto Discovery (WPAD) -->
-    <div class="settings-box continuation indent"
+    <div class="settings-box continuation"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.WPAD)]]">
       <div>$i18n{networkSectionWpad}</div>
       <div class="middle">[[WPAD_]]</div>
     </div>
 
     <!-- Manual -->
-    <div class="settings-box continuation indent"
+    <div class="settings-box continuation"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
       <div id="networkProxyToggleLabel" class="flex">
         $i18n{networkProxyUseSame}
@@ -206,9 +210,13 @@
     <dialog is="cr-dialog" id="confirmAllowSharedDialog"
         close-text="$i18n{close}" on-cancel="onAllowSharedDialogCancel_"
         on-close="onAllowSharedDialogClose_">
-      <div class="title">$i18n{networkProxyAllowSharedWarningTitle}</div>
-      <div class="body">$i18n{networkProxyAllowSharedWarningMessage}</div>
-      <div class="button-container">
+      <div class="title" slot="title">
+        $i18n{networkProxyAllowSharedWarningTitle}
+      </div>
+      <div class="body" slot="body">
+        $i18n{networkProxyAllowSharedWarningMessage}
+      </div>
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button"
             on-tap="onAllowSharedDialogCancel_">
           $i18n{cancel}
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.js b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.js
index c38e5cae547..52e7e02fc01 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.js
@@ -131,7 +131,7 @@ Polymer({
   currentRouteChanged: function(newRoute) {
     this.proxyModified_ = false;
     this.proxy_ = this.createDefaultProxySettings_();
-    if (newRoute == settings.Route.NETWORK_DETAIL)
+    if (newRoute == settings.routes.NETWORK_DETAIL)
       this.updateProxy_();
   },
 
@@ -199,7 +199,7 @@ Polymer({
       proxy.PAC = /** @type {string|undefined} */ (
           CrOnc.getActiveValue(proxySettings.PAC));
     }
-    // Use saved ExcludeDomanains and Manual if not defined.
+    // Use saved ExcludeDomains and Manual if not defined.
     proxy.ExcludeDomains = proxy.ExcludeDomains || this.savedExcludeDomains_;
     proxy.Manual = proxy.Manual || this.savedManual_;
 
@@ -319,7 +319,7 @@ Polymer({
 
   /**
    * Event triggered when a proxy exclusion is added.
-   * @param {Event} event The add proxy exclusion event.
+   * @param {!Event} event The add proxy exclusion event.
    * @private
    */
   onAddProxyExclusionTap_: function(event) {
@@ -334,7 +334,7 @@ Polymer({
 
   /**
    * Event triggered when the proxy exclusion list changes.
-   * @param {Event} event The remove proxy exclusions change event.
+   * @param {!Event} event The remove proxy exclusions change event.
    * @private
    */
   onProxyExclusionsChange_: function(event) {
@@ -462,7 +462,7 @@ Polymer({
   /**
    * Handles the change event for the shared proxy checkbox. Shows a
    * confirmation dialog.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onAllowSharedProxiesChange_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.js b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.js
index 83dbb2ce9d0..347b22980d3 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.js
@@ -25,7 +25,9 @@ Polymer({
      */
     exclusions: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
       notify: true
     }
   },
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html
index d09ec270124..071e045c55d 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html
@@ -1,7 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
@@ -96,8 +96,8 @@
     <dialog is="cr-dialog" id="enterPinDialog" close-text="$i18n{close}"
         on-cancel="onEnterPinDialogCancel_"
         on-close="onEnterPinDialogClose_">
-      <div class="title">$i18n{networkSimEnterPinTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{networkSimEnterPinTitle}</div>
+      <div class="body" slot="body">
         <paper-input id="enterPin" class="pin" no-label-float autofocus
             label="$i18n{networkSimEnterPin}">
           <iron-a11y-keys keys="enter" on-keys-pressed="sendEnterPin_">
@@ -107,7 +107,7 @@
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button on-tap="sendEnterPin_">
           $i18n{networkSimEnter}
         </paper-button>
@@ -117,8 +117,8 @@
     <!-- Change PIN dialog -->
     <dialog is="cr-dialog" id="changePinDialog" close-text="$i18n{close}"
         on-close="onChangePinDialogClose_">
-      <div class="title">$i18n{networkSimChangePinTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{networkSimChangePinTitle}</div>
+      <div class="body" slot="body">
         <paper-input id="changePinOld" class="pin" no-label-float autofocus
             label="$i18n{networkSimEnterOldPin}">
         </paper-input>
@@ -134,7 +134,7 @@
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button on-tap="sendChangePin_">
           $i18n{networkSimChange}
         </paper-button>
@@ -144,8 +144,8 @@
     <!-- Unlock PIN dialog -->
     <dialog is="cr-dialog" id="unlockPinDialog" close-text="$i18n{close}"
         on-close="onUnlockPinDialogClose_">
-      <div class="title">$i18n{networkSimLockedTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{networkSimLockedTitle}</div>
+      <div class="body" slot="body">
         <paper-input id="unlockPin" class="pin" no-label-float autofocus
             label="$i18n{networkSimEnterPin}">
           <iron-a11y-keys keys="enter" on-keys-pressed="sendUnlockPin_">
@@ -155,7 +155,7 @@
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button on-tap="sendUnlockPin_">
           $i18n{networkSimUnlock}
         </paper-button>
@@ -165,8 +165,8 @@
     <!-- Unlock PUK dialog -->
     <dialog is="cr-dialog" id="unlockPukDialog" close-text="$i18n{close}"
         on-close="onUnlockPinDialogClose_">
-      <div class="title">$i18n{networkSimLockedTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{networkSimLockedTitle}</div>
+      <div class="body" slot="body">
         <div>
           Enter the 8-digit PIN Unblocking Key provided by your carrier
         </div>
@@ -188,7 +188,7 @@
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button on-tap="sendUnlockPuk_">
           $i18n{networkSimUnlock}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.js b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.js
index 0dcb4a99a73..06a1c3c312d 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.js
@@ -117,7 +117,7 @@ Polymer({
 
   /**
    * Opens the pin dialog when the sim lock enabled state changes.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onSimLockEnabledChange_: function(event) {
@@ -131,7 +131,7 @@ Polymer({
 
   /**
    * Sends the PIN value from the Enter PIN dialog.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   sendEnterPin_: function(event) {
@@ -174,7 +174,7 @@ Polymer({
 
   /**
    * Sends the old and new PIN values from the Change PIN dialog.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   sendChangePin_: function(event) {
@@ -213,7 +213,7 @@ Polymer({
 
   /**
    * Sends the PIN value from the Unlock PIN dialog.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   sendUnlockPin_: function(event) {
@@ -244,7 +244,7 @@ Polymer({
 
   /**
    * Sends the PUK value and new PIN value from the Unblock PUK dialog.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   sendUnlockPuk_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_summary.html b/chromium/chrome/browser/resources/settings/internet_page/network_summary.html
index e46a5be190a..f31a25cd7aa 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_summary.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_summary.html
@@ -1,6 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="network_summary_item.html">
 
@@ -12,7 +12,8 @@
             active-network-state="[[item]]"
             device-state="[[get(item.Type, deviceStates)]]"
             network-state-list="[[get(item.Type, networkStateLists_)]]"
-            networking-private="[[networkingPrivate]]">
+            networking-private="[[networkingPrivate]]"
+            tether-device-state="[[get('Tether', deviceStates)]]">
         </network-summary-item>
       </template>
     </div>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_summary.js b/chromium/chrome/browser/resources/settings/internet_page/network_summary.js
index 3ef2ccb9a78..3f83c7af26a 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_summary.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_summary.js
@@ -310,8 +310,21 @@ Polymer({
       var type = orderedDeviceTypes[i];
       var device = newDeviceStates[type];
       if (!device)
+        continue;  // The technology for this device type is unavailable.
+
+      // If both 'Tether' and 'Cellular' technologies exist, merge the network
+      // lists and do not add an active network for 'Tether' so that there is
+      // only one 'Mobile data' section / subpage.
+      if (type == CrOnc.Type.TETHER && newDeviceStates[CrOnc.Type.CELLULAR]) {
+        newNetworkStateLists[CrOnc.Type.CELLULAR] =
+            newNetworkStateLists[CrOnc.Type.CELLULAR].concat(
+                newNetworkStateLists[CrOnc.Type.TETHER]);
         continue;
-      var state = activeNetworkStatesByType.get(type) || {GUID: '', Type: type};
+      }
+
+      // Note: The active state for 'Cellular' may be a Tether network if both
+      // types are enabled but no Cellular network exists (edge case).
+      var state = this.getActiveStateForType_(activeNetworkStatesByType, type);
       if (state.Source === undefined &&
           device.State == CrOnc.DeviceState.PROHIBITED) {
         // Prohibited technologies are enforced by the device policy.
@@ -326,4 +339,19 @@ Polymer({
     // Set activeNetworkStates last to rebuild the dom-repeat.
     this.activeNetworkStates_ = newActiveNetworkStates;
   },
+
+  /**
+   * Returns the active network state for |type| or a default network state.
+   * If there is no 'Cellular' network, return the active 'Tether' network if
+   * any since the two types are represented by the same section / subpage.
+   * @param {!Map<string, !CrOnc.NetworkStateProperties>} activeStatesByType
+   * @param {string} type
+   * @return {!CrOnc.NetworkStateProperties|undefined}
+   */
+  getActiveStateForType_: function(activeStatesByType, type) {
+    var activeState = activeStatesByType.get(type);
+    if (!activeState && type == CrOnc.Type.CELLULAR)
+      activeState = activeStatesByType.get(CrOnc.Type.TETHER);
+    return activeState || {GUID: '', Type: type};
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html
index 6a0b7f3540a..6a9295eea59 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html
@@ -1,6 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
@@ -72,7 +72,7 @@
         <paper-toggle-button  id="deviceEnabledButton"
             aria-label$="[[getToggleA11yString_(deviceState)]]"
             checked="[[deviceIsEnabled_(deviceState)]]"
-            enabled="[[enableToggleIsEnabled_(deviceState)]]"
+            disabled="[[!enableToggleIsEnabled_(deviceState)]]"
             on-tap="onDeviceEnabledTap_">
         </paper-toggle-button>
       </template>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.js b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.js
index f688f0524e3..2cafa7b7dbc 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.js
@@ -4,7 +4,9 @@
 
 /**
  * @fileoverview Polymer element for displaying the network state for a specific
- * type and a list of networks for that type.
+ * type and a list of networks for that type. NOTE: It both Cellular and Tether
+ * technologies are available, they are combined into a single 'Mobile data'
+ * section. See crbug.com/726380.
  */
 
 Polymer({
@@ -21,6 +23,13 @@ Polymer({
     deviceState: Object,
 
     /**
+     * If both Cellular and Tether technologies exist, we combine the sections
+     * and set this to the device state for Tether.
+     * @type {!CrOnc.DeviceStateProperties|undefined}
+     */
+    tetherDeviceState: Object,
+
+    /**
      * Network state for the active network.
      * @type {!CrOnc.NetworkStateProperties|undefined}
      */
@@ -66,8 +75,12 @@ Polymer({
     if (deviceState) {
       if (deviceState.State == CrOnc.DeviceState.ENABLING)
         return this.i18n('internetDeviceEnabling');
-      if (deviceState.Type == CrOnc.Type.CELLULAR && this.deviceState.Scanning)
+      if (deviceState.Type == CrOnc.Type.CELLULAR && deviceState.Scanning)
         return this.i18n('internetMobileSearching');
+      if (deviceState.Type == CrOnc.Type.TETHER &&
+          deviceState.State == CrOnc.DeviceState.UNINITIALIZED) {
+        return this.i18n('tetherEnableBluetooth');
+      }
       if (deviceState.State == CrOnc.DeviceState.ENABLED)
         return CrOncStrings.networkListItemNotConnected;
     }
@@ -162,7 +175,9 @@ Polymer({
    */
   enableToggleIsVisible_: function(deviceState) {
     return !!deviceState && deviceState.Type != CrOnc.Type.ETHERNET &&
-        deviceState.Type != CrOnc.Type.VPN;
+        deviceState.Type != CrOnc.Type.VPN &&
+        (deviceState.Type == CrOnc.Type.TETHER ||
+         deviceState.State != CrOnc.DeviceState.UNINITIALIZED);
   },
 
   /**
@@ -171,7 +186,9 @@ Polymer({
    * @private
    */
   enableToggleIsEnabled_: function(deviceState) {
-    return !!deviceState && deviceState.State != CrOnc.DeviceState.PROHIBITED;
+    return this.enableToggleIsVisible_(deviceState) &&
+        deviceState.State != CrOnc.DeviceState.PROHIBITED &&
+        deviceState.State != CrOnc.DeviceState.UNINITIALIZED;
   },
 
   /**
@@ -184,7 +201,6 @@ Polymer({
       return '';
     switch (deviceState.Type) {
       case CrOnc.Type.TETHER:
-        return this.i18n('internetToggleTetherA11yLabel');
       case CrOnc.Type.CELLULAR:
         return this.i18n('internetToggleMobileA11yLabel');
       case CrOnc.Type.WI_FI:
@@ -219,11 +235,13 @@ Polymer({
     if (!deviceState)
       return false;
     var type = deviceState.Type;
-    var minlen = (deviceState.Type == CrOnc.Type.WI_FI ||
-                  deviceState.Type == CrOnc.Type.VPN ||
-                  deviceState.Type == CrOnc.Type.TETHER) ?
-        1 :
-        2;
+    if (type == CrOnc.Type.TETHER ||
+        (type == CrOnc.Type.CELLULAR && this.tetherDeviceState)) {
+      // The "Mobile data" subpage should always be shown if Tether networks are
+      // available, even if there are currently no associated networks.
+      return true;
+    }
+    var minlen = (type == CrOnc.Type.WI_FI || type == CrOnc.Type.VPN) ? 1 : 2;
     return networkStateList.length >= minlen;
   },
 
@@ -233,9 +251,11 @@ Polymer({
    */
   onShowDetailsTap_: function(event) {
     if (!this.deviceIsEnabled_(this.deviceState)) {
-      this.fire(
-          'device-enabled-toggled',
-          {enabled: true, type: this.deviceState.Type});
+      if (this.enableToggleIsEnabled_(this.deviceState)) {
+        this.fire(
+            'device-enabled-toggled',
+            {enabled: true, type: this.deviceState.Type});
+      }
     } else if (this.shouldShowSubpage_(
                    this.deviceState, this.networkStateList)) {
       this.fire('show-networks', this.deviceState);
diff --git a/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html b/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
index b618dcbdc79..637c6b0425e 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
+++ b/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
@@ -1,8 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../route.html">
@@ -11,15 +10,45 @@
 <dom-module id="tether-connection-dialog">
   <template>
     <style include="settings-shared">
-      .body,
+      /*
+        Add extra properties to the .title class originally part of cr-dialog
+      */
+      .title {
+        margin-top: 9px;
+      }
+
+      /*
+        Add extra properties to the .body class originally part of cr-dialog
+      */
+      .body {
+        border-top: solid 2px rgba(0, 0, 0, .14);
+      }
+
+      .body > * {
+        margin-left: 5px;
+      }
+
+      iron-icon {
+        --iron-icon-fill-color: #4285F4;
+      }
+
       #host-device-text-container {
         display: flex;
         flex-direction: column;
+        margin-left: 18px;
+      }
+
+      #availability-title {
+        color: black;
+        margin-top: 5px;
+        opacity: 0.54;
       }
 
       #host-device-container {
         align-items: center;
         display: flex;
+        margin-top: 12px;
+        min-height: 46px;
       }
 
       #tether-explanation,
@@ -27,14 +56,25 @@
       #tether-description-title {
         margin-top: var(--settings-page-vertical-margin);
       }
+
+      #tether-carrier-warning {
+        font-weight: 600;
+      }
+
+      #tether-description-list {
+        padding-left: 16px;
+      }
     </style>
-    <dialog is="cr-dialog" id="dialog" on-cancel="onDialogCanceled_"
-        close-text="$i18n{close}" on-closed="onDialogCanceled_">
-      <div class="title">$i18n{tetherConnectionDialogTitle}</div>
-      <div class="body">
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title" slot="title">$i18n{tetherConnectionDialogTitle}</div>
+      <div class="body" slot="body">
+        <span id="availability-title">
+          $i18n{tetherConnectionAvailableDeviceTitle}
+        </span>
         <div id="host-device-container">
-          <cr-network-icon network-state="[[networkProperties]]">
-          </cr-network-icon>
+          <!-- TODO(hsuregan): Add an a11y label. -->
+          <iron-icon icon="[[getSignalStrengthIconName_(networkProperties)]]">
+          </iron-icon>
           <div id="host-device-text-container">
             <span id="host-device-text-name">
               [[getDeviceName_(networkProperties)]]
@@ -53,15 +93,15 @@
         <div id="tether-description-title">
           [[getDescriptionTitle_(networkProperties)]]
         </div>
-        <ul>
-          <li>$i18n{tetherConnectionDescriptionCellData}</li>
+        <ul id="tether-description-list">
+          <li>$i18n{tetherConnectionDescriptionMobileData}</li>
           <li>[[getBatteryDescription_(networkProperties)]]</li>
           <li hidden$="[[!shouldShowDisconnectFromWifi_(networkProperties)]]">
             $i18n{tetherConnectionDescriptionWiFi}
           </li>
         </ul>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onNotNowTap_">
           $i18n{tetherConnectionNotNowButton}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.js b/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.js
index a5e2df22125..58cfaebe905 100644
--- a/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.js
+++ b/chromium/chrome/browser/resources/settings/internet_page/tether_connection_dialog.js
@@ -89,6 +89,23 @@ Polymer({
   },
 
   /**
+   * Retrieves an image that corresponds to signal strength of the tether host.
+   * Custom icons are used here instead of a <cr-network-icon> because this
+   * dialog uses a special color scheme.
+   *
+   * @param {!CrOnc.NetworkProperties} networkProperties The network properties.
+   * @return {string} The name of the icon to be used to represent the network's
+   * signal strength.
+   */
+  getSignalStrengthIconName_: function(networkProperties) {
+    var signalStrength = this.get('Tether.SignalStrength', networkProperties);
+    if (signalStrength === undefined)
+      signalStrength = 4;
+    return 'settings:signal-cellular-' +
+        Math.min(4, Math.max(signalStrength, 0)) + '-bar';
+  },
+
+  /**
    * @param {!CrOnc.NetworkProperties} networkProperties The network properties.
    * @return {string}
    * @private
@@ -103,8 +120,9 @@ Polymer({
    * @private
    */
   getBatteryPercentageString_: function(networkProperties) {
-    return this.i18n('tetherConnectionBatteryPercentage',
-                     this.getBatteryPercentageAsString_(networkProperties));
+    return this.i18n(
+        'tetherConnectionBatteryPercentage',
+        this.getBatteryPercentageAsString_(networkProperties));
   },
 
   /**
@@ -113,8 +131,8 @@ Polymer({
    * @private
    */
   getExplanation_: function(networkProperties) {
-    return this.i18n('tetherConnectionExplanation',
-                     CrOnc.getNetworkName(networkProperties));
+    return this.i18n(
+        'tetherConnectionExplanation', CrOnc.getNetworkName(networkProperties));
   },
 
   /**
@@ -123,8 +141,9 @@ Polymer({
    * @private
    */
   getDescriptionTitle_: function(networkProperties) {
-    return this.i18n('tetherConnectionDescriptionTitle',
-                     CrOnc.getNetworkName(networkProperties));
+    return this.i18n(
+        'tetherConnectionDescriptionTitle',
+        CrOnc.getNetworkName(networkProperties));
   },
 
   /**
@@ -133,7 +152,8 @@ Polymer({
    * @private
    */
   getBatteryDescription_: function(networkProperties) {
-    return this.i18n('tetherConnectionDescriptionBattery',
-                     this.getBatteryPercentageAsString_(networkProperties));
+    return this.i18n(
+        'tetherConnectionDescriptionBattery',
+        this.getBatteryPercentageAsString_(networkProperties));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.html b/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.html
index b56c18596b9..d3591ddfa97 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.html
+++ b/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.html
@@ -40,8 +40,8 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{addLanguagesDialogTitle}</div>
-      <div class="body" scrollable>
+      <div class="title" slot="title">$i18n{addLanguagesDialogTitle}</div>
+      <div class="body" slot="body" scrollable>
         <settings-subpage-search label="[[searchLabel]]"
             on-search-changed="onSearchChanged_" autofocus>
         </settings-subpage-search>
@@ -58,7 +58,7 @@
           </template>
         </iron-list>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <div class="action-buttons">
           <paper-button class="cancel-button" on-tap="onCancelButtonTap_">
             $i18n{cancel}
diff --git a/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.js b/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.js
index dc0e2b8e707..d3fda59dc77 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/add_languages_dialog.js
@@ -63,6 +63,8 @@ Polymer({
    * @private
    */
   getLanguages_: function() {
+    var filterValue =
+        this.filterValue_ ? this.filterValue_.toLowerCase() : null;
     return this.languages.supported.filter(function(language) {
       var isAvailableLanguage =
           !this.languageHelper.isLanguageEnabled(language.code);
@@ -70,11 +72,11 @@ Polymer({
       if (!isAvailableLanguage)
         return false;
 
-      if (!this.filterValue_)
-        return isAvailableLanguage;
+      if (filterValue === null)
+        return true;
 
-      return language.displayName.toLowerCase().includes(
-          this.filterValue_.toLowerCase());
+      return language.displayName.toLowerCase().includes(filterValue) ||
+          language.nativeDisplayName.toLowerCase().includes(filterValue);
     }.bind(this));
   },
 
diff --git a/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html b/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html
index 15d033cdc23..d92f22651ae 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html
+++ b/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html
@@ -4,7 +4,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="../global_scroll_target_behavior.html">
 <link rel="import" href="../prefs/prefs.html">
@@ -48,14 +48,14 @@
     </div>
     <div class="list-frame">
       <template is="dom-if" if="[[hasWords_(words_.length)]]">
-        <iron-list id="list" items="[[words_]]"
+        <iron-list id="list" items="[[words_]]" preserve-focus
             scroll-target="[[subpageScrollTarget]]">
           <template>
             <div class="list-item">
               <div class="word text-elide">[[item]]</div>
-              <paper-icon-button icon="cr:clear" on-tap="onRemoveWordTap_"
-                  tabindex$="[[tabIndex]]">
-              </paper-icon-button>
+              <button is="paper-icon-button-light" class="icon-clear"
+                  on-tap="onRemoveWordTap_" tabindex$="[[tabIndex]]">
+              </button>
             </div>
           </template>
         </iron-list>
diff --git a/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.js b/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.js
index f21d3995b60..bfe73dbdeeb 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.js
@@ -21,7 +21,7 @@ Polymer({
      */
     subpageRoute: {
       type: Object,
-      value: settings.Route.EDIT_DICTIONARY,
+      value: settings.routes.EDIT_DICTIONARY,
     },
 
     /** @private {!Array<string>} */
@@ -38,9 +38,9 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.languageSettingsPrivate =
-        settings.languageSettingsPrivateApiForTest ||
-        /** @type {!LanguageSettingsPrivate} */(chrome.languageSettingsPrivate);
+    this.languageSettingsPrivate = settings.languageSettingsPrivateApiForTest ||
+        /** @type {!LanguageSettingsPrivate} */
+        (chrome.languageSettingsPrivate);
 
     this.languageSettingsPrivate.getSpellcheckWords(function(words) {
       this.words_ = words;
@@ -111,7 +111,7 @@ Polymer({
   },
 
   /**
-   * Handles tapping on a paper-item's Remove Word icon button.
+   * Handles tapping on a "Remove word" icon button.
    * @param {!{model: !{item: string}}} e
    */
   onRemoveWordTap_: function(e) {
diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages.js b/chromium/chrome/browser/resources/settings/languages_page/languages.js
index dc26a82b307..e7bf247360b 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/languages.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/languages.js
@@ -34,7 +34,8 @@ var kTranslateLanguageSynonyms = {
 };
 
 var preferredLanguagesPrefName = cr.isChromeOS ?
-    'settings.language.preferred_languages' : 'intl.accept_languages';
+    'settings.language.preferred_languages' :
+    'intl.accept_languages';
 
 /**
  * Singleton element that generates the languages model on start-up and
@@ -64,7 +65,9 @@ Polymer({
       type: Object,
       notify: true,
       readOnly: true,
-      value: function() { return /** @type {!LanguageHelper} */(this); },
+      value: function() {
+        return /** @type {!LanguageHelper} */ (this);
+      },
     },
 
     /**
@@ -84,7 +87,9 @@ Polymer({
      */
     supportedLanguageMap_: {
       type: Object,
-      value: function() { return new Map(); },
+      value: function() {
+        return new Map();
+      },
     },
 
     /**
@@ -93,7 +98,9 @@ Polymer({
      */
     enabledLanguageSet_: {
       type: Object,
-      value: function() { return new Set(); },
+      value: function() {
+        return new Set();
+      },
     },
 
     /**
@@ -102,7 +109,9 @@ Polymer({
      */
     supportedInputMethodMap_: {
       type: Object,
-      value: function() { return new Map(); },
+      value: function() {
+        return new Map();
+      },
     },
 
     /**
@@ -113,7 +122,9 @@ Polymer({
      */
     languageInputMethods_: {
       type: Object,
-      value: function() { return new Map(); },
+      value: function() {
+        return new Map();
+      },
     },
 
     /** @private Prospective UI language when the page was loaded. */
@@ -148,19 +159,19 @@ Polymer({
   /** @private {?LanguageSettingsPrivate} */
   languageSettingsPrivate_: null,
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /** @private {?InputMethodPrivate} */
   inputMethodPrivate_: null,
-// </if>
+  // </if>
 
   /** @override */
   attached: function() {
     this.browserProxy_ = settings.LanguagesBrowserProxyImpl.getInstance();
     this.languageSettingsPrivate_ =
         this.browserProxy_.getLanguageSettingsPrivate();
-// <if expr="chromeos">
+    // <if expr="chromeos">
     this.inputMethodPrivate_ = this.browserProxy_.getInputMethodPrivate();
-// </if>
+    // </if>
 
     var promises = [];
 
@@ -236,7 +247,8 @@ Polymer({
    * @private
    */
   prospectiveUILanguageChanged_: function(prospectiveUILanguage) {
-    this.set('languages.prospectiveUILanguage',
+    this.set(
+        'languages.prospectiveUILanguage',
         prospectiveUILanguage || this.originalProspectiveUILanguage_);
   },
 
@@ -261,12 +273,13 @@ Polymer({
    * @private
    */
   spellCheckDictionariesPrefChanged_: function() {
-    var spellCheckSet = this.makeSetFromArray_(/** @type {!Array<string>} */(
+    var spellCheckSet = this.makeSetFromArray_(/** @type {!Array<string>} */ (
         this.getPref('spellcheck.dictionaries').value));
     for (var i = 0; i < this.languages.enabled.length; i++) {
       var languageState = this.languages.enabled[i];
-      this.set('languages.enabled.' + i + '.spellCheckEnabled',
-               !!spellCheckSet.has(languageState.language.code));
+      this.set(
+          'languages.enabled.' + i + '.spellCheckEnabled',
+          !!spellCheckSet.has(languageState.language.code));
     }
   },
 
@@ -274,7 +287,7 @@ Polymer({
   translateLanguagesPrefChanged_: function() {
     var translateBlockedPref = this.getPref('translate_blocked_languages');
     var translateBlockedSet = this.makeSetFromArray_(
-        /** @type {!Array<string>} */(translateBlockedPref.value));
+        /** @type {!Array<string>} */ (translateBlockedPref.value));
 
     for (var i = 0; i < this.languages.enabled.length; i++) {
       if (this.languages.enabled[i].language.code ==
@@ -301,8 +314,9 @@ Polymer({
    *     input method (Chrome OS only).
    * @private
    */
-  createModel_: function(supportedLanguages, translateTarget,
-                         supportedInputMethods, currentInputMethodId) {
+  createModel_: function(
+      supportedLanguages, translateTarget, supportedInputMethods,
+      currentInputMethodId) {
     // Populate the hash map of supported languages.
     for (var i = 0; i < supportedLanguages.length; i++) {
       var language = supportedLanguages[i];
@@ -336,7 +350,7 @@ Polymer({
     var prospectiveUILanguage;
     if (cr.isChromeOS || cr.isWindows) {
       prospectiveUILanguage =
-          /** @type {string} */(this.getPref('intl.app_locale').value) ||
+          /** @type {string} */ (this.getPref('intl.app_locale').value) ||
           this.originalProspectiveUILanguage_;
     }
 
@@ -347,7 +361,7 @@ Polymer({
     for (var l = 0; l < enabledLanguageStates.length; l++)
       this.enabledLanguageSet_.add(enabledLanguageStates[l].language.code);
 
-    var model = /** @type {!LanguagesModel} */({
+    var model = /** @type {!LanguagesModel} */ ({
       supported: supportedLanguages,
       enabled: enabledLanguageStates,
       translateTarget: translateTarget,
@@ -357,7 +371,7 @@ Polymer({
       model.prospectiveUILanguage = prospectiveUILanguage;
 
     if (cr.isChromeOS) {
-      model.inputMethods = /** @type {!InputMethodsModel} */({
+      model.inputMethods = /** @type {!InputMethodsModel} */ ({
         supported: supportedInputMethods,
         enabled: this.getEnabledInputMethods_(),
         currentId: currentInputMethodId,
@@ -384,12 +398,12 @@ Polymer({
     var pref = this.getPref(preferredLanguagesPrefName);
     var enabledLanguageCodes = pref.value.split(',');
     var spellCheckPref = this.getPref('spellcheck.dictionaries');
-    var spellCheckSet = this.makeSetFromArray_(/** @type {!Array<string>} */(
-        spellCheckPref.value));
+    var spellCheckSet = this.makeSetFromArray_(
+        /** @type {!Array<string>} */ (spellCheckPref.value));
 
     var translateBlockedPref = this.getPref('translate_blocked_languages');
     var translateBlockedSet = this.makeSetFromArray_(
-        /** @type {!Array<string>} */(translateBlockedPref.value));
+        /** @type {!Array<string>} */ (translateBlockedPref.value));
 
     var enabledLanguageStates = [];
     for (var i = 0; i < enabledLanguageCodes.length; i++) {
@@ -398,14 +412,13 @@ Polymer({
       // Skip unsupported languages.
       if (!language)
         continue;
-      var languageState = /** @type {LanguageState} */({});
+      var languageState = /** @type {LanguageState} */ ({});
       languageState.language = language;
       languageState.spellCheckEnabled = !!spellCheckSet.has(code);
       // Translate is considered disabled if this language maps to any translate
       // language that is blocked.
       var translateCode = this.convertLanguageCodeForTranslate(code);
-      languageState.translateEnabled =
-          !!language.supportsTranslate &&
+      languageState.translateEnabled = !!language.supportsTranslate &&
           !translateBlockedSet.has(translateCode) &&
           translateCode != translateTarget &&
           (!prospectiveUILanguage || code != prospectiveUILanguage);
@@ -425,15 +438,18 @@ Polymer({
 
     var enabledInputMethodIds =
         this.getPref('settings.language.preload_engines').value.split(',');
-    enabledInputMethodIds = enabledInputMethodIds.concat(this.getPref(
-        'settings.language.enabled_extension_imes').value.split(','));
+    enabledInputMethodIds = enabledInputMethodIds.concat(
+        this.getPref('settings.language.enabled_extension_imes')
+            .value.split(','));
 
     // Return only supported input methods.
-    return enabledInputMethodIds.map(function(id) {
-      return this.supportedInputMethodMap_.get(id);
-    }.bind(this)).filter(function(inputMethod) {
-      return !!inputMethod;
-    });
+    return enabledInputMethodIds
+        .map(function(id) {
+          return this.supportedInputMethodMap_.get(id);
+        }.bind(this))
+        .filter(function(inputMethod) {
+          return !!inputMethod;
+        });
   },
 
   /** @private */
@@ -443,7 +459,8 @@ Polymer({
     var enabledInputMethodSet = this.makeSetFromArray_(enabledInputMethods);
 
     for (var i = 0; i < this.languages.inputMethods.supported.length; i++) {
-      this.set('languages.inputMethods.supported.' + i + '.enabled',
+      this.set(
+          'languages.inputMethods.supported.' + i + '.enabled',
           enabledInputMethodSet.has(this.languages.inputMethods.supported[i]));
     }
     this.set('languages.inputMethods.enabled', enabledInputMethods);
@@ -464,7 +481,8 @@ Polymer({
 
     for (var i = 0; i < this.languages.enabled.length; i++) {
       var languageState = this.languages.enabled[i];
-      this.set('languages.enabled.' + i + '.removable',
+      this.set(
+          'languages.enabled.' + i + '.removable',
           this.canDisableLanguage(languageState.language.code));
     }
   },
@@ -489,7 +507,7 @@ Polymer({
     return this.resolver_.promise;
   },
 
-// <if expr="chromeos or is_win">
+  // <if expr="chromeos or is_win">
   /**
    * Sets the prospective UI language to the chosen language. This won't affect
    * the actual UI language until a restart.
@@ -507,7 +525,7 @@ Polymer({
     return this.originalProspectiveUILanguage_ !=
         this.languages.prospectiveUILanguage;
   },
-// </if>
+  // </if>
 
   /**
    * @param {string} languageCode
@@ -547,8 +565,8 @@ Polymer({
       var inputMethods = this.languageInputMethods_.get(languageCode) || [];
       for (var i = 0; i < inputMethods.length; i++) {
         var inputMethod = inputMethods[i];
-        var supportsOtherEnabledLanguages = inputMethod.languageCodes.some(
-            function(otherLanguageCode) {
+        var supportsOtherEnabledLanguages =
+            inputMethod.languageCodes.some(function(otherLanguageCode) {
               return otherLanguageCode != languageCode &&
                   this.isLanguageEnabled(otherLanguageCode);
             }.bind(this));
@@ -580,8 +598,8 @@ Polymer({
 
     // If this is the only enabled language that is supported by all enabled
     // component IMEs, it cannot be disabled because we need those IMEs.
-    var otherInputMethodsEnabled = this.languages.enabled.some(
-        function(languageState) {
+    var otherInputMethodsEnabled =
+        this.languages.enabled.some(function(languageState) {
           var otherLanguageCode = languageState.language.code;
           if (otherLanguageCode == languageCode)
             return false;
@@ -664,7 +682,8 @@ Polymer({
    * @param {string} languageCode
    */
   disableTranslateLanguage: function(languageCode) {
-    this.appendPrefListItem('translate_blocked_languages',
+    this.appendPrefListItem(
+        'translate_blocked_languages',
         this.convertLanguageCodeForTranslate(languageCode));
   },
 
@@ -733,7 +752,7 @@ Polymer({
     return this.supportedLanguageMap_.get(languageCode);
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /** @param {string} id */
   addInputMethod: function(id) {
     if (!this.supportedInputMethodMap_.has(id))
@@ -788,6 +807,6 @@ Polymer({
   onInputMethodRemoved_: function(id) {
     this.updateEnabledInputMethods_();
   },
-// </if>
+  // </if>
 });
 })();
diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_browser_proxy.js b/chromium/chrome/browser/resources/settings/languages_page/languages_browser_proxy.js
index a36bb2e5bf7..e23dd250069 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/languages_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/languages_browser_proxy.js
@@ -9,65 +9,63 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function LanguagesBrowserProxy() {}
-
-  LanguagesBrowserProxy.prototype = {
-// <if expr="chromeos or is_win">
+  class LanguagesBrowserProxy {
+    // <if expr="chromeos or is_win">
     /**
      * Sets the prospective UI language to the chosen language. This won't
      * affect the actual UI language until a restart.
      * @param {string} languageCode
      */
-    setProspectiveUILanguage: function(languageCode) {},
+    setProspectiveUILanguage(languageCode) {}
 
     /** @return {!Promise<string>} */
-    getProspectiveUILanguage: function() {},
-// </if>
+    getProspectiveUILanguage() {}
+
+    // </if>
 
     /** @return {!LanguageSettingsPrivate} */
-    getLanguageSettingsPrivate: function() {},
+    getLanguageSettingsPrivate() {}
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @return {!InputMethodPrivate} */
-    getInputMethodPrivate: function() {},
-// </if>
-  };
+    getInputMethodPrivate() {}
+    // </if>
+  }
 
   /**
-   * @constructor
    * @implements {settings.LanguagesBrowserProxy}
    */
-  function LanguagesBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(LanguagesBrowserProxyImpl);
-
-  LanguagesBrowserProxyImpl.prototype = {
-// <if expr="chromeos or is_win">
+  class LanguagesBrowserProxyImpl {
+    // <if expr="chromeos or is_win">
     /** @override */
-    setProspectiveUILanguage: function(languageCode) {
+    setProspectiveUILanguage(languageCode) {
       chrome.send('setProspectiveUILanguage', [languageCode]);
-    },
+    }
 
     /** @override */
-    getProspectiveUILanguage: function() {
+    getProspectiveUILanguage() {
       return cr.sendWithPromise('getProspectiveUILanguage');
-    },
-// </if>
+    }
+
+    // </if>
 
     /** @override */
-    getLanguageSettingsPrivate: function() {
+    getLanguageSettingsPrivate() {
       return /** @type {!LanguageSettingsPrivate} */ (
           chrome.languageSettingsPrivate);
-    },
+    }
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @override */
-    getInputMethodPrivate: function() {
+    getInputMethodPrivate() {
       return /** @type {!InputMethodPrivate} */ (chrome.inputMethodPrivate);
-    },
-// </if>
-  };
+    }
+    // </if>
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(LanguagesBrowserProxyImpl);
 
   return {
     LanguagesBrowserProxy: LanguagesBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_page.html b/chromium/chrome/browser/resources/settings/languages_page/languages_page.html
index 53c51adc65e..ed0b0c0dc61 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chromium/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -8,7 +8,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
@@ -133,10 +132,10 @@
                   </paper-button>
                 </template>
 </if>
-                <paper-icon-button id="more-[[item.language.code]]"
-                    icon="cr:more-vert" on-tap="onDotsTap_"
-                    title="$i18n{moreActions}">
-                </paper-icon-button>
+                <button is="paper-icon-button-light" title="$i18n{moreActions}"
+                    id="more-[[item.language.code]]" on-tap="onDotsTap_"
+                    class="icon-more-vert">
+                </button>
               </div>
             </template>
             <div class="list-item">
diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_page.js b/chromium/chrome/browser/resources/settings/languages_page/languages_page.js
index c321be82fe3..fa248dd9e77 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/languages_page.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/languages_page.js
@@ -42,14 +42,14 @@ Polymer({
     /** @type {!LanguageHelper} */
     languageHelper: Object,
 
-// <if expr="not is_macosx">
+    // <if expr="not is_macosx">
     /** @private */
     spellCheckSecondaryText_: {
       type: String,
       value: '',
       computed: 'getSpellCheckSecondaryText_(languages.enabled.*)',
     },
-// </if>
+    // </if>
 
     /**
      * The language to display the details for.
@@ -66,16 +66,20 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-// <if expr="not is_macosx">
-        map.set(
-            settings.Route.EDIT_DICTIONARY.path,
-            '#spellCheckCollapse .subpage-arrow');
-// </if>
-// <if expr="chromeos">
-        map.set(
-            settings.Route.INPUT_METHODS.path,
-            '#inputMethodsCollapse .subpage-arrow');
-// </if>
+        // <if expr="not is_macosx">
+        if (settings.routes.EDIT_DICTIONARY) {
+          map.set(
+              settings.routes.EDIT_DICTIONARY.path,
+              '#spellCheckCollapse .subpage-arrow');
+        }
+        // </if>
+        // <if expr="chromeos">
+        if (settings.routes.INPUT_METHODS) {
+          map.set(
+              settings.routes.INPUT_METHODS.path,
+              '#inputMethodsCollapse .subpage-arrow');
+        }
+        // </if>
         return map;
       },
     },
@@ -123,7 +127,7 @@ Polymer({
     // "Move up" is a no-op for the top language, and redundant with
     // "Move to top" for the 2nd language.
     return !this.isNthLanguage_(0, language) &&
-           !this.isNthLanguage_(1, language);
+        !this.isNthLanguage_(1, language);
   },
 
   /**
@@ -144,7 +148,7 @@ Polymer({
     return this.languages.enabled.length <= 1;
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * Applies Chrome OS session tweaks to the menu.
    * @param {!CrActionMenuElement} menu
@@ -169,7 +173,7 @@ Polymer({
    * @private
    */
   onManageInputMethodsTap_: function() {
-    settings.navigateTo(settings.Route.INPUT_METHODS);
+    settings.navigateTo(settings.routes.INPUT_METHODS);
   },
 
   /**
@@ -181,8 +185,10 @@ Polymer({
    *           key: (string|undefined)}} e
    */
   onInputMethodTap_: function(e) {
-    // Taps on the paper-icon-button are handled in onInputMethodOptionsTap_.
-    if (e.target.tagName == 'PAPER-ICON-BUTTON')
+    // Taps on the button are handled in onInputMethodOptionsTap_.
+    // TODO(dschuyler): The row has two operations that are not clearly
+    // delineated. crbug.com/740691
+    if (e.target.tagName == 'BUTTON')
       return;
 
     // Ignore key presses other than <Enter>.
@@ -202,9 +208,9 @@ Polymer({
   onInputMethodOptionsTap_: function(e) {
     this.languageHelper.openInputMethodOptions(e.model.item.id);
   },
-// </if>
+  // </if>
 
-// <if expr="chromeos or is_win">
+  // <if expr="chromeos or is_win">
   /**
    * @return {boolean} True for a secondary user in a multi-profile session.
    * @private
@@ -264,7 +270,7 @@ Polymer({
 
     this.closeMenuSoon_();
   },
-// </if>
+  // </if>
 
   /**
    * @param {!chrome.languageSettingsPrivate.Language} language
@@ -313,7 +319,7 @@ Polymer({
    * @private
    */
   onMoveToTopTap_: function() {
-    /** @type {!CrActionMenuElement} */(this.$.menu.get()).close();
+    /** @type {!CrActionMenuElement} */ (this.$.menu.get()).close();
     this.languageHelper.moveLanguageToFront(this.detailLanguage_.language.code);
   },
 
@@ -322,7 +328,7 @@ Polymer({
    * @private
    */
   onMoveUpTap_: function() {
-    /** @type {!CrActionMenuElement} */(this.$.menu.get()).close();
+    /** @type {!CrActionMenuElement} */ (this.$.menu.get()).close();
     this.languageHelper.moveLanguage(this.detailLanguage_.language.code, -1);
   },
 
@@ -331,7 +337,7 @@ Polymer({
    * @private
    */
   onMoveDownTap_: function() {
-    /** @type {!CrActionMenuElement} */(this.$.menu.get()).close();
+    /** @type {!CrActionMenuElement} */ (this.$.menu.get()).close();
     this.languageHelper.moveLanguage(this.detailLanguage_.language.code, 1);
   },
 
@@ -340,11 +346,11 @@ Polymer({
    * @private
    */
   onRemoveLanguageTap_: function() {
-    /** @type {!CrActionMenuElement} */(this.$.menu.get()).close();
+    /** @type {!CrActionMenuElement} */ (this.$.menu.get()).close();
     this.languageHelper.disableLanguage(this.detailLanguage_.language.code);
   },
 
-// <if expr="chromeos or is_win">
+  // <if expr="chromeos or is_win">
   /**
    * Checks whether the prospective UI language (the pref that indicates what
    * language to use in Chrome) matches the current language. This pref is used
@@ -359,15 +365,15 @@ Polymer({
     return languageCode == prospectiveUILanguage;
   },
 
- /**
-  * @param {string} prospectiveUILanguage
-  * @return {string}
-  * @private
-  */
+  /**
+   * @param {string} prospectiveUILanguage
+   * @return {string}
+   * @private
+   */
   getProspectiveUILanguageName_: function(prospectiveUILanguage) {
     return this.languageHelper.getLanguage(prospectiveUILanguage).displayName;
   },
-// </if>
+  // </if>
 
   /**
    * @return {string}
@@ -377,7 +383,7 @@ Polymer({
     return cr.isChromeOS || cr.isWindows ? 'two-line' : '';
   },
 
-// <if expr="not is_macosx">
+  // <if expr="not is_macosx">
   /**
    * Returns the secondary text for the spell check subsection based on the
    * enabled spell check languages, listing at most 2 languages.
@@ -388,7 +394,7 @@ Polymer({
     var enabledSpellCheckLanguages =
         this.languages.enabled.filter(function(languageState) {
           return languageState.spellCheckEnabled &&
-                 languageState.language.supportsSpellcheck;
+              languageState.language.supportsSpellcheck;
         });
     switch (enabledSpellCheckLanguages.length) {
       case 0:
@@ -421,7 +427,7 @@ Polymer({
    * @private
    */
   onEditDictionaryTap_: function() {
-    settings.navigateTo(settings.Route.EDIT_DICTIONARY);
+    settings.navigateTo(settings.routes.EDIT_DICTIONARY);
   },
 
   /**
@@ -433,8 +439,8 @@ Polymer({
     if (!item.language.supportsSpellcheck)
       return;
 
-    this.languageHelper.toggleSpellCheck(item.language.code,
-                                         !item.spellCheckEnabled);
+    this.languageHelper.toggleSpellCheck(
+        item.language.code, !item.spellCheckEnabled);
   },
 
   /**
@@ -444,7 +450,7 @@ Polymer({
   getSpellCheckListTwoLine_: function() {
     return this.spellCheckSecondaryText_.length ? 'two-line' : '';
   },
-// </if>
+  // </if>
 
   /**
    * Returns either the "selected" class, if the language matches the
@@ -463,7 +469,7 @@ Polymer({
     return '';
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @param {string} id The input method ID.
    * @param {string} currentId The ID of the currently enabled input method.
@@ -488,13 +494,13 @@ Polymer({
 
   getInputMethodName_: function(id) {
     assert(cr.isChromeOS);
-    var inputMethod = this.languages.inputMethods.enabled.find(
-        function(inputMethod) {
+    var inputMethod =
+        this.languages.inputMethods.enabled.find(function(inputMethod) {
           return inputMethod.id == id;
         });
     return inputMethod ? inputMethod.displayName : '';
   },
-// </if>
+  // </if>
 
   /**
    * @param {!Event} e
@@ -503,18 +509,17 @@ Polymer({
   onDotsTap_: function(e) {
     // Set a copy of the LanguageState object since it is not data-bound to the
     // languages model directly.
-    this.detailLanguage_ = /** @type {!LanguageState} */(Object.assign(
+    this.detailLanguage_ = /** @type {!LanguageState} */ (Object.assign(
         {},
-        /** @type {!{model: !{item: !LanguageState}}} */(e).model.item));
+        /** @type {!{model: !{item: !LanguageState}}} */ (e).model.item));
 
     // Ensure the template has been stamped.
-    var menu = /** @type {?CrActionMenuElement} */(
-        this.$.menu.getIfExists());
+    var menu = /** @type {?CrActionMenuElement} */ (this.$.menu.getIfExists());
     if (!menu) {
-      menu = /** @type {!CrActionMenuElement} */(this.$.menu.get());
-// <if expr="chromeos">
+      menu = /** @type {!CrActionMenuElement} */ (this.$.menu.get());
+      // <if expr="chromeos">
       this.tweakMenuForCrOS_(menu);
-// </if>
+      // </if>
     }
 
     menu.showAt(/** @type {!Element} */ (e.target));
@@ -526,27 +531,27 @@ Polymer({
    * @private
    */
   closeMenuSoon_: function() {
-    var menu = /** @type {!CrActionMenuElement} */(this.$.menu.get());
+    var menu = /** @type {!CrActionMenuElement} */ (this.$.menu.get());
     setTimeout(function() {
       if (menu.open)
         menu.close();
     }, settings.kMenuCloseDelay);
   },
 
-// <if expr="chromeos or is_win">
+  // <if expr="chromeos or is_win">
   /**
    * Handler for the restart button.
    * @private
    */
   onRestartTap_: function() {
-// <if expr="chromeos">
+    // <if expr="chromeos">
     settings.LifetimeBrowserProxyImpl.getInstance().signOutAndRestart();
-// </if>
-// <if expr="is_win">
+    // </if>
+    // <if expr="is_win">
     settings.LifetimeBrowserProxyImpl.getInstance().restart();
-// </if>
+    // </if>
   },
-// </if>
+  // </if>
 
   /**
    * Toggles the expand button within the element being listened to.
diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_types.js b/chromium/chrome/browser/resources/settings/languages_page/languages_types.js
index 36d446f5fec..af76c645853 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/languages_types.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/languages_types.js
@@ -64,7 +64,7 @@ LanguageHelper.prototype = {
   /** @return {!Promise} */
   whenReady: assertNotReached,
 
-// <if expr="chromeos or is_win">
+  // <if expr="chromeos or is_win">
   /**
    * Sets the prospective UI language to the chosen language. This won't affect
    * the actual UI language until a restart.
@@ -77,7 +77,7 @@ LanguageHelper.prototype = {
    * @return {boolean}
    */
   requiresRestart: assertNotReached,
-// </if>
+  // </if>
 
   /**
    * @param {string} languageCode
@@ -161,7 +161,7 @@ LanguageHelper.prototype = {
    */
   getLanguage: assertNotReached,
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /** @param {string} id */
   addInputMethod: assertNotReached,
 
@@ -185,5 +185,5 @@ LanguageHelper.prototype = {
 
   /** @param {string} id Input method ID. */
   openInputMethodOptions: assertNotReached,
-// </if>
+  // </if>
 };
diff --git a/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js b/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js
index 92d122370a5..8e8680312fe 100644
--- a/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js
+++ b/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js
@@ -32,7 +32,9 @@ Polymer({
      */
     languageList_: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
   },
 
@@ -164,8 +166,8 @@ Polymer({
     /** @type {!Array<chrome.languageSettingsPrivate.InputMethod>} */
     var combinedInputMethods = [];
     for (var i = 0; i < languageCodes.length; i++) {
-      var inputMethods = this.languageHelper.getInputMethodsForLanguage(
-          languageCodes[i]);
+      var inputMethods =
+          this.languageHelper.getInputMethodsForLanguage(languageCodes[i]);
       // Get the language's unused input methods and mark them as used.
       var newInputMethods = inputMethods.filter(function(inputMethod) {
         if (usedInputMethods.has(inputMethod.id))
diff --git a/chromium/chrome/browser/resources/settings/lifetime_browser_proxy.js b/chromium/chrome/browser/resources/settings/lifetime_browser_proxy.js
index 0e7750fb665..d97ac2d6b39 100644
--- a/chromium/chrome/browser/resources/settings/lifetime_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/lifetime_browser_proxy.js
@@ -4,54 +4,50 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function LifetimeBrowserProxy() {}
-
-  LifetimeBrowserProxy.prototype = {
+  class LifetimeBrowserProxy {
     // Triggers a browser restart.
-    restart: function() {},
+    restart() {}
 
     // Triggers a browser relaunch.
-    relaunch: function() {},
+    relaunch() {}
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     // First signs out current user and then performs a restart.
-    signOutAndRestart: function() {},
+    signOutAndRestart() {}
 
     // Triggers a factory reset.
-    factoryReset: function() {},
-// </if>
-  };
+    factoryReset() {}
+    // </if>
+  }
 
   /**
-   * @constructor
    * @implements {settings.LifetimeBrowserProxy}
    */
-  function LifetimeBrowserProxyImpl() {}
-  cr.addSingletonGetter(LifetimeBrowserProxyImpl);
-
-  LifetimeBrowserProxyImpl.prototype = {
+  class LifetimeBrowserProxyImpl {
     /** @override */
-    restart: function() {
+    restart() {
       chrome.send('restart');
-    },
+    }
 
     /** @override */
-    relaunch: function() {
+    relaunch() {
       chrome.send('relaunch');
-    },
+    }
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @override */
-    signOutAndRestart: function() {
+    signOutAndRestart() {
       chrome.send('signOutAndRestart');
-    },
+    }
 
     /** @override */
-    factoryReset: function() {
+    factoryReset() {
       chrome.send('factoryReset');
-    },
-// </if>
-  };
+    }
+    // </if>
+  }
+
+  cr.addSingletonGetter(LifetimeBrowserProxyImpl);
 
   return {
     LifetimeBrowserProxy: LifetimeBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/multidevice_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/multidevice_page/compiled_resources2.gyp
new file mode 100644
index 00000000000..72df331cb66
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/multidevice_page/compiled_resources2.gyp
@@ -0,0 +1,12 @@
+# Copyright 2017 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.
+{
+  'targets': [
+    {
+      'target_name': 'multidevice_page',
+      'dependencies': [],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/chrome/browser/resources/settings/multidevice_page/multidevice_page.html b/chromium/chrome/browser/resources/settings/multidevice_page/multidevice_page.html
new file mode 100644
index 00000000000..fc03d5eee73
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/multidevice_page/multidevice_page.html
@@ -0,0 +1,21 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../prefs/prefs.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="settings-multidevice-page">
+  <template>
+    <style include="settings-shared"></style>
+    <div class="settings-box two-line">
+      <div id="smsConnectToggleLabel" class="start">
+        $i18n{smsConnect}
+        <div class="secondary">$i18n{smsConnectSummary}</div>
+      </div>
+      <paper-toggle-button checked="{{smsConnectToggleState_}}"
+          aria-labelledby="smsConnectToggleLabel">
+      </paper-toggle-button>
+    </div>
+  </template>
+  <script src="multidevice_page.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/multidevice_page/multidevice_page.js b/chromium/chrome/browser/resources/settings/multidevice_page/multidevice_page.js
new file mode 100644
index 00000000000..e402512aefe
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/multidevice_page/multidevice_page.js
@@ -0,0 +1,37 @@
+// Copyright 2017 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
+ * Settings page for managing multidevice features.
+ */
+
+Polymer({
+  is: 'settings-multidevice-page',
+
+  properties: {
+    /** Preferences state. */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * Reflects the current state of the toggle buttons (in this page and the
+     * subpage). This will be set when the user changes the toggle.
+     * @private
+     */
+    smsConnectToggleState_: {
+      type: Boolean,
+      observer: 'smsConnectToggleStateChanged_',
+    },
+  },
+
+  /** @private */
+  smsConnectToggleStateChanged_: function() {
+    // TODO(orenb): Switch from paper-toggle-button to settings-toggle-button,
+    // which will manage the underlying pref state, once the new pref has been
+    // implemented. Propagate here the pref value to the SMS connect component.
+  },
+});
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp
index d29ed565c52..725d084e002 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp
@@ -14,7 +14,7 @@
     {
       'target_name': 'on_startup_page',
       'dependencies': [
-        'on_startup_browser_proxy',
+        '../compiled_resources2.gyp:route',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -27,6 +27,7 @@
         '<(DEPTH)/ui/webui/resources/js/cr/ui/compiled_resources2.gyp:focus_without_ink',
         '<(DEPTH)/ui/webui/resources/cr_elements/compiled_resources2.gyp:cr_scrollable_behavior',
         '<(EXTERNS_GYP):settings_private',
+        'on_startup_browser_proxy',
         'startup_urls_page_browser_proxy',
         'startup_url_entry',
       ],
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_browser_proxy.js b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_browser_proxy.js
index a99f6185b54..917029b832d 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_browser_proxy.js
@@ -7,26 +7,22 @@ var NtpExtension;
 
 cr.define('settings', function() {
   /** @interface */
-  function OnStartupBrowserProxy() {}
-
-  OnStartupBrowserProxy.prototype = {
+  class OnStartupBrowserProxy {
     /** @return {!Promise<?NtpExtension>} */
-    getNtpExtension: assertNotReached,
-  };
+    getNtpExtension() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.OnStartupBrowserProxy}
    */
-  function OnStartupBrowserProxyImpl() {}
-  cr.addSingletonGetter(OnStartupBrowserProxyImpl);
-
-  OnStartupBrowserProxyImpl.prototype = {
+  class OnStartupBrowserProxyImpl {
     /** @override */
-    getNtpExtension: function() {
+    getNtpExtension() {
       return cr.sendWithPromise('getNtpExtension');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(OnStartupBrowserProxyImpl);
 
   return {
     OnStartupBrowserProxy: OnStartupBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html
index e0ce1da9ae4..e5cac2098c2 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html
@@ -1,51 +1,34 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="../controls/controlled_radio_button.html">
-<link rel="import" href="../controls/extension_controlled_indicator.html">
-<link rel="import" href="../controls/settings_radio_group.html">
-<link rel="import" href="on_startup_browser_proxy.html">
-<link rel="import" href="startup_urls_page.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="startup_urls_page.html">
 
 <dom-module id="settings-on-startup-page">
   <template>
-    <style include="settings-shared">
-      .block {
-        display: block;
-      }
-    </style>
-    <div class="settings-box block first">
-      <settings-radio-group id="onStartupRadioGroup"
-          pref="{{prefs.session.restore_on_startup}}">
-        <controlled-radio-button name="[[prefValues_.OPEN_NEW_TAB]]"
-            pref="[[prefs.session.restore_on_startup]]"
-            label="$i18n{onStartupOpenNewTab}"
-            no-extension-indicator>
-        </controlled-radio-button>
-        <template is="dom-if" if="[[showIndicator_(
-            ntpExtension_, prefs.session.restore_on_startup.value)]]">
-          <extension-controlled-indicator
-              extension-id="[[ntpExtension_.id]]"
-              extension-name="[[ntpExtension_.name]]"
-              extension-can-be-disabled="[[ntpExtension_.canBeDisabled]]"
-              on-extension-disable="getNtpExtension_">
-          </extension-controlled-indicator>
-        </template>
-        <controlled-radio-button name="[[prefValues_.CONTINUE]]"
-            pref="[[prefs.session.restore_on_startup]]"
-            label="$i18n{onStartupContinue}">
-        </controlled-radio-button>
-        <controlled-radio-button name="[[prefValues_.OPEN_SPECIFIC]]"
-            pref="[[prefs.session.restore_on_startup]]"
-            label="$i18n{onStartupOpenSpecific}">
-        </controlled-radio-button>
-      </settings-radio-group>
-    </div>
-    <template is="dom-if"
-        if="[[showStartupUrls_(prefs.session.restore_on_startup.value)]]">
-      <settings-startup-urls-page prefs="[[prefs]]">
-      </settings-startup-urls-page>
-    </template>
+    <style include="settings-shared"></style>
+    <settings-animated-pages id="pages" section="onStartup"
+        focus-config="[[focusConfig_]]">
+      <neon-animatable route-path="default">
+        <div class="settings-box first two-line"
+            id="manage-startup-urls-subpage-trigger"
+            on-tap="onManageStartupUrls_" actionable>
+          <div class="start">
+            $i18n{onStartupManage}
+            <div class="secondary">$i18n{onStartupDescription}</div>
+          </div>
+          <button class="subpage-arrow" is="paper-icon-button-light"
+              aria-label="$i18n{onStartupManage}"></button>
+        </div>
+      </neon-animatable>
+      <template is="dom-if" route-path="/startupUrls">
+        <settings-subpage
+            associated-control="[[$$('#manage-startup-urls-subpage-trigger')]]"
+            page-title="$i18n{onStartupManage}">
+          <settings-startup-urls-page prefs="{{prefs}}">
+          </settings-startup-urls-page>
+        </settings-subpage>
+      </template>
+    </settings-animated-pages>
   </template>
   <script src="on_startup_page.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.js b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.js
index 313c41530de..38cdc3ccf60 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.js
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.js
@@ -5,72 +5,16 @@
 /**
  * @fileoverview
  * 'settings-on-startup-page' is a settings page.
- *
- * Example:
- *
- *    <neon-animated-pages>
- *      <settings-on-startup-page prefs="{{prefs}}">
- *      </settings-on-startup-page>
- *      ... other pages ...
- *    </neon-animated-pages>
  */
 Polymer({
   is: 'settings-on-startup-page',
 
   properties: {
-    prefs: {
-      type: Object,
-      notify: true,
-    },
-
-    /** @private {?NtpExtension} */
-    ntpExtension_: Object,
-
-    /**
-     * Enum values for the 'session.restore_on_startup' preference.
-     * @private {!Object<string, number>}
-     */
-    prefValues_: {
-      readOnly: true,
-      type: Object,
-      value: {
-        CONTINUE: 1,
-        OPEN_NEW_TAB: 5,
-        OPEN_SPECIFIC: 4,
-      },
-    },
-  },
-
-  /** @override */
-  attached: function() {
-    this.getNtpExtension_();
+    prefs: Object,
   },
 
   /** @private */
-  getNtpExtension_: function() {
-    settings.OnStartupBrowserProxyImpl.getInstance().getNtpExtension().then(
-        function(ntpExtension) {
-          this.ntpExtension_ = ntpExtension;
-        }.bind(this));
-  },
-
-  /**
-   * @param {?NtpExtension} ntpExtension
-   * @param {number} restoreOnStartup Value of prefs.session.restore_on_startup.
-   * @return {boolean}
-   * @private
-   */
-  showIndicator_: function(ntpExtension, restoreOnStartup) {
-    return !!ntpExtension && restoreOnStartup == this.prefValues_.OPEN_NEW_TAB;
-  },
-
-  /**
-    * Determine whether to show the user defined startup pages.
-    * @param {number} restoreOnStartup Enum value from prefValues_.
-    * @return {boolean} Whether the open specific pages is selected.
-    * @private
-    */
-  showStartupUrls_: function(restoreOnStartup) {
-    return restoreOnStartup == this.prefValues_.OPEN_SPECIFIC;
+  onManageStartupUrls_: function() {
+    settings.navigateTo(settings.routes.STARTUP_URLS);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html
index 997fdfb3cc7..dc36820b20d 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html
@@ -10,13 +10,13 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[dialogTitle_]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[dialogTitle_]]</div>
+      <div class="body" slot="body">
         <paper-input always-float-label id="url" label="$i18n{onStartupSiteUrl}"
             value="{{url_}}" on-input="validate_" autofocus>
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <div class="action-buttons">
           <paper-button class="cancel-button" on-tap="onCancelTap_"
               id="cancel">$i18n{cancel}</paper-button>
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html
index a4a38d89d96..92d1993e99c 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html
@@ -4,7 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="startup_urls_page_browser_proxy.html">
 <link rel="import" href="../focus_row_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -25,9 +25,10 @@
         <div class="text-elide secondary">[[model.url]]</div>
       </div>
       <template is="dom-if" if="[[editable]]">
-        <paper-icon-button id="dots" icon="cr:more-vert" on-tap="onDotsTap_"
-            title="$i18n{moreActions}" focus-row-control focus-type="menu">
-        </paper-icon-button>
+        <button is="paper-icon-button-light" id="dots" on-tap="onDotsTap_"
+            title="$i18n{moreActions}" focus-row-control focus-type="menu"
+            class="icon-more-vert">
+        </button>
         <template is="cr-lazy-render" id="menu">
           <dialog is="cr-action-menu">
             <button class="dropdown-item" role="option" on-tap="onEditTap_">
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js
index 2c582027c26..e5bd08b427e 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js
@@ -63,8 +63,8 @@ Polymer({
 
   /** @private */
   onDotsTap_: function() {
-    var actionMenu = /** @type {!CrActionMenuElement} */(
-        this.$$('#menu').get());
+    var actionMenu =
+        /** @type {!CrActionMenuElement} */ (this.$$('#menu').get());
     actionMenu.showAt(assert(this.$$('#dots')));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html
index 2c915fc6862..d1f8e9a3e15 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html
@@ -8,8 +8,11 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
+<link rel="import" href="../controls/controlled_radio_button.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
+<link rel="import" href="../controls/settings_radio_group.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="on_startup_browser_proxy.html">
 <link rel="import" href="startup_url_dialog.html">
 <link rel="import" href="startup_url_entry.html">
 <link rel="import" href="startup_urls_page_browser_proxy.html">
@@ -30,43 +33,79 @@
         cursor: default;
       }
     </style>
-    <div id="outer" class="layout vertical flex vertical-list">
-      <div id="container" class="scroll-container" scrollable>
-        <iron-list items="[[startupPages_]]" scroll-target="container">
-          <template>
-            <settings-startup-url-entry model="[[item]]"
-                tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
-                last-focused="{{lastFocused_}}"
-                editable="[[shouldAllowUrlsEdit_(
-                    prefs.session.startup_urls.enforcement)]]">
-            </settings-startup-url-entry>
+    <div class="settings-box first">
+      <h2>$i18n{onStartupPages}</h2>
+    </div>
+    <div class="settings-box first">
+      <div class="start">
+        <settings-radio-group id="onStartupRadioGroup"
+            pref="{{prefs.session.restore_on_startup}}">
+          <controlled-radio-button name="[[prefValues_.OPEN_NEW_TAB]]"
+              pref="[[prefs.session.restore_on_startup]]"
+              label="$i18n{onStartupOpenNewTab}"
+              no-extension-indicator>
+          </controlled-radio-button>
+          <template is="dom-if" if="[[showIndicator_(
+              ntpExtension_, prefs.session.restore_on_startup.value)]]">
+            <extension-controlled-indicator
+                extension-id="[[ntpExtension_.id]]"
+                extension-name="[[ntpExtension_.name]]"
+                extension-can-be-disabled="[[ntpExtension_.canBeDisabled]]"
+                on-extension-disable="getNtpExtension_">
+            </extension-controlled-indicator>
           </template>
-        </iron-list>
+          <controlled-radio-button name="[[prefValues_.CONTINUE]]"
+              pref="[[prefs.session.restore_on_startup]]"
+              label="$i18n{onStartupContinue}">
+          </controlled-radio-button>
+          <controlled-radio-button name="[[prefValues_.OPEN_SPECIFIC]]"
+              pref="[[prefs.session.restore_on_startup]]"
+              label="$i18n{onStartupOpenSpecific}">
+          </controlled-radio-button>
+        </settings-radio-group>
       </div>
-      <template is="dom-if" if="[[shouldAllowUrlsEdit_(
-          prefs.session.startup_urls.enforcement)]]" restamp>
-        <div class="list-item" id="addPage">
-          <a is="action-link" class="list-button" on-tap="onAddPageTap_">
-            $i18n{onStartupAddNewPage}
-          </a>
-        </div>
-        <div class="list-item" id="useCurrentPages">
-          <a is="action-link" class="list-button"
-              on-tap="onUseCurrentPagesTap_">
-            $i18n{onStartupUseCurrent}
-          </a>
-        </div>
-      </template>
-      <template is="dom-if" if="[[prefs.session.startup_urls.extensionId]]"
-          restamp>
-        <extension-controlled-indicator
-            extension-id="[[prefs.session.startup_urls.extensionId]]"
-            extension-name="[[prefs.session.startup_urls.controlledByName]]"
-            extension-can-be-disabled="[[
-                prefs.session.startup_urls.extensionCanBeDisabled]]">
-        </extension-controlled-indicator>
-      </template>
     </div>
+    <template is="dom-if"
+        if="[[showStartupUrls_(prefs.session.restore_on_startup.value)]]">
+      <div id="outer" class="layout vertical flex vertical-list">
+        <div id="container" class="scroll-container" scrollable>
+          <iron-list items="[[startupPages_]]" scroll-target="container"
+              preserve-focus>
+            <template>
+              <settings-startup-url-entry model="[[item]]"
+                  tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
+                  last-focused="{{lastFocused_}}"
+                  editable="[[shouldAllowUrlsEdit_(
+                      prefs.session.startup_urls.enforcement)]]">
+              </settings-startup-url-entry>
+            </template>
+          </iron-list>
+        </div>
+        <template is="dom-if" if="[[shouldAllowUrlsEdit_(
+            prefs.session.startup_urls.enforcement)]]" restamp>
+          <div class="list-item" id="addPage">
+            <a is="action-link" class="list-button" on-tap="onAddPageTap_">
+              $i18n{onStartupAddNewPage}
+            </a>
+          </div>
+          <div class="list-item" id="useCurrentPages">
+            <a is="action-link" class="list-button"
+                on-tap="onUseCurrentPagesTap_">
+              $i18n{onStartupUseCurrent}
+            </a>
+          </div>
+        </template>
+        <template is="dom-if" if="[[prefs.session.startup_urls.extensionId]]"
+            restamp>
+          <extension-controlled-indicator
+              extension-id="[[prefs.session.startup_urls.extensionId]]"
+              extension-name="[[prefs.session.startup_urls.controlledByName]]"
+              extension-can-be-disabled="[[
+                  prefs.session.startup_urls.extensionCanBeDisabled]]">
+          </extension-controlled-indicator>
+        </template>
+      </div>
+    </template>
     <template is="dom-if" if="[[showStartupUrlDialog_]]" restamp>
       <settings-startup-url-dialog model="[[startupUrlDialogModel_]]"
           on-close="destroyUrlDialog_">
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js
index ec56f1a1d85..289ed08330f 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js
@@ -13,7 +13,10 @@ Polymer({
   behaviors: [CrScrollableBehavior, WebUIListenerBehavior],
 
   properties: {
-    prefs: Object,
+    prefs: {
+      type: Object,
+      notify: true,
+    },
 
     /**
      * Pages to load upon browser startup.
@@ -29,6 +32,23 @@ Polymer({
 
     /** @private {Object}*/
     lastFocused_: Object,
+
+    /** @private {?NtpExtension} */
+    ntpExtension_: Object,
+
+    /**
+     * Enum values for the 'session.restore_on_startup' preference.
+     * @private {!Object<string, number>}
+     */
+    prefValues_: {
+      readOnly: true,
+      type: Object,
+      value: {
+        CONTINUE: 1,
+        OPEN_NEW_TAB: 5,
+        OPEN_SPECIFIC: 4,
+      },
+    },
   },
 
   /** @private {?settings.StartupUrlsPageBrowserProxy} */
@@ -42,6 +62,12 @@ Polymer({
 
   /** @override */
   attached: function() {
+    this.getNtpExtension_();
+    this.addWebUIListener('update-ntp-extension', function(ntpExtension) {
+      // Note that |ntpExtension| is empty if there is no NTP extension.
+      this.ntpExtension_ = ntpExtension;
+    }.bind(this));
+
     this.browserProxy_ = settings.StartupUrlsPageBrowserProxyImpl.getInstance();
     this.addWebUIListener('update-startup-pages', function(startupPages) {
       // If an "edit" URL dialog was open, close it, because the underlying page
@@ -61,6 +87,14 @@ Polymer({
     }.bind(this));
   },
 
+  /** @private */
+  getNtpExtension_: function() {
+    settings.OnStartupBrowserProxyImpl.getInstance().getNtpExtension().then(
+        function(ntpExtension) {
+          this.ntpExtension_ = ntpExtension;
+        }.bind(this));
+  },
+
   /**
    * @param {!Event} e
    * @private
@@ -68,8 +102,8 @@ Polymer({
   onAddPageTap_: function(e) {
     e.preventDefault();
     this.showStartupUrlDialog_ = true;
-    this.startupUrlDialogAnchor_ = /** @type {!HTMLElement} */ (
-        this.$$('#addPage a[is=action-link]'));
+    this.startupUrlDialogAnchor_ =
+        /** @type {!HTMLElement} */ (this.$$('#addPage a[is=action-link]'));
   },
 
   /** @private */
@@ -96,4 +130,24 @@ Polymer({
     return this.get('prefs.session.startup_urls.enforcement') !=
         chrome.settingsPrivate.Enforcement.ENFORCED;
   },
+
+  /**
+   * @param {?NtpExtension} ntpExtension
+   * @param {number} restoreOnStartup Value of prefs.session.restore_on_startup.
+   * @return {boolean}
+   * @private
+   */
+  showIndicator_: function(ntpExtension, restoreOnStartup) {
+    return !!ntpExtension && restoreOnStartup == this.prefValues_.OPEN_NEW_TAB;
+  },
+
+  /**
+   * Determine whether to show the user defined startup pages.
+   * @param {number} restoreOnStartup Enum value from prefValues_.
+   * @return {boolean} Whether the open specific pages is selected.
+   * @private
+   */
+  showStartupUrls_: function(restoreOnStartup) {
+    return restoreOnStartup == this.prefValues_.OPEN_SPECIFIC;
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js
index b33e31ae931..ff13b193046 100644
--- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js
@@ -14,25 +14,22 @@ var StartupPageInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function StartupUrlsPageBrowserProxy() {}
-
-  StartupUrlsPageBrowserProxy.prototype = {
-    loadStartupPages: assertNotReached,
-
-    useCurrentPages: assertNotReached,
+  class StartupUrlsPageBrowserProxy {
+    loadStartupPages() {}
+    useCurrentPages() {}
 
     /**
      * @param {string} url
      * @return {!Promise<boolean>} Whether the URL is valid.
      */
-    validateStartupPage: assertNotReached,
+    validateStartupPage(url) {}
 
     /**
      * @param {string} url
      * @return {!Promise<boolean>} Whether the URL was actually added, or
      *     ignored because it was invalid.
      */
-    addStartupPage: assertNotReached,
+    addStartupPage(url) {}
 
     /**
      * @param {number} modelIndex
@@ -40,51 +37,48 @@ cr.define('settings', function() {
      * @return {!Promise<boolean>} Whether the URL was actually edited, or
      *     ignored because it was invalid.
      */
-    editStartupPage: assertNotReached,
+    editStartupPage(modelIndex, url) {}
 
     /** @param {number} index */
-    removeStartupPage: assertNotReached,
-  };
+    removeStartupPage(index) {}
+  }
 
   /**
    * @implements {settings.StartupUrlsPageBrowserProxy}
-   * @constructor
    */
-  function StartupUrlsPageBrowserProxyImpl() {}
-
-  cr.addSingletonGetter(StartupUrlsPageBrowserProxyImpl);
-
-  StartupUrlsPageBrowserProxyImpl.prototype = {
+  class StartupUrlsPageBrowserProxyImpl {
     /** @override */
-    loadStartupPages: function() {
+    loadStartupPages() {
       chrome.send('onStartupPrefsPageLoad');
-    },
+    }
 
     /** @override */
-    useCurrentPages: function() {
+    useCurrentPages() {
       chrome.send('setStartupPagesToCurrentPages');
-    },
+    }
 
     /** @override */
-    validateStartupPage: function(url) {
+    validateStartupPage(url) {
       return cr.sendWithPromise('validateStartupPage', url);
-    },
+    }
 
     /** @override */
-    addStartupPage: function(url) {
+    addStartupPage(url) {
       return cr.sendWithPromise('addStartupPage', url);
-    },
+    }
 
     /** @override */
-    editStartupPage: function(modelIndex, url) {
+    editStartupPage(modelIndex, url) {
       return cr.sendWithPromise('editStartupPage', modelIndex, url);
-    },
+    }
 
     /** @override */
-    removeStartupPage: function(index) {
+    removeStartupPage(index) {
       chrome.send('removeStartupPage', [index]);
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(StartupUrlsPageBrowserProxyImpl);
 
   return {
     StartupUrlsPageBrowserProxy: StartupUrlsPageBrowserProxy,
diff --git a/chromium/chrome/browser/resources/cleanup_tool/cleanup_browser_proxy.html b/chromium/chrome/browser/resources/settings/page_visibility.html
index 8b221d7c3b5..8ea50773be0 100644
--- a/chromium/chrome/browser/resources/cleanup_tool/cleanup_browser_proxy.html
+++ b/chromium/chrome/browser/resources/settings/page_visibility.html
@@ -1,2 +1,3 @@
 <link rel="import" href="chrome://resources/html/cr.html">
-<script src="cleanup_browser_proxy.js"></script>
+
+<script src="page_visibility.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/page_visibility.js b/chromium/chrome/browser/resources/settings/page_visibility.js
new file mode 100644
index 00000000000..80d9b2017db
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/page_visibility.js
@@ -0,0 +1,106 @@
+// Copyright 2016 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.
+
+/**
+ * Specifies page visibility in guest mode in cr and cros.
+ * @typedef {{
+ *   advancedSettings: (boolean|undefined),
+ *   appearance: (boolean|undefined|AppearancePageVisibility),
+ *   dateTime: (boolean|undefined|DateTimePageVisibility),
+ *   defaultBrowser: (boolean|undefined),
+ *   downloads: (boolean|undefined|DownloadsPageVisibility),
+ *   multidevice: (boolean|undefined),
+ *   onStartup: (boolean|undefined),
+ *   passwordsAndForms: (boolean|undefined),
+ *   people: (boolean|undefined),
+ *   privacy: (boolean|undefined|PrivacyPageVisibility),
+ *   reset:(boolean|undefined),
+ * }}
+ */
+var GuestModePageVisibility;
+
+/**
+ * @typedef {{
+ *   bookmarksBar: boolean,
+ *   homeButton: boolean,
+ *   pageZoom: boolean,
+ *   setTheme: boolean,
+ *   setWallpaper: boolean,
+ * }}
+ */
+var AppearancePageVisibility;
+
+/**
+ * @typedef {{
+ *   timeZoneSelector: boolean,
+ * }}
+ */
+var DateTimePageVisibility;
+
+/**
+ * @typedef {{
+ *   googleDrive: boolean
+ * }}
+ */
+var DownloadsPageVisibility;
+
+/**
+ * @typedef {{
+ *   networkPrediction: boolean,
+ *   searchPrediction: boolean,
+ * }}
+ */
+var PrivacyPageVisibility;
+
+cr.define('settings', function() {
+  /**
+   * Dictionary defining page visibility.
+   * This is only set when in guest mode. All pages are visible when not set
+   * because polymer only notifies after a property is set.
+   * @type {!GuestModePageVisibility}
+   */
+  var pageVisibility;
+
+  if (loadTimeData.getBoolean('isGuest')) {
+    // "if not chromeos" and "if chromeos" in two completely separate blocks
+    // to work around closure compiler.
+    // <if expr="not chromeos">
+    pageVisibility = {
+      passwordsAndForms: false,
+      people: false,
+      onStartup: false,
+      reset: false,
+      appearance: false,
+      defaultBrowser: false,
+      advancedSettings: false,
+    };
+    // </if>
+    // <if expr="chromeos">
+    pageVisibility = {
+      passwordsAndForms: false,
+      people: false,
+      onStartup: false,
+      reset: false,
+      appearance: {
+        setWallpaper: false,
+        setTheme: false,
+        homeButton: false,
+        bookmarksBar: false,
+        pageZoom: false,
+      },
+      advancedSettings: true,
+      privacy: {
+        searchPrediction: false,
+        networkPrediction: false,
+      },
+      downloads: {
+        googleDrive: false,
+      },
+      multidevice: false,
+    };
+    // </if>
+  }
+
+  return {pageVisibility: pageVisibility};
+});
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html
index 2924c8e62e7..32684422139 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html
@@ -38,7 +38,7 @@
       .md-select-wrapper {
         /* Mitigate for md-select's start padding, to make it look aligned with
          * other elements on the page. */
-        -webkit-margin-start: -12px;
+        -webkit-margin-start: calc(-1 * var(--md-select-side-padding));
       }
 
       .md-select {
@@ -89,8 +89,8 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[title_]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[title_]]</div>
+      <div class="body" slot="body">
         <template is="dom-repeat" items="[[addressWrapper_]]">
           <div class="address-row">
             <template is="dom-repeat" items="[[item]]">
@@ -138,7 +138,7 @@
           </paper-input>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="cancelButton" class="cancel-button"
             on-tap="onCancelTap_">
           $i18n{cancel}
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js
index 06e84498c47..ed4ac4370a6 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js
@@ -50,8 +50,7 @@ Polymer({
 
   /** @override */
   attached: function() {
-    this.countryInfo =
-        settings.address.CountryDetailManagerImpl.getInstance();
+    this.countryInfo = settings.address.CountryDetailManagerImpl.getInstance();
     this.countryInfo.getCountryList().then(function(countryList) {
       this.countries_ = countryList;
 
@@ -106,7 +105,7 @@ Polymer({
 
       this.fire('on-update-address-wrapper');  // For easier testing.
 
-      var dialog = /** @type {HTMLDialogElement} */(this.$.dialog);
+      var dialog = /** @type {HTMLDialogElement} */ (this.$.dialog);
       if (!dialog.open)
         dialog.showModal();
     }.bind(this));
@@ -201,32 +200,33 @@ Polymer({
 cr.define('settings.address', function() {
   /**
    * Creates a wrapper against a single data member for an address.
-   * @param {!chrome.autofillPrivate.AddressEntry} address
-   * @param {!chrome.autofillPrivate.AddressComponent} component
-   * @constructor
    */
-  function AddressComponentUI(address, component) {
-    Object.defineProperty(this, 'value', {
-      get: function() {
-        return this.getValue_();
-      },
-      set: function(newValue) {
-        this.setValue_(newValue);
-      },
-    });
-    this.address_ = address;
-    this.component = component;
-    this.isTextArea =
-        component.field == chrome.autofillPrivate.AddressField.ADDRESS_LINES;
-  }
+  class AddressComponentUI {
+    /**
+     * @param {!chrome.autofillPrivate.AddressEntry} address
+     * @param {!chrome.autofillPrivate.AddressComponent} component
+     */
+    constructor(address, component) {
+      Object.defineProperty(this, 'value', {
+        get: function() {
+          return this.getValue_();
+        },
+        set: function(newValue) {
+          this.setValue_(newValue);
+        },
+      });
+      this.address_ = address;
+      this.component = component;
+      this.isTextArea =
+          component.field == chrome.autofillPrivate.AddressField.ADDRESS_LINES;
+    }
 
-  AddressComponentUI.prototype = {
     /**
      * Gets the value from the address that's associated with this component.
      * @return {string|undefined}
      * @private
      */
-    getValue_: function() {
+    getValue_() {
       var address = this.address_;
       switch (this.component.field) {
         case chrome.autofillPrivate.AddressField.FULL_NAME:
@@ -252,14 +252,14 @@ cr.define('settings.address', function() {
         default:
           assertNotReached();
       }
-    },
+    }
 
     /**
      * Sets the value in the address that's associated with this component.
      * @param {string} value
      * @private
      */
-    setValue_: function(value) {
+    setValue_(value) {
       var address = this.address_;
       switch (this.component.field) {
         case chrome.autofillPrivate.AddressField.FULL_NAME:
@@ -292,52 +292,48 @@ cr.define('settings.address', function() {
         default:
           assertNotReached();
       }
-    },
-  };
+    }
+  }
 
   /** @interface */
-  function CountryDetailManager() {}
-  CountryDetailManager.prototype = {
+  class CountryDetailManager {
     /**
      * Gets the list of available countries.
      * The default country will be first, followed by a separator, followed by
      * an alphabetized list of countries available.
      * @return {!Promise<!Array<!chrome.autofillPrivate.CountryEntry>>}
      */
-    getCountryList: assertNotReached,
+    getCountryList() {}
 
     /**
      * Gets the address format for a given country code.
      * @param {string} countryCode
      * @return {!Promise<!chrome.autofillPrivate.AddressComponents>}
      */
-    getAddressFormat: assertNotReached,
-  };
+    getAddressFormat(countryCode) {}
+  }
 
   /**
    * Default implementation. Override for testing.
    * @implements {settings.address.CountryDetailManager}
-   * @constructor
    */
-  function CountryDetailManagerImpl() {}
-  cr.addSingletonGetter(CountryDetailManagerImpl);
-  CountryDetailManagerImpl.prototype = {
-    __proto__: CountryDetailManager,
-
+  class CountryDetailManagerImpl {
     /** @override */
-    getCountryList: function() {
+    getCountryList() {
       return new Promise(function(callback) {
         chrome.autofillPrivate.getCountryList(callback);
       });
-    },
+    }
 
     /** @override */
-    getAddressFormat: function(countryCode) {
+    getAddressFormat(countryCode) {
       return new Promise(function(callback) {
         chrome.autofillPrivate.getAddressComponents(countryCode, callback);
       });
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(CountryDetailManagerImpl);
 
   return {
     AddressComponentUI: AddressComponentUI,
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
index 5288cc65da8..fe28ea4c028 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
@@ -6,7 +6,7 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
@@ -87,7 +87,7 @@
     <div class="list-frame">
       <div id="addressList" class="vertical-list">
         <template is="dom-repeat" items="[[addresses]]">
-          <div class="list-item two-line">
+          <div class="list-item">
             <div class="start">
               <span id="addressSummary">
                 <span class="ellipses">
@@ -102,9 +102,10 @@
               </span>
             </div>
             <template is="dom-if" if="[[item.metadata.isLocal]]">
-              <paper-icon-button id="addressMenu" icon="cr:more-vert"
-                  on-tap="onAddressMenuTap_" title="$i18n{moreActions}">
-              </paper-icon-button>
+              <button is="paper-icon-button-light" id="addressMenu"
+                  class="icon-more-vert" on-tap="onAddressMenuTap_"
+                  title="$i18n{moreActions}">
+              </button>
             </template>
             <template is="dom-if" if="[[!item.metadata.isLocal]]">
               <button is="paper-icon-button-light" class="icon-external"
@@ -145,7 +146,7 @@
       </div>
       <div id="creditCardList" class="vertical-list list-with-header">
         <template is="dom-repeat" items="[[creditCards]]">
-          <div class="list-item two-line">
+          <div class="list-item">
             <div class="type-column">
               <span id="creditCardLabel">[[item.metadata.summaryLabel]]</span>
               <span class="payments-label" hidden$="[[item.metadata.isLocal]]">
@@ -161,12 +162,14 @@
               <div id="creditCardExpiration"
                   class="expiration-date">[[expiration_(item)]]</div>
               <template is="dom-if" if="[[showDots_(item.metadata)]]">
-                <paper-icon-button id="creditCardMenu" icon="cr:more-vert"
-                    on-tap="onCreditCardMenuTap_" title="$i18n{moreActions}">
-                </paper-icon-button>
+                <button is="paper-icon-button-light" id="creditCardMenu"
+                    class="icon-more-vert" title="$i18n{moreActions}"
+                    on-tap="onCreditCardMenuTap_">
+                </button>
               </template>
               <template is="dom-if" if="[[!showDots_(item.metadata)]]">
-                <button is="paper-icon-button-light" class="icon-external"
+                <button is="paper-icon-button-light" id="remoteCreditCardLink"
+                    class="icon-external"
                     on-tap="onRemoteEditCreditCardTap_" actionable></button>
               </template>
             </div>
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
index 3cfa7102bf3..76f7afaece4 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
@@ -11,460 +11,454 @@
  * Interface for all callbacks to the autofill API.
  * @interface
  */
-function AutofillManager() {}
-
-/** @typedef {chrome.autofillPrivate.AddressEntry} */
-AutofillManager.AddressEntry;
-
-/** @typedef {chrome.autofillPrivate.CreditCardEntry} */
-AutofillManager.CreditCardEntry;
-
-AutofillManager.prototype = {
+class AutofillManager {
   /**
    * Add an observer to the list of addresses.
    * @param {function(!Array<!AutofillManager.AddressEntry>):void} listener
    */
-  addAddressListChangedListener: assertNotReached,
+  addAddressListChangedListener(listener) {}
 
   /**
    * Remove an observer from the list of addresses.
    * @param {function(!Array<!AutofillManager.AddressEntry>):void} listener
    */
-  removeAddressListChangedListener: assertNotReached,
+  removeAddressListChangedListener(listener) {}
 
   /**
    * Request the list of addresses.
    * @param {function(!Array<!AutofillManager.AddressEntry>):void} callback
    */
-  getAddressList: assertNotReached,
+  getAddressList(callback) {}
 
   /**
    * Saves the given address.
    * @param {!AutofillManager.AddressEntry} address
    */
-  saveAddress: assertNotReached,
+  saveAddress(address) {}
 
   /** @param {string} guid The guid of the address to remove.  */
-  removeAddress: assertNotReached,
+  removeAddress(guid) {}
 
   /**
    * Add an observer to the list of credit cards.
    * @param {function(!Array<!AutofillManager.CreditCardEntry>):void} listener
    */
-  addCreditCardListChangedListener: assertNotReached,
+  addCreditCardListChangedListener(listener) {}
 
   /**
    * Remove an observer from the list of credit cards.
    * @param {function(!Array<!AutofillManager.CreditCardEntry>):void} listener
    */
-  removeCreditCardListChangedListener: assertNotReached,
+  removeCreditCardListChangedListener(listener) {}
 
   /**
    * Request the list of credit cards.
    * @param {function(!Array<!AutofillManager.CreditCardEntry>):void} callback
    */
-  getCreditCardList: assertNotReached,
+  getCreditCardList(callback) {}
 
   /** @param {string} guid The GUID of the credit card to remove.  */
-  removeCreditCard: assertNotReached,
+  removeCreditCard(guid) {}
 
   /** @param {string} guid The GUID to credit card to remove from the cache. */
-  clearCachedCreditCard: assertNotReached,
+  clearCachedCreditCard(guid) {}
 
   /**
    * Saves the given credit card.
    * @param {!AutofillManager.CreditCardEntry} creditCard
    */
-  saveCreditCard: assertNotReached,
-};
+  saveCreditCard(creditCard) {}
+}
+
+/** @typedef {chrome.autofillPrivate.AddressEntry} */
+AutofillManager.AddressEntry;
+
+/** @typedef {chrome.autofillPrivate.CreditCardEntry} */
+AutofillManager.CreditCardEntry;
 
 /**
  * Implementation that accesses the private API.
  * @implements {AutofillManager}
- * @constructor
  */
-function AutofillManagerImpl() {}
-cr.addSingletonGetter(AutofillManagerImpl);
-
-AutofillManagerImpl.prototype = {
-  __proto__: AutofillManager,
-
+class AutofillManagerImpl {
   /** @override */
-  addAddressListChangedListener: function(listener) {
+  addAddressListChangedListener(listener) {
     chrome.autofillPrivate.onAddressListChanged.addListener(listener);
-  },
+  }
 
   /** @override */
-  removeAddressListChangedListener: function(listener) {
+  removeAddressListChangedListener(listener) {
     chrome.autofillPrivate.onAddressListChanged.removeListener(listener);
-  },
+  }
 
   /** @override */
-  getAddressList: function(callback) {
+  getAddressList(callback) {
     chrome.autofillPrivate.getAddressList(callback);
-  },
+  }
 
   /** @override */
-  saveAddress: function(address) {
+  saveAddress(address) {
     chrome.autofillPrivate.saveAddress(address);
-  },
+  }
 
   /** @override */
-  removeAddress: function(guid) {
+  removeAddress(guid) {
     chrome.autofillPrivate.removeEntry(assert(guid));
-  },
+  }
 
   /** @override */
-  addCreditCardListChangedListener: function(listener) {
+  addCreditCardListChangedListener(listener) {
     chrome.autofillPrivate.onCreditCardListChanged.addListener(listener);
-  },
+  }
 
   /** @override */
-  removeCreditCardListChangedListener: function(listener) {
+  removeCreditCardListChangedListener(listener) {
     chrome.autofillPrivate.onCreditCardListChanged.removeListener(listener);
-  },
+  }
 
   /** @override */
-  getCreditCardList: function(callback) {
+  getCreditCardList(callback) {
     chrome.autofillPrivate.getCreditCardList(callback);
-  },
+  }
 
   /** @override */
-  removeCreditCard: function(guid) {
+  removeCreditCard(guid) {
     chrome.autofillPrivate.removeEntry(assert(guid));
-  },
+  }
 
   /** @override */
-  clearCachedCreditCard: function(guid) {
+  clearCachedCreditCard(guid) {
     chrome.autofillPrivate.maskCreditCard(assert(guid));
-  },
+  }
 
   /** @override */
-  saveCreditCard: function(creditCard) {
+  saveCreditCard(creditCard) {
     chrome.autofillPrivate.saveCreditCard(creditCard);
   }
-};
+}
+
+cr.addSingletonGetter(AutofillManagerImpl);
 
 (function() {
-  'use strict';
-
-  Polymer({
-    is: 'settings-autofill-section',
-
-    behaviors: [I18nBehavior],
-
-    properties: {
-      /**
-       * An array of saved addresses.
-       * @type {!Array<!AutofillManager.AddressEntry>}
-       */
-      addresses: Array,
-
-      /**
-       * The model for any address related action menus or dialogs.
-       * @private {?chrome.autofillPrivate.AddressEntry}
-       */
-      activeAddress: Object,
-
-      /** @private */
-      showAddressDialog_: Boolean,
-
-      /**
-       * An array of saved credit cards.
-       * @type {!Array<!AutofillManager.CreditCardEntry>}
-       */
-      creditCards: Array,
-
-      /**
-       * The model for any credit card related action menus or dialogs.
-       * @private {?chrome.autofillPrivate.CreditCardEntry}
-       */
-      activeCreditCard: Object,
-
-      /** @private */
-      showCreditCardDialog_: Boolean,
-    },
-
-    listeners: {
-      'save-address': 'saveAddress_',
-      'save-credit-card': 'saveCreditCard_',
-    },
+'use strict';
 
-    /**
-     * The element to return focus to, when the currently active dialog is
-     * closed.
-     * @private {?HTMLElement}
-     */
-    activeDialogAnchor_: null,
+Polymer({
+  is: 'settings-autofill-section',
 
-    /**
-     * @type {AutofillManager}
-     * @private
-     */
-    autofillManager_: null,
+  behaviors: [I18nBehavior],
 
+  properties: {
     /**
-     * @type {?function(!Array<!AutofillManager.AddressEntry>)}
-     * @private
+     * An array of saved addresses.
+     * @type {!Array<!AutofillManager.AddressEntry>}
      */
-    setAddressesListener_: null,
+    addresses: Array,
 
     /**
-     * @type {?function(!Array<!AutofillManager.CreditCardEntry>)}
-     * @private
+     * The model for any address related action menus or dialogs.
+     * @private {?chrome.autofillPrivate.AddressEntry}
      */
-    setCreditCardsListener_: null,
-
-    /** @override */
-    attached: function() {
-      // Create listener functions.
-      /** @type {function(!Array<!AutofillManager.AddressEntry>)} */
-      var setAddressesListener = function(list) {
-        this.addresses = list;
-      }.bind(this);
-
-      /** @type {function(!Array<!AutofillManager.CreditCardEntry>)} */
-      var setCreditCardsListener = function(list) {
-        this.creditCards = list;
-      }.bind(this);
-
-      // Remember the bound reference in order to detach.
-      this.setAddressesListener_ = setAddressesListener;
-      this.setCreditCardsListener_ = setCreditCardsListener;
-
-      // Set the managers. These can be overridden by tests.
-      this.autofillManager_ = AutofillManagerImpl.getInstance();
-
-      // Request initial data.
-      this.autofillManager_.getAddressList(setAddressesListener);
-      this.autofillManager_.getCreditCardList(setCreditCardsListener);
-
-      // Listen for changes.
-      this.autofillManager_.addAddressListChangedListener(setAddressesListener);
-      this.autofillManager_.addCreditCardListChangedListener(
-          setCreditCardsListener);
-    },
-
-    /** @override */
-    detached: function() {
-      this.autofillManager_.removeAddressListChangedListener(
-          /** @type {function(!Array<!AutofillManager.AddressEntry>)} */(
-          this.setAddressesListener_));
-      this.autofillManager_.removeCreditCardListChangedListener(
-          /** @type {function(!Array<!AutofillManager.CreditCardEntry>)} */(
-          this.setCreditCardsListener_));
-    },
+    activeAddress: Object,
+
+    /** @private */
+    showAddressDialog_: Boolean,
 
     /**
-     * Formats the expiration date so it's displayed as MM/YYYY.
-     * @param {!chrome.autofillPrivate.CreditCardEntry} item
-     * @return {string}
-     * @private
+     * An array of saved credit cards.
+     * @type {!Array<!AutofillManager.CreditCardEntry>}
      */
-    expiration_: function(item) {
-      return item.expirationMonth + '/' + item.expirationYear;
-    },
+    creditCards: Array,
 
     /**
-     * Open the address action menu.
-     * @param {!Event} e The polymer event.
-     * @private
+     * The model for any credit card related action menus or dialogs.
+     * @private {?chrome.autofillPrivate.CreditCardEntry}
      */
-    onAddressMenuTap_: function(e) {
-      var menuEvent = /** @type {!{model: !{item: !Object}}} */(e);
+    activeCreditCard: Object,
 
-      /* TODO(scottchen): drop the [dataHost][dataHost] once this bug is fixed:
-       https://github.com/Polymer/polymer/issues/2574 */
-      var item = menuEvent.model['dataHost']['dataHost'].item;
+    /** @private */
+    showCreditCardDialog_: Boolean,
+  },
 
-      // Copy item so dialog won't update model on cancel.
-      this.activeAddress = /** @type {!chrome.autofillPrivate.AddressEntry} */(
-          Object.assign({}, item));
+  listeners: {
+    'save-address': 'saveAddress_',
+    'save-credit-card': 'saveCreditCard_',
+  },
 
-      var dotsButton = /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget);
-      /** @type {!CrActionMenuElement} */ (
-          this.$.addressSharedMenu).showAt(dotsButton);
-      this.activeDialogAnchor_ = dotsButton;
-    },
+  /**
+   * The element to return focus to, when the currently active dialog is
+   * closed.
+   * @private {?HTMLElement}
+   */
+  activeDialogAnchor_: null,
 
-    /**
-     * Handles tapping on the "Add address" button.
-     * @param {!Event} e The polymer event.
-     * @private
-     */
-    onAddAddressTap_: function(e) {
-      e.preventDefault();
-      this.activeAddress = {};
-      this.showAddressDialog_ = true;
-      this.activeDialogAnchor_ = this.$.addAddress;
-    },
+  /**
+   * @type {AutofillManager}
+   * @private
+   */
+  autofillManager_: null,
 
-    /** @private */
-    onAddressDialogClosed_: function() {
-      this.showAddressDialog_ = false;
-      cr.ui.focusWithoutInk(assert(this.activeDialogAnchor_));
-      this.activeDialogAnchor_ = null;
-    },
+  /**
+   * @type {?function(!Array<!AutofillManager.AddressEntry>)}
+   * @private
+   */
+  setAddressesListener_: null,
 
-    /**
-     * Handles tapping on the "Edit" address button.
-     * @param {!Event} e The polymer event.
-     * @private
-     */
-    onMenuEditAddressTap_: function(e) {
-      e.preventDefault();
-      this.showAddressDialog_ = true;
-      this.$.addressSharedMenu.close();
-    },
+  /**
+   * @type {?function(!Array<!AutofillManager.CreditCardEntry>)}
+   * @private
+   */
+  setCreditCardsListener_: null,
 
-    /** @private */
-    onRemoteEditAddressTap_: function() {
-      window.open(this.i18n('manageAddressesUrl'));
-    },
+  /** @override */
+  attached: function() {
+    // Create listener functions.
+    /** @type {function(!Array<!AutofillManager.AddressEntry>)} */
+    var setAddressesListener = function(list) {
+      this.addresses = list;
+    }.bind(this);
+
+    /** @type {function(!Array<!AutofillManager.CreditCardEntry>)} */
+    var setCreditCardsListener = function(list) {
+      this.creditCards = list;
+    }.bind(this);
+
+    // Remember the bound reference in order to detach.
+    this.setAddressesListener_ = setAddressesListener;
+    this.setCreditCardsListener_ = setCreditCardsListener;
+
+    // Set the managers. These can be overridden by tests.
+    this.autofillManager_ = AutofillManagerImpl.getInstance();
+
+    // Request initial data.
+    this.autofillManager_.getAddressList(setAddressesListener);
+    this.autofillManager_.getCreditCardList(setCreditCardsListener);
+
+    // Listen for changes.
+    this.autofillManager_.addAddressListChangedListener(setAddressesListener);
+    this.autofillManager_.addCreditCardListChangedListener(
+        setCreditCardsListener);
+  },
 
-    /**
-     * Handles tapping on the "Remove" address button.
-     * @private
-     */
-    onMenuRemoveAddressTap_: function() {
-      this.autofillManager_.removeAddress(
-          /** @type {string} */(this.activeAddress.guid));
-      this.$.addressSharedMenu.close();
-    },
+  /** @override */
+  detached: function() {
+    this.autofillManager_.removeAddressListChangedListener(
+        /** @type {function(!Array<!AutofillManager.AddressEntry>)} */ (
+            this.setAddressesListener_));
+    this.autofillManager_.removeCreditCardListChangedListener(
+        /** @type {function(!Array<!AutofillManager.CreditCardEntry>)} */ (
+            this.setCreditCardsListener_));
+  },
 
-    /**
-     * Opens the credit card action menu.
-     * @param {!Event} e The polymer event.
-     * @private
-     */
-    onCreditCardMenuTap_: function(e) {
-      var menuEvent = /** @type {!{model: !{item: !Object}}} */(e);
+  /**
+   * Formats the expiration date so it's displayed as MM/YYYY.
+   * @param {!chrome.autofillPrivate.CreditCardEntry} item
+   * @return {string}
+   * @private
+   */
+  expiration_: function(item) {
+    return item.expirationMonth + '/' + item.expirationYear;
+  },
 
-      /* TODO(scottchen): drop the [dataHost][dataHost] once this bug is fixed:
-       https://github.com/Polymer/polymer/issues/2574 */
-      var item = menuEvent.model['dataHost']['dataHost'].item;
+  /**
+   * Open the address action menu.
+   * @param {!Event} e The polymer event.
+   * @private
+   */
+  onAddressMenuTap_: function(e) {
+    var menuEvent = /** @type {!{model: !{item: !Object}}} */ (e);
 
-      // Copy item so dialog won't update model on cancel.
-      this.activeCreditCard =
-          /** @type {!chrome.autofillPrivate.CreditCardEntry} */(
-              Object.assign({}, item));
+    /* TODO(scottchen): drop the [dataHost][dataHost] once this bug is fixed:
+     https://github.com/Polymer/polymer/issues/2574 */
+    var item = menuEvent.model['dataHost']['dataHost'].item;
 
-      var dotsButton = /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget);
-      /** @type {!CrActionMenuElement} */ (
-          this.$.creditCardSharedMenu).showAt(dotsButton);
-      this.activeDialogAnchor_ = dotsButton;
-    },
+    // Copy item so dialog won't update model on cancel.
+    this.activeAddress = /** @type {!chrome.autofillPrivate.AddressEntry} */ (
+        Object.assign({}, item));
 
-    /**
-     * Handles tapping on the "Add credit card" button.
-     * @param {!Event} e
-     * @private
-     */
-    onAddCreditCardTap_: function(e) {
-      e.preventDefault();
-      var date = new Date();  // Default to current month/year.
-      var expirationMonth = date.getMonth() + 1;  // Months are 0 based.
-      this.activeCreditCard = {
-        expirationMonth: expirationMonth.toString(),
-        expirationYear: date.getFullYear().toString(),
-      };
-      this.showCreditCardDialog_ = true;
-      this.activeDialogAnchor_ = this.$.addCreditCard;
-    },
+    var dotsButton = /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget);
+    /** @type {!CrActionMenuElement} */ (this.$.addressSharedMenu)
+        .showAt(dotsButton);
+    this.activeDialogAnchor_ = dotsButton;
+  },
 
-    /** @private */
-    onCreditCardDialogClosed_: function() {
-      this.showCreditCardDialog_ = false;
-      cr.ui.focusWithoutInk(assert(this.activeDialogAnchor_));
-      this.activeDialogAnchor_ = null;
-    },
+  /**
+   * Handles tapping on the "Add address" button.
+   * @param {!Event} e The polymer event.
+   * @private
+   */
+  onAddAddressTap_: function(e) {
+    e.preventDefault();
+    this.activeAddress = {};
+    this.showAddressDialog_ = true;
+    this.activeDialogAnchor_ = this.$.addAddress;
+  },
 
-    /**
-     * Handles tapping on the "Edit" credit card button.
-     * @param {!Event} e The polymer event.
-     * @private
-     */
-    onMenuEditCreditCardTap_: function(e) {
-      e.preventDefault();
+  /** @private */
+  onAddressDialogClosed_: function() {
+    this.showAddressDialog_ = false;
+    cr.ui.focusWithoutInk(assert(this.activeDialogAnchor_));
+    this.activeDialogAnchor_ = null;
+  },
 
-      if (this.activeCreditCard.metadata.isLocal)
-        this.showCreditCardDialog_ = true;
-      else
-        this.onRemoteEditCreditCardTap_();
+  /**
+   * Handles tapping on the "Edit" address button.
+   * @param {!Event} e The polymer event.
+   * @private
+   */
+  onMenuEditAddressTap_: function(e) {
+    e.preventDefault();
+    this.showAddressDialog_ = true;
+    this.$.addressSharedMenu.close();
+  },
 
-      this.$.creditCardSharedMenu.close();
-    },
+  /** @private */
+  onRemoteEditAddressTap_: function() {
+    window.open(this.i18n('manageAddressesUrl'));
+  },
 
-    /** @private */
-    onRemoteEditCreditCardTap_: function() {
-      window.open(this.i18n('manageCreditCardsUrl'));
-    },
+  /**
+   * Handles tapping on the "Remove" address button.
+   * @private
+   */
+  onMenuRemoveAddressTap_: function() {
+    this.autofillManager_.removeAddress(
+        /** @type {string} */ (this.activeAddress.guid));
+    this.$.addressSharedMenu.close();
+  },
 
-    /**
-     * Handles tapping on the "Remove" credit card button.
-     * @private
-     */
-    onMenuRemoveCreditCardTap_: function() {
-      this.autofillManager_.removeCreditCard(
-          /** @type {string} */(this.activeCreditCard.guid));
-      this.$.creditCardSharedMenu.close();
-    },
+  /**
+   * Opens the credit card action menu.
+   * @param {!Event} e The polymer event.
+   * @private
+   */
+  onCreditCardMenuTap_: function(e) {
+    var menuEvent = /** @type {!{model: !{item: !Object}}} */ (e);
+
+    /* TODO(scottchen): drop the [dataHost][dataHost] once this bug is fixed:
+     https://github.com/Polymer/polymer/issues/2574 */
+    var item = menuEvent.model['dataHost']['dataHost'].item;
+
+    // Copy item so dialog won't update model on cancel.
+    this.activeCreditCard =
+        /** @type {!chrome.autofillPrivate.CreditCardEntry} */ (
+            Object.assign({}, item));
+
+    var dotsButton = /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget);
+    /** @type {!CrActionMenuElement} */ (this.$.creditCardSharedMenu)
+        .showAt(dotsButton);
+    this.activeDialogAnchor_ = dotsButton;
+  },
 
-    /**
-     * Handles tapping on the "Clear copy" button for cached credit cards.
-     * @private
-     */
-    onMenuClearCreditCardTap_: function() {
-      this.autofillManager_.clearCachedCreditCard(
-          /** @type {string} */(this.activeCreditCard.guid));
-      this.$.creditCardSharedMenu.close();
-    },
+  /**
+   * Handles tapping on the "Add credit card" button.
+   * @param {!Event} e
+   * @private
+   */
+  onAddCreditCardTap_: function(e) {
+    e.preventDefault();
+    var date = new Date();  // Default to current month/year.
+    var expirationMonth = date.getMonth() + 1;  // Months are 0 based.
+    this.activeCreditCard = {
+      expirationMonth: expirationMonth.toString(),
+      expirationYear: date.getFullYear().toString(),
+    };
+    this.showCreditCardDialog_ = true;
+    this.activeDialogAnchor_ = this.$.addCreditCard;
+  },
 
-    /**
-     * The 3-dot menu should not be shown if the card is entirely remote.
-     * @param {!chrome.autofillPrivate.AutofillMetadata} metadata
-     * @return {boolean}
-     * @private
-     */
-    showDots_: function(metadata) {
-      return !!(metadata.isLocal || metadata.isCached);
-    },
+  /** @private */
+  onCreditCardDialogClosed_: function() {
+    this.showCreditCardDialog_ = false;
+    cr.ui.focusWithoutInk(assert(this.activeDialogAnchor_));
+    this.activeDialogAnchor_ = null;
+  },
 
-    /**
-     * Returns true if the list exists and has items.
-     * @param {Array<Object>} list
-     * @return {boolean}
-     * @private
-     */
-    hasSome_: function(list) {
-      return !!(list && list.length);
-    },
+  /**
+   * Handles tapping on the "Edit" credit card button.
+   * @param {!Event} e The polymer event.
+   * @private
+   */
+  onMenuEditCreditCardTap_: function(e) {
+    e.preventDefault();
 
-    /**
-     * Listens for the save-address event, and calls the private API.
-     * @param {!Event} event
-     * @private
-     */
-    saveAddress_: function(event) {
-      this.autofillManager_.saveAddress(event.detail);
-    },
+    if (this.activeCreditCard.metadata.isLocal)
+      this.showCreditCardDialog_ = true;
+    else
+      this.onRemoteEditCreditCardTap_();
 
-    /**
-     * Listens for the save-credit-card event, and calls the private API.
-     * @param {!Event} event
-     * @private
-     */
-    saveCreditCard_: function(event) {
-      this.autofillManager_.saveCreditCard(event.detail);
-    },
+    this.$.creditCardSharedMenu.close();
+  },
 
-    /**
-     * @private
-     * @param {boolean} toggleValue
-     * @return {string}
-     */
-    getOnOffLabel_: function(toggleValue) {
-      return toggleValue ? this.i18n('toggleOn') : this.i18n('toggleOff');
-    }
-  });
+  /** @private */
+  onRemoteEditCreditCardTap_: function() {
+    window.open(this.i18n('manageCreditCardsUrl'));
+  },
+
+  /**
+   * Handles tapping on the "Remove" credit card button.
+   * @private
+   */
+  onMenuRemoveCreditCardTap_: function() {
+    this.autofillManager_.removeCreditCard(
+        /** @type {string} */ (this.activeCreditCard.guid));
+    this.$.creditCardSharedMenu.close();
+  },
+
+  /**
+   * Handles tapping on the "Clear copy" button for cached credit cards.
+   * @private
+   */
+  onMenuClearCreditCardTap_: function() {
+    this.autofillManager_.clearCachedCreditCard(
+        /** @type {string} */ (this.activeCreditCard.guid));
+    this.$.creditCardSharedMenu.close();
+  },
+
+  /**
+   * The 3-dot menu should not be shown if the card is entirely remote.
+   * @param {!chrome.autofillPrivate.AutofillMetadata} metadata
+   * @return {boolean}
+   * @private
+   */
+  showDots_: function(metadata) {
+    return !!(metadata.isLocal || metadata.isCached);
+  },
+
+  /**
+   * Returns true if the list exists and has items.
+   * @param {Array<Object>} list
+   * @return {boolean}
+   * @private
+   */
+  hasSome_: function(list) {
+    return !!(list && list.length);
+  },
+
+  /**
+   * Listens for the save-address event, and calls the private API.
+   * @param {!Event} event
+   * @private
+   */
+  saveAddress_: function(event) {
+    this.autofillManager_.saveAddress(event.detail);
+  },
+
+  /**
+   * Listens for the save-credit-card event, and calls the private API.
+   * @param {!Event} event
+   * @private
+   */
+  saveCreditCard_: function(event) {
+    this.autofillManager_.saveCreditCard(event.detail);
+  },
+
+  /**
+   * @private
+   * @param {boolean} toggleValue
+   * @return {string}
+   */
+  getOnOffLabel_: function(toggleValue) {
+    return toggleValue ? this.i18n('toggleOn') : this.i18n('toggleOff');
+  }
+});
 })();
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
index dd338849848..abd53aef981 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
@@ -9,49 +9,49 @@
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-credit-card-edit-dialog">
-  <style include="settings-shared md-select">
-    paper-input {
-      width: var(--paper-input-max-width);
-    }
+  <template>
+    <style include="settings-shared md-select">
+      paper-input {
+        width: var(--paper-input-max-width);
+      }
 
-    .md-select-wrapper {
-      /* Mitigate for md-select's start padding, to make it look aligned with
-       * other elements on the page. */
-      -webkit-margin-start: -12px;
-    }
+      .md-select-wrapper {
+        /* Mitigate for md-select's start padding, to make it look aligned with
+         * other elements on the page. */
+        -webkit-margin-start: calc(-1 * var(--md-select-side-padding));
+      }
 
-    .md-select-wrapper + .md-select-wrapper {
-      -webkit-margin-start: 8px;
-    }
+      .md-select-wrapper + .md-select-wrapper {
+        -webkit-margin-start: 8px;
+      }
 
-    #expired {
-      align-items: center;
-      background-color: var(--paper-red-50);
-      color: var(--settings-error-color);
-      display: flex;
-      height: 40px;
-      margin-top: 12px;
-      padding: 0 0 0 8px;
-    }
+      #expired {
+        align-items: center;
+        background-color: var(--paper-red-50);
+        color: var(--settings-error-color);
+        display: flex;
+        height: 40px;
+        margin-top: 12px;
+        padding: 0 0 0 8px;
+      }
 
-    #month {
-      width: 70px;
-    }
+      #month {
+        width: 70px;
+      }
 
-    #year {
-      width: 100px;
-    }
+      #year {
+        width: 100px;
+      }
 
-    label {
-      color: var(--light-theme-secondary-color);
-      display: block;
-      padding-top: 8px;
-    }
-  </style>
-  <template>
+      label {
+        color: var(--light-theme-secondary-color);
+        display: block;
+        padding-top: 8px;
+      }
+    </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[title_]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[title_]]</div>
+      <div class="body" slot="body">
         <paper-input id="nameInput" label="$i18n{creditCardName}"
             value="{{creditCard.name}}" always-float-label autofocus
             on-input="onCreditCardNameOrNumberChanged_">
@@ -81,11 +81,13 @@
           </select>
           <span class="md-select-underline"></span>
         </span>
-        <span id="expired" hidden="[[!checkIfCardExpired_(expirationMonth_, expirationYear_)]]">
+        <span id="expired"
+            hidden="[[!checkIfCardExpired_(expirationMonth_, expirationYear_)]]"
+            >
           $i18n{creditCardExpired}
         </span>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="cancelButton" class="cancel-button"
             on-tap="onCancelButtonTap_">$i18n{cancel}</paper-button>
         <paper-button id="saveButton" class="action-button"
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
index 9ee7c53ef69..922c08eb137 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
@@ -34,7 +34,7 @@ Polymer({
     monthList_: {
       type: Array,
       value: [
-        '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12',
+        '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'
       ],
     },
 
@@ -61,9 +61,10 @@ Polymer({
    */
   checkIfCardExpired_: function(expirationMonth_, expirationYear_) {
     var now = new Date();
-    return (expirationYear_ < now.getFullYear() ||
-           (expirationYear_ == now.getFullYear() &&
-            expirationMonth_ <= now.getMonth()));
+    return (
+        expirationYear_ < now.getFullYear() ||
+        (expirationYear_ == now.getFullYear() &&
+         expirationMonth_ <= now.getMonth()));
   },
 
   /** @override */
@@ -127,8 +128,8 @@ Polymer({
 
     // If the card is expired, reflect the error to the user.
     // Otherwise, update the card, save and close the dialog.
-    if (!this.checkIfCardExpired_(this.expirationMonth_,
-                                  this.expirationYear_)) {
+    if (!this.checkIfCardExpired_(
+            this.expirationMonth_, this.expirationYear_)) {
       this.creditCard.expirationYear = this.expirationYear_;
       this.creditCard.expirationMonth = this.expirationMonth_;
       this.fire('save-credit-card', this.creditCard);
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html
index febfe0a5fc1..4c8f585aad5 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html
@@ -2,7 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -33,13 +33,14 @@
         width: var(--paper-input-max-width);
       }
 
-      paper-icon-button {
-        --iron-icon-fill-color: var(--paper-grey-600);
+      button[is='paper-icon-button-light'] {
+        -webkit-margin-start: 2px;
+        background-size: 24px;  /* Other buttons are sized by --cr-icon-size. */
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{passwordDetailsTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{passwordDetailsTitle}</div>
+      <div class="body" slot="body">
         <paper-input id="websiteInput" label="$i18n{editPasswordWebsiteLabel}"
             value="[[item.loginPair.urls.link]]" readonly always-float-label
             on-tap="onReadonlyInputTap_">
@@ -55,15 +56,16 @@
               value="[[getPassword_(item, password)]]" readonly
             on-tap="onReadonlyInputTap_">
           </paper-input>
-          <paper-icon-button id="showPasswordButton"
+          <button is="paper-icon-button-light" id="showPasswordButton"
+              class$="[[getIconClass_(item, password)]]"
               hidden$="[[item.federationText]]"
-              icon="settings:visibility" on-tap="onShowPasswordButtonTap_"
+              on-tap="onShowPasswordButtonTap_"
               title="[[showPasswordTitle_(password,
                   '$i18nPolymer{hidePassword}','$i18nPolymer{showPassword}')]]">
-          </paper-icon-button>
+          </button>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="action-button" on-tap="onActionButtonTap_">
           $i18n{passwordsDone}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.js
index 94f958b5709..6d76f1b8f80 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.js
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.js
@@ -56,6 +56,15 @@ Polymer({
   },
 
   /**
+   * Get the right icon to display when hiding/showing a password.
+   * @return {string}
+   * @private
+   */
+  getIconClass_: function() {
+    return this.password ? 'icon-visibility-off' : 'icon-visibility';
+  },
+
+  /**
    * Gets the text of the password. Will use the value of |password| unless it
    * cannot be shown, in which case it will be spaces. It can also be the
    * federated text.
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
index 956026b32d5..e7dd128c311 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
@@ -1,7 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../focus_row_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="passwords_shared_css.html">
@@ -22,33 +22,30 @@
     <div class="list-item" focus-row-container>
       <div class="website-column no-min-width"
           title="[[item.loginPair.urls.link]]">
-        <a id="originUrl" target="_blank" class="selectable no-min-width"
+        <a id="originUrl" target="_blank" class="no-min-width"
             href="[[item.loginPair.urls.link]]"
             focus-row-control focus-type="originUrl">
-          <span class="text-elide">
-            [[item.loginPair.urls.shown]]
-          </span>
+          <span class="text-elide">[[item.loginPair.urls.shown]]</span>
         </a>
       </div>
-      <div class="username-column selectable text-elide"
+      <div class="username-column text-elide"
            id="username">[[item.loginPair.username]]</div>
       <div class="password-column">
         <template is="dom-if" if="[[!item.federationText]]">
           <!-- Password type and disabled in order to match mock. -->
-          <input id="password" type="password" class="password-field text-elide"
-               disabled value=
-               "[[getEmptyPassword_(item.numCharactersInPassword)]]">
+          <input id="password" aria-label=$i18n{editPasswordPasswordLabel}
+              type="password" class="password-field text-elide" disabled
+              value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
           </input>
         </template>
         <template is="dom-if" if="[[item.federationText]]">
-          <span class="password-field selectable text-elide">
-            [[item.federationText]]
-          </span>
+          <span class="password-field text-elide">[[item.federationText]]</span>
         </template>
-        <paper-icon-button id="passwordMenu" icon="cr:more-vert"
-            on-tap="onPasswordMenuTap_" title="$i18n{moreActions}"
-            focus-row-control focus-type="passwordMenu">
-        </paper-icon-button>
+        <button is="paper-icon-button-light" id="passwordMenu"
+            class="icon-more-vert" on-tap="onPasswordMenuTap_"
+            title="$i18n{moreActions}" focus-row-control
+            focus-type="passwordMenu">
+        </button>
       </div>
     </div>
   </template>
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
index abf59371208..b621c11ca9a 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
@@ -18,11 +18,16 @@ Polymer({
   /** @override */
   ready: function() {
     this.focusConfig_ = new Map();
-    this.focusConfig_.set(
-        settings.Route.AUTOFILL.path, '#autofillManagerButton .subpage-arrow');
-    this.focusConfig_.set(
-        settings.Route.MANAGE_PASSWORDS.path,
-        '#passwordManagerButton .subpage-arrow');
+    if (settings.routes.AUTOFILL) {
+      this.focusConfig_.set(
+          settings.routes.AUTOFILL.path,
+          '#autofillManagerButton .subpage-arrow');
+    }
+    if (settings.routes.MANAGE_PASSWORDS) {
+      this.focusConfig_.set(
+          settings.routes.MANAGE_PASSWORDS.path,
+          '#passwordManagerButton .subpage-arrow');
+    }
   },
 
   /**
@@ -31,7 +36,7 @@ Polymer({
    * @private
    */
   onAutofillTap_: function(event) {
-    settings.navigateTo(settings.Route.AUTOFILL);
+    settings.navigateTo(settings.routes.AUTOFILL);
   },
 
   /**
@@ -40,6 +45,6 @@ Polymer({
    * @private
    */
   onPasswordsTap_: function(event) {
-    settings.navigateTo(settings.Route.MANAGE_PASSWORDS);
+    settings.navigateTo(settings.routes.MANAGE_PASSWORDS);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
index 12df29493e0..cd9e905252c 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
@@ -6,7 +6,7 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../global_scroll_target_behavior.html">
@@ -64,7 +64,7 @@
           $i18n{editPasswordPasswordLabel}
         </div>
       </div>
-      <iron-list id="passwordList"
+      <iron-list id="passwordList" preserve-focus
           items="[[getFilteredPasswords_(savedPasswords, filter)]]"
           class="vertical-list list-with-header"
           scroll-target="[[subpageScrollTarget]]">
@@ -99,14 +99,15 @@
           filter="[[passwordExceptionFilter_(filter)]]">
         <div class="list-item">
           <div class="start">
-            <a id="exception" href="[[item.urls.link]]" target="_blank"
-                class="selectable">[[item.urls.shown]]</a>
+            <a id="exception" href="[[item.urls.link]]" target="_blank">
+              [[item.urls.shown]]
+            </a>
           </div>
-          <paper-icon-button id="removeExceptionButton"
-              icon="cr:close" on-tap="onRemoveExceptionButtonTap_"
+          <button is="paper-icon-button-light" id="removeExceptionButton"
+              class="icon-clear" on-tap="onRemoveExceptionButtonTap_"
               tabindex$="[[tabIndex]]"
               title="$i18n{deletePasswordException}">
-          </paper-icon-button>
+          </button>
         </div>
       </template>
       <div id="noExceptionsLabel" class="list-item"
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
index fcbd49b2e35..5d02de6314a 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
@@ -12,70 +12,56 @@
  * Interface for all callbacks to the password API.
  * @interface
  */
-function PasswordManager() {}
-
-/** @typedef {chrome.passwordsPrivate.PasswordUiEntry} */
-PasswordManager.PasswordUiEntry;
-
-/** @typedef {chrome.passwordsPrivate.LoginPair} */
-PasswordManager.LoginPair;
-
-/** @typedef {chrome.passwordsPrivate.ExceptionEntry} */
-PasswordManager.ExceptionEntry;
-
-/** @typedef {chrome.passwordsPrivate.PlaintextPasswordEventParameters} */
-PasswordManager.PlaintextPasswordEvent;
-
-PasswordManager.prototype = {
+class PasswordManager {
   /**
    * Add an observer to the list of saved passwords.
    * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} listener
    */
-  addSavedPasswordListChangedListener: assertNotReached,
+  addSavedPasswordListChangedListener(listener) {}
 
   /**
    * Remove an observer from the list of saved passwords.
    * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} listener
    */
-  removeSavedPasswordListChangedListener: assertNotReached,
+  removeSavedPasswordListChangedListener(listener) {}
 
   /**
    * Request the list of saved passwords.
    * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} callback
    */
-  getSavedPasswordList: assertNotReached,
+  getSavedPasswordList(callback) {}
 
   /**
    * Should remove the saved password and notify that the list has changed.
    * @param {!PasswordManager.LoginPair} loginPair The saved password that
    *     should be removed from the list. No-op if |loginPair| is not found.
    */
-  removeSavedPassword: assertNotReached,
+  removeSavedPassword(loginPair) {}
 
   /**
    * Add an observer to the list of password exceptions.
    * @param {function(!Array<!PasswordManager.ExceptionEntry>):void} listener
    */
-  addExceptionListChangedListener: assertNotReached,
+  addExceptionListChangedListener(listener) {}
 
   /**
    * Remove an observer from the list of password exceptions.
    * @param {function(!Array<!PasswordManager.ExceptionEntry>):void} listener
    */
-  removeExceptionListChangedListener: assertNotReached,
+  removeExceptionListChangedListener(listener) {}
 
   /**
    * Request the list of password exceptions.
    * @param {function(!Array<!PasswordManager.ExceptionEntry>):void} callback
    */
-  getExceptionList: assertNotReached,
+  getExceptionList(callback) {}
 
   /**
    * Should remove the password exception and notify that the list has changed.
    * @param {string} exception The exception that should be removed from the
    *     list. No-op if |exception| is not in the list.
    */
-  removeException: assertNotReached,
+  removeException(exception) {}
 
   /**
    * Gets the saved password for a given login pair.
@@ -83,65 +69,71 @@ PasswordManager.prototype = {
    *     should be retrieved.
    * @param {function(!PasswordManager.PlaintextPasswordEvent):void} callback
    */
-  getPlaintextPassword: assertNotReached,
-};
+  getPlaintextPassword(loginPair, callback) {}
+}
+
+/** @typedef {chrome.passwordsPrivate.PasswordUiEntry} */
+PasswordManager.PasswordUiEntry;
+
+/** @typedef {chrome.passwordsPrivate.LoginPair} */
+PasswordManager.LoginPair;
+
+/** @typedef {chrome.passwordsPrivate.ExceptionEntry} */
+PasswordManager.ExceptionEntry;
+
+/** @typedef {chrome.passwordsPrivate.PlaintextPasswordEventParameters} */
+PasswordManager.PlaintextPasswordEvent;
 
 /**
  * Implementation that accesses the private API.
  * @implements {PasswordManager}
- * @constructor
  */
-function PasswordManagerImpl() {}
-cr.addSingletonGetter(PasswordManagerImpl);
-
-PasswordManagerImpl.prototype = {
-  __proto__: PasswordManager,
-
+class PasswordManagerImpl {
   /** @override */
-  addSavedPasswordListChangedListener: function(listener) {
+  addSavedPasswordListChangedListener(listener) {
     chrome.passwordsPrivate.onSavedPasswordsListChanged.addListener(listener);
-  },
+  }
 
   /** @override */
-  removeSavedPasswordListChangedListener: function(listener) {
+  removeSavedPasswordListChangedListener(listener) {
     chrome.passwordsPrivate.onSavedPasswordsListChanged.removeListener(
         listener);
-  },
+  }
 
   /** @override */
-  getSavedPasswordList: function(callback) {
+  getSavedPasswordList(callback) {
     chrome.passwordsPrivate.getSavedPasswordList(callback);
-  },
+  }
 
   /** @override */
-  removeSavedPassword: function(loginPair) {
+  removeSavedPassword(loginPair) {
     chrome.passwordsPrivate.removeSavedPassword(loginPair);
-  },
+  }
 
   /** @override */
-  addExceptionListChangedListener: function(listener) {
+  addExceptionListChangedListener(listener) {
     chrome.passwordsPrivate.onPasswordExceptionsListChanged.addListener(
         listener);
-  },
+  }
 
   /** @override */
-  removeExceptionListChangedListener: function(listener) {
+  removeExceptionListChangedListener(listener) {
     chrome.passwordsPrivate.onPasswordExceptionsListChanged.removeListener(
         listener);
-  },
+  }
 
   /** @override */
-  getExceptionList: function(callback) {
+  getExceptionList(callback) {
     chrome.passwordsPrivate.getPasswordExceptionList(callback);
-  },
+  }
 
   /** @override */
-  removeException: function(exception) {
+  removeException(exception) {
     chrome.passwordsPrivate.removePasswordException(exception);
-  },
+  }
 
   /** @override */
-  getPlaintextPassword: function(loginPair, callback) {
+  getPlaintextPassword(loginPair, callback) {
     var listener = function(reply) {
       // Only handle the reply for our loginPair request.
       if (reply.loginPair.urls.origin == loginPair.urls.origin &&
@@ -153,8 +145,10 @@ PasswordManagerImpl.prototype = {
     };
     chrome.passwordsPrivate.onPlaintextPasswordRetrieved.addListener(listener);
     chrome.passwordsPrivate.requestPlaintextPassword(loginPair);
-  },
-};
+  }
+}
+
+cr.addSingletonGetter(PasswordManagerImpl);
 
 /** @typedef {!{model: !{item: !chrome.passwordsPrivate.PasswordUiEntry}}} */
 var PasswordUiEntryEvent;
@@ -192,7 +186,7 @@ Polymer({
     /** @override */
     subpageRoute: {
       type: Object,
-      value: settings.Route.MANAGE_PASSWORDS,
+      value: settings.routes.MANAGE_PASSWORDS,
     },
 
     /**
@@ -275,11 +269,11 @@ Polymer({
   /** @override */
   detached: function() {
     this.passwordManager_.removeSavedPasswordListChangedListener(
-      /** @type {function(!Array<PasswordManager.PasswordUiEntry>):void} */(
-        this.setSavedPasswordsListener_));
+        /** @type {function(!Array<PasswordManager.PasswordUiEntry>):void} */ (
+            this.setSavedPasswordsListener_));
     this.passwordManager_.removeExceptionListChangedListener(
-      /** @type {function(!Array<PasswordManager.ExceptionEntry>):void} */(
-        this.setPasswordExceptionsListener_));
+        /** @type {function(!Array<PasswordManager.ExceptionEntry>):void} */ (
+            this.setPasswordExceptionsListener_));
   },
 
   /**
@@ -302,7 +296,7 @@ Polymer({
    */
   onMenuEditPasswordTap_: function(e) {
     e.preventDefault();
-    /** @type {CrActionMenuElement} */(this.$.menu).close();
+    /** @type {CrActionMenuElement} */ (this.$.menu).close();
     this.showPasswordEditDialog_ = true;
   },
 
@@ -325,7 +319,7 @@ Polymer({
 
     return savedPasswords.filter(function(password) {
       return password.loginPair.urls.shown.includes(filter) ||
-             password.loginPair.username.includes(filter);
+          password.loginPair.username.includes(filter);
     });
   },
 
@@ -346,7 +340,7 @@ Polymer({
    */
   onMenuRemovePasswordTap_: function() {
     this.passwordManager_.removeSavedPassword(this.activePassword.loginPair);
-    /** @type {CrActionMenuElement} */(this.$.menu).close();
+    /** @type {CrActionMenuElement} */ (this.$.menu).close();
   },
 
   /**
@@ -364,7 +358,7 @@ Polymer({
    * @private
    */
   onPasswordMenuTap_: function(event) {
-    var menu = /** @type {!CrActionMenuElement} */(this.$.menu);
+    var menu = /** @type {!CrActionMenuElement} */ (this.$.menu);
     var target = /** @type {!HTMLElement} */ (event.detail.target);
 
     this.activePassword =
@@ -391,7 +385,7 @@ Polymer({
    */
   showPassword_: function(event) {
     this.passwordManager_.getPlaintextPassword(
-        /** @type {!PasswordManager.LoginPair} */(event.detail),
+        /** @type {!PasswordManager.LoginPair} */ (event.detail),
         function(item) {
           this.setPassword(item.loginPair, item.plaintextPassword);
         }.bind(this));
diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html
index 1430a4af6ae..0933fe0fffc 100644
--- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html
+++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html
@@ -34,10 +34,6 @@
         height: 20px;
         width: 0;
       }
-
-      .selectable {
-        -webkit-user-select: text;
-      }
     </style>
   </template>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/people_page/camera.html b/chromium/chrome/browser/resources/settings/people_page/camera.html
deleted file mode 100644
index 4f9bcc6fdaa..00000000000
--- a/chromium/chrome/browser/resources/settings/people_page/camera.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/html/util.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
-<link rel="import" href="../icons.html">
-<link rel="import" href="../settings_shared_css.html">
-
-<dom-module id="settings-camera">
-  <template>
-    <style include="settings-shared">
-      #perspectiveBox {
-        height: 228px;
-        perspective: 600px;
-        width: 228px;
-      }
-
-      #userImageStreamCrop {
-        height: 228px;
-        overflow: hidden;
-        position: relative;
-        width: 228px;
-      }
-
-      #userImageStreamCrop.flip-x {
-        transform: rotateY(180deg);
-      }
-
-      paper-spinner {
-        bottom: 0;
-        left: 0;
-        margin: auto auto;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      #cameraVideo {
-        height: 228px;
-        /* Center image for 4:3 aspect ratio. */
-        left: -16.6%;
-        position: absolute;
-      }
-
-      #cameraControls {
-        background-color: var(--paper-grey-800);
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        padding: 8px;
-      }
-
-      #flipPhoto {
-        --iron-icon-fill-color: white;
-        float: right;
-      }
-
-      :host-context([dir=rtl]) #flipPhoto {
-        float: left;
-      }
-
-      #takePhoto {
-        --iron-icon-fill-color: white;
-        background-color: var(--paper-green-500);
-        border-radius: 50%;
-        display: block;
-        margin: 0 auto 0 auto;
-      }
-    </style>
-    <div hidden="[[!cameraActive]]">
-      <div id="perspectiveBox">
-        <div id="userImageStreamCrop">
-          <video id="cameraVideo" autoplay hidden="[[!cameraOnline_]]"></video>
-          <paper-spinner active="[[!cameraOnline_]]"></paper-spinner>
-        </div>
-      </div>
-      <div id="cameraControls">
-        <paper-icon-button id="flipPhoto" tabindex="2"
-            icon="settings:flip" title="$i18n{flipPhoto}"
-            on-tap="onTapFlipPhoto_" disabled="[[!cameraOnline_]]">
-        </paper-icon-button>
-        <paper-icon-button id="takePhoto" tabindex="1"
-            icon="settings:camera-alt" title="$i18n{takePhoto}"
-            on-tap="takePhoto" disabled="[[!cameraOnline_]]">
-        </paper-icon-button>
-      </div>
-    </div>
-  </template>
-  <script src="camera.js"></script>
-</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/people_page/camera.js b/chromium/chrome/browser/resources/settings/people_page/camera.js
deleted file mode 100644
index ce25918758c..00000000000
--- a/chromium/chrome/browser/resources/settings/people_page/camera.js
+++ /dev/null
@@ -1,209 +0,0 @@
-// Copyright 2015 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
- * 'settings-camera' is the Polymer control used to take a picture from the
- * user webcam to use as a ChromeOS profile picture.
- */
-(function() {
-
-/**
- * Dimensions for camera capture.
- * @const
- */
-var CAPTURE_SIZE = {
-  height: 480,
-  width: 480
-};
-
-Polymer({
-  is: 'settings-camera',
-
-  properties: {
-    /**
-     * True if the user has selected the camera as the user image source.
-     * @type {boolean}
-     */
-    cameraActive: {
-      type: Boolean,
-      observer: 'cameraActiveChanged_',
-      value: false,
-    },
-
-    /**
-     * True when the camera is actually streaming video. May be false even when
-     * the camera is present and shown, but still initializing.
-     * @private {boolean}
-     */
-    cameraOnline_: {
-      type: Boolean,
-      value: false,
-    },
-
-    /**
-     * True if the photo is currently marked flipped.
-     * @private {boolean}
-     */
-    isFlipped_: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  /** @override */
-  attached: function() {
-    this.$.cameraVideo.addEventListener('canplay', function() {
-      this.cameraOnline_ = true;
-    }.bind(this));
-  },
-
-  /**
-   * Performs photo capture from the live camera stream. 'phototaken' event
-   * will be fired as soon as captured photo is available, with 'dataURL'
-   * property containing the photo encoded as a data URL.
-   * @private
-   */
-  takePhoto: function() {
-    if (!this.cameraOnline_)
-      return;
-    var canvas =
-        /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
-    canvas.width = CAPTURE_SIZE.width;
-    canvas.height = CAPTURE_SIZE.height;
-    this.captureFrame_(
-        this.$.cameraVideo,
-        /** @type {!CanvasRenderingContext2D} */ (canvas.getContext('2d')));
-
-    var photoDataUrl = this.isFlipped_ ? this.flipFrame_(canvas) :
-                                         canvas.toDataURL('image/png');
-    this.fire('phototaken', {photoDataUrl: photoDataUrl});
-
-    announceAccessibleMessage(
-        loadTimeData.getString('photoCaptureAccessibleText'));
-  },
-
-  /**
-   * Observer for the cameraActive property.
-   * @private
-   */
-  cameraActiveChanged_: function() {
-    if (this.cameraActive)
-      this.startCamera_();
-    else
-      this.stopCamera_();
-  },
-
-  /**
-   * Tries to start the camera stream capture.
-   * @private
-   */
-  startCamera_: function() {
-    this.stopCamera_();
-    this.cameraStartInProgress_ = true;
-
-    var successCallback = function(stream) {
-      if (this.cameraStartInProgress_) {
-        this.$.cameraVideo.src = URL.createObjectURL(stream);
-        this.cameraStream_ = stream;
-      } else {
-        this.stopVideoTracks_(stream);
-      }
-      this.cameraStartInProgress_ = false;
-    }.bind(this);
-
-    var errorCallback = function() {
-      this.cameraOnline_ = false;
-      this.cameraStartInProgress_ = false;
-    }.bind(this);
-
-    navigator.webkitGetUserMedia({video: true}, successCallback, errorCallback);
-  },
-
-  /**
-   * Stops camera capture, if it's currently cameraActive.
-   * @private
-   */
-  stopCamera_: function() {
-    this.cameraOnline_ = false;
-    this.$.cameraVideo.src = '';
-    if (this.cameraStream_)
-      this.stopVideoTracks_(this.cameraStream_);
-    // Cancel any pending getUserMedia() checks.
-    this.cameraStartInProgress_ = false;
-  },
-
-  /**
-   * Stops all video tracks associated with a MediaStream object.
-   * @param {!MediaStream} stream
-   * @private
-   */
-  stopVideoTracks_: function(stream) {
-    var tracks = stream.getVideoTracks();
-    for (var i = 0; i < tracks.length; i++)
-      tracks[i].stop();
-  },
-
-  /**
-   * Flip the live camera stream.
-   * @private
-   */
-  onTapFlipPhoto_: function() {
-    this.isFlipped_ = !this.isFlipped_;
-    this.$.userImageStreamCrop.classList.toggle('flip-x', this.isFlipped_);
-
-    var flipMessageId = this.isFlipped_ ?
-       'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText';
-    announceAccessibleMessage(loadTimeData.getString(flipMessageId));
-  },
-
-  /**
-   * Captures a single still frame from a <video> element, placing it at the
-   * current drawing origin of a canvas context.
-   * @param {!HTMLVideoElement} video Video element to capture from.
-   * @param {!CanvasRenderingContext2D} ctx Canvas context to draw onto.
-   * @private
-   */
-  captureFrame_: function(video, ctx) {
-    var width = video.videoWidth;
-    var height = video.videoHeight;
-    if (width < CAPTURE_SIZE.width || height < CAPTURE_SIZE.height) {
-      console.error('Video capture size too small: ' +
-                    width + 'x' + height + '!');
-    }
-    var src = {};
-    if (width / CAPTURE_SIZE.width > height / CAPTURE_SIZE.height) {
-      // Full height, crop left/right.
-      src.height = height;
-      src.width = height * CAPTURE_SIZE.width / CAPTURE_SIZE.height;
-    } else {
-      // Full width, crop top/bottom.
-      src.width = width;
-      src.height = width * CAPTURE_SIZE.height / CAPTURE_SIZE.width;
-    }
-    src.x = (width - src.width) / 2;
-    src.y = (height - src.height) / 2;
-    ctx.drawImage(video, src.x, src.y, src.width, src.height,
-                  0, 0, CAPTURE_SIZE.width, CAPTURE_SIZE.height);
-  },
-
-  /**
-   * Flips frame horizontally.
-   * @param {!(HTMLImageElement|HTMLCanvasElement|HTMLVideoElement)} source
-   *     Frame to flip.
-   * @return {string} Flipped frame as data URL.
-   */
-  flipFrame_: function(source) {
-    var canvas = document.createElement('canvas');
-    canvas.width = CAPTURE_SIZE.width;
-    canvas.height = CAPTURE_SIZE.height;
-    var ctx = canvas.getContext('2d');
-    ctx.translate(CAPTURE_SIZE.width, 0);
-    ctx.scale(-1.0, 1.0);
-    ctx.drawImage(source, 0, 0);
-    return canvas.toDataURL('image/png');
-  },
-});
-
-})();
diff --git a/chromium/chrome/browser/resources/settings/people_page/change_picture.html b/chromium/chrome/browser/resources/settings/people_page/change_picture.html
index 963de294a34..0bae5f15d4a 100644
--- a/chromium/chrome/browser/resources/settings/people_page/change_picture.html
+++ b/chromium/chrome/browser/resources/settings/people_page/change_picture.html
@@ -1,151 +1,111 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_list.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_types.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../i18n_setup.html">
-<link rel="import" href="../icons.html">
-<link rel="import" href="camera.html">
-<link rel="import" href="change_picture_browser_proxy.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="change_picture_browser_proxy.html">
 
 <dom-module id="settings-change-picture">
   <template>
-    <style include="settings-shared">
-      #container {
-        -webkit-margin-start: 16px;
-        align-items: flex-start;
-        outline: none;
-        padding-top: 16px;
-      }
-
-      #availableIcons {
-        margin: -8px;
-      }
-
-      #availableIcons img,
-      #availableIcons iron-icon {
-        border-radius: 4px;
-        margin: 8px;
-      }
-
-      #availableIcons img {
-        height: 64px;
-        padding: 2px;
-        vertical-align: top;
-        width: 64px;
-      }
-
-      #availableIcons iron-icon {
-        --iron-icon-fill-color: var(--google-grey-500);
-        --iron-icon-height: 32px;
-        --iron-icon-width: 32px;
-        border: 1px solid var(--google-grey-500);
-        padding: 17px;
-      }
-
-      #availableIcons .iron-selected {
-        border: 2px solid var(--google-blue-500);
-      }
-
-      #availableIcons img.iron-selected {
-        padding: 0;
+    <style>
+      :host {
+        --cr-toolbar-height: 56px;
+        /* #headerLine height + padding */
+        --cr-settings-header-height: calc(62px + 1.34em);
+        --title-height: 2em;
+        --title-padding: 16px;
+        display: block;
+        min-height: 328px;
       }
 
-      #availableIcons iron-icon.iron-selected {
-        padding: 16px;
+      #title {
+        -webkit-margin-start: 20px;
+        height: var(--title-height);
+        padding-top: var(--title-padding);
       }
 
-      #authorCredit,
-      #authorCredit a {
-        color: var(--paper-grey-600);
+      #container {
+        -webkit-margin-start: 20px;
+        align-items: flex-start;
+        display: flex;
+        position: absolute;
+        top: calc(var(--cr-settings-header-height) +
+                  var(--title-padding) +
+                  var(--title-height));
       }
 
-      #previewPane {
-        -webkit-margin-end: 10px;
+      #picturePane {
+        --cr-picture-image-size: 192px;
+        -webkit-margin-end: 24px;
         flex-shrink: 0;
-        width: 228px;
+        height: 288px;
+        margin-top: 6px;
+        position: relative;
+        width: 288px;
       }
 
-      #previewPane img {
-        display: block;
-        height: 228px;
-        width: 228px;
+      #authorCredit {
+        color: var(--paper-grey-500);
+        display: flex;
+        flex-direction: column;
+        margin-top: 20px;
       }
 
-      #discardControlBar {
-        background-color: var(--paper-grey-800);
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        padding: 8px;
+      #pictureList {
+        -webkit-margin-end: 16px;
+        /* TODO(reveman): Find a way to have height align to viewport
+           without using fixed position. */
+        height: calc(100vh -
+            var(--cr-toolbar-height) -
+            var(--cr-settings-header-height) -
+            var(--title-padding) -
+            var(--title-height));
+        margin-top: 0;
+        min-height: 332px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
       }
 
-      #discardOldImage {
-        --iron-icon-fill-color: white;
-        background-color: var(--paper-red-500);
-        border-radius: 50%;
-        display: block;
-        margin: 0 auto 0 auto;
-      }
     </style>
-    <div id="container" class="settings-box" tabindex="0">
-      <iron-a11y-keys keys="up down left right space enter"
-          on-keys-pressed="onKeysPress_">
-      </iron-a11y-keys>
-      <div id="availableIcons" class="start">
-        <iron-selector id="selector" on-iron-activate="onImageActivate_"
-            selected-item="{{selectedItem_}}">
-          <iron-icon id="cameraImage"
-              data-type$="[[selectionTypesEnum_.CAMERA]]"
-              icon="settings:camera-alt" title="$i18n{takePhoto}"
-              hidden="[[!cameraPresent_]]">
-          </iron-icon>
-          <iron-icon data-type$="[[selectionTypesEnum_.FILE]]"
-              icon="cr:folder" title="$i18n{chooseFile}">
-          </iron-icon>
-          <img id="profileImage"
-              data-type$="[[selectionTypesEnum_.PROFILE]]"
-              src="[[profileImageUrl_]]" title="$i18n{profilePhotoLoading}">
-          <img id="oldImage" data-type$="[[selectionTypesEnum_.OLD]]"
-              src="[[oldImageUrl_]]" hidden="[[!oldImageUrl_]]"
-              title="$i18n{oldPhoto}">
-          <template is="dom-repeat" items="[[defaultImages_]]">
-            <img data-type$="[[selectionTypesEnum_.DEFAULT]]"
-                data-default-image-index$="[[index]]" src="[[item.url]]"
-                title="[[item.title]]">
-          </template>
-        </iron-selector>
-        <template is="dom-if" if="[[isAuthorCreditShown_(selectedItem_)]]">
-          <div id="authorCredit">
-            $i18n{authorCredit}
-            [[getAuthorName_(selectedItem_, defaultImages_)]]
-            <a href="[[getAuthorWebsite_(selectedItem_, defaultImages_)]]"
-                target="_blank">
-              [[getAuthorWebsite_(selectedItem_, defaultImages_)]]
-            </a>
-          </div>
-        </template>
-      </div>
-      <div id="previewPane">
-        <img alt="$i18n{previewAltText}" src="[[selectedItem_.src]]"
-            hidden="[[isPreviewImageHidden_(selectedItem_)]]">
-        <div id="discardControlBar"
-            hidden="[[isDiscardHidden_(selectedItem_)]]">
-          <paper-icon-button id="discardOldImage" tabindex="0"
-              icon="cr:delete" title="$i18n{discardPhoto}"
-              on-tap="onTapDiscardOldImage_">
-          </paper-icon-button>
+    <div id="title">$i18n{changePicturePageDescription}</div>
+    <div id="container">
+      <div>
+        <cr-picture-pane id="picturePane"
+            camera-present="[[cameraPresent_]]",
+            image-src="[[getImageSrc_(selectedItem_)]]"
+            image-type="[[getImageType_(selectedItem_)]]"
+            discard-image-label="$i18n{discardPhoto}"
+            flip-photo-label="$i18n{flipPhoto}"
+            preview-alt-text="$i18n{previewAltText}"
+            take-photo-label="$i18n{takePhoto}">
+        </cr-picture-pane>
+        <div id="authorCredit"
+            hidden="[[!isAuthorCreditShown_(selectedItem_)]]">
+          [[getAuthorCredit_(selectedItem_, defaultImages_)]]
+          <a href="[[getAuthorWebsite_(selectedItem_, defaultImages_)]]"
+              target="_blank">
+            [[getAuthorWebsite_(selectedItem_, defaultImages_)]]
+          </a>
         </div>
-        <settings-camera id="camera"
-            camera-active="[[isCameraActive_(cameraPresent_, selectedItem_)]]"
-            on-phototaken="onPhotoTaken_">
-        </settings-camera>
       </div>
+      <cr-picture-list id="pictureList"
+          camera-present="[[cameraPresent_]]"
+          default-images="[[getDefaultImages_(defaultImages_,
+              firstDefaultImageIndex_)]]"
+          selected-item="{{selectedItem_}}"
+          choose-file-label="$i18n{chooseFile}"
+          old-image-label="$i18n{oldPhoto}"
+          profile-image-label="$i18n{profilePhoto}"
+          profile-image-loading-label="$i18n{profilePhotoLoading}"
+          take-photo-label="$i18n{takePhoto}">
+      </cr-picture-list>
     </div>
   </template>
   <script src="change_picture.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/people_page/change_picture.js b/chromium/chrome/browser/resources/settings/people_page/change_picture.js
index 62c5b9dad79..d41dc4c36db 100644
--- a/chromium/chrome/browser/resources/settings/people_page/change_picture.js
+++ b/chromium/chrome/browser/resources/settings/people_page/change_picture.js
@@ -3,30 +3,6 @@
 // found in the LICENSE file.
 
 /**
- * Contains the possible types of Change Picture selections.
- * @enum {string}
- */
-var ChangePictureSelectionTypes = {
-  CAMERA: 'camera',
-  FILE: 'file',
-  PROFILE: 'profile',
-  OLD: 'old',
-  DEFAULT: 'default',
-};
-
-/**
- * An image element.
- * @typedef {{
- *   dataset: {
- *     type: !ChangePictureSelectionTypes,
- *     defaultImageIndex: ?number,
- *   },
- *   src: string,
- * }}
- */
-var ChangePictureImageElement;
-
-/**
  * @fileoverview
  * 'settings-change-picture' is the settings subpage containing controls to
  * edit a ChromeOS user's picture.
@@ -54,97 +30,72 @@ Polymer({
      * The currently selected item. This property is bound to the iron-selector
      * and never directly assigned. This may be undefined momentarily as
      * the selection changes due to iron-selector implementation details.
-     * @private {?ChangePictureImageElement}
-     */
-    selectedItem_: Object,
-
-    /**
-     * The url of the Old image, which is the existing image sourced from
-     * the camera, a file, or a deprecated default image. It defaults to an
-     * empty string instead of undefined, because Polymer bindings don't behave
-     * as expected with undefined properties.
-     * @private {string}
+     * @private {?CrPicture.ImageElement}
      */
-    oldImageUrl_: {
-      type: String,
-      value: '',
-    },
-
-    /**
-     * The url of the profile image.
-     * @private {string}
-     */
-    profileImageUrl_: {
-      type: String,
-      value: 'chrome://theme/IDR_PROFILE_PICTURE_LOADING',
+    selectedItem_: {
+      type: Object,
+      value: null,
     },
 
     /**
-     * The default user images.
+     * The active set of default user images.
      * @private {!Array<!settings.DefaultImage>}
      */
     defaultImages_: {
       type: Array,
-      value: function() { return []; },
+      value: function() {
+        return [];
+      },
     },
 
-    /** @private */
-    selectionTypesEnum_: {
-      type: Object,
-      value: ChangePictureSelectionTypes,
-      readOnly: true,
-    },
+    /**
+     * The index of the first default image to use in the selection list.
+     * @private
+     */
+    firstDefaultImageIndex_: Number,
+  },
+
+  listeners: {
+    'discard-image': 'onDiscardImage_',
+    'image-activate': 'onImageActivate_',
+    'photo-flipped': 'onPhotoFlipped_',
+    'photo-taken': 'onPhotoTaken_',
   },
 
   /** @private {?settings.ChangePictureBrowserProxy} */
   browserProxy_: null,
 
-  /**
-   * The fallback image to be selected when the user discards the Old image.
-   * This may be null if the user started with the Old image.
-   * @private {?ChangePictureImageElement}
-   */
-  fallbackImage_: null,
-
-  /**
-   * Type of the last selected icon. This is used to jump back to the camera
-   * after the user discards a newly taken photo.
-   * @private {string}
-   */
-  lastSelectedImageType_: '',
+  /** @private {?CrPictureListElement} */
+  pictureList_: null,
 
   /** @override */
   ready: function() {
     this.browserProxy_ = settings.ChangePictureBrowserProxyImpl.getInstance();
+    this.pictureList_ =
+        /** @type {CrPictureListElement} */ (this.$.pictureList);
   },
 
   /** @override */
   attached: function() {
-    this.addWebUIListener('default-images-changed',
-                          this.receiveDefaultImages_.bind(this));
-    this.addWebUIListener('selected-image-changed',
-                          this.receiveSelectedImage_.bind(this));
-    this.addWebUIListener('old-image-changed',
-                          this.receiveOldImage_.bind(this));
-    this.addWebUIListener('profile-image-changed',
-                          this.receiveProfileImage_.bind(this));
-    this.addWebUIListener('camera-presence-changed',
-                          this.receiveCameraPresence_.bind(this));
+    this.addWebUIListener(
+        'default-images-changed', this.receiveDefaultImages_.bind(this));
+    this.addWebUIListener(
+        'selected-image-changed', this.receiveSelectedImage_.bind(this));
+    this.addWebUIListener(
+        'old-image-changed', this.receiveOldImage_.bind(this));
+    this.addWebUIListener(
+        'profile-image-changed', this.receiveProfileImage_.bind(this));
+    this.addWebUIListener(
+        'camera-presence-changed', this.receiveCameraPresence_.bind(this));
   },
 
 
   /** @protected */
   currentRouteChanged: function(newRoute) {
-    if (newRoute == settings.Route.CHANGE_PICTURE) {
+    if (newRoute == settings.routes.CHANGE_PICTURE) {
       this.browserProxy_.initialize();
-
-      // This in needed because we manually clear the selectedItem_ property
-      // when navigating away. The selector element doesn't fire its upward
-      // data binding unless its selected item has changed.
-      this.selectedItem_ = this.$.selector.selectedItem;
-      // Focus the container by default so that the arrow keys work (and since
-      // we use the focus highlight to show which picture is selected).
-      this.$.container.focus();
+      this.browserProxy_.requestSelectedImage();
+      this.pictureList_.setFocus();
     } else {
       // Ensure we deactivate the camera when we navigate away.
       this.selectedItem_ = null;
@@ -153,11 +104,12 @@ Polymer({
 
   /**
    * Handler for the 'default-images-changed' event.
-   * @param {!Array<!settings.DefaultImage>} images
+   * @param {{first: number, images: !Array<!settings.DefaultImage>}} info
    * @private
    */
-  receiveDefaultImages_: function(images) {
-    this.defaultImages_ = images;
+  receiveDefaultImages_: function(info) {
+    this.defaultImages_ = info.images;
+    this.firstDefaultImageIndex_ = info.first;
   },
 
   /**
@@ -167,19 +119,7 @@ Polymer({
    * @private
    */
   receiveSelectedImage_: function(imageUrl) {
-    var index = this.$.selector.items.findIndex(function(image) {
-      return image.dataset.type == ChangePictureSelectionTypes.DEFAULT &&
-          image.src == imageUrl;
-    });
-    assert(index != -1, 'Default image not found: ' + imageUrl);
-
-    this.fallbackImage_ = this.$.selector.items[index];
-
-    // If user is currently taking a photo, do not steal the focus.
-    if (!this.selectedItem_ ||
-        this.selectedItem_.dataset.type != ChangePictureSelectionTypes.CAMERA) {
-      this.$.selector.select(index);
-    }
+    this.pictureList_.setSelectedImageUrl(imageUrl);
   },
 
   /**
@@ -187,12 +127,11 @@ Polymer({
    * non-profile and non-default image. It can be from the camera, a file, or a
    * deprecated default image. When this method is called, the Old image
    * becomes the selected image.
-   * @param {string} imageUrl
+   * @param {!{url: string, index: number}} imageInfo
    * @private
    */
-  receiveOldImage_: function(imageUrl) {
-    this.oldImageUrl_ = imageUrl;
-    this.$.selector.select(this.$.selector.indexOf(this.$.oldImage));
+  receiveOldImage_: function(imageInfo) {
+    this.pictureList_.setOldImageUrl(imageInfo.url, imageInfo.index);
   },
 
   /**
@@ -202,19 +141,7 @@ Polymer({
    * @private
    */
   receiveProfileImage_: function(imageUrl, selected) {
-    this.profileImageUrl_ = imageUrl;
-    this.$.profileImage.title = this.i18n('profilePhoto');
-
-    if (!selected)
-      return;
-
-    this.fallbackImage_ = this.$.profileImage;
-
-    // If user is currently taking a photo, do not steal the focus.
-    if (!this.selectedItem_ ||
-        this.selectedItem_.dataset.type != ChangePictureSelectionTypes.CAMERA) {
-      this.$.selector.select(this.$.selector.indexOf(this.$.profileImage));
-    }
+    this.pictureList_.setProfileImageUrl(imageUrl, selected);
   },
 
   /**
@@ -228,25 +155,29 @@ Polymer({
 
   /**
    * Selects an image element.
-   * @param {!ChangePictureImageElement} image
+   * @param {!CrPicture.ImageElement} image
    * @private
    */
   selectImage_: function(image) {
     switch (image.dataset.type) {
-      case ChangePictureSelectionTypes.CAMERA:
-        // Nothing needs to be done.
+      case CrPicture.SelectionTypes.CAMERA:
+        /** CrPicturePaneElement */ (this.$.picturePane).takePhoto();
         break;
-      case ChangePictureSelectionTypes.FILE:
+      case CrPicture.SelectionTypes.FILE:
         this.browserProxy_.chooseFile();
         break;
-      case ChangePictureSelectionTypes.PROFILE:
+      case CrPicture.SelectionTypes.PROFILE:
         this.browserProxy_.selectProfileImage();
         break;
-      case ChangePictureSelectionTypes.OLD:
-        this.browserProxy_.selectOldImage();
+      case CrPicture.SelectionTypes.OLD:
+        var imageIndex = image.dataset.imageIndex;
+        if (imageIndex !== undefined && imageIndex >= 0 && image.src)
+          this.browserProxy_.selectDefaultImage(image.src);
+        else
+          this.browserProxy_.selectOldImage();
         break;
-      case ChangePictureSelectionTypes.DEFAULT:
-        this.browserProxy_.selectDefaultImage(image.src);
+      case CrPicture.SelectionTypes.DEFAULT:
+        this.browserProxy_.selectDefaultImage(image.dataset.url);
         break;
       default:
         assertNotReached('Selected unknown image type');
@@ -254,201 +185,112 @@ Polymer({
   },
 
   /**
-   * Handler for when accessibility-specific keys are pressed.
-   * @param {!{detail: !{key: string, keyboardEvent: Object}}} e
-   */
-  onKeysPress_: function(e) {
-    if (!this.selectedItem_)
-      return;
-
-    // In the old Options user images grid, the 'up' and 'down' keys had
-    // different behavior depending on whether ChromeVox was on or off.
-    // If ChromeVox was on, 'up' or 'down' would select the next or previous
-    // image on the left or right. If ChromeVox was off, it would select the
-    // image spatially above or below using calculated columns.
-    //
-    // The code below implements the simple behavior of selecting the image
-    // to the left or right (as if ChromeVox was always on).
-    //
-    // TODO(tommycli): Investigate if it's necessary to calculate columns
-    // and select the image on the top or bottom for non-ChromeVox users.
-    var /** IronSelectorElement */ selector = this.$.selector;
-    switch (e.detail.key) {
-      case 'up':
-      case 'left':
-        // This loop always terminates because the file and profile icons are
-        // never hidden.
-        do {
-          selector.selectPrevious();
-        } while (this.selectedItem_.hidden);
-
-        if (this.selectedItem_.dataset.type != ChangePictureSelectionTypes.FILE)
-          this.selectImage_(this.selectedItem_);
-
-        this.lastSelectedImageType_ = this.selectedItem_.dataset.type;
-        e.detail.keyboardEvent.preventDefault();
-        break;
-
-      case 'down':
-      case 'right':
-        // This loop always terminates because the file and profile icons are
-        // never hidden.
-        do {
-          selector.selectNext();
-        } while (this.selectedItem_.hidden);
-
-        if (this.selectedItem_.dataset.type != ChangePictureSelectionTypes.FILE)
-          this.selectImage_(this.selectedItem_);
-
-        this.lastSelectedImageType_ = this.selectedItem_.dataset.type;
-        e.detail.keyboardEvent.preventDefault();
-        break;
-
-      case 'enter':
-      case 'space':
-        if (this.selectedItem_.dataset.type ==
-            ChangePictureSelectionTypes.CAMERA) {
-          var /** SettingsCameraElement */ camera = this.$.camera;
-          camera.takePhoto();
-        } else if (this.selectedItem_.dataset.type ==
-                   ChangePictureSelectionTypes.FILE) {
-          this.browserProxy_.chooseFile();
-        } else if (this.selectedItem_.dataset.type ==
-                   ChangePictureSelectionTypes.OLD) {
-          this.onTapDiscardOldImage_();
-        }
-        break;
-    }
-  },
-
-  /**
-   * Handler for when the an image is activated.
-   * @param {!Event} event
+   * Handler for when an image is activated.
+   * @param {!{detail: !CrPicture.ImageElement}} event
    * @private
    */
   onImageActivate_: function(event) {
-    var image = event.detail.item;
-    this.lastSelectedImageType_ = image.dataset.type;
-    this.selectImage_(image);
+    this.selectImage_(event.detail);
   },
 
   /**
-   * Handle photo captured event, which contains the data URL of the image.
    * @param {!{detail: !{photoDataUrl: string}}} event
-   * containing a data URL.
+   * @private
    */
   onPhotoTaken_: function(event) {
     this.browserProxy_.photoTaken(event.detail.photoDataUrl);
-    this.$.container.focus();
+    this.pictureList_.setOldImageUrl(event.detail.photoDataUrl);
+    this.pictureList_.setFocus();
+    announceAccessibleMessage(
+        loadTimeData.getString('photoCaptureAccessibleText'));
   },
 
   /**
-   * Discard currently selected Old image. Selects the first default icon.
-   * Returns to the camera stream if the user had just taken a picture.
+   * @param {!{detail: boolean}} event
    * @private
    */
-  onTapDiscardOldImage_: function() {
-    this.oldImageUrl_ = '';
-
-    if (this.lastSelectedImageType_ == ChangePictureSelectionTypes.CAMERA)
-      this.$.selector.select(this.$.selector.indexOf(this.$.cameraImage));
-
-    if (this.fallbackImage_ != null) {
-      this.selectImage_(this.fallbackImage_);
-      return;
-    }
-
-    // If the user has not chosen an image since opening the subpage and
-    // discards the current photo, select the first default image.
-    assert(this.defaultImages_.length > 0);
-    this.browserProxy_.selectDefaultImage(this.defaultImages_[0].url);
+  onPhotoFlipped_: function(event) {
+    var flipped = event.detail;
+    var flipMessageId = flipped ? 'photoFlippedAccessibleText' :
+                                  'photoFlippedBackAccessibleText';
+    announceAccessibleMessage(loadTimeData.getString(flipMessageId));
+  },
 
+  /** @private */
+  onDiscardImage_: function() {
+    this.pictureList_.setOldImageUrl(CrPicture.kDefaultImageUrl);
+    // Revert to profile image as we don't know what last used default image is.
+    this.browserProxy_.selectProfileImage();
     announceAccessibleMessage(this.i18n('photoDiscardAccessibleText'));
   },
 
   /**
-   * @param {string} oldImageUrl
-   * @return {boolean} True if there is no Old image and the Old image icon
-   *     should be hidden.
-   * @private
-   */
-  isOldImageHidden_: function(oldImageUrl) { return oldImageUrl.length == 0; },
-
-  /**
-   * @param {ChangePictureImageElement} selectedItem
-   * @return {boolean} True if the preview image should be hidden.
+   * @param {CrPicture.ImageElement} selectedItem
+   * @return {string}
    * @private
    */
-  isPreviewImageHidden_: function(selectedItem) {
-    if (!selectedItem)
-      return true;
-
-    var type = selectedItem.dataset.type;
-    return type != ChangePictureSelectionTypes.DEFAULT &&
-        type != ChangePictureSelectionTypes.PROFILE &&
-        type != ChangePictureSelectionTypes.OLD;
+  getImageSrc_: function(selectedItem) {
+    return (selectedItem && selectedItem.dataset.url) || '';
   },
 
   /**
-   * @param {boolean} cameraPresent
-   * @param {ChangePictureImageElement} selectedItem
-   * @return {boolean} True if the camera is selected in the image grid.
+   * @param {CrPicture.ImageElement} selectedItem
+   * @return {string}
    * @private
    */
-  isCameraActive_: function(cameraPresent, selectedItem) {
-    return cameraPresent && !!selectedItem &&
-        selectedItem.dataset.type == ChangePictureSelectionTypes.CAMERA;
+  getImageType_: function(selectedItem) {
+    return (selectedItem && selectedItem.dataset.type) ||
+        CrPicture.SelectionTypes.NONE;
   },
 
   /**
-   * @param {ChangePictureImageElement} selectedItem
-   * @return {boolean} True if the discard controls should be hidden.
+   * @param {!Array<!settings.DefaultImage>} defaultImages
+   * @param {number} firstDefaultImageIndex
+   * @return {!Array<!settings.DefaultImage>}
    * @private
    */
-  isDiscardHidden_: function(selectedItem) {
-    return !selectedItem ||
-        selectedItem.dataset.type != ChangePictureSelectionTypes.OLD;
+  getDefaultImages_(defaultImages, firstDefaultImageIndex) {
+    return defaultImages.slice(firstDefaultImageIndex);
   },
 
   /**
-   * @param {ChangePictureImageElement} selectedItem
+   * @param {CrPicture.ImageElement} selectedItem
    * @return {boolean} True if the author credit text is shown.
    * @private
    */
   isAuthorCreditShown_: function(selectedItem) {
     return !!selectedItem &&
-        selectedItem.dataset.type == ChangePictureSelectionTypes.DEFAULT;
+        (selectedItem.dataset.type == CrPicture.SelectionTypes.DEFAULT ||
+         (selectedItem.dataset.imageIndex !== undefined &&
+          selectedItem.dataset.imageIndex >= 0));
   },
 
   /**
-   * @param {!ChangePictureImageElement} selectedItem
+   * @param {!CrPicture.ImageElement} selectedItem
    * @param {!Array<!settings.DefaultImage>} defaultImages
    * @return {string} The author name for the selected default image. An empty
    *     string is returned if there is no valid author name.
    * @private
    */
-  getAuthorName_: function(selectedItem, defaultImages) {
-    if (!this.isAuthorCreditShown_(selectedItem))
+  getAuthorCredit_: function(selectedItem, defaultImages) {
+    var index = selectedItem ? selectedItem.dataset.imageIndex : undefined;
+    if (index === undefined || index < 0 || index >= defaultImages.length)
       return '';
-
-    assert(selectedItem.dataset.defaultImageIndex !== null &&
-           selectedItem.dataset.defaultImageIndex < defaultImages.length);
-    return defaultImages[selectedItem.dataset.defaultImageIndex].author;
+    var author = defaultImages[index].author;
+    return author ? this.i18n('authorCreditText', author) : '';
   },
 
   /**
-   * @param {!ChangePictureImageElement} selectedItem
+   * @param {!CrPicture.ImageElement} selectedItem
    * @param {!Array<!settings.DefaultImage>} defaultImages
-   * @return {string} The author website for the selected default image. An
-   *     empty string is returned if there is no valid author name.
+   * @return {string} The author name for the selected default image. An empty
+   *     string is returned if there is no valid author name.
    * @private
    */
   getAuthorWebsite_: function(selectedItem, defaultImages) {
-    if (!this.isAuthorCreditShown_(selectedItem))
+    var index = selectedItem ? selectedItem.dataset.imageIndex : undefined;
+    if (index === undefined || index < 0 || index >= defaultImages.length)
       return '';
-
-    assert(selectedItem.dataset.defaultImageIndex !== null &&
-           selectedItem.dataset.defaultImageIndex < defaultImages.length);
-    return defaultImages[selectedItem.dataset.defaultImageIndex].website;
+    return defaultImages[index].website || '';
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/people_page/change_picture_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/change_picture_browser_proxy.js
index 05e3dc67591..7295e66f6a0 100644
--- a/chromium/chrome/browser/resources/settings/people_page/change_picture_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/change_picture_browser_proxy.js
@@ -11,100 +11,105 @@ cr.exportPath('settings');
 /**
  * An object describing a default image.
  * @typedef {{
- *   author: string,
- *   title: string,
+ *   author: (string|undefined),
+ *   index: number,
+ *   title: (string|undefined),
  *   url: string,
- *   website: string
+ *   website: (string|undefined)
  * }}
  */
 settings.DefaultImage;
 
 cr.define('settings', function() {
   /** @interface */
-  function ChangePictureBrowserProxy() {}
-
-  ChangePictureBrowserProxy.prototype = {
+  class ChangePictureBrowserProxy {
     /**
      * Retrieves the initial set of default images, profile image, etc. As a
      * response, the C++ sends these WebUIListener events:
      * 'default-images-changed', 'profile-image-changed', 'old-image-changed',
      * and 'selected-image-changed'
      */
-    initialize: function() {},
+    initialize() {}
 
     /**
      * Sets the user image to one of the default images. As a response, the C++
      * sends the 'default-images-changed' WebUIListener event.
      * @param {string} imageUrl
      */
-    selectDefaultImage: function(imageUrl) {},
+    selectDefaultImage(imageUrl) {}
 
     /**
      * Sets the user image to the 'old' image. As a response, the C++ sends the
      * 'old-image-changed' WebUIListener event.
      */
-    selectOldImage: function() {},
+    selectOldImage() {}
 
     /**
      * Sets the user image to the profile image. As a response, the C++ sends
      * the 'profile-image-changed' WebUIListener event.
      */
-    selectProfileImage: function() {},
+    selectProfileImage() {}
 
     /**
      * Provides the taken photo as a data URL to the C++. No response is
      * expected.
      * @param {string} photoDataUrl
      */
-    photoTaken: function(photoDataUrl) {},
+    photoTaken(photoDataUrl) {}
 
     /**
      * Requests a file chooser to select a new user image. No response is
      * expected.
      */
-    chooseFile: function() {},
-  };
+    chooseFile() {}
+
+    /** Requests the currently selected image. */
+    requestSelectedImage() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.ChangePictureBrowserProxy}
    */
-  function ChangePictureBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(ChangePictureBrowserProxyImpl);
-
-  ChangePictureBrowserProxyImpl.prototype = {
+  class ChangePictureBrowserProxyImpl {
     /** @override */
-    initialize: function() {
+    initialize() {
       chrome.send('onChangePicturePageInitialized');
-    },
+    }
 
     /** @override */
-    selectDefaultImage: function(imageUrl) {
+    selectDefaultImage(imageUrl) {
       chrome.send('selectImage', [imageUrl, 'default']);
-    },
+    }
 
     /** @override */
-    selectOldImage: function() {
+    selectOldImage() {
       chrome.send('selectImage', ['', 'old']);
-    },
+    }
 
     /** @override */
-    selectProfileImage: function() {
+    selectProfileImage() {
       chrome.send('selectImage', ['', 'profile']);
-    },
+    }
 
     /** @override */
-    photoTaken: function(photoDataUrl) {
+    photoTaken(photoDataUrl) {
       chrome.send('photoTaken', [photoDataUrl]);
-    },
+    }
 
     /** @override */
-    chooseFile: function() {
+    chooseFile() {
       chrome.send('chooseFile');
-    },
-  };
+    }
+
+    /** @override */
+    requestSelectedImage() {
+      chrome.send('requestSelectedImage');
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(ChangePictureBrowserProxyImpl);
 
   return {
     ChangePictureBrowserProxy: ChangePictureBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp
index cc2a9352cfd..d4e15b6a63e 100644
--- a/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp
@@ -4,23 +4,17 @@
 {
   'targets': [
     {
-      'target_name': 'camera',
-      'dependencies': [
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
-      ],
-      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
-    },
-    {
       'target_name': 'change_picture',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_list',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_pane',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_types',
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-selector/compiled_resources2.gyp:iron-selector-extracted',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
         '../compiled_resources2.gyp:route',
-        'camera',
         'change_picture_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
@@ -92,6 +86,7 @@
       'target_name': 'lock_screen',
       'dependencies': [
         '../compiled_resources2.gyp:route',
+        '../controls/compiled_resources2.gyp:settings_dropdown_menu',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
@@ -205,6 +200,7 @@
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         'sync_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
diff --git a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_browser_proxy.js
index f43dfb66e26..008e6c94931 100644
--- a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_browser_proxy.js
@@ -10,72 +10,68 @@ cr.exportPath('settings');
 
 cr.define('settings', function() {
   /** @interface */
-  function EasyUnlockBrowserProxy() {}
-
-  EasyUnlockBrowserProxy.prototype = {
+  class EasyUnlockBrowserProxy {
     /**
      * Returns a true promise if Easy Unlock is already enabled on the device.
      * @return {!Promise<boolean>}
      */
-    getEnabledStatus: function() {},
+    getEnabledStatus() {}
 
     /**
      * Starts the Easy Unlock setup flow.
      */
-    startTurnOnFlow: function() {},
+    startTurnOnFlow() {}
 
     /**
      * Returns the Easy Unlock turn off flow status.
      * @return {!Promise<string>}
      */
-    getTurnOffFlowStatus: function() {},
+    getTurnOffFlowStatus() {}
 
     /**
      * Begins the Easy Unlock turn off flow.
      */
-    startTurnOffFlow: function() {},
+    startTurnOffFlow() {}
 
     /**
      * Cancels any in-progress Easy Unlock turn-off flows.
      */
-    cancelTurnOffFlow: function() {},
-  };
+    cancelTurnOffFlow() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.EasyUnlockBrowserProxy}
    */
-  function EasyUnlockBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(EasyUnlockBrowserProxyImpl);
-
-  EasyUnlockBrowserProxyImpl.prototype = {
+  class EasyUnlockBrowserProxyImpl {
     /** @override */
-    getEnabledStatus: function() {
+    getEnabledStatus() {
       return cr.sendWithPromise('easyUnlockGetEnabledStatus');
-    },
+    }
 
     /** @override */
-    startTurnOnFlow: function() {
+    startTurnOnFlow() {
       chrome.send('easyUnlockStartTurnOnFlow');
-    },
+    }
 
     /** @override */
-    getTurnOffFlowStatus: function() {
+    getTurnOffFlowStatus() {
       return cr.sendWithPromise('easyUnlockGetTurnOffFlowStatus');
-    },
+    }
 
     /** @override */
-    startTurnOffFlow: function() {
+    startTurnOffFlow() {
       chrome.send('easyUnlockStartTurnOffFlow');
-    },
+    }
 
     /** @override */
-    cancelTurnOffFlow: function() {
+    cancelTurnOffFlow() {
       chrome.send('easyUnlockCancelTurnOffFlow');
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(EasyUnlockBrowserProxyImpl);
 
   return {
     EasyUnlockBrowserProxy: EasyUnlockBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html
index c2ebdbd4b7a..0bc4943fbf8 100644
--- a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html
+++ b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html
@@ -13,11 +13,12 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[getTitleText_(status_)]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[getTitleText_(status_)]]</div>
+      <div class="body" slot="body">
         [[getDescriptionText_(status_)]]
       </div>
-      <div class="button-container" hidden="[[isButtonBarHidden_(status_)]]">
+      <div class="button-container" slot="button-container"
+          hidden="[[isButtonBarHidden_(status_)]]">
         <paper-spinner active="[[isSpinnerActive_(status_)]]">
         </paper-spinner>
         <paper-button class="cancel-button" on-tap="onCancelTap_"
diff --git a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.js b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.js
index f63503e8575..76d2d6968af 100644
--- a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.js
+++ b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.js
@@ -47,9 +47,9 @@ Polymer({
         'easy-unlock-enabled-status',
         this.handleEasyUnlockEnabledStatusChanged_.bind(this));
 
-    this.addWebUIListener(
-        'easy-unlock-turn-off-flow-status',
-        function(status) { this.status_ = status; }.bind(this));
+    this.addWebUIListener('easy-unlock-turn-off-flow-status', function(status) {
+      this.status_ = status;
+    }.bind(this));
 
     // Since the dialog text depends on the status, defer opening until we have
     // retrieved the turn off status to prevent UI flicker.
diff --git a/chromium/chrome/browser/resources/settings/people_page/fingerprint_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/fingerprint_browser_proxy.js
index f353f0969c8..71941a3a5aa 100644
--- a/chromium/chrome/browser/resources/settings/people_page/fingerprint_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/fingerprint_browser_proxy.js
@@ -52,115 +52,109 @@ settings.FingerprintInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function FingerprintBrowserProxy() {}
-
-  FingerprintBrowserProxy.prototype = {
+  class FingerprintBrowserProxy {
     /**
      * @return {!Promise<!settings.FingerprintInfo>}
      */
-    getFingerprintsList: function () {},
+    getFingerprintsList() {}
 
     /**
      * @return {!Promise<number>}
      */
-    getNumFingerprints: function () {},
-
-    startEnroll: function () {},
+    getNumFingerprints() {}
 
-    cancelCurrentEnroll: function() {},
+    startEnroll() {}
+    cancelCurrentEnroll() {}
 
     /**
      * @param {number} index
      * @return {!Promise<string>}
      */
-    getEnrollmentLabel: function(index) {},
+    getEnrollmentLabel(index) {}
 
     /**
      * @param {number} index
      * @return {!Promise<boolean>}
      */
-    removeEnrollment: function(index) {},
+    removeEnrollment(index) {}
 
     /**
      * @param {number} index
      * @param {string} newLabel
      * @return {!Promise<boolean>}
      */
-    changeEnrollmentLabel: function(index, newLabel) {},
-
-    startAuthentication: function() {},
+    changeEnrollmentLabel(index, newLabel) {}
 
-    endCurrentAuthentication: function() {},
+    startAuthentication() {}
+    endCurrentAuthentication() {}
 
     /**
      * TODO(sammiequon): Temporary function to let the handler know when a
      * completed scan has been sent via click on the setup fingerprint dialog.
      * Remove this when real scans are implemented.
      */
-    fakeScanComplete: function() {},
-  };
+    fakeScanComplete() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.FingerprintBrowserProxy}
    */
-  function FingerprintBrowserProxyImpl() {}
-  cr.addSingletonGetter(FingerprintBrowserProxyImpl);
-
-  FingerprintBrowserProxyImpl.prototype = {
+  class FingerprintBrowserProxyImpl {
     /** @override */
-    getFingerprintsList: function () {
+    getFingerprintsList() {
       return cr.sendWithPromise('getFingerprintsList');
-    },
+    }
 
     /** @override */
-    getNumFingerprints: function () {
+    getNumFingerprints() {
       return cr.sendWithPromise('getNumFingerprints');
-    },
+    }
 
     /** @override */
-    startEnroll: function () {
+    startEnroll() {
       chrome.send('startEnroll');
-    },
+    }
 
     /** @override */
-    cancelCurrentEnroll: function() {
+    cancelCurrentEnroll() {
       chrome.send('cancelCurrentEnroll');
-    },
+    }
 
     /** @override */
-    getEnrollmentLabel: function(index) {
+    getEnrollmentLabel(index) {
       return cr.sendWithPromise('getEnrollmentLabel');
-    },
+    }
 
     /** @override */
-    removeEnrollment: function(index) {
+    removeEnrollment(index) {
       return cr.sendWithPromise('removeEnrollment', index);
-    },
+    }
 
     /** @override */
-    changeEnrollmentLabel: function(index, newLabel) {
+    changeEnrollmentLabel(index, newLabel) {
       return cr.sendWithPromise('changeEnrollmentLabel', index, newLabel);
-    },
+    }
 
     /** @override */
-    startAuthentication: function() {
+    startAuthentication() {
       chrome.send('startAuthentication');
-    },
+    }
 
     /** @override */
-    endCurrentAuthentication: function() {
+    endCurrentAuthentication() {
       chrome.send('endCurrentAuthentication');
-    },
+    }
 
     /** @override */
-    fakeScanComplete: function() {
+    fakeScanComplete() {
       chrome.send('fakeScanComplete');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(FingerprintBrowserProxyImpl);
 
   return {
-    FingerprintBrowserProxy : FingerprintBrowserProxy,
-    FingerprintBrowserProxyImpl : FingerprintBrowserProxyImpl,
+    FingerprintBrowserProxy: FingerprintBrowserProxy,
+    FingerprintBrowserProxyImpl: FingerprintBrowserProxyImpl,
   };
 });
diff --git a/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.html b/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.html
index 990eea49bd3..6c62e3e44af 100644
--- a/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.html
+++ b/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.html
@@ -22,7 +22,6 @@
       .add-link {
         background-color: transparent;
         color: var(--google-blue-500);
-        padding: 0;
       }
 
       .add-link[disabled] {
@@ -55,9 +54,8 @@
             <paper-input value="{{item}}"
                 on-change="onFingerprintLabelChanged_">
             </paper-input>
-            <button is="paper-icon-button-light"
+            <button is="paper-icon-button-light" class="icon-delete-gray"
                 on-tap="onFingerprintDeleteTapped_">
-              <iron-icon icon="cr:delete"></iron-icon>
             </button>
           </div>
         </template>
@@ -71,10 +69,12 @@
     </div>
     <i class="settings-box continuation">$i18n{lockScreenFingerprintWarning}</i>
 
-    <settings-setup-fingerprint-dialog id="setupFingerprint"
-        on-add-fingerprint="updateFingerprintsList_"
-        on-close="onSetupFingerprintDialogClose_">
-    </settings-setup-fingerprint-dialog>
+    <template is="dom-if" if="[[showSetupFingerprintDialog_]]" restamp>
+      <settings-setup-fingerprint-dialog
+          on-add-fingerprint="updateFingerprintsList_"
+          on-close="onSetupFingerprintDialogClose_">
+      </settings-setup-fingerprint-dialog>
+    </template>
   </template>
   <script src="fingerprint_list.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.js b/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.js
index 442c53cc218..d6c142e0868 100644
--- a/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.js
+++ b/chromium/chrome/browser/resources/settings/people_page/fingerprint_list.js
@@ -31,7 +31,10 @@ Polymer({
       value: function() {
         return [];
       }
-    }
+    },
+
+    /** @private */
+    showSetupFingerprintDialog_: Boolean,
   },
 
   /** @private {?settings.FingerprintBrowserProxy} */
@@ -59,10 +62,10 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(newRoute, oldRoute) {
-    if (newRoute != settings.Route.FINGERPRINT) {
+    if (newRoute != settings.routes.FINGERPRINT) {
       if (this.browserProxy_)
         this.browserProxy_.endCurrentAuthentication();
-    } else if (oldRoute == settings.Route.LOCK_SCREEN) {
+    } else if (oldRoute == settings.routes.LOCK_SCREEN) {
       // Start fingerprint authentication when going from LOCK_SCREEN to
       // FINGERPRINT page.
       this.browserProxy_.startAuthentication();
@@ -93,9 +96,11 @@ Polymer({
         ripple.simulatedRipple();
 
       // Flash the background.
-      listItem.animate({
-        backgroundColor: ['var(--google-grey-300)', 'white'],
-      }, FLASH_DURATION_MS);
+      listItem.animate(
+          {
+            backgroundColor: ['var(--google-grey-300)', 'white'],
+          },
+          FLASH_DURATION_MS);
     });
   },
 
@@ -121,11 +126,10 @@ Polymer({
    * @private
    */
   onFingerprintDeleteTapped_: function(e) {
-    this.browserProxy_.removeEnrollment(e.model.index).then(
-        function(success) {
-          if (success)
-            this.updateFingerprintsList_();
-        }.bind(this));
+    this.browserProxy_.removeEnrollment(e.model.index).then(function(success) {
+      if (success)
+        this.updateFingerprintsList_();
+    }.bind(this));
   },
 
   /**
@@ -133,8 +137,8 @@ Polymer({
    * @private
    */
   onFingerprintLabelChanged_: function(e) {
-    this.browserProxy_.changeEnrollmentLabel(e.model.index, e.model.item).then(
-        function(success) {
+    this.browserProxy_.changeEnrollmentLabel(e.model.index, e.model.item)
+        .then(function(success) {
           if (success)
             this.updateFingerprintsList_();
         }.bind(this));
@@ -145,11 +149,12 @@ Polymer({
    * @private
    */
   openAddFingerprintDialog_: function() {
-    this.$.setupFingerprint.open();
+    this.showSetupFingerprintDialog_ = true;
   },
 
   /** @private */
   onSetupFingerprintDialogClose_: function() {
+    this.showSetupFingerprintDialog_ = false;
     cr.ui.focusWithoutInk(assert(this.$$('#addFingerprint')));
     this.browserProxy_.startAuthentication();
   },
@@ -161,8 +166,8 @@ Polymer({
    */
   onScreenLocked_: function(screenIsLocked) {
     if (!screenIsLocked &&
-        settings.getCurrentRoute() == settings.Route.FINGERPRINT) {
-      this.$.setupFingerprint.close();
+        settings.getCurrentRoute() == settings.routes.FINGERPRINT) {
+      this.onSetupFingerprintDialogClose_();
     }
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/people_page/fingerprint_progress_arc.js b/chromium/chrome/browser/resources/settings/people_page/fingerprint_progress_arc.js
index 0bbf430b7e1..a1569405c9d 100644
--- a/chromium/chrome/browser/resources/settings/people_page/fingerprint_progress_arc.js
+++ b/chromium/chrome/browser/resources/settings/people_page/fingerprint_progress_arc.js
@@ -77,7 +77,8 @@ Polymer({
     var ctx = c.getContext('2d');
 
     ctx.beginPath();
-    ctx.arc(c.width / 2, c.height / 2, this.canvasCircleRadius_, startAngle,
+    ctx.arc(
+        c.width / 2, c.height / 2, this.canvasCircleRadius_, startAngle,
         endAngle);
     ctx.lineWidth = this.canvasCircleStrokeWidth_;
     ctx.strokeStyle = color;
@@ -109,9 +110,10 @@ Polymer({
     ctx.shadowOffsetY = 0;
     ctx.shadowColor = this.canvasCircleShadowColor_;
     ctx.shadowBlur = blur;
-    ctx.arc(c.width / 2, c.height / 2,
+    ctx.arc(
+        c.width / 2, c.height / 2,
         this.canvasCircleRadius_ - this.canvasCircleStrokeWidth_ / 2 + blur / 2,
-        0, 2*Math.PI);
+        0, 2 * Math.PI);
     ctx.stroke();
     ctx.translate(c.width, 0);
   },
@@ -126,8 +128,8 @@ Polymer({
   animate: function(startAngle, endAngle) {
     var currentAngle = startAngle;
     // The value to update the angle by each tick.
-    var step = (endAngle - startAngle) /
-        (ANIMATE_DURATION_MS / ANIMATE_TICKS_MS);
+    var step =
+        (endAngle - startAngle) / (ANIMATE_DURATION_MS / ANIMATE_TICKS_MS);
     var id = setInterval(doAnimate.bind(this), ANIMATE_TICKS_MS);
     // Circles on html canvas have 0 radians on the positive x-axis and go in
     // clockwise direction. We want to start at the top of the circle which is
@@ -148,10 +150,10 @@ Polymer({
       // |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI / 2) otherwise
       // the regular draw from |start| to |currentAngle| will draw nothing which
       // will cause a flicker for one frame.
-      this.drawArc(start, start + currentAngle,
-          this.canvasCircleProgressColor_);
-      this.drawArc(start + currentAngle,
-          currentAngle <= 0 ? 7 * Math.PI / 2 : start,
+      this.drawArc(
+          start, start + currentAngle, this.canvasCircleProgressColor_);
+      this.drawArc(
+          start + currentAngle, currentAngle <= 0 ? 7 * Math.PI / 2 : start,
           this.canvasCircleBackgroundColor_);
       currentAngle += step;
     }
diff --git a/chromium/chrome/browser/resources/settings/people_page/import_data_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/import_data_browser_proxy.js
index 24c108ec339..5458bab65e2 100644
--- a/chromium/chrome/browser/resources/settings/people_page/import_data_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/import_data_browser_proxy.js
@@ -36,53 +36,49 @@ settings.ImportDataStatus = {
 
 cr.define('settings', function() {
   /** @interface */
-  function ImportDataBrowserProxy() {}
-
-  ImportDataBrowserProxy.prototype = {
+  class ImportDataBrowserProxy {
     /**
      * Returns the source profiles available for importing from other browsers.
      * @return {!Promise<!Array<!settings.BrowserProfile>>}
      */
-    initializeImportDialog: function() {},
+    initializeImportDialog() {}
 
     /**
      * Starts importing data for the specificed source browser profile. The C++
      * responds with the 'import-data-status-changed' WebUIListener event.
      * @param {number} sourceBrowserProfileIndex
      */
-    importData: function(sourceBrowserProfileIndex) {},
+    importData(sourceBrowserProfileIndex) {}
 
     /**
      * Prompts the user to choose a bookmarks file to import bookmarks from.
      */
-    importFromBookmarksFile: function() {},
-  };
+    importFromBookmarksFile() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.ImportDataBrowserProxy}
    */
-  function ImportDataBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(ImportDataBrowserProxyImpl);
-
-  ImportDataBrowserProxyImpl.prototype = {
+  class ImportDataBrowserProxyImpl {
     /** @override */
-    initializeImportDialog: function() {
+    initializeImportDialog() {
       return cr.sendWithPromise('initializeImportDialog');
-    },
+    }
 
     /** @override */
-    importData: function(sourceBrowserProfileIndex) {
+    importData(sourceBrowserProfileIndex) {
       chrome.send('importData', [sourceBrowserProfileIndex]);
-    },
+    }
 
     /** @override */
-    importFromBookmarksFile: function() {
+    importFromBookmarksFile() {
       chrome.send('importFromBookmarksFile');
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(ImportDataBrowserProxyImpl);
 
   return {
     ImportDataBrowserProxy: ImportDataBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.html b/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.html
index 72b1de019df..df42eaab86a 100644
--- a/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.html
+++ b/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.html
@@ -35,9 +35,10 @@
         width: 100%;
       }
     </style>
-    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}" ignore-popstate>
-      <div class="title">$i18n{importTitle}</div>
-      <div class="body">
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}"
+        ignore-popstate>
+      <div class="title" slot="title">$i18n{importTitle}</div>
+      <div class="body" slot="body">
         <div hidden$="[[!hasImportStatus_(
             importStatusEnum_.SUCCEEDED, importStatus_)]]">
           <iron-icon id="successIcon" icon="settings:check-circle">
@@ -91,7 +92,7 @@
           </settings-checkbox>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-spinner
             active="[[hasImportStatus_(
                 importStatusEnum_.IN_PROGRESS, importStatus_)]]"
@@ -123,4 +124,4 @@
     </dialog>
   </template>
   <script src="import_data_dialog.js"></script>
-</dom-module>
+:</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.js b/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.js
index d98afd2bcb2..83099cd0cd8 100644
--- a/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.js
+++ b/chromium/chrome/browser/resources/settings/people_page/import_data_dialog.js
@@ -110,8 +110,8 @@ Polymer({
    * @private
    */
   getActionButtonText_: function() {
-    return this.i18n(this.isImportFromFileSelected_() ?
-        'importChooseFile' : 'importCommit');
+    return this.i18n(
+        this.isImportFromFileSelected_() ? 'importChooseFile' : 'importCommit');
   },
 
   /** @private */
diff --git a/chromium/chrome/browser/resources/settings/people_page/lock_screen.html b/chromium/chrome/browser/resources/settings/people_page/lock_screen.html
index 9d82240cb56..e03aaea348d 100644
--- a/chromium/chrome/browser/resources/settings/people_page/lock_screen.html
+++ b/chromium/chrome/browser/resources/settings/people_page/lock_screen.html
@@ -48,6 +48,18 @@
       #pinPasswordSecondaryActionDiv {
         margin: auto;
       }
+
+      #easyUnlockSettingsCollapsable {
+        @apply(--settings-list-frame-padding);
+      }
+
+      .no-padding {
+        padding: 0;
+      }
+
+      .underbar {
+        border-bottom: var(--settings-separator-line);
+      }
     </style>
 
     <div>
@@ -72,7 +84,7 @@
                 </div>
               </paper-radio-button>
               <paper-radio-button name="pin+password"
-                  class="list-item underbar">
+                  class="list-item">
                 <div id="pinPasswordDiv" class="start">
                   $i18n{lockScreenPinOrPassword}
                 </div>
@@ -125,7 +137,7 @@
       </template>
 
       <template is="dom-if" if="[[easyUnlockAllowed_]]">
-        <div id="easyUnlock" class="settings-box two-line continuation">
+        <div id="easyUnlock" class="settings-box two-line">
           <div class="start">
             <div>$i18n{easyUnlockSectionTitle}</div>
             <div class="secondary">
@@ -135,13 +147,6 @@
               <a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
                 $i18n{learnMore}
               </a>
-              <template is="dom-if" if="[[getShowEasyUnlockToggle_(
-                  easyUnlockEnabled_, easyUnlockProximityDetectionAllowed_)]]">
-                <settings-toggle-button
-                    pref="{{prefs.easy_unlock.proximity_required}}"
-                    label="$i18n{easyUnlockRequireProximityLabel}">
-                </settings-toggle-button>
-              </template>
             </div>
           </div>
           <div class="separator"></div>
@@ -158,15 +163,38 @@
             </paper-button>
           </template>
         </div>
+        <iron-collapse opened="[[easyUnlockEnabled_]]"
+            id="easyUnlockSettingsCollapsable">
+          <div class="settings-box continuation no-padding underbar">
+            <settings-toggle-button
+              class="start"
+              pref="{{prefs.proximity_auth.is_chromeos_login_enabled}}"
+              label="$i18n{easyUnlockAllowSignInLabel}">
+            </settings-toggle-button>
+          </div>
+          <div class="settings-box continuation no-padding">
+            <div class="start">
+              $i18n{easyUnlockProximityThresholdLabel}
+            </div>
+            <settings-dropdown-menu
+              pref="{{prefs.easy_unlock.proximity_threshold}}"
+              menu-options="[[easyUnlockProximityThresholdMapping_]]">
+            </settings-dropdown-menu>
+          </div>
+        </iron-collapse>
       </template>
 
-      <settings-password-prompt-dialog id="passwordPrompt"
-          on-close="onPasswordClosed_" set-modes="{{setModes_}}">
-      </settings-password-prompt-dialog>
+      <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
+        <settings-password-prompt-dialog id="passwordPrompt"
+            on-close="onPasswordPromptDialogClose_" set-modes="{{setModes_}}">
+        </settings-password-prompt-dialog>
+      </template>
 
-      <settings-setup-pin-dialog id="setupPin" on-done="onPinSetupDone_"
-          on-close="onSetupPinClosed_" set-modes="[[setModes_]]">
-      </settings-setup-pin-dialog>
+      <template is="dom-if" if="[[showSetupPinDialog_]]" restamp>
+        <settings-setup-pin-dialog id="setupPin" set-modes="[[setModes_]]"
+            on-close="onSetupPinDialogClose_">
+        </settings-setup-pin-dialog>
+      </template>
 
       <template is="dom-if" if="[[showEasyUnlockTurnOffDialog_]]" restamp>
         <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog"
diff --git a/chromium/chrome/browser/resources/settings/people_page/lock_screen.js b/chromium/chrome/browser/resources/settings/people_page/lock_screen.js
index fe5be029e66..ddec1fb4c18 100644
--- a/chromium/chrome/browser/resources/settings/people_page/lock_screen.js
+++ b/chromium/chrome/browser/resources/settings/people_page/lock_screen.js
@@ -14,6 +14,18 @@
  * </settings-lock-screen>
  */
 
+/**
+ * Possible values of the proximity threshould displayed to the user.
+ * This should be kept in sync with the enum defined here:
+ * components/proximity_auth/proximity_monitor_impl.cc
+ */
+settings.EasyUnlockProximityThreshold = {
+  VERY_CLOSE: 0,
+  CLOSE: 1,
+  FAR: 2,
+  VERY_FAR: 3,
+};
+
 Polymer({
   is: 'settings-lock-screen',
 
@@ -107,13 +119,31 @@ Polymer({
     },
 
     /**
-     * True if Easy Unlock's proximity detection feature is allowed.
+     * Returns the proximity threshold mapping to be displayed in the
+     * threshold selector dropdown menu.
      */
-    easyUnlockProximityDetectionAllowed_: {
-      type: Boolean,
+    easyUnlockProximityThresholdMapping_: {
+      type: Array,
       value: function() {
-        return loadTimeData.getBoolean('easyUnlockAllowed') &&
-            loadTimeData.getBoolean('easyUnlockProximityDetectionAllowed');
+        return [
+          {
+            value: settings.EasyUnlockProximityThreshold.VERY_CLOSE,
+            name:
+                loadTimeData.getString('easyUnlockProximityThresholdVeryClose')
+          },
+          {
+            value: settings.EasyUnlockProximityThreshold.CLOSE,
+            name: loadTimeData.getString('easyUnlockProximityThresholdClose')
+          },
+          {
+            value: settings.EasyUnlockProximityThreshold.FAR,
+            name: loadTimeData.getString('easyUnlockProximityThresholdFar')
+          },
+          {
+            value: settings.EasyUnlockProximityThreshold.VERY_FAR,
+            name: loadTimeData.getString('easyUnlockProximityThresholdVeryFar')
+          }
+        ];
       },
       readOnly: true,
     },
@@ -123,6 +153,12 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    showPasswordPromptDialog_: Boolean,
+
+    /** @private */
+    showSetupPinDialog_: Boolean,
   },
 
   /** @private {?settings.EasyUnlockBrowserProxy} */
@@ -137,7 +173,7 @@ Polymer({
   /** @override */
   attached: function() {
     if (this.shouldAskForPassword_(settings.getCurrentRoute()))
-      this.$.passwordPrompt.open();
+      this.openPasswordPromptDialog_();
 
     this.easyUnlockBrowserProxy_ =
         settings.EasyUnlockBrowserProxyImpl.getInstance();
@@ -160,7 +196,7 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(newRoute, oldRoute) {
-    if (newRoute == settings.Route.LOCK_SCREEN &&
+    if (newRoute == settings.routes.LOCK_SCREEN &&
         this.fingerprintUnlockEnabled_ && this.fingerprintBrowserProxy_) {
       this.fingerprintBrowserProxy_.getNumFingerprints().then(
           function(numFingerprints) {
@@ -169,9 +205,10 @@ Polymer({
     }
 
     if (this.shouldAskForPassword_(newRoute)) {
-      this.$.passwordPrompt.open();
-    } else if (newRoute != settings.Route.FINGERPRINT &&
-        oldRoute != settings.Route.FINGERPRINT) {
+      this.openPasswordPromptDialog_();
+    } else if (
+        newRoute != settings.routes.FINGERPRINT &&
+        oldRoute != settings.routes.FINGERPRINT) {
       // If the user navigated away from the lock screen settings page they will
       // have to re-enter their password. An exception is if they are navigating
       // to or from the fingerprint subpage.
@@ -198,26 +235,38 @@ Polymer({
   /** @private */
   onSetModesChanged_: function() {
     if (this.shouldAskForPassword_(settings.getCurrentRoute())) {
-      this.$.setupPin.close();
-      this.$.passwordPrompt.open();
+      this.showSetupPinDialog_ = false;
+      this.openPasswordPromptDialog_();
     }
   },
 
   /** @private */
-  onPasswordClosed_: function() {
+  openPasswordPromptDialog_: function() {
+    this.showPasswordPromptDialog_ = true;
+  },
+
+  /** @private */
+  onPasswordPromptDialogClose_: function() {
+    this.showPasswordPromptDialog_ = false;
     if (!this.setModes_)
-      settings.navigateTo(settings.Route.PEOPLE);
+      settings.navigateToPreviousRoute();
     else
       cr.ui.focusWithoutInk(assert(this.$$('#unlockType')));
   },
 
-  /** @private */
-  onPinSetupDone_: function() {
-    this.$.setupPin.close();
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onConfigurePin_: function(e) {
+    e.preventDefault();
+    this.writeUma_(LockScreenProgress.CHOOSE_PIN_OR_PASSWORD);
+    this.showSetupPinDialog_ = true;
   },
 
   /** @private */
-  onSetupPinClosed_: function() {
+  onSetupPinDialogClose_: function() {
+    this.showSetupPinDialog_ = false;
     cr.ui.focusWithoutInk(assert(this.$$('#setupPinButton')));
   },
 
@@ -244,26 +293,16 @@ Polymer({
   /** @private */
   getDescriptionText_: function() {
     if (this.numFingerprints_ > 0) {
-      return this.i18n('lockScreenNumberFingerprints',
-          this.numFingerprints_.toString());
+      return this.i18n(
+          'lockScreenNumberFingerprints', this.numFingerprints_.toString());
     }
 
     return this.i18n('lockScreenEditFingerprintsDescription');
   },
 
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  onConfigurePin_: function(e) {
-    e.preventDefault();
-    this.$.setupPin.open();
-    this.writeUma_(LockScreenProgress.CHOOSE_PIN_OR_PASSWORD);
-  },
-
   /** @private */
   onEditFingerprints_: function() {
-    settings.navigateTo(settings.Route.FINGERPRINT);
+    settings.navigateTo(settings.routes.FINGERPRINT);
   },
 
   /**
@@ -272,7 +311,7 @@ Polymer({
    * @private
    */
   shouldAskForPassword_: function(route) {
-    return route == settings.Route.LOCK_SCREEN && !this.setModes_;
+    return route == settings.routes.LOCK_SCREEN && !this.setModes_;
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/people_page/lock_screen_constants.js b/chromium/chrome/browser/resources/settings/people_page/lock_screen_constants.js
index 2fc1ad4c64e..4b338056fd9 100644
--- a/chromium/chrome/browser/resources/settings/people_page/lock_screen_constants.js
+++ b/chromium/chrome/browser/resources/settings/people_page/lock_screen_constants.js
@@ -26,24 +26,22 @@ var LockScreenProgress = {
 };
 
 cr.define('settings', function() {
-/**
- * Helper function to send the progress of the pin setup to be recorded in the
- * histogram.
- * @param {LockScreenProgress} currentProgress
- */
-var recordLockScreenProgress = function(currentProgress) {
-  if (currentProgress >= LockScreenProgress.MAX_BUCKET) {
-    console.error('Expected a enumeration value of ' +
-        LockScreenProgress.MAX_BUCKET + ' or lower: Received ' +
-        currentProgress + '.');
-    return;
-  }
-  chrome.send('metricsHandler:recordInHistogram',
-      [PinUnlockUmaHistogramName, currentProgress,
-       LockScreenProgress.MAX_BUCKET]);
-};
-
-  return {
-    recordLockScreenProgress: recordLockScreenProgress
+  /**
+   * Helper function to send the progress of the pin setup to be recorded in the
+   * histogram.
+   * @param {LockScreenProgress} currentProgress
+   */
+  var recordLockScreenProgress = function(currentProgress) {
+    if (currentProgress >= LockScreenProgress.MAX_BUCKET) {
+      console.error(
+          'Expected a enumeration value of ' + LockScreenProgress.MAX_BUCKET +
+          ' or lower: Received ' + currentProgress + '.');
+      return;
+    }
+    chrome.send('metricsHandler:recordInHistogram', [
+      PinUnlockUmaHistogramName, currentProgress, LockScreenProgress.MAX_BUCKET
+    ]);
   };
+
+  return {recordLockScreenProgress: recordLockScreenProgress};
 });
diff --git a/chromium/chrome/browser/resources/settings/people_page/lock_state_behavior.js b/chromium/chrome/browser/resources/settings/people_page/lock_state_behavior.js
index 3e5a90cce0a..ac6762b2e65 100644
--- a/chromium/chrome/browser/resources/settings/people_page/lock_state_behavior.js
+++ b/chromium/chrome/browser/resources/settings/people_page/lock_state_behavior.js
@@ -22,11 +22,8 @@ var LockStateBehavior = {
      * The currently selected unlock type.
      * @type {!LockScreenUnlockType}
      */
-    selectedUnlockType: {
-      type: String,
-      notify: true,
-      value: LockScreenUnlockType.VALUE_PENDING
-    },
+    selectedUnlockType:
+        {type: String, notify: true, value: LockScreenUnlockType.VALUE_PENDING},
 
     /**
      * True/false if there is a PIN set; undefined if the computation is still
@@ -34,19 +31,13 @@ var LockStateBehavior = {
      * can change the selectedUnlockType before setting up a PIN.
      * @type {boolean|undefined}
      */
-    hasPin: {
-      type: Boolean,
-      notify: true
-    },
+    hasPin: {type: Boolean, notify: true},
 
     /**
      * Interface for chrome.quickUnlockPrivate calls. May be overriden by tests.
      * @private
      */
-    quickUnlockPrivate_: {
-      type: Object,
-      value: chrome.quickUnlockPrivate
-    },
+    quickUnlockPrivate_: {type: Object, value: chrome.quickUnlockPrivate},
   },
 
   /** @override */
diff --git a/chromium/chrome/browser/resources/settings/people_page/manage_profile.html b/chromium/chrome/browser/resources/settings/people_page/manage_profile.html
index d4dbc6a3013..656400bd7c9 100644
--- a/chromium/chrome/browser/resources/settings/people_page/manage_profile.html
+++ b/chromium/chrome/browser/resources/settings/people_page/manage_profile.html
@@ -19,9 +19,9 @@
     </style>
     <div class="settings-box first">
       <paper-input id="name" value="[[profileName]]" pattern=".*\S.*"
-          auto-validate required on-change="onProfileNameChanged_"
-          on-keydown="onProfileNameKeydown_"
-          disabled="[[isProfileNameDisabled_(syncStatus)]]">
+          on-change="onProfileNameChanged_" on-keydown="onProfileNameKeydown_"
+          disabled="[[isProfileNameDisabled_(syncStatus)]]"
+          auto-validate no-label-float required>
       </paper-input>
     </div>
     <template is="dom-if" if="[[isProfileShortcutSettingVisible_]]">
@@ -35,8 +35,7 @@
       </div>
     </template>
     <cr-profile-avatar-selector id="selector" avatars="[[availableIcons]]"
-        selected-avatar-url="{{profileIconUrl}}"
-        on-iron-activate="onIconActivate_" ignore-modified-key-events>
+        selected-avatar="{{profileAvatar_}}" ignore-modified-key-events>
     </cr-profile-avatar-selector>
   </template>
   <script src="manage_profile.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/people_page/manage_profile.js b/chromium/chrome/browser/resources/settings/people_page/manage_profile.js
index 65cf8fc63d3..91e46daeb08 100644
--- a/chromium/chrome/browser/resources/settings/people_page/manage_profile.js
+++ b/chromium/chrome/browser/resources/settings/people_page/manage_profile.js
@@ -14,9 +14,15 @@ Polymer({
 
   properties: {
     /**
-     * The currently selected profile icon URL. May be a data URL.
+     * The newly selected avatar. Populated only if the user manually changes
+     * the avatar selection. The observer ensures that the changes are
+     * propagated to the C++.
+     * @private
      */
-    profileIconUrl: String,
+    profileAvatar_: {
+      type: Object,
+      observer: 'profileAvatarChanged_',
+    },
 
     /**
      * The current profile name.
@@ -71,7 +77,7 @@ Polymer({
 
   /** @protected */
   currentRouteChanged: function() {
-    if (settings.getCurrentRoute() == settings.Route.MANAGE_PROFILE) {
+    if (settings.getCurrentRoute() == settings.routes.MANAGE_PROFILE) {
       this.$.name.value = this.profileName;
 
       if (loadTimeData.getBoolean('profileShortcutsEnabled')) {
@@ -114,20 +120,14 @@ Polymer({
   },
 
   /**
-   * Handler for when an avatar is activated.
-   * @param {!Event} event
+   * Handler for when the profile avatar is changed by the user.
    * @private
    */
-  onIconActivate_: function(event) {
-    // Explicitly test against undefined, because even when an element has the
-    // data-is-gaia-avatar attribute, dataset.isGaiaAvatar returns an empty
-    // string, which is falsy.
-    var isGaiaAvatar = event.detail.item.dataset.isGaiaAvatar !== undefined;
-
-    if (isGaiaAvatar)
+  profileAvatarChanged_: function() {
+    if (this.profileAvatar_.isGaiaAvatar)
       this.browserProxy_.setProfileIconToGaiaAvatar();
     else
-      this.browserProxy_.setProfileIconToDefaultAvatar(event.detail.selected);
+      this.browserProxy_.setProfileIconToDefaultAvatar(this.profileAvatar_.url);
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.js
index 34e2d34108b..85a72595893 100644
--- a/chromium/chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.js
@@ -20,94 +20,90 @@ var ProfileShortcutStatus = {
 
 cr.define('settings', function() {
   /** @interface */
-  function ManageProfileBrowserProxy() {}
-
-  ManageProfileBrowserProxy.prototype = {
+  class ManageProfileBrowserProxy {
     /**
      * Gets the available profile icons to choose from.
      * @return {!Promise<!Array<!AvatarIcon>>}
      */
-    getAvailableIcons: function() {},
+    getAvailableIcons() {}
 
     /**
      * Sets the profile's icon to the GAIA avatar.
      */
-    setProfileIconToGaiaAvatar: function() {},
+    setProfileIconToGaiaAvatar() {}
 
     /**
      * Sets the profile's icon to one of the default avatars.
      * @param {string} iconUrl The new profile URL.
      */
-    setProfileIconToDefaultAvatar: function(iconUrl) {},
+    setProfileIconToDefaultAvatar(iconUrl) {}
 
     /**
      * Sets the profile's name.
      * @param {string} name The new profile name.
      */
-    setProfileName: function(name) {},
+    setProfileName(name) {}
 
     /**
      * Returns whether the current profile has a shortcut.
      * @return {!Promise<ProfileShortcutStatus>}
      */
-    getProfileShortcutStatus: function() {},
+    getProfileShortcutStatus() {}
 
     /**
      * Adds a shortcut for the current profile.
      */
-    addProfileShortcut: function() {},
+    addProfileShortcut() {}
 
     /**
      * Removes the shortcut of the current profile.
      */
-    removeProfileShortcut: function() {},
-  };
+    removeProfileShortcut() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.ManageProfileBrowserProxy}
    */
-  function ManageProfileBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(ManageProfileBrowserProxyImpl);
-
-  ManageProfileBrowserProxyImpl.prototype = {
+  class ManageProfileBrowserProxyImpl {
     /** @override */
-    getAvailableIcons: function() {
+    getAvailableIcons() {
       return cr.sendWithPromise('getAvailableIcons');
-    },
+    }
 
     /** @override */
-    setProfileIconToGaiaAvatar: function() {
+    setProfileIconToGaiaAvatar() {
       chrome.send('setProfileIconToGaiaAvatar');
-    },
+    }
 
     /** @override */
-    setProfileIconToDefaultAvatar: function(iconUrl) {
+    setProfileIconToDefaultAvatar(iconUrl) {
       chrome.send('setProfileIconToDefaultAvatar', [iconUrl]);
-    },
+    }
 
     /** @override */
-    setProfileName: function(name) {
+    setProfileName(name) {
       chrome.send('setProfileName', [name]);
-    },
+    }
 
     /** @override */
-    getProfileShortcutStatus: function() {
+    getProfileShortcutStatus() {
       return cr.sendWithPromise('requestProfileShortcutStatus');
-    },
+    }
 
     /** @override */
-    addProfileShortcut: function() {
+    addProfileShortcut() {
       chrome.send('addProfileShortcut');
-    },
+    }
 
     /** @override */
-    removeProfileShortcut: function() {
+    removeProfileShortcut() {
       chrome.send('removeProfileShortcut');
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(ManageProfileBrowserProxyImpl);
 
   return {
     ManageProfileBrowserProxy: ManageProfileBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.html b/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.html
index 0b83812b36d..ca3cc858a64 100644
--- a/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.html
+++ b/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.html
@@ -20,12 +20,12 @@
 
     <dialog is="cr-dialog" id="dialog" on-close="onClose_"
         close-text="$i18n{close}">
-      <div class="title">$i18n{passwordPromptTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{passwordPromptTitle}</div>
+      <div class="body" slot="body">
 
         <div class="settings-box first">$i18n{passwordPromptEnterPassword}</div>
 
-        <paper-input id="passwordInput" type="password" autofocus
+        <paper-input id="passwordInput" type="password"
             label="$i18n{passwordPromptPasswordLabel}"
             value="{{password_}}"
             invalid$="[[passwordInvalid_]]"
@@ -33,7 +33,7 @@
             aria-disabled="false">
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.js b/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
index 2625f2ba619..c9ee712d9f2 100644
--- a/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
+++ b/chromium/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
@@ -27,7 +27,7 @@
 (function() {
 'use strict';
 
-/** @const */ var PASSWORD_ACTIVE_DURATION_MS = 10 * 60 * 1000; // Ten minutes.
+/** @const */ var PASSWORD_ACTIVE_DURATION_MS = 10 * 60 * 1000;  // Ten minutes.
 
 Polymer({
   is: 'settings-password-prompt-dialog',
@@ -97,30 +97,13 @@ Polymer({
 
   /** @override */
   attached: function() {
+    this.writeUma_(LockScreenProgress.START_SCREEN_LOCK);
+    this.$.dialog.showModal();
     this.async(function() {
       this.$.passwordInput.focus();
     }.bind(this));
   },
 
-  /**
-   * Open up the dialog. This will wait until the dialog has loaded before
-   * opening it.
-   */
-  open: function() {
-    // Wait until the dialog is attached to the DOM before trying to open it.
-    var dialog = /** @type {{isConnected: boolean}} */ (this.$.dialog);
-    if (!dialog.isConnected) {
-      setTimeout(this.open.bind(this));
-      return;
-    }
-
-    if (this.$.dialog.open)
-      return;
-
-    this.writeUma_(LockScreenProgress.START_SCREEN_LOCK);
-    this.$.dialog.showModal();
-  },
-
   /** @private */
   onCancelTap_: function() {
     if (this.$.dialog.open)
@@ -173,7 +156,7 @@ Polymer({
         }
 
         this.clearAccountPasswordTimeout_ = setTimeout(
-          clearSetModes.bind(this), this.passwordActiveDurationMs_);
+            clearSetModes.bind(this), this.passwordActiveDurationMs_);
 
         // Clear stored password state and close the dialog.
         this.password_ = '';
diff --git a/chromium/chrome/browser/resources/settings/people_page/people_page.html b/chromium/chrome/browser/resources/settings/people_page/people_page.html
index 75c19e80e3b..4879ebdb742 100644
--- a/chromium/chrome/browser/resources/settings/people_page/people_page.html
+++ b/chromium/chrome/browser/resources/settings/people_page/people_page.html
@@ -201,7 +201,7 @@
           </div>
           <button class="subpage-arrow"
               is="paper-icon-button-light" aria-label="$i18n{lockScreenTitle}"
-              aria-describedby="lockScrenSecondary"></button>
+              aria-describedby="lockScreenSecondary"></button>
         </div>
 </if>
 
@@ -277,8 +277,8 @@
         <settings-subpage
             associated-control="[[$$('#picture-subpage-trigger')]]"
             page-title="$i18n{editPerson}">
-          <settings-manage-profile profile-icon-url="[[profileIconUrl_]]"
-              profile-name="[[profileName_]]" sync-status="[[syncStatus]]">
+          <settings-manage-profile profile-name="[[profileName_]]"
+              sync-status="[[syncStatus]]">
           </settings-manage-profile>
         </settings-subpage>
       </template>
@@ -289,13 +289,13 @@
       <dialog is="cr-dialog" id="disconnectDialog"
           ignore-popstate ignore-enter-key
           on-close="onDisconnectClosed_" close-text="$i18n{close}">
-        <div class="title">$i18n{syncDisconnectTitle}</div>
-        <div class="body">
+        <div class="title" slot="title">$i18n{syncDisconnectTitle}</div>
+        <div class="body" slot="body">
           <div inner-h-t-m-l="[[
               getDisconnectExplanationHtml_(syncStatus.domain)]]">
           </div>
         </div>
-        <div class="button-container">
+        <div class="button-container" slot="button-container">
           <paper-button on-tap="onDisconnectCancel_" class="cancel-button">
             $i18n{cancel}
           </paper-button>
@@ -311,7 +311,7 @@
         </div>
 <if expr="(not chromeos and is_posix) or is_win or is_macosx">
         <template is="dom-if" if="[[!syncStatus.domain]]">
-          <div class="footer border-top-divider">
+          <div class="footer" slot="footer">
             <div class="settings-box first">
               <paper-checkbox id="deleteProfile" class="start"
                   checked="{{deleteProfile_}}">
diff --git a/chromium/chrome/browser/resources/settings/people_page/people_page.js b/chromium/chrome/browser/resources/settings/people_page/people_page.js
index bc4e9a7f055..35b743b750f 100644
--- a/chromium/chrome/browser/resources/settings/people_page/people_page.js
+++ b/chromium/chrome/browser/resources/settings/people_page/people_page.js
@@ -10,12 +10,10 @@ Polymer({
   is: 'settings-people-page',
 
   behaviors: [
-    settings.RouteObserverBehavior,
-    I18nBehavior,
-    WebUIListenerBehavior,
-// <if expr="chromeos">
+    settings.RouteObserverBehavior, I18nBehavior, WebUIListenerBehavior,
+    // <if expr="chromeos">
     LockStateBehavior,
-// </if>
+    // </if>
   ],
 
   properties: {
@@ -65,18 +63,18 @@ Polymer({
      */
     deleteProfile_: Boolean,
 
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     /** @private */
     showImportDataDialog_: {
       type: Boolean,
       value: false,
     },
-// </if>
+    // </if>
 
     /** @private */
     showDisconnectDialog_: Boolean,
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /**
      * True if fingerprint settings should be displayed on this machine.
      * @private
@@ -88,31 +86,39 @@ Polymer({
       },
       readOnly: true,
     },
-// </if>
+    // </if>
 
     /** @private {!Map<string, string>} */
     focusConfig_: {
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.SYNC.path, '#sync-status .subpage-arrow');
-// <if expr="not chromeos">
-        map.set(
-            settings.Route.MANAGE_PROFILE.path,
-            '#picture-subpage-trigger .subpage-arrow');
-// </if>
-// <if expr="chromeos">
-        map.set(
-            settings.Route.CHANGE_PICTURE.path,
-            '#picture-subpage-trigger .subpage-arrow');
-        map.set(
-            settings.Route.LOCK_SCREEN.path,
-            '#lock-screen-subpage-trigger .subpage-arrow');
-        map.set(
-            settings.Route.ACCOUNTS.path,
-            '#manage-other-people-subpage-trigger .subpage-arrow');
-// </if>
+        if (settings.routes.SYNC)
+          map.set(settings.routes.SYNC.path, '#sync-status .subpage-arrow');
+        // <if expr="not chromeos">
+        if (settings.routes.MANAGE_PROFILE) {
+          map.set(
+              settings.routes.MANAGE_PROFILE.path,
+              '#picture-subpage-trigger .subpage-arrow');
+        }
+        // </if>
+        // <if expr="chromeos">
+        if (settings.routes.CHANGE_PICTURE) {
+          map.set(
+              settings.routes.CHANGE_PICTURE.path,
+              '#picture-subpage-trigger .subpage-arrow');
+        }
+        if (settings.routes.LOCK_SCREEN) {
+          map.set(
+              settings.routes.LOCK_SCREEN.path,
+              '#lock-screen-subpage-trigger .subpage-arrow');
+        }
+        if (settings.routes.ACCOUNTS) {
+          map.set(
+              settings.routes.ACCOUNTS.path,
+              '#manage-other-people-subpage-trigger .subpage-arrow');
+        }
+        // </if>
         return map;
       },
     },
@@ -125,30 +131,31 @@ Polymer({
   attached: function() {
     var profileInfoProxy = settings.ProfileInfoBrowserProxyImpl.getInstance();
     profileInfoProxy.getProfileInfo().then(this.handleProfileInfo_.bind(this));
-    this.addWebUIListener('profile-info-changed',
-                          this.handleProfileInfo_.bind(this));
+    this.addWebUIListener(
+        'profile-info-changed', this.handleProfileInfo_.bind(this));
 
     profileInfoProxy.getProfileManagesSupervisedUsers().then(
         this.handleProfileManagesSupervisedUsers_.bind(this));
-    this.addWebUIListener('profile-manages-supervised-users-changed',
-                          this.handleProfileManagesSupervisedUsers_.bind(this));
+    this.addWebUIListener(
+        'profile-manages-supervised-users-changed',
+        this.handleProfileManagesSupervisedUsers_.bind(this));
 
-    this.addWebUIListener('profile-stats-count-ready',
-                          this.handleProfileStatsCount_.bind(this));
+    this.addWebUIListener(
+        'profile-stats-count-ready', this.handleProfileStatsCount_.bind(this));
 
     this.syncBrowserProxy_ = settings.SyncBrowserProxyImpl.getInstance();
     this.syncBrowserProxy_.getSyncStatus().then(
         this.handleSyncStatus_.bind(this));
-    this.addWebUIListener('sync-status-changed',
-                          this.handleSyncStatus_.bind(this));
+    this.addWebUIListener(
+        'sync-status-changed', this.handleSyncStatus_.bind(this));
   },
 
   /** @protected */
   currentRouteChanged: function() {
     this.showImportDataDialog_ =
-        settings.getCurrentRoute() == settings.Route.IMPORT_DATA;
+        settings.getCurrentRoute() == settings.routes.IMPORT_DATA;
 
-    if (settings.getCurrentRoute() == settings.Route.SIGN_OUT) {
+    if (settings.getCurrentRoute() == settings.routes.SIGN_OUT) {
       // If the sync status has not been fetched yet, optimistically display
       // the disconnect dialog. There is another check when the sync status is
       // fetched. The dialog will be closed then the user is not signed in.
@@ -165,7 +172,7 @@ Polymer({
     }
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /** @private */
   getPasswordState_: function(hasPin, enableScreenLock) {
     if (!enableScreenLock)
@@ -174,7 +181,7 @@ Polymer({
       return this.i18n('lockScreenPinOrPassword');
     return this.i18n('lockScreenPasswordOnly');
   },
-// </if>
+  // </if>
 
   /**
    * Handler for when the profile's icon and name is updated.
@@ -202,13 +209,15 @@ Polymer({
    */
   handleProfileStatsCount_: function(count) {
     this.deleteProfileWarning_ = (count > 0) ?
-        (count == 1) ?
-            loadTimeData.getStringF('deleteProfileWarningWithCountsSingular',
-                                    this.syncStatus.signedInUsername) :
-            loadTimeData.getStringF('deleteProfileWarningWithCountsPlural',
-                                    count, this.syncStatus.signedInUsername) :
-        loadTimeData.getStringF('deleteProfileWarningWithoutCounts',
-                                this.syncStatus.signedInUsername);
+        (count == 1) ? loadTimeData.getStringF(
+                           'deleteProfileWarningWithCountsSingular',
+                           this.syncStatus.signedInUsername) :
+                       loadTimeData.getStringF(
+                           'deleteProfileWarningWithCountsPlural', count,
+                           this.syncStatus.signedInUsername) :
+        loadTimeData.getStringF(
+            'deleteProfileWarningWithoutCounts',
+            this.syncStatus.signedInUsername);
   },
 
   /**
@@ -220,10 +229,10 @@ Polymer({
     if (!this.syncStatus && syncStatus && !syncStatus.signedIn)
       chrome.metricsPrivate.recordUserAction('Signin_Impression_FromSettings');
 
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     if (syncStatus.signedIn)
       settings.ProfileInfoBrowserProxyImpl.getInstance().getProfileStatsCount();
-// </if>
+    // </if>
 
     if (!syncStatus.signedIn && this.showDisconnectDialog_)
       this.$$('#disconnectDialog').close();
@@ -233,20 +242,20 @@ Polymer({
 
   /** @private */
   onPictureTap_: function() {
-// <if expr="chromeos">
-    settings.navigateTo(settings.Route.CHANGE_PICTURE);
-// </if>
-// <if expr="not chromeos">
-    settings.navigateTo(settings.Route.MANAGE_PROFILE);
-// </if>
+    // <if expr="chromeos">
+    settings.navigateTo(settings.routes.CHANGE_PICTURE);
+    // </if>
+    // <if expr="not chromeos">
+    settings.navigateTo(settings.routes.MANAGE_PROFILE);
+    // </if>
   },
 
-// <if expr="not chromeos">
+  // <if expr="not chromeos">
   /** @private */
   onProfileNameTap_: function() {
-    settings.navigateTo(settings.Route.MANAGE_PROFILE);
+    settings.navigateTo(settings.routes.MANAGE_PROFILE);
   },
-// </if>
+  // </if>
 
   /** @private */
   onSigninTap_: function() {
@@ -258,14 +267,14 @@ Polymer({
     this.showDisconnectDialog_ = false;
     cr.ui.focusWithoutInk(assert(this.$$('#disconnectButton')));
 
-    if (settings.getCurrentRoute() == settings.Route.SIGN_OUT)
+    if (settings.getCurrentRoute() == settings.routes.SIGN_OUT)
       settings.navigateToPreviousRoute();
     this.fire('signout-dialog-closed');
   },
 
   /** @private */
   onDisconnectTap_: function() {
-    settings.navigateTo(settings.Route.SIGN_OUT);
+    settings.navigateTo(settings.routes.SIGN_OUT);
   },
 
   /** @private */
@@ -302,31 +311,32 @@ Polymer({
         this.syncBrowserProxy_.startSignIn();
         break;
       case settings.StatusAction.SIGNOUT_AND_SIGNIN:
-// <if expr="chromeos">
+        // <if expr="chromeos">
         this.syncBrowserProxy_.attemptUserExit();
-// </if>
-// <if expr="not chromeos">
+        // </if>
+        // <if expr="not chromeos">
         if (this.syncStatus.domain)
-          settings.navigateTo(settings.Route.SIGN_OUT);
+          settings.navigateTo(settings.routes.SIGN_OUT);
         else {
           // Silently sign the user out without deleting their profile and
           // prompt them to sign back in.
           this.syncBrowserProxy_.signOut(false);
           this.syncBrowserProxy_.startSignIn();
         }
-// </if>
+        // </if>
         break;
       case settings.StatusAction.UPGRADE_CLIENT:
-        settings.navigateTo(settings.Route.ABOUT);
+        settings.navigateTo(settings.routes.ABOUT);
         break;
       case settings.StatusAction.ENTER_PASSPHRASE:
+      case settings.StatusAction.CONFIRM_SYNC_SETTINGS:
       case settings.StatusAction.NO_ACTION:
       default:
-        settings.navigateTo(settings.Route.SYNC);
+        settings.navigateTo(settings.routes.SYNC);
     }
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @param {!Event} e
    * @private
@@ -336,35 +346,34 @@ Polymer({
     // dialog, so prevent the end of the tap event to focus what is underneath
     // it, which takes focus from the dialog.
     e.preventDefault();
-    settings.navigateTo(settings.Route.LOCK_SCREEN);
+    settings.navigateTo(settings.routes.LOCK_SCREEN);
   },
-// </if>
+  // </if>
 
   /** @private */
   onManageOtherPeople_: function() {
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     this.syncBrowserProxy_.manageOtherPeople();
-// </if>
-// <if expr="chromeos">
-    settings.navigateTo(settings.Route.ACCOUNTS);
-// </if>
+    // </if>
+    // <if expr="chromeos">
+    settings.navigateTo(settings.routes.ACCOUNTS);
+    // </if>
   },
 
-// <if expr="not chromeos">
+  // <if expr="not chromeos">
   /**
    * @private
    * @param {string} domain
    * @return {string}
    */
   getDomainHtml_: function(domain) {
-    var innerSpan =
-        '<span id="managed-by-domain-name">' + domain + '</span>';
+    var innerSpan = '<span id="managed-by-domain-name">' + domain + '</span>';
     return loadTimeData.getStringF('domainManagedProfile', innerSpan);
   },
 
   /** @private */
   onImportDataTap_: function() {
-    settings.navigateTo(settings.Route.IMPORT_DATA);
+    settings.navigateTo(settings.routes.IMPORT_DATA);
   },
 
   /** @private */
@@ -372,7 +381,7 @@ Polymer({
     settings.navigateToPreviousRoute();
     cr.ui.focusWithoutInk(assert(this.$.importDataDialogTrigger));
   },
-// </if>
+  // </if>
 
   /**
    * @private
@@ -380,13 +389,13 @@ Polymer({
    * @return {string}
    */
   getDisconnectExplanationHtml_: function(domain) {
-// <if expr="not chromeos">
+    // <if expr="not chromeos">
     if (domain) {
       return loadTimeData.getStringF(
           'syncDisconnectManagedProfileExplanation',
           '<span id="managed-by-domain-name">' + domain + '</span>');
     }
-// </if>
+    // </if>
     return loadTimeData.getString('syncDisconnectExplanation');
   },
 
@@ -408,8 +417,9 @@ Polymer({
    *     error, there is an action associated with it.
    */
   isSyncStatusActionable_: function(syncStatus) {
-    return !!syncStatus && !syncStatus.managed && (!syncStatus.hasError ||
-        syncStatus.statusAction != settings.StatusAction.NO_ACTION);
+    return !!syncStatus && !syncStatus.managed &&
+        (!syncStatus.hasError ||
+         syncStatus.statusAction != settings.StatusAction.NO_ACTION);
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js
index 81eb71a2b1e..31f4824fd3b 100644
--- a/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js
@@ -20,51 +20,47 @@ settings.ProfileInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function ProfileInfoBrowserProxy() {}
-
-  ProfileInfoBrowserProxy.prototype = {
+  class ProfileInfoBrowserProxy {
     /**
      * Returns a Promise for the profile info.
      * @return {!Promise<!settings.ProfileInfo>}
      */
-    getProfileInfo: function() {},
+    getProfileInfo() {}
 
     /**
      * Requests the profile stats count. The result is returned by the
      * 'profile-stats-count-ready' WebUI listener event.
      */
-    getProfileStatsCount: function() {},
+    getProfileStatsCount() {}
 
     /**
      * Returns a Promise that's true if the profile manages supervised users.
      * @return {!Promise<boolean>}
      */
-    getProfileManagesSupervisedUsers: function() {},
-  };
+    getProfileManagesSupervisedUsers() {}
+  }
 
   /**
-   * @constructor
    * @implements {ProfileInfoBrowserProxy}
    */
-  function ProfileInfoBrowserProxyImpl() {}
-  cr.addSingletonGetter(ProfileInfoBrowserProxyImpl);
-
-  ProfileInfoBrowserProxyImpl.prototype = {
+  class ProfileInfoBrowserProxyImpl {
     /** @override */
-    getProfileInfo: function() {
+    getProfileInfo() {
       return cr.sendWithPromise('getProfileInfo');
-    },
+    }
 
     /** @override */
-    getProfileStatsCount: function() {
+    getProfileStatsCount() {
       chrome.send('getProfileStatsCount');
-    },
+    }
 
     /** @override */
-    getProfileManagesSupervisedUsers: function() {
+    getProfileManagesSupervisedUsers() {
       return cr.sendWithPromise('getProfileManagesSupervisedUsers');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(ProfileInfoBrowserProxyImpl);
 
   return {
     ProfileInfoBrowserProxyImpl: ProfileInfoBrowserProxyImpl,
diff --git a/chromium/chrome/browser/resources/settings/people_page/settings_icon_camera_alt.svg b/chromium/chrome/browser/resources/settings/people_page/settings_icon_camera_alt.svg
new file mode 100644
index 00000000000..d8c79bb21df
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/people_page/settings_icon_camera_alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF" preserveAspectRatio="xMidYMid meet"><circle cx="12" cy="12" r="3.2"></circle><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/people_page/settings_icon_flip.svg b/chromium/chrome/browser/resources/settings/people_page/settings_icon_flip.svg
new file mode 100644
index 00000000000..b95e714b522
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/people_page/settings_icon_flip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF" preserveAspectRatio="xMidYMid meet"><path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"></path></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.html b/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.html
index 3d7a97ea7c4..a81533429f6 100644
--- a/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.html
+++ b/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.html
@@ -54,8 +54,8 @@
 
     <dialog is="cr-dialog" id="dialog" on-close="close"
         close-text="$i18n{close}">
-      <div class="title">$i18n{configureFingerprintTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{configureFingerprintTitle}</div>
+      <div class="body" slot="body">
         <div class="settings-box first">
           <span class="middle">[[getInstructionMessage_(step_)]]</span>
         </div>
@@ -71,7 +71,7 @@
           <span class="middle">[[problemMessage_]]</span>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button id="addAnotherButton" on-tap="onAddAnotherFingerprint_"
             hidden$="[[hideAddAnother_(step_)]]">
           $i18n{configureFingerprintAddAnotherButton}
diff --git a/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.js b/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.js
index 2bb23ced429..e1922890789 100644
--- a/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.js
+++ b/chromium/chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.js
@@ -9,21 +9,19 @@ cr.exportPath('settings');
  * @enum {number}
  */
 settings.FingerprintSetupStep = {
-  LOCATE_SCANNER: 1,      // The user needs to locate the scanner.
-  MOVE_FINGER: 2,         // The user needs to move finger around the scanner.
-  READY: 3                // The scanner has read the fingerprint successfully.
+  LOCATE_SCANNER: 1,  // The user needs to locate the scanner.
+  MOVE_FINGER: 2,     // The user needs to move finger around the scanner.
+  READY: 3            // The scanner has read the fingerprint successfully.
 };
 
 (function() {
 
 /**
- * The estimated amount of complete scans needed to enroll a fingerprint. Used
- * to help us estimate the progress of an enroll session.
- * TODO(xiaoyinh@): This will be replaced by percentage of completion in the
- * future.
+ * The duration in ms of a fingerprint icon flash when a user touches the
+ * fingerprint sensor during an enroll session.
  * @const {number}
  */
-var SUCCESSFUL_SCANS_TO_COMPLETE = 15;
+var FLASH_DURATION_MS = 300;
 
 /**
  * The amount of millseconds after a successful but not completed scan before a
@@ -32,6 +30,15 @@ var SUCCESSFUL_SCANS_TO_COMPLETE = 15;
  */
 var SHOW_TAP_SENSOR_MESSAGE_DELAY_MS = 2000;
 
+/**
+ * The estimated amount of complete scans needed to enroll a fingerprint. Used
+ * to help us estimate the progress of an enroll session.
+ * TODO(xiaoyinh@): This will be replaced by percentage of completion in the
+ * future.
+ * @const {number}
+ */
+var SUCCESSFUL_SCANS_TO_COMPLETE = 15;
+
 Polymer({
   is: 'settings-setup-fingerprint-dialog',
 
@@ -79,12 +86,7 @@ Polymer({
     this.addWebUIListener(
         'on-fingerprint-scan-received', this.onScanReceived_.bind(this));
     this.browserProxy_ = settings.FingerprintBrowserProxyImpl.getInstance();
-  },
 
-  /**
-   * Opens the dialog.
-   */
-  open: function() {
     this.$.arc.clearCanvas();
     this.$.arc.drawBackgroundCircle();
     this.$.arc.drawShadow(10, 0, 0);
@@ -101,7 +103,7 @@ Polymer({
 
     // Note: Reset resets |step_| back to the default, so handle anything that
     // checks |step_| before resetting.
-    if(this.step_ == settings.FingerprintSetupStep.READY)
+    if (this.step_ == settings.FingerprintSetupStep.READY)
       this.fire('add-fingerprint');
     else
       this.browserProxy_.cancelCurrentEnroll();
@@ -166,7 +168,16 @@ Polymer({
           this.setProblem_(scan.result);
           if (scan.result == settings.FingerprintResultType.SUCCESS) {
             this.problemMessage_ = '';
-            this.$.arc.animate(this.receivedScanCount_ * slice,
+            // Flash the fingerprint icon blue so that users get some feedback
+            // when a successful scan has been registered.
+            this.$.image.animate(
+                {
+                  fill: ['var(--google-blue-700)', 'var(--google-grey-500)'],
+                  opacity: [0.7, 1.0],
+                },
+                FLASH_DURATION_MS);
+            this.$.arc.animate(
+                this.receivedScanCount_ * slice,
                 (this.receivedScanCount_ + 1) * slice);
             this.receivedScanCount_++;
           }
diff --git a/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.html b/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
index c1c97ef12c4..801dc1e94fe 100644
--- a/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
+++ b/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
@@ -32,6 +32,12 @@
         justify-content: center;
       }
 
+      /* Hide this using visibility: hidden instead of hidden so that the
+         dialog does not resize when there are no problems to display. */
+      #problemDiv[invisible] {
+        visibility: hidden;
+      }
+
       #problemMessage {
         font-size: 10px;
       }
@@ -39,8 +45,8 @@
 
     <dialog is="cr-dialog" id="dialog" on-close="close"
         close-text="$i18n{close}">
-      <div class="title">[[getTitleMessage_(isConfirmStep_)]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[getTitleMessage_(isConfirmStep_)]]</div>
+      <div class="body" slot="body">
         <!-- Pin keyboard -->
         <div id="pinKeyboardDiv" class="settings-box continuation">
           <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
@@ -48,14 +54,14 @@
               has-error$="[[hasError_(problemMessage_, problemClass_)]]">
             <!-- Warning/error; only shown if title is hidden. -->
             <div id="problemDiv" class$="[[problemClass_]]"
-                hidden$="[[!problemMessage_]]" problem>
+                hidden="[[!problemMessage_]]" problem>
               <iron-icon icon="settings:error-outline"></iron-icon>
               <span id="problemMessage">[[problemMessage_]]</span>
             </div>
           </pin-keyboard>
         </div>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.js b/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.js
index bd4f1e7514b..4056aab0e77 100644
--- a/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.js
+++ b/chromium/chrome/browser/resources/settings/people_page/setup_pin_dialog.js
@@ -7,8 +7,7 @@
  * 'settings-setup-pin-dialog' is the settings page for choosing a PIN.
  *
  * Example:
- *
- * <settings-setup-pin-dialog set-modes="[[quickUnlockSetModes]]">
+ * * <settings-setup-pin-dialog set-modes="[[quickUnlockSetModes]]">
  * </settings-setup-pin-dialog>
  */
 
@@ -27,10 +26,7 @@ var MessageType = {
 };
 
 /** @enum {string} */
-var ProblemType = {
-  WARNING: 'warning',
-  ERROR: 'error'
-};
+var ProblemType = {WARNING: 'warning', ERROR: 'error'};
 
 Polymer({
   is: 'settings-setup-pin-dialog',
@@ -76,36 +72,44 @@ Polymer({
      */
     writeUma_: {
       type: Object,
-      value: function() { return settings.recordLockScreenProgress; }
+      value: function() {
+        return settings.recordLockScreenProgress;
+      }
     },
 
     /**
      * The current step/subpage we are on.
      * @private
      */
-    isConfirmStep_: {
-      type: Boolean,
-      value: false
-    },
+    isConfirmStep_: {type: Boolean, value: false},
 
     /**
      * Interface for chrome.quickUnlockPrivate calls. May be overriden by tests.
      * @private
      */
-    quickUnlockPrivate_: {
-      type: Object,
-      value: chrome.quickUnlockPrivate
-    },
+    quickUnlockPrivate_: {type: Object, value: chrome.quickUnlockPrivate},
+
+    /**
+     * |pinHasPassedMinimumLength_| tracks whether a user has passed the minimum
+     * length threshold at least once, and all subsequent PIN too short messages
+     * will be displayed as errors. They will be displayed as warnings prior to
+     * this.
+     * @private
+     */
+    pinHasPassedMinimumLength_: {type: Boolean, value: false},
   },
 
   /** @override */
   attached: function() {
     this.resetState_();
-  },
-
-  open: function() {
     this.$.dialog.showModal();
     this.$.pinKeyboard.focus();
+
+    // Show the pin is too short error when first displaying the PIN dialog.
+    this.problemClass_ = ProblemType.WARNING;
+    this.quickUnlockPrivate_.getCredentialRequirements(
+        chrome.quickUnlockPrivate.QuickUnlockMode.PIN,
+        this.processPinRequirements_.bind(this, MessageType.TOO_SHORT));
   },
 
   close: function() {
@@ -181,8 +185,8 @@ Polymer({
         this.processPinRequirements_.bind(this, messageId));
     this.problemClass_ = problemClass;
     this.updateStyles();
-    this.enableSubmit_ = problemClass != ProblemType.ERROR &&
-        messageId != MessageType.MISMATCH;
+    this.enableSubmit_ =
+        problemClass != ProblemType.ERROR && messageId != MessageType.TOO_SHORT;
   },
 
   /** @private */
@@ -202,11 +206,19 @@ Polymer({
     if (!message.errors.length && !message.warnings.length) {
       this.hideProblem_();
       this.enableSubmit_ = true;
+      this.pinHasPassedMinimumLength_ = true;
       return;
     }
 
+    if (!message.errors.length ||
+        message.errors[0] !=
+            chrome.quickUnlockPrivate.CredentialProblem.TOO_SHORT) {
+      this.pinHasPassedMinimumLength_ = true;
+    }
+
     if (message.warnings.length) {
-      assert(message.warnings[0] ==
+      assert(
+          message.warnings[0] ==
           chrome.quickUnlockPrivate.CredentialProblem.TOO_WEAK);
       this.showProblem_(MessageType.TOO_WEAK, ProblemType.WARNING);
     }
@@ -214,7 +226,10 @@ Polymer({
     if (message.errors.length) {
       switch (message.errors[0]) {
         case chrome.quickUnlockPrivate.CredentialProblem.TOO_SHORT:
-          this.showProblem_(MessageType.TOO_SHORT, ProblemType.ERROR);
+          this.showProblem_(
+              MessageType.TOO_SHORT,
+              this.pinHasPassedMinimumLength_ ? ProblemType.ERROR :
+                                                ProblemType.WARNING);
           break;
         case chrome.quickUnlockPrivate.CredentialProblem.TOO_LONG:
           this.showProblem_(MessageType.TOO_LONG, ProblemType.ERROR);
@@ -227,7 +242,6 @@ Polymer({
           break;
       }
     }
-
   },
 
   /** @private */
@@ -236,19 +250,16 @@ Polymer({
       if (this.pinKeyboardValue_) {
         this.quickUnlockPrivate_.checkCredential(
             chrome.quickUnlockPrivate.QuickUnlockMode.PIN,
-            this.pinKeyboardValue_,
-            this.processPinProblems_.bind(this));
+            this.pinKeyboardValue_, this.processPinProblems_.bind(this));
       }
       return;
     }
 
+    this.hideProblem_();
     if (this.canSubmit_()) {
-      this.hideProblem_();
       this.enableSubmit_ = true;
       return;
     }
-
-    this.showProblem_(MessageType.MISMATCH, ProblemType.WARNING);
   },
 
   /** @private */
@@ -276,14 +287,13 @@ Polymer({
       }
 
       this.resetState_();
-      this.fire('done');
+      if (this.$.dialog.open)
+        this.$.dialog.close();
     }
 
     this.setModes.call(
-      null,
-      [chrome.quickUnlockPrivate.QuickUnlockMode.PIN],
-      [this.pinKeyboardValue_],
-      onSetModesCompleted.bind(this));
+        null, [chrome.quickUnlockPrivate.QuickUnlockMode.PIN],
+        [this.pinKeyboardValue_], onSetModesCompleted.bind(this));
     this.writeUma_(LockScreenProgress.CONFIRM_PIN);
   },
 
@@ -303,8 +313,9 @@ Polymer({
    * @return {string}
    */
   getTitleMessage_: function(isConfirmStep) {
-    return this.i18n(isConfirmStep ? 'configurePinConfirmPinTitle' :
-                                     'configurePinChoosePinTitle');
+    return this.i18n(
+        isConfirmStep ? 'configurePinConfirmPinTitle' :
+                        'configurePinChoosePinTitle');
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js
index 572dcb4f9c0..05f345f3edf 100644
--- a/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js
@@ -35,11 +35,14 @@ settings.SyncStatus;
  * @enum {string}
  */
 settings.StatusAction = {
-  NO_ACTION: 'noAction',                  // No action to take.
-  REAUTHENTICATE: 'reauthenticate',       // User needs to reauthenticate.
-  SIGNOUT_AND_SIGNIN: 'signOutAndSignIn', // User needs to sign out and sign in.
-  UPGRADE_CLIENT: 'upgradeClient',        // User needs to upgrade the client.
-  ENTER_PASSPHRASE: 'enterPassphrase',    // User needs to enter passphrase.
+  NO_ACTION: 'noAction',             // No action to take.
+  REAUTHENTICATE: 'reauthenticate',  // User needs to reauthenticate.
+  SIGNOUT_AND_SIGNIN:
+      'signOutAndSignIn',               // User needs to sign out and sign in.
+  UPGRADE_CLIENT: 'upgradeClient',      // User needs to upgrade the client.
+  ENTER_PASSPHRASE: 'enterPassphrase',  // User needs to enter passphrase.
+  CONFIRM_SYNC_SETTINGS:
+      'confirmSyncSettings',  // User needs to confirm sync settings.
 };
 
 /**
@@ -102,138 +105,138 @@ settings.PageStatus = {
 
 cr.define('settings', function() {
   /** @interface */
-  function SyncBrowserProxy() {}
-
-  SyncBrowserProxy.prototype = {
-// <if expr="not chromeos">
+  class SyncBrowserProxy {
+    // <if expr="not chromeos">
     /**
      * Starts the signin process for the user. Does nothing if the user is
      * already signed in.
      */
-    startSignIn: function() {},
+    startSignIn() {}
 
     /**
      * Signs out the signed-in user.
      * @param {boolean} deleteProfile
      */
-    signOut: function(deleteProfile) {},
+    signOut(deleteProfile) {}
 
     /**
      * Opens the multi-profile user manager.
      */
-    manageOtherPeople: function() {},
-// </if>
+    manageOtherPeople() {}
+
+    // </if>
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /**
      * Signs the user out.
      */
-    attemptUserExit: function() {},
-// </if>
+    attemptUserExit() {}
+
+    // </if>
 
     /**
      * Gets the current sync status.
      * @return {!Promise<!settings.SyncStatus>}
      */
-    getSyncStatus: function() {},
+    getSyncStatus() {}
 
     /**
      * Function to invoke when the sync page has been navigated to. This
      * registers the UI as the "active" sync UI so that if the user tries to
      * open another sync UI, this one will be shown instead.
      */
-    didNavigateToSyncPage: function() {},
+    didNavigateToSyncPage() {}
 
     /**
      * Function to invoke when leaving the sync page so that the C++ layer can
      * be notified that the sync UI is no longer open.
      */
-    didNavigateAwayFromSyncPage: function() {},
+    didNavigateAwayFromSyncPage() {}
 
     /**
      * Sets which types of data to sync.
      * @param {!settings.SyncPrefs} syncPrefs
      * @return {!Promise<!settings.PageStatus>}
      */
-    setSyncDatatypes: function(syncPrefs) {},
+    setSyncDatatypes(syncPrefs) {}
 
     /**
      * Sets the sync encryption options.
      * @param {!settings.SyncPrefs} syncPrefs
      * @return {!Promise<!settings.PageStatus>}
      */
-    setSyncEncryption: function(syncPrefs) {},
+    setSyncEncryption(syncPrefs) {}
 
     /**
      * Opens the Google Activity Controls url in a new tab.
      */
-    openActivityControlsUrl: function() {},
-  };
+    openActivityControlsUrl() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.SyncBrowserProxy}
    */
-  function SyncBrowserProxyImpl() {}
-  cr.addSingletonGetter(SyncBrowserProxyImpl);
-
-  SyncBrowserProxyImpl.prototype = {
-// <if expr="not chromeos">
+  class SyncBrowserProxyImpl {
+    // <if expr="not chromeos">
     /** @override */
-    startSignIn: function() {
+    startSignIn() {
       chrome.send('SyncSetupStartSignIn');
-    },
+    }
 
     /** @override */
-    signOut: function(deleteProfile) {
+    signOut(deleteProfile) {
       chrome.send('SyncSetupStopSyncing', [deleteProfile]);
-    },
+    }
 
     /** @override */
-    manageOtherPeople: function() {
+    manageOtherPeople() {
       chrome.send('SyncSetupManageOtherPeople');
-    },
-// </if>
-// <if expr="chromeos">
+    }
+
+    // </if>
+    // <if expr="chromeos">
     /** @override */
-    attemptUserExit: function() {
+    attemptUserExit() {
       return chrome.send('AttemptUserExit');
-    },
-// </if>
+    }
+
+    // </if>
 
     /** @override */
-    getSyncStatus: function() {
+    getSyncStatus() {
       return cr.sendWithPromise('SyncSetupGetSyncStatus');
-    },
+    }
 
     /** @override */
-    didNavigateToSyncPage: function() {
+    didNavigateToSyncPage() {
       chrome.send('SyncSetupShowSetupUI');
-    },
+    }
 
     /** @override */
-    didNavigateAwayFromSyncPage: function() {
+    didNavigateAwayFromSyncPage() {
       chrome.send('SyncSetupDidClosePage');
-    },
+    }
 
     /** @override */
-    setSyncDatatypes: function(syncPrefs) {
-      return cr.sendWithPromise('SyncSetupSetDatatypes',
-                                JSON.stringify(syncPrefs));
-    },
+    setSyncDatatypes(syncPrefs) {
+      return cr.sendWithPromise(
+          'SyncSetupSetDatatypes', JSON.stringify(syncPrefs));
+    }
 
     /** @override */
-    setSyncEncryption: function(syncPrefs) {
-      return cr.sendWithPromise('SyncSetupSetEncryption',
-                                JSON.stringify(syncPrefs));
-    },
+    setSyncEncryption(syncPrefs) {
+      return cr.sendWithPromise(
+          'SyncSetupSetEncryption', JSON.stringify(syncPrefs));
+    }
 
     /** @override */
-    openActivityControlsUrl: function() {
+    openActivityControlsUrl() {
       chrome.metricsPrivate.recordUserAction(
           'Signin_AccountSettings_GoogleActivityControlsClicked');
     }
-  };
+  }
+
+  cr.addSingletonGetter(SyncBrowserProxyImpl);
 
   return {
     SyncBrowserProxy: SyncBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_page.html b/chromium/chrome/browser/resources/settings/people_page/sync_page.html
index 262894d1d88..9d6fba87a42 100644
--- a/chromium/chrome/browser/resources/settings/people_page/sync_page.html
+++ b/chromium/chrome/browser/resources/settings/people_page/sync_page.html
@@ -1,6 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_page.js b/chromium/chrome/browser/resources/settings/people_page/sync_page.js
index 8078686bd65..18102cfbfe4 100644
--- a/chromium/chrome/browser/resources/settings/people_page/sync_page.js
+++ b/chromium/chrome/browser/resources/settings/people_page/sync_page.js
@@ -135,24 +135,24 @@ Polymer({
 
   /** @override */
   attached: function() {
-    this.addWebUIListener('page-status-changed',
-                          this.handlePageStatusChanged_.bind(this));
-    this.addWebUIListener('sync-prefs-changed',
-                          this.handleSyncPrefsChanged_.bind(this));
+    this.addWebUIListener(
+        'page-status-changed', this.handlePageStatusChanged_.bind(this));
+    this.addWebUIListener(
+        'sync-prefs-changed', this.handleSyncPrefsChanged_.bind(this));
 
-    if (settings.getCurrentRoute() == settings.Route.SYNC)
+    if (settings.getCurrentRoute() == settings.routes.SYNC)
       this.onNavigateToPage_();
   },
 
   /** @override */
   detached: function() {
-    if (settings.getCurrentRoute() == settings.Route.SYNC)
+    if (settings.getCurrentRoute() == settings.routes.SYNC)
       this.onNavigateAwayFromPage_();
   },
 
   /** @protected */
   currentRouteChanged: function() {
-    if (settings.getCurrentRoute() == settings.Route.SYNC)
+    if (settings.getCurrentRoute() == settings.routes.SYNC)
       this.onNavigateToPage_();
     else
       this.onNavigateAwayFromPage_();
@@ -169,7 +169,7 @@ Polymer({
 
   /** @private */
   onNavigateToPage_: function() {
-    assert(settings.getCurrentRoute() == settings.Route.SYNC);
+    assert(settings.getCurrentRoute() == settings.routes.SYNC);
 
     if (this.unloadCallback_)
       return;
@@ -216,8 +216,8 @@ Polymer({
 
     // Focus the password input box if password is needed to start sync.
     if (this.syncPrefs.passphraseRequired) {
-      // Async to allow the dom-if templates to render first.
-      this.async(function() {
+      // Wait for the dom-if templates to render and subpage to become visible.
+      listenOnce(document, 'show-container', function() {
         var input = /** @type {!PaperInputElement} */ (
             this.$$('#existingPassphraseInput'));
         input.inputElement.focus();
@@ -260,8 +260,8 @@ Polymer({
    */
   onSingleSyncDataTypeChanged_: function() {
     assert(this.syncPrefs);
-    this.browserProxy_.setSyncDatatypes(this.syncPrefs).then(
-        this.handlePageStatusChanged_.bind(this));
+    this.browserProxy_.setSyncDatatypes(this.syncPrefs)
+        .then(this.handlePageStatusChanged_.bind(this));
   },
 
   /** @private */
@@ -274,8 +274,8 @@ Polymer({
    * @private
    */
   onAutofillDataTypeChanged_: function() {
-    this.set('syncPrefs.paymentsIntegrationEnabled',
-             this.syncPrefs.autofillSynced);
+    this.set(
+        'syncPrefs.paymentsIntegrationEnabled', this.syncPrefs.autofillSynced);
 
     this.onSingleSyncDataTypeChanged_();
   },
@@ -293,7 +293,7 @@ Polymer({
   /**
    * Sends the newly created custom sync passphrase to the browser.
    * @private
-   * @param {Event} e
+   * @param {!Event} e
    */
   onSaveNewPassphraseTap_: function(e) {
     assert(this.creatingNewPassphrase_);
@@ -313,14 +313,14 @@ Polymer({
     this.syncPrefs.setNewPassphrase = true;
     this.syncPrefs.passphrase = this.passphrase_;
 
-    this.browserProxy_.setSyncEncryption(this.syncPrefs).then(
-        this.handlePageStatusChanged_.bind(this));
+    this.browserProxy_.setSyncEncryption(this.syncPrefs)
+        .then(this.handlePageStatusChanged_.bind(this));
   },
 
   /**
    * Sends the user-entered existing password to re-enable sync.
    * @private
-   * @param {Event} e
+   * @param {!Event} e
    */
   onSubmitExistingPassphraseTap_: function(e) {
     if (e.type == 'keypress' && e.key != 'Enter')
@@ -333,8 +333,8 @@ Polymer({
     this.syncPrefs.passphrase = this.existingPassphrase_;
     this.existingPassphrase_ = '';
 
-    this.browserProxy_.setSyncEncryption(this.syncPrefs).then(
-        this.handlePageStatusChanged_.bind(this));
+    this.browserProxy_.setSyncEncryption(this.syncPrefs)
+        .then(this.handlePageStatusChanged_.bind(this));
   },
 
   /**
@@ -350,12 +350,12 @@ Polymer({
         this.pageStatus_ = pageStatus;
         return;
       case settings.PageStatus.DONE:
-        if (settings.getCurrentRoute() == settings.Route.SYNC)
-          settings.navigateTo(settings.Route.PEOPLE);
+        if (settings.getCurrentRoute() == settings.routes.SYNC)
+          settings.navigateTo(settings.routes.PEOPLE);
         return;
       case settings.PageStatus.PASSPHRASE_FAILED:
-        if (this.pageStatus_ == this.pages_.CONFIGURE &&
-            this.syncPrefs && this.syncPrefs.passphraseRequired) {
+        if (this.pageStatus_ == this.pages_.CONFIGURE && this.syncPrefs &&
+            this.syncPrefs.passphraseRequired) {
           this.$$('#existingPassphraseInput').invalid = true;
         }
         return;
diff --git a/chromium/chrome/browser/resources/settings/people_page/user_list.html b/chromium/chrome/browser/resources/settings/people_page/user_list.html
index 96939089b0b..928f18a6606 100644
--- a/chromium/chrome/browser/resources/settings/people_page/user_list.html
+++ b/chromium/chrome/browser/resources/settings/people_page/user_list.html
@@ -4,7 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -34,11 +34,6 @@
       .user-info {
         -webkit-padding-start: 20px;
       }
-
-      paper-icon-button {
-        -webkit-margin-end: 0;
-        -webkit-margin-start: var(--cr-icon-button-margin-start);
-      }
     </style>
     <div class="user-list" scrollable>
       <template is="dom-repeat" items="[[users_]]">
@@ -50,10 +45,10 @@
               <div class="secondary">[[item.displayEmail]]</div>
             </template>
           </div>
-          <paper-icon-button icon="cr:clear" class="clear-icon"
+          <button is="paper-icon-button-light" class="icon-clear"
               on-tap="removeUser_"
               hidden="[[shouldHideCloseButton_(disabled, item.isOwner)]]">
-          </paper-icon-button>
+          </button>
         </div>
       </template>
     </div>
diff --git a/chromium/chrome/browser/resources/settings/people_page/user_list.js b/chromium/chrome/browser/resources/settings/people_page/user_list.js
index 8ec5da3bdf9..f1cbc795b48 100644
--- a/chromium/chrome/browser/resources/settings/people_page/user_list.js
+++ b/chromium/chrome/browser/resources/settings/people_page/user_list.js
@@ -60,7 +60,7 @@ Polymer({
 
   /** @protected */
   currentRouteChanged: function() {
-    if (settings.getCurrentRoute() == settings.Route.ACCOUNTS) {
+    if (settings.getCurrentRoute() == settings.routes.ACCOUNTS) {
       chrome.usersPrivate.getWhitelistedUsers(function(users) {
         this.setUsers_(users);
       }.bind(this));
diff --git a/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.html b/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.html
index 4b02f2007a4..9fd1e6c4bfb 100644
--- a/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.html
+++ b/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.html
@@ -18,13 +18,13 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{addUsers}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{addUsers}</div>
+      <div class="body" slot="body">
         <paper-input id="addUserInput" label="$i18n{addUsersEmail}" autofocus
             on-input="validate_" invalid="[[!isValid_]]">
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.js b/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.js
index 99b27488184..0c0dd69af13 100644
--- a/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.js
+++ b/chromium/chrome/browser/resources/settings/people_page/users_add_user_dialog.js
@@ -16,8 +16,8 @@
  *     e.g. 'john'
  * @const {!RegExp}
  */
-var NAME_ONLY_REGEX = new RegExp(
-    '^\\s*([\\w\\.!#\\$%&\'\\*\\+-\\/=\\?\\^`\\{\\|\\}~]+)\\s*$');
+var NAME_ONLY_REGEX =
+    new RegExp('^\\s*([\\w\\.!#\\$%&\'\\*\\+-\\/=\\?\\^`\\{\\|\\}~]+)\\s*$');
 
 /**
  * Regular expression for adding a user where the string provided is a full
diff --git a/chromium/chrome/browser/resources/settings/prefs/pref_util.js b/chromium/chrome/browser/resources/settings/prefs/pref_util.js
index d18395e4bb5..790f38ba829 100644
--- a/chromium/chrome/browser/resources/settings/prefs/pref_util.js
+++ b/chromium/chrome/browser/resources/settings/prefs/pref_util.js
@@ -20,8 +20,9 @@ cr.define('Settings.PrefUtil', function() {
       case chrome.settingsPrivate.PrefType.NUMBER:
         var n = parseInt(value, 10);
         if (isNaN(n)) {
-          console.error('Argument to stringToPrefValue for number pref ' +
-                        'was unparsable: ' + value);
+          console.error(
+              'Argument to stringToPrefValue for number pref ' +
+              'was unparsable: ' + value);
           return undefined;
         }
         return n;
@@ -45,7 +46,7 @@ cr.define('Settings.PrefUtil', function() {
         return pref.value.toString();
       case chrome.settingsPrivate.PrefType.STRING:
       case chrome.settingsPrivate.PrefType.URL:
-        return /** @type {string} */(pref.value);
+        return /** @type {string} */ (pref.value);
       default:
         assertNotReached('No conversion from ' + pref.type + ' pref to string');
     }
diff --git a/chromium/chrome/browser/resources/settings/prefs/prefs.js b/chromium/chrome/browser/resources/settings/prefs/prefs.js
index 7e96f7930a3..537da2e7529 100644
--- a/chromium/chrome/browser/resources/settings/prefs/prefs.js
+++ b/chromium/chrome/browser/resources/settings/prefs/prefs.js
@@ -13,302 +13,304 @@
  */
 
 (function() {
-  'use strict';
+'use strict';
 
-  /**
-   * Checks whether two values are recursively equal. Only compares serializable
-   * data (primitives, serializable arrays and serializable objects).
-   * @param {*} val1 Value to compare.
-   * @param {*} val2 Value to compare with val1.
-   * @return {boolean} True if the values are recursively equal.
-   */
-  function deepEqual(val1, val2) {
-    if (val1 === val2)
-      return true;
-
-    if (Array.isArray(val1) || Array.isArray(val2)) {
-      if (!Array.isArray(val1) || !Array.isArray(val2))
-        return false;
-      return arraysEqual(/** @type {!Array} */(val1),
-                         /** @type {!Array} */(val2));
-    }
-
-    if (val1 instanceof Object && val2 instanceof Object)
-      return objectsEqual(val1, val2);
+/**
+ * Checks whether two values are recursively equal. Only compares serializable
+ * data (primitives, serializable arrays and serializable objects).
+ * @param {*} val1 Value to compare.
+ * @param {*} val2 Value to compare with val1.
+ * @return {boolean} True if the values are recursively equal.
+ */
+function deepEqual(val1, val2) {
+  if (val1 === val2)
+    return true;
 
-    return false;
+  if (Array.isArray(val1) || Array.isArray(val2)) {
+    if (!Array.isArray(val1) || !Array.isArray(val2))
+      return false;
+    return arraysEqual(
+        /** @type {!Array} */ (val1),
+        /** @type {!Array} */ (val2));
   }
 
-  /**
-   * @param {!Array} arr1
-   * @param {!Array} arr2
-   * @return {boolean} True if the arrays are recursively equal.
-   */
-  function arraysEqual(arr1, arr2) {
-    if (arr1.length != arr2.length)
-      return false;
+  if (val1 instanceof Object && val2 instanceof Object)
+    return objectsEqual(val1, val2);
 
-    for (var i = 0; i < arr1.length; i++) {
-      if (!deepEqual(arr1[i], arr2[i]))
-        return false;
-    }
+  return false;
+}
 
-    return true;
-  }
+/**
+ * @param {!Array} arr1
+ * @param {!Array} arr2
+ * @return {boolean} True if the arrays are recursively equal.
+ */
+function arraysEqual(arr1, arr2) {
+  if (arr1.length != arr2.length)
+    return false;
 
-  /**
-   * @param {!Object} obj1
-   * @param {!Object} obj2
-   * @return {boolean} True if the objects are recursively equal.
-   */
-  function objectsEqual(obj1, obj2) {
-    var keys1 = Object.keys(obj1);
-    var keys2 = Object.keys(obj2);
-    if (keys1.length != keys2.length)
+  for (var i = 0; i < arr1.length; i++) {
+    if (!deepEqual(arr1[i], arr2[i]))
       return false;
-
-    for (var i = 0; i < keys1.length; i++) {
-      var key = keys1[i];
-      if (!deepEqual(obj1[key], obj2[key]))
-        return false;
-    }
-
-    return true;
   }
 
-  /**
-   * Returns a recursive copy of the value.
-   * @param {*} val Value to copy. Should be a primitive or only contain
-   *     serializable data (primitives, serializable arrays and
-   *     serializable objects).
-   * @return {*} A deep copy of the value.
-   */
-  function deepCopy(val) {
-    if (!(val instanceof Object))
-      return val;
-    return Array.isArray(val) ? deepCopyArray(/** @type {!Array} */(val)) :
-        deepCopyObject(val);
-  }
+  return true;
+}
 
-  /**
-   * @param {!Array} arr
-   * @return {!Array} Deep copy of the array.
-   */
-  function deepCopyArray(arr) {
-    var copy = [];
-    for (var i = 0; i < arr.length; i++)
-      copy.push(deepCopy(arr[i]));
-    return copy;
-  }
+/**
+ * @param {!Object} obj1
+ * @param {!Object} obj2
+ * @return {boolean} True if the objects are recursively equal.
+ */
+function objectsEqual(obj1, obj2) {
+  var keys1 = Object.keys(obj1);
+  var keys2 = Object.keys(obj2);
+  if (keys1.length != keys2.length)
+    return false;
 
-  /**
-   * @param {!Object} obj
-   * @return {!Object} Deep copy of the object.
-   */
-  function deepCopyObject(obj) {
-    var copy = {};
-    var keys = Object.keys(obj);
-    for (var i = 0; i < keys.length; i++) {
-      var key = keys[i];
-      copy[key] = deepCopy(obj[key]);
-    }
-    return copy;
+  for (var i = 0; i < keys1.length; i++) {
+    var key = keys1[i];
+    if (!deepEqual(obj1[key], obj2[key]))
+      return false;
   }
 
-  Polymer({
-    is: 'settings-prefs',
-
-    properties: {
-      /**
-       * Object containing all preferences, for use by Polymer controls.
-       * @type {Object|undefined}
-       */
-      prefs: {
-        type: Object,
-        notify: true,
-      },
-
-      /**
-       * Map of pref keys to values representing the state of the Chrome
-       * pref store as of the last update from the API.
-       * @type {Object<*>}
-       * @private
-       */
-      lastPrefValues_: {
-        type: Object,
-        value: function() { return {}; },
-      },
-    },
+  return true;
+}
 
-    observers: [
-      'prefsChanged_(prefs.*)',
-    ],
+/**
+ * Returns a recursive copy of the value.
+ * @param {*} val Value to copy. Should be a primitive or only contain
+ *     serializable data (primitives, serializable arrays and
+ *     serializable objects).
+ * @return {*} A deep copy of the value.
+ */
+function deepCopy(val) {
+  if (!(val instanceof Object))
+    return val;
+  return Array.isArray(val) ? deepCopyArray(/** @type {!Array} */ (val)) :
+                              deepCopyObject(val);
+}
 
-    /** @type {SettingsPrivate} */
-    settingsApi_: /** @type {SettingsPrivate} */(chrome.settingsPrivate),
+/**
+ * @param {!Array} arr
+ * @return {!Array} Deep copy of the array.
+ */
+function deepCopyArray(arr) {
+  var copy = [];
+  for (var i = 0; i < arr.length; i++)
+    copy.push(deepCopy(arr[i]));
+  return copy;
+}
 
-    /** @override */
-    created: function() {
-      if (!CrSettingsPrefs.deferInitialization)
-        this.initialize();
-    },
+/**
+ * @param {!Object} obj
+ * @return {!Object} Deep copy of the object.
+ */
+function deepCopyObject(obj) {
+  var copy = {};
+  var keys = Object.keys(obj);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    copy[key] = deepCopy(obj[key]);
+  }
+  return copy;
+}
 
-    /** @override */
-    detached: function() {
-      CrSettingsPrefs.resetForTesting();
-    },
+Polymer({
+  is: 'settings-prefs',
 
+  properties: {
     /**
-     * @param {SettingsPrivate=} opt_settingsApi SettingsPrivate implementation
-     *     to use (chrome.settingsPrivate by default).
+     * Object containing all preferences, for use by Polymer controls.
+     * @type {Object|undefined}
      */
-    initialize: function(opt_settingsApi) {
-      // Only initialize once (or after resetForTesting() is called).
-      if (this.initialized_)
-        return;
-      this.initialized_ = true;
-
-      if (opt_settingsApi)
-        this.settingsApi_ = opt_settingsApi;
-
-      /** @private {function(!Array<!chrome.settingsPrivate.PrefObject>)} */
-      this.boundPrefsChanged_ = this.onSettingsPrivatePrefsChanged_.bind(this);
-      this.settingsApi_.onPrefsChanged.addListener(this.boundPrefsChanged_);
-      this.settingsApi_.getAllPrefs(
-          this.onSettingsPrivatePrefsFetched_.bind(this));
+    prefs: {
+      type: Object,
+      notify: true,
     },
 
     /**
-     * @param {!{path: string}} e
+     * Map of pref keys to values representing the state of the Chrome
+     * pref store as of the last update from the API.
+     * @type {Object<*>}
      * @private
      */
-    prefsChanged_: function(e) {
-      // |prefs| can be directly set or unset in tests.
-      if (!CrSettingsPrefs.isInitialized || e.path == 'prefs')
-        return;
-
-      var key = this.getPrefKeyFromPath_(e.path);
-      var prefStoreValue = this.lastPrefValues_[key];
-
-      var prefObj = /** @type {chrome.settingsPrivate.PrefObject} */(
-          this.get(key, this.prefs));
-
-      // If settingsPrivate already has this value, ignore it. (Otherwise,
-      // a change event from settingsPrivate could make us call
-      // settingsPrivate.setPref and potentially trigger an IPC loop.)
-      if (!deepEqual(prefStoreValue, prefObj.value)) {
-        this.settingsApi_.setPref(
-            key,
-            prefObj.value,
-            /* pageId */ '',
-            /* callback */ this.setPrefCallback_.bind(this, key));
-      }
+    lastPrefValues_: {
+      type: Object,
+      value: function() {
+        return {};
+      },
     },
+  },
 
-    /**
-     * Called when prefs in the underlying Chrome pref store are changed.
-     * @param {!Array<!chrome.settingsPrivate.PrefObject>} prefs
-     *     The prefs that changed.
-     * @private
-     */
-    onSettingsPrivatePrefsChanged_: function(prefs) {
-      if (CrSettingsPrefs.isInitialized)
-        this.updatePrefs_(prefs);
-    },
+  observers: [
+    'prefsChanged_(prefs.*)',
+  ],
 
-    /**
-     * Called when prefs are fetched from settingsPrivate.
-     * @param {!Array<!chrome.settingsPrivate.PrefObject>} prefs
-     * @private
-     */
-    onSettingsPrivatePrefsFetched_: function(prefs) {
+  /** @type {SettingsPrivate} */
+  settingsApi_: /** @type {SettingsPrivate} */ (chrome.settingsPrivate),
+
+  /** @override */
+  created: function() {
+    if (!CrSettingsPrefs.deferInitialization)
+      this.initialize();
+  },
+
+  /** @override */
+  detached: function() {
+    CrSettingsPrefs.resetForTesting();
+  },
+
+  /**
+   * @param {SettingsPrivate=} opt_settingsApi SettingsPrivate implementation
+   *     to use (chrome.settingsPrivate by default).
+   */
+  initialize: function(opt_settingsApi) {
+    // Only initialize once (or after resetForTesting() is called).
+    if (this.initialized_)
+      return;
+    this.initialized_ = true;
+
+    if (opt_settingsApi)
+      this.settingsApi_ = opt_settingsApi;
+
+    /** @private {function(!Array<!chrome.settingsPrivate.PrefObject>)} */
+    this.boundPrefsChanged_ = this.onSettingsPrivatePrefsChanged_.bind(this);
+    this.settingsApi_.onPrefsChanged.addListener(this.boundPrefsChanged_);
+    this.settingsApi_.getAllPrefs(
+        this.onSettingsPrivatePrefsFetched_.bind(this));
+  },
+
+  /**
+   * @param {!{path: string}} e
+   * @private
+   */
+  prefsChanged_: function(e) {
+    // |prefs| can be directly set or unset in tests.
+    if (!CrSettingsPrefs.isInitialized || e.path == 'prefs')
+      return;
+
+    var key = this.getPrefKeyFromPath_(e.path);
+    var prefStoreValue = this.lastPrefValues_[key];
+
+    var prefObj = /** @type {chrome.settingsPrivate.PrefObject} */ (
+        this.get(key, this.prefs));
+
+    // If settingsPrivate already has this value, ignore it. (Otherwise,
+    // a change event from settingsPrivate could make us call
+    // settingsPrivate.setPref and potentially trigger an IPC loop.)
+    if (!deepEqual(prefStoreValue, prefObj.value)) {
+      this.settingsApi_.setPref(
+          key, prefObj.value,
+          /* pageId */ '',
+          /* callback */ this.setPrefCallback_.bind(this, key));
+    }
+  },
+
+  /**
+   * Called when prefs in the underlying Chrome pref store are changed.
+   * @param {!Array<!chrome.settingsPrivate.PrefObject>} prefs
+   *     The prefs that changed.
+   * @private
+   */
+  onSettingsPrivatePrefsChanged_: function(prefs) {
+    if (CrSettingsPrefs.isInitialized)
       this.updatePrefs_(prefs);
-      CrSettingsPrefs.setInitialized();
-    },
+  },
 
-    /**
-     * Checks the result of calling settingsPrivate.setPref.
-     * @param {string} key The key used in the call to setPref.
-     * @param {boolean} success True if setting the pref succeeded.
-     * @private
-     */
-    setPrefCallback_: function(key, success) {
-      if (!success)
-        this.refresh(key);
-    },
+  /**
+   * Called when prefs are fetched from settingsPrivate.
+   * @param {!Array<!chrome.settingsPrivate.PrefObject>} prefs
+   * @private
+   */
+  onSettingsPrivatePrefsFetched_: function(prefs) {
+    this.updatePrefs_(prefs);
+    CrSettingsPrefs.setInitialized();
+  },
 
-    /**
-     * Get the current pref value from chrome.settingsPrivate to ensure the UI
-     * stays up to date.
-     * @param {string} key
-     */
-    refresh: function(key) {
-      this.settingsApi_.getPref(key, function(pref) {
-        this.updatePrefs_([pref]);
-      }.bind(this));
-    },
+  /**
+   * Checks the result of calling settingsPrivate.setPref.
+   * @param {string} key The key used in the call to setPref.
+   * @param {boolean} success True if setting the pref succeeded.
+   * @private
+   */
+  setPrefCallback_: function(key, success) {
+    if (!success)
+      this.refresh(key);
+  },
 
-    /**
-     * Updates the prefs model with the given prefs.
-     * @param {!Array<!chrome.settingsPrivate.PrefObject>} newPrefs
-     * @private
-     */
-    updatePrefs_: function(newPrefs) {
-      // Use the existing prefs object or create it.
-      var prefs = this.prefs || {};
-      newPrefs.forEach(function(newPrefObj) {
-        // Use the PrefObject from settingsPrivate to create a copy in
-        // lastPrefValues_ at the pref's key.
-        this.lastPrefValues_[newPrefObj.key] = deepCopy(newPrefObj.value);
-
-        if (!deepEqual(this.get(newPrefObj.key, prefs), newPrefObj)) {
-          // Add the pref to |prefs|.
-          cr.exportPath(newPrefObj.key, newPrefObj, prefs);
-          // If this.prefs already exists, notify listeners of the change.
-          if (prefs == this.prefs)
-            this.notifyPath('prefs.' + newPrefObj.key, newPrefObj);
-        }
-      }, this);
-      if (!this.prefs)
-        this.prefs = prefs;
-    },
+  /**
+   * Get the current pref value from chrome.settingsPrivate to ensure the UI
+   * stays up to date.
+   * @param {string} key
+   */
+  refresh: function(key) {
+    this.settingsApi_.getPref(key, function(pref) {
+      this.updatePrefs_([pref]);
+    }.bind(this));
+  },
 
-    /**
-     * Given a 'property-changed' path, returns the key of the preference the
-     * path refers to. E.g., if the path of the changed property is
-     * 'prefs.search.suggest_enabled.value', the key of the pref that changed is
-     * 'search.suggest_enabled'.
-     * @param {string} path
-     * @return {string}
-     * @private
-     */
-    getPrefKeyFromPath_: function(path) {
-      // Skip the first token, which refers to the member variable (this.prefs).
-      var parts = path.split('.');
-      assert(parts.shift() == 'prefs', "Path doesn't begin with 'prefs'");
-
-      for (var i = 1; i <= parts.length; i++) {
-        var key = parts.slice(0, i).join('.');
-        // The lastPrefValues_ keys match the pref keys.
-        if (this.lastPrefValues_.hasOwnProperty(key))
-          return key;
+  /**
+   * Updates the prefs model with the given prefs.
+   * @param {!Array<!chrome.settingsPrivate.PrefObject>} newPrefs
+   * @private
+   */
+  updatePrefs_: function(newPrefs) {
+    // Use the existing prefs object or create it.
+    var prefs = this.prefs || {};
+    newPrefs.forEach(function(newPrefObj) {
+      // Use the PrefObject from settingsPrivate to create a copy in
+      // lastPrefValues_ at the pref's key.
+      this.lastPrefValues_[newPrefObj.key] = deepCopy(newPrefObj.value);
+
+      if (!deepEqual(this.get(newPrefObj.key, prefs), newPrefObj)) {
+        // Add the pref to |prefs|.
+        cr.exportPath(newPrefObj.key, newPrefObj, prefs);
+        // If this.prefs already exists, notify listeners of the change.
+        if (prefs == this.prefs)
+          this.notifyPath('prefs.' + newPrefObj.key, newPrefObj);
       }
-      return '';
-    },
+    }, this);
+    if (!this.prefs)
+      this.prefs = prefs;
+  },
 
-    /**
-     * Resets the element so it can be re-initialized with a new prefs state.
-     */
-    resetForTesting: function() {
-      if (!this.initialized_)
-        return;
-      this.prefs = undefined;
-      this.lastPrefValues_ = {};
-      this.initialized_ = false;
-      // Remove the listener added in initialize().
-      this.settingsApi_.onPrefsChanged.removeListener(this.boundPrefsChanged_);
-      this.settingsApi_ =
-          /** @type {SettingsPrivate} */(chrome.settingsPrivate);
-    },
-  });
+  /**
+   * Given a 'property-changed' path, returns the key of the preference the
+   * path refers to. E.g., if the path of the changed property is
+   * 'prefs.search.suggest_enabled.value', the key of the pref that changed is
+   * 'search.suggest_enabled'.
+   * @param {string} path
+   * @return {string}
+   * @private
+   */
+  getPrefKeyFromPath_: function(path) {
+    // Skip the first token, which refers to the member variable (this.prefs).
+    var parts = path.split('.');
+    assert(parts.shift() == 'prefs', 'Path doesn\'t begin with \'prefs\'');
+
+    for (var i = 1; i <= parts.length; i++) {
+      var key = parts.slice(0, i).join('.');
+      // The lastPrefValues_ keys match the pref keys.
+      if (this.lastPrefValues_.hasOwnProperty(key))
+        return key;
+    }
+    return '';
+  },
+
+  /**
+   * Resets the element so it can be re-initialized with a new prefs state.
+   */
+  resetForTesting: function() {
+    if (!this.initialized_)
+      return;
+    this.prefs = undefined;
+    this.lastPrefValues_ = {};
+    this.initialized_ = false;
+    // Remove the listener added in initialize().
+    this.settingsApi_.onPrefsChanged.removeListener(this.boundPrefsChanged_);
+    this.settingsApi_ =
+        /** @type {SettingsPrivate} */ (chrome.settingsPrivate);
+  },
+});
 })();
diff --git a/chromium/chrome/browser/resources/settings/prefs/prefs_behavior.js b/chromium/chrome/browser/resources/settings/prefs/prefs_behavior.js
index 76a4399c2ea..03a1bad2d50 100644
--- a/chromium/chrome/browser/resources/settings/prefs/prefs_behavior.js
+++ b/chromium/chrome/browser/resources/settings/prefs/prefs_behavior.js
@@ -23,7 +23,7 @@ var PrefsBehavior = {
    * @protected
    */
   getPref: function(prefPath) {
-    var pref = /** @type {!chrome.settingsPrivate.PrefObject} */(
+    var pref = /** @type {!chrome.settingsPrivate.PrefObject} */ (
         this.get(prefPath, this.prefs));
     assert(typeof pref != 'undefined', 'Pref is missing: ' + prefPath);
     return pref;
diff --git a/chromium/chrome/browser/resources/settings/printing_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/printing_page/compiled_resources2.gyp
index bdd675b6dfb..6a3b5f8fddf 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/printing_page/compiled_resources2.gyp
@@ -16,22 +16,22 @@
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
         'cups_printers_browser_proxy',
+        'cups_set_manufacturer_model_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'cups_add_printer_dialog_util',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/compiled_resources2.gyp:cr_scrollable_behavior',
         'cups_printers_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'cups_printer_details_page',
+      'target_name': 'cups_edit_printer_dialog',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
-        '../settings_page/compiled_resources2.gyp:settings_animated_pages',
-        'cups_printers_browser_proxy',
+        'cups_set_manufacturer_model_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -65,13 +65,20 @@
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'cups_set_manufacturer_model_behavior',
+      'dependencies': [
+        'cups_printers_browser_proxy',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'printing_page',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
-        'cups_printer_details_page',
+        'cups_printers_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
index bcdcac3b5e7..cde64e7785d 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
@@ -7,13 +7,13 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="cups_add_printer_dialog_util.html">
+<link rel="import" href="cups_printer_shared_css.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
-<link rel="import" href="../settings_shared_css.html">
-<link rel="import" href="../settings_vars_css.html">
+<link rel="import" href="cups_set_manufacturer_model_behavior.html">
 
 <dom-module id="add-printer-discovery-dialog">
   <template>
-    <style include="settings-shared">
+    <style include="cups-printer-shared">
       add-printer-list {
         max-height: 310px;
         overflow-y: auto;
@@ -21,14 +21,6 @@
         width: 100%;
       }
 
-      .dialog-body .center {
-        display: flex;
-        justify-content: center;
-        position: absolute;
-        top: 50%;
-        width: 100%;
-      }
-
       #searchSpinner {
         position: absolute;
         top: 80%;
@@ -41,12 +33,6 @@
         height: 15px;
         width: 15px;
       }
-
-      .dialog-buttons {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-      }
     </style>
     <add-printer-dialog>
       <div class="dialog-title">$i18n{addPrintersNearbyTitle}</div>
@@ -76,7 +62,7 @@
           </paper-button>
           <paper-button class="action-button" id="addPrinterButton"
               disabled="[[!selectedPrinter]]"
-              on-tap="switchToManufacturerDialog_">
+              on-tap="switchToConfiguringDialog_">
             $i18n{addPrinterButtonText}
           </paper-button>
         </div>
@@ -87,43 +73,11 @@
 
 <dom-module id="add-printer-manually-dialog">
   <template>
-    <style include="settings-shared md-select">
+    <style include="cups-printer-shared">
       #discoverPrintersButton {
         -webkit-margin-end: 153px;
       }
 
-      .settings-box {
-        border-top: none;
-      }
-
-      .settings-box.two-line {
-        min-height: 72px;
-      }
-
-      .settings-box .start .label {
-        color: var(--google-grey-700);
-      }
-
-      .md-select {
-        width: calc(270px + var(--md-side-padding));
-      }
-
-      .md-select-underline {
-        -webkit-margin-start: 0;
-      }
-
-      paper-input {
-        --paper-input-container-color: var(--paper-grey-600);
-        --paper-input-container-input: {
-          font-size: inherit;
-        };
-        width: 270px;
-      }
-
-      #printerNameInput {
-        width: 450px;
-      }
-
       .search-printer-box {
         margin-top: 18px;
       }
@@ -157,8 +111,8 @@
           <div class="start">
             <div class="label">$i18n{printerName}</div>
             <div class="secondary">
-              <paper-input no-label-float id="printerNameInput" autofocus
-                  value="{{newPrinter.printerName}}">
+              <paper-input class="printer-name-input" no-label-float autofocus
+                  id="printerNameInput" value="{{newPrinter.printerName}}">
               </paper-input>
             </div>
           </div>
@@ -199,7 +153,7 @@
           <div class="start">
             <div class="label">$i18n{printerQueue}</div>
             <div class="secondary">
-              <paper-input no-label-float label="ipp/print" 
+              <paper-input no-label-float label="ipp/print"
                   value="{{newPrinter.printerQueue}}">
               </paper-input>
             </div>
@@ -218,14 +172,23 @@
         </div>
       </div>
       <div class="dialog-buttons">
-        <paper-button class="cancel-button secondary-button"
-            on-tap="onCancelTap_">
-          $i18n{cancelButtonText}
-        </paper-button>
-        <paper-button class="action-button" on-tap="switchToManufacturerDialog_"
-            disabled="[[!newPrinter.printerName]]">
-          $i18n{addPrinterButtonText}
-        </paper-button>
+        <div>  <!-- Left group -->
+          <paper-button class="secondary-button"
+              on-tap="switchToDiscoveryDialog_">
+            $i18n{discoverPrintersButtonText}
+          </paper-button>
+        </div>
+        <div>  <!-- Right group -->
+          <paper-button class="cancel-button secondary-button"
+              on-tap="onCancelTap_">
+            $i18n{cancelButtonText}
+          </paper-button>
+          <paper-button class="action-button"
+              on-tap="addPressed_"
+              disabled="[[!newPrinter.printerName]]">
+            $i18n{addPrinterButtonText}
+          </paper-button>
+        </div>
       </div>
     </add-printer-dialog>
   </template>
@@ -233,57 +196,23 @@
 
 <dom-module id="add-printer-manufacturer-model-dialog">
   <template>
-    <style include="settings-shared">
-      .settings-box {
-        border-top: none;
-        margin-bottom: 10px;
-      }
-
-      .settings-box .start .label {
-        color: var(--google-grey-700);
-      }
-
-      .last {
-        margin-top: 20px;
-      }
-
-      paper-input {
-        --paper-input-container-color: var(--paper-grey-600);
-        --paper-input-container-input: {
-          font-size: inherit;
-          border: 1px solid lightgray;
-        };
-        --paper-input-container-underline: {
-          display: none;
-        };
-        --paper-input-container-underline-focus: {
-          display: none;
-        };
-        width: 340px;
-      }
-
+    <style include="cups-printer-shared">
       .error-message {
         background-color: var(--google-red-100);
         color: red;
         margin-top: 10px;
         padding: 10px 20px;
       }
-
-      #browseButton {
-        -webkit-margin-start: 5px;
-        color: black;
-        font-size: inherit;
-      }
     </style>
     <add-printer-dialog>
-      <div class="dialog-title">$i18n{addPrintersManuallyTitle}</div>
+      <div class="dialog-title">$i18n{selectManufacturerAndModelTitle}</div>
       <div class="dialog-body">
         <div class="settings-box two-line">
           <div class="start">
             <div class="label">$i18n{printerManufacturer}</div>
             <div class="secondary">
               <drop-down-search-box items="[[manufacturerList]]"
-                  selected-item="{{newPrinter.printerManufacturer}}">
+                  selected-item="{{activePrinter.ppdManufacturer}}">
               </drop-down-search-box>
             </div>
           </div>
@@ -293,7 +222,7 @@
             <div class="label">$i18n{printerModel}</div>
             <div class="secondary">
               <drop-down-search-box items="[[modelList]]"
-                  selected-item="{{newPrinter.printerModel}}">
+                  selected-item="{{activePrinter.ppdModel}}">
               </drop-down-search-box>
             </div>
           </div>
@@ -302,8 +231,10 @@
           <div class="start">
             <div class="label">$i18n{selectDriver}</div>
             <div class="secondary">
-              <paper-input no-label-float readonly>
-                <paper-button suffix id="browseButton" on-tap="onBrowseFile_">
+              <paper-input class="browse-file-input" no-label-float readonly
+                  value="[[getBaseName_(activePrinter.printerPPDPath)]]">
+                <paper-button class="browse-button" suffix
+                    on-tap="onBrowseFile_">
                   $i18n{selectDriverButtonText}
                 </paper-button>
               </paper-input>
@@ -320,9 +251,9 @@
           $i18n{cancelButtonText}
         </paper-button>
         <paper-button class="action-button" id="addPrinterButton"
-            disabled="[[!canAddPrinter_(newPrinter.printerManufacturer,
-                                        newPrinter.printerModel,
-                                        newPrinter.printerPPDPath)]]"
+            disabled="[[!canAddPrinter_(activePrinter.ppdManufacturer,
+                                        activePrinter.ppdModel,
+                                        activePrinter.printerPPDPath)]]"
             on-tap="switchToConfiguringDialog_">
           $i18n{addPrinterButtonText}
         </paper-button>
@@ -333,7 +264,7 @@
 
 <dom-module id="add-printer-configuring-dialog">
   <template>
-    <style include="settings-shared">
+    <style include="cups-printer-shared">
       .dialog-body {
         padding-top: 140px;
         text-align: center;
@@ -381,7 +312,7 @@
 
     <!-- Manufacturer and Model Dialog -->
     <template is="dom-if" if="[[showManufacturerDialog_]]" restamp>
-      <add-printer-manufacturer-model-dialog new-printer="{{newPrinter}}"
+      <add-printer-manufacturer-model-dialog active-printer="{{newPrinter}}"
           setup-failed="[[setupFailed]]">
       </add-printer-manufacturer-model-dialog>
     </template>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.js b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.js
index 8e1d7de4432..cc4df13e0ed 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.js
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.js
@@ -39,11 +39,15 @@ var kPrinterListFullHeight = 350;
  */
 function getEmptyPrinter_() {
   return {
+    ppdManufacturer: '',
+    ppdModel: '',
     printerAddress: '',
+    printerAutoconf: false,
     printerDescription: '',
     printerId: '',
     printerManufacturer: '',
     printerModel: '',
+    printerMakeAndModel: '',
     printerName: '',
     printerPPDPath: '',
     printerProtocol: 'ipp',
@@ -77,14 +81,16 @@ Polymer({
 
   /** @override */
   ready: function() {
-    settings.CupsPrintersBrowserProxyImpl.getInstance().
-        startDiscoveringPrinters();
-    this.addWebUIListener('on-printer-discovered',
-                          this.onPrinterDiscovered_.bind(this));
-    this.addWebUIListener('on-printer-discovery-done',
-                          this.onPrinterDiscoveryDone_.bind(this));
-    this.addWebUIListener('on-printer-discovery-failed',
-                          this.onPrinterDiscoveryDone_.bind(this));
+    settings.CupsPrintersBrowserProxyImpl.getInstance()
+        .startDiscoveringPrinters();
+    this.addWebUIListener(
+        'on-printer-discovered', this.onPrinterDiscovered_.bind(this));
+    this.addWebUIListener(
+        'on-printer-discovery-done', this.onPrinterDiscoveryDone_.bind(this));
+  },
+
+  close: function() {
+    this.$$('add-printer-dialog').close();
   },
 
   /**
@@ -93,25 +99,25 @@ Polymer({
    */
   onPrinterDiscovered_: function(printers) {
     this.discovering_ = true;
-    if (!this.discoveredPrinters) {
-      this.discoveredPrinters = printers;
-    } else {
-      for (var i = 0; i < printers.length; i++)
-        this.push('discoveredPrinters', printers[i]);
-    }
+    this.discoveredPrinters = printers;
   },
 
   /** @private */
   onPrinterDiscoveryDone_: function() {
     this.discovering_ = false;
     this.$$('add-printer-list').style.maxHeight = kPrinterListFullHeight + 'px';
-    this.$.noPrinterMessage.hidden = !!this.discoveredPrinters;
+    this.$.noPrinterMessage.hidden = !!this.discoveredPrinters.length;
+
+    if (!this.discoveredPrinters.length) {
+      this.selectedPrinter = getEmptyPrinter_();
+      this.fire('no-detected-printer');
+    }
   },
 
   /** @private */
   stopDiscoveringPrinters_: function() {
-    settings.CupsPrintersBrowserProxyImpl.getInstance().
-        stopDiscoveringPrinters();
+    settings.CupsPrintersBrowserProxyImpl.getInstance()
+        .stopDiscoveringPrinters();
     this.discovering_ = false;
   },
 
@@ -132,16 +138,10 @@ Polymer({
   },
 
   /** @private */
-  switchToManufacturerDialog_: function() {
+  switchToConfiguringDialog_: function() {
     this.stopDiscoveringPrinters_();
-    // If we're switching to the manufacturer/model dialog, clear the existing
-    // data we have about the PPD (if any), as we're dropping that in favor of
-    // user selections.
-    this.selectedPrinter.printerManufacturer = '';
-    this.selectedPrinter.printerModel = '';
-    this.selectedPrinter.printerPPDPath = '';
     this.$$('add-printer-dialog').close();
-    this.fire('open-manufacturer-model-dialog');
+    this.fire('open-configuring-printer-dialog');
   },
 });
 
@@ -150,15 +150,12 @@ Polymer({
 
   properties: {
     /** @type {!CupsPrinterInfo} */
-    newPrinter: {
-      type: Object,
-      notify: true,
-      value: getEmptyPrinter_
-    },
+    newPrinter: {type: Object, notify: true, value: getEmptyPrinter_},
   },
 
   /** @private */
   switchToDiscoveryDialog_: function() {
+    this.newPrinter = getEmptyPrinter_();
     this.$$('add-printer-dialog').close();
     this.fire('open-discovery-printers-dialog');
   },
@@ -169,13 +166,13 @@ Polymer({
   },
 
   /** @private */
-  switchToManufacturerDialog_: function() {
+  addPressed_: function() {
     // Set the default printer queue to be "ipp/print".
-    if (!this.newPrinter.printerQueue)
+    if (!this.newPrinter.printerQueue) {
       this.set('newPrinter.printerQueue', 'ipp/print');
-
+    }
     this.$$('add-printer-dialog').close();
-    this.fire('open-manufacturer-model-dialog');
+    this.fire('open-configuring-printer-dialog');
   },
 
   /** @private */
@@ -197,88 +194,17 @@ Polymer({
 Polymer({
   is: 'add-printer-manufacturer-model-dialog',
 
-  properties: {
-    /** @type {!CupsPrinterInfo} */
-    newPrinter: {
-      type: Object,
-      notify: true,
-    },
-
-    /** @type {?Array<string>} */
-    manufacturerList: {
-      type: Array,
-    },
-
-    /** @type {?Array<string>} */
-    modelList: {
-      type: Array,
-    },
+  behaviors: [
+    SetManufacturerModelBehavior,
+  ],
 
+  properties: {
     setupFailed: {
       type: Boolean,
       value: false,
     },
   },
 
-  observers: [
-    'selectedManufacturerChanged_(newPrinter.printerManufacturer)',
-  ],
-
-  /** @override */
-  ready: function() {
-    settings.CupsPrintersBrowserProxyImpl.getInstance().
-        getCupsPrinterManufacturersList().then(
-            this.manufacturerListChanged_.bind(this));
-  },
-
-  /**
-   * @param {string} manufacturer The manufacturer for which we are retrieving
-   *     models.
-   * @private
-   */
-  selectedManufacturerChanged_: function(manufacturer) {
-    // Reset model if manufacturer is changed.
-    this.set('newPrinter.printerModel', '');
-    if (manufacturer) {
-      settings.CupsPrintersBrowserProxyImpl.getInstance()
-          .getCupsPrinterModelsList(manufacturer)
-          .then(this.modelListChanged_.bind(this));
-    }
-  },
-
-  /** @private */
-  onBrowseFile_: function() {
-    settings.CupsPrintersBrowserProxyImpl.getInstance().
-        getCupsPrinterPPDPath().then(this.printerPPDPathChanged_.bind(this));
-  },
-
-  /**
-   * @param {string} path
-   * @private
-   */
-  printerPPDPathChanged_: function(path) {
-    this.set('newPrinter.printerPPDPath', path);
-    this.$$('paper-input').value = this.getBaseName_(path);
-  },
-
-  /**
-   * @param {!ManufacturersInfo} manufacturersInfo
-   * @private
-   */
-  manufacturerListChanged_: function(manufacturersInfo) {
-    if (manufacturersInfo.success)
-      this.manufacturerList = manufacturersInfo.manufacturers;
-  },
-
-  /**
-   * @param {!ModelsInfo} modelsInfo
-   * @private
-   */
-  modelListChanged_: function(modelsInfo) {
-    if (modelsInfo.success)
-      this.modelList = modelsInfo.models;
-  },
-
   /** @private */
   onCancelTap_: function() {
     this.$$('add-printer-dialog').close();
@@ -291,24 +217,15 @@ Polymer({
   },
 
   /**
-   * @param {string} path The full path of the file
-   * @return {string} The base name of the file
-   * @private
-   */
-  getBaseName_: function(path) {
-    return path.substring(path.lastIndexOf('/') + 1);
-  },
-
-  /**
-   * @param {string} printerManufacturer
-   * @param {string} printerModel
+   * @param {string} ppdManufacturer
+   * @param {string} ppdModel
    * @param {string} printerPPDPath
    * @return {boolean} Whether we have enough information to set up the printer
    * @private
    */
-   canAddPrinter_: function(printerManufacturer, printerModel, printerPPDPath) {
-     return !!((printerManufacturer && printerModel) || printerPPDPath);
-   },
+  canAddPrinter_: function(ppdManufacturer, ppdModel, printerPPDPath) {
+    return !!((ppdManufacturer && ppdModel) || printerPPDPath);
+  },
 });
 
 Polymer({
@@ -321,8 +238,8 @@ Polymer({
 
   /** @override */
   attached: function() {
-    this.$.configuringMessage.textContent = loadTimeData.getStringF(
-        'printerConfiguringMessage', this.printerName);
+    this.$.configuringMessage.textContent =
+        loadTimeData.getStringF('printerConfiguringMessage', this.printerName);
   },
 
   /** @private */
@@ -362,16 +279,28 @@ Polymer({
     currentDialog_: String,
 
     /** @private {boolean} */
-    showDiscoveryDialog_: Boolean,
+    showDiscoveryDialog_: {
+      type: Boolean,
+      value: false,
+    },
 
     /** @private {boolean} */
-    showManuallyAddDialog_: Boolean,
+    showManuallyAddDialog_: {
+      type: Boolean,
+      value: false,
+    },
 
     /** @private {boolean} */
-    showConfiguringDialog_: Boolean,
+    showConfiguringDialog_: {
+      type: Boolean,
+      value: false,
+    },
 
     /** @private {boolean} */
-    showManufacturerDialog_: Boolean,
+    showManufacturerDialog_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   listeners: {
@@ -380,11 +309,15 @@ Polymer({
     'open-configuring-printer-dialog': 'openConfiguringPrinterDialog_',
     'open-discovery-printers-dialog': 'openDiscoveryPrintersDialog_',
     'open-manufacturer-model-dialog': 'openManufacturerModelDialog_',
+    'no-detected-printer': 'onNoDetectedPrinter_',
   },
 
   /** @override */
   ready: function() {
     this.addWebUIListener('on-add-cups-printer', this.onAddPrinter_.bind(this));
+    this.addWebUIListener(
+        'on-manually-add-discovered-printer',
+        this.onManuallyAddDiscoveredPrinter_.bind(this));
   },
 
   /** Opens the Add printer discovery dialog. */
@@ -405,14 +338,57 @@ Polymer({
 
   /** @private */
   openManuallyAddPrinterDialog_: function() {
-    this.switchDialog_(this.currentDialog_, AddPrinterDialogs.MANUALLY,
-                       'showManuallyAddDialog_');
+    this.switchDialog_(
+        this.currentDialog_, AddPrinterDialogs.MANUALLY,
+        'showManuallyAddDialog_');
   },
 
   /** @private */
   openDiscoveryPrintersDialog_: function() {
-    this.switchDialog_(this.currentDialog_, AddPrinterDialogs.DISCOVERY,
-                       'showDiscoveryDialog_');
+    this.switchDialog_(
+        this.currentDialog_, AddPrinterDialogs.DISCOVERY,
+        'showDiscoveryDialog_');
+  },
+
+  /** @private */
+  addPrinter_: function() {
+    settings.CupsPrintersBrowserProxyImpl.getInstance().addCupsPrinter(
+        this.newPrinter);
+  },
+
+  /** @private */
+  switchToManufacturerDialog_: function() {
+    this.$$('add-printer-configuring-dialog').close();
+    this.fire('open-manufacturer-model-dialog');
+  },
+
+  /**
+   * Handler for getPrinterInfo success.
+   * @param {!PrinterMakeModel} info
+   * @private
+   * */
+  onPrinterFound_: function(info) {
+    this.newPrinter.printerAutoconf = info.autoconf;
+    this.newPrinter.printerManufacturer = info.manufacturer;
+    this.newPrinter.printerModel = info.model;
+    this.newPrinter.printerMakeAndModel = info.makeAndModel;
+
+    // Add the printer if it's configurable. Otherwise, forward to the
+    // manufacturer dialog.
+    if (this.newPrinter.printerAutoconf) {
+      this.addPrinter_();
+    } else {
+      this.switchToManufacturerDialog_();
+    }
+  },
+
+  /**
+   * Handler for getPrinterInfo failure.
+   * @param {*} rejected
+   * @private
+   */
+  infoFailed_: function(rejected) {
+    this.switchToManufacturerDialog_();
   },
 
   /** @private */
@@ -423,20 +399,32 @@ Polymer({
     if (this.previousDialog_ == AddPrinterDialogs.DISCOVERY) {
       this.configuringDialogTitle =
           loadTimeData.getString('addPrintersNearbyTitle');
-      settings.CupsPrintersBrowserProxyImpl.getInstance().addCupsPrinter(
-          this.newPrinter);
+      settings.CupsPrintersBrowserProxyImpl.getInstance().addDiscoveredPrinter(
+          this.newPrinter.printerId);
     } else if (this.previousDialog_ == AddPrinterDialogs.MANUFACTURER) {
       this.configuringDialogTitle =
+          loadTimeData.getString('selectManufacturerAndModelTitle');
+      this.addPrinter_();
+    } else if (this.previousDialog_ == AddPrinterDialogs.MANUALLY) {
+      this.configuringDialogTitle =
           loadTimeData.getString('addPrintersManuallyTitle');
-      settings.CupsPrintersBrowserProxyImpl.getInstance().addCupsPrinter(
-          this.newPrinter);
+      if (this.newPrinter.printerProtocol == 'ipp' ||
+          this.newPrinter.printerProtocol == 'ipps') {
+        settings.CupsPrintersBrowserProxyImpl.getInstance()
+            .getPrinterInfo(this.newPrinter)
+            .then(this.onPrinterFound_.bind(this), this.infoFailed_.bind(this));
+      } else {
+        // Defer the switch until all the elements are drawn.
+        this.async(this.switchToManufacturerDialog_.bind(this));
+      }
     }
   },
 
   /** @private */
   openManufacturerModelDialog_: function() {
-    this.switchDialog_(this.currentDialog_, AddPrinterDialogs.MANUFACTURER,
-                       'showManufacturerDialog_');
+    this.switchDialog_(
+        this.currentDialog_, AddPrinterDialogs.MANUFACTURER,
+        'showManufacturerDialog_');
   },
 
   /** @private */
@@ -459,6 +447,18 @@ Polymer({
     }
   },
 
+  /** @private */
+  onNoDetectedPrinter_: function() {
+    // If there is no detected printer, automatically open manually-add-printer
+    // dialog only when the user opens the discovery-dialog through the
+    // "ADD PRINTER" button.
+    if (!this.previousDialog_) {
+      this.$$('add-printer-discovery-dialog').close();
+      this.newPrinter = getEmptyPrinter_();
+      this.openManuallyAddPrinterDialog_();
+    }
+  },
+
   /**
    * Switch dialog from |fromDialog| to |toDialog|.
    * @param {string} fromDialog
@@ -481,11 +481,29 @@ Polymer({
   },
 
   /**
+   * Use the given printer as the starting point for a user-driven
+   * add of a printer.  This is called if we can't automatically configure
+   * the printer, and need more information from the user.
+   *
+   * @param {!CupsPrinterInfo} printer
+   * @private
+   */
+  onManuallyAddDiscoveredPrinter_: function(printer) {
+    this.newPrinter = printer;
+    this.switchToManufacturerDialog_();
+  },
+
+  /**
    * @param {boolean} success
    * @param {string} printerName
    * @private
    */
   onAddPrinter_: function(success, printerName) {
+    // 'on-add-cups-printer' event might be triggered by editing an existing
+    // printer, in which case there is no configuring dialog.
+    if (!this.$$('add-printer-configuring-dialog'))
+      return;
+
     this.$$('add-printer-configuring-dialog').close();
     if (success)
       return;
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
index 7b76fb22516..9ab2bee9442 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
@@ -1,43 +1,19 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
+<link rel="import" href="cups_printer_shared_css.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
-<link rel="import" href="../settings_shared_css.html">
-<link rel="import" href="../settings_vars_css.html">
-
-<dom-module id="cups-add-printer-dialog-style">
-  <template>
-    <style>
-      .list-item {
-        background: none;
-        border: none;
-        box-sizing: border-box;
-        color: var(--paper-grey-800);
-        font: inherit;
-        min-height: 32px;
-        padding: 0 24px;
-        text-align: start;
-        width: 100%;
-        @apply(--settings-actionable);
-      }
-
-      .list-item:focus {
-        background-color: var(--paper-grey-300);
-        outline: none;
-      }
-    </style>
-  </template>
-</dom-module>
 
 <dom-module id="add-printer-list">
   <template>
-    <style include="settings-shared cups-add-printer-dialog-style">
+    <style include="cups-printer-shared">
       .list-item {
         padding: 0 20px;
       }
@@ -57,36 +33,41 @@
 
 <dom-module id="drop-down-search-box">
   <template>
-    <style include="settings-shared cups-add-printer-dialog-style">
+    <style include="cups-printer-shared">
       iron-dropdown,
       paper-input-container {
         width: 270px;
       }
 
-      paper-input-container {
-        --paper-input-container-color: var(--paper-grey-600);
-        --paper-input-container-input: {
-          font-size: inherit;
-        };
-      }
-
       iron-dropdown .dropdown-content {
         background-color: white;
         box-shadow: 0 2px 6px var(--paper-grey-500);
         min-width: 128px;
         padding: 8px 0;
       }
+
+      /* The following styles make the arrow look aligned with md-select */
+      button[is='paper-icon-button-light'] {
+        height: 24px;
+        width: 24px;
+      }
+
+      #dropdownIcon {
+        background-size: 24px;
+      }
     </style>
     <paper-input-container no-label-float on-tap="onTap_">
       <input is="iron-input" type="search" bind-value="{{selectedItem}}"
           on-search="onInputValueChanged_" on-change="onChange_" incremental>
-      <paper-icon-button suffix id="searchIcon" icon="cr:search" hidden>
-      </paper-icon-button>
-      <paper-icon-button suffix id="dropdownIcon" icon="cr:arrow-drop-down">
-      </paper-icon-button>
+      <button is="paper-icon-button-light" class="icon-search" suffix
+          id="searchIcon" hidden>
+      </button>
+      <button is="paper-icon-button-light" class="icon-arrow-dropdown" suffix
+          id="dropdownIcon">
+      </button>
     </paper-input-container>
     <iron-dropdown horizontal-align="left" vertical-align="top"
-        vertical-offset="47">
+        vertical-offset="35">
       <div class="dropdown-content">
         <template is="dom-repeat" items="[[items]]"
             filter="[[filterItems_(searchTerm_)]]">
@@ -114,13 +95,13 @@
     </style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">
+      <div class="title" slot="title">
         <content select=".dialog-title"></content>
       </div>
-      <div class="body">
+      <div class="body" slot="body" scrollable>
         <content select=".dialog-body"></content>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <content select=".dialog-buttons"></content>
       </div>
     </dialog>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.js b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.js
index ecf3558a5e0..9a404b4cab0 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.js
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.js
@@ -55,7 +55,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onTap_: function(event) {
@@ -105,6 +105,10 @@ Polymer({
 Polymer({
   is: 'add-printer-dialog',
 
+  behaviors: [
+    CrScrollableBehavior,
+  ],
+
   /** @private */
   attached: function() {
     this.$.dialog.showModal();
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html b/chromium/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html
new file mode 100644
index 00000000000..f98aa2d4d5d
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html
@@ -0,0 +1,124 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="cups_add_printer_dialog_util.html">
+<link rel="import" href="cups_printer_shared_css.html">
+<link rel="import" href="cups_printers_browser_proxy.html">
+<link rel="import" href="cups_set_manufacturer_model_behavior.html">
+
+<dom-module id="settings-cups-edit-printer-dialog">
+  <template>
+    <style include="cups-printer-shared"></style>
+    <add-printer-dialog>
+      <div class="dialog-title">$i18n{editPrinterDialogTitle}</div>
+      <div class="dialog-body">
+        <div class="settings-box first two-line">
+          <div class="start">
+            <div class="label">$i18n{printerName}</div>
+            <div class="secondary">
+              <paper-input class="printer-name-input" no-label-float autofocus
+                  value="{{activePrinter.printerName}}">
+              </paper-input>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerAddress}</div>
+            <div class="secondary">
+              <paper-input no-label-float
+                  value="{{activePrinter.printerAddress}}">
+              </paper-input>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div id="printerProtocol" class="label">$i18n{printerProtocol}</div>
+            <div class="secondary">
+              <div class="md-select-wrapper">
+                <select class="md-select" aria-labelledby="printerProtocol"
+                    value="[[activePrinter.printerProtocol]]"
+                    on-change="onProtocolChange_">
+                  <option value="ipp">$i18n{printerProtocolIpp}</option>
+                  <option value="ipps">$i18n{printerProtocolIpps}</option>
+                  <option value="http">$i18n{printerProtocolHttp}</option>
+                  <option value="https">$i18n{printerProtocolHttps}</option>
+                  <option value="socket">$i18n{printerProtocolAppSocket}
+                  </option>
+                  <option value="lpd">$i18n{printerProtocolLpd}</option>
+                </select>
+                <span class="md-select-underline"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerQueue}</div>
+            <div class="secondary">
+              <paper-input no-label-float
+                  value="{{activePrinter.printerQueue}}">
+              </paper-input>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerURI}</div>
+            <div class="secondary">
+              <paper-input no-label-float disabled
+                  value="[[getPrinterURI_(activePrinter)]]">
+              </paper-input>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerManufacturer}</div>
+            <div class="secondary">
+              <drop-down-search-box items="[[manufacturerList]]"
+                  selected-item="{{activePrinter.ppdManufacturer}}">
+              </drop-down-search-box>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerModel}</div>
+            <div class="secondary">
+              <drop-down-search-box items="[[modelList]]"
+                  selected-item="{{activePrinter.ppdModel}}">
+              </drop-down-search-box>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line last">
+          <div class="start">
+            <div class="label">$i18n{selectDriver}</div>
+            <div class="secondary">
+              <paper-input class="browse-file-input" no-label-float readonly
+                  value="[[getBaseName_(activePrinter.printerPPDPath)]]">
+                <paper-button class="browse-button" suffix
+                    on-tap="onBrowseFile_">
+                  $i18n{selectDriverButtonText}
+                </paper-button>
+              </paper-input>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-buttons">
+        <paper-button class="cancel-button secondary-button"
+            on-tap="onCancelTap_">
+          $i18n{cancelButtonText}
+        </paper-button>
+        <paper-button class="action-button" on-tap="onSaveTap_">
+          $i18n{editPrinterButtonText}
+        </paper-button>
+      </div>
+    </add-printer-dialog>
+  </template>
+  <script src="cups_edit_printer_dialog.js"></script>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.js b/chromium/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.js
new file mode 100644
index 00000000000..fe8ecdc222a
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.js
@@ -0,0 +1,113 @@
+// Copyright 2017 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 'settings-cups-edit-printer-dialog' is a dialog to edit the
+ * existing printer's information and re-configure it.
+ */
+
+Polymer({
+  is: 'settings-cups-edit-printer-dialog',
+
+  behaviors: [
+    SetManufacturerModelBehavior,
+  ],
+
+  properties: {
+    /**
+     * If the printer needs to be re-configured.
+     * @private {boolean}
+     */
+    needsReconfigured_: Boolean,
+  },
+
+  observers: [
+    'printerInfoChanged_(activePrinter.*)',
+  ],
+
+  /** @override */
+  ready: function() {
+    settings.CupsPrintersBrowserProxyImpl.getInstance()
+        .getPrinterPpdManufacturerAndModel(this.activePrinter.printerId)
+        .then(
+            this.onGetPrinterPpdManufacturerAndModel_.bind(this),
+            this.onGetPrinterPpdManufacturerAndModelFailed_.bind(this));
+  },
+
+  /**
+   * @param {!{path: string, value: string}} change
+   * @private
+   */
+  printerInfoChanged_: function(change) {
+    if (change.path != 'activePrinter.printerName')
+      this.needsReconfigured_ = true;
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onProtocolChange_: function(event) {
+    this.set('activePrinter.printerProtocol', event.target.value);
+  },
+
+  /** @private */
+  onCancelTap_: function() {
+    this.$$('add-printer-dialog').close();
+  },
+
+  /** @private */
+  onSaveTap_: function() {
+    if (this.needsReconfigured_) {
+      settings.CupsPrintersBrowserProxyImpl.getInstance().addCupsPrinter(
+          this.activePrinter);
+    } else {
+      settings.CupsPrintersBrowserProxyImpl.getInstance().updateCupsPrinter(
+          this.activePrinter.printerId, this.activePrinter.printerName);
+    }
+    this.$$('add-printer-dialog').close();
+  },
+
+  /**
+   * @param {!CupsPrinterInfo} printer
+   * @return {string} The printer's URI that displays in the UI
+   * @private
+   */
+  getPrinterURI_: function(printer) {
+    if (!printer) {
+      return '';
+    } else if (
+        printer.printerProtocol && printer.printerAddress &&
+        printer.printerQueue) {
+      return printer.printerProtocol + '://' + printer.printerAddress + '/' +
+          printer.printerQueue;
+    } else if (printer.printerProtocol && printer.printerAddress) {
+      return printer.printerProtocol + '://' + printer.printerAddress;
+    } else {
+      return '';
+    }
+  },
+
+  /**
+   * Handler for getPrinterPpdManufacturerAndModel() success case.
+   * @param {!PrinterPpdMakeModel} info
+   * @private
+   */
+  onGetPrinterPpdManufacturerAndModel_: function(info) {
+    this.set('activePrinter.ppdManufacturer', info.ppdManufacturer);
+    this.set('activePrinter.ppdModel', info.ppdModel);
+
+    // |needsReconfigured_| needs to reset to false after |ppdManufacturer| and
+    // |ppdModel| are initialized to their correct values.
+    this.needsReconfigured_ = false;
+  },
+
+  /**
+   * Handler for getPrinterPpdManufacturerAndModel() failure case.
+   * @private
+   */
+  onGetPrinterPpdManufacturerAndModelFailed_: function() {
+    this.needsReconfigured_ = false;
+  },
+});
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printer_details_page.html b/chromium/chrome/browser/resources/settings/printing_page/cups_printer_details_page.html
deleted file mode 100644
index 19c70080f67..00000000000
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printer_details_page.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="../settings_shared_css.html">
-
-<dom-module id="settings-cups-printer-details-page">
-  <template>
-    <style include="settings-shared">
-      paper-input {
-        width: 20em;
-        --paper-input-container-input: {
-          font-size: inherit;
-          color: inherit;
-        };
-      }
-    </style>
-    <div class="settings-box first two-line">
-      <div class="start">
-        <div>$i18n{printerName}</div>
-        <div class="secondary">
-          <paper-input no-label-float value="{{printer.printerName}}"
-              on-change="onValueChange_">
-          </paper-input>
-        </div>
-      </div>
-    </div>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>$i18n{printerModel}</div>
-        <div class="secondary">[[printer.printerModel]]</div>
-      </div>
-    </div>
-    <!-- TODO(xdai): Add printerStatus. -->
-
-    <!-- Advanced toggle -->
-    <div class="settings-box" actionable on-tap="toggleAdvancedExpanded_">
-      <div class="start">$i18n{printerDetailsAdvanced}</div>
-      <cr-expand-button id="expandButton" expanded="{{advancedExpanded}}"
-          alt="$i18n{printerDetailsA11yLabel}">
-      </cr-expand-button>
-    </div>
-    <!-- Advanced section -->
-    <iron-collapse opened="[[advancedExpanded]]">
-      <div class="list-frame vertical-list">
-        <div class="list-item setting-box two-line">
-          <div class="start">
-            <div>$i18n{printerAddress}</div>
-            <div class="secondary">[[printer.printerAddress]]</div>
-          </div>
-        </div>
-        <div class="list-item setting-box two-line">
-          <div class="start">
-            <div>$i18n{printerProtocol}</div>
-            <div class="secondary">
-              [[getPrinterProtocol_(printer.printerProtocol)]]
-            </div>
-          </div>
-        </div>
-        <template is="dom-if" if="[[printer.printerQueue]]">
-          <div class="list-item setting-box two-line">
-            <div class="start">
-              <div>$i18n{printerQueue}</div>
-              <div class="secondary">[[printer.printerQueue]]</div>
-            </div>
-          </div>
-        </template>
-        <div class="list-item setting-box two-line">
-          <div class="start">
-            <div>$i18n{printerURI}</div>
-            <div class="secondary">[[getPrinterURI_(printer)]]</div>
-          </div>
-        </div>
-      </div>
-    </iron-collapse>
-  </template>
-  <script src="cups_printer_details_page.js"></script>
-</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printer_details_page.js b/chromium/chrome/browser/resources/settings/printing_page/cups_printer_details_page.js
deleted file mode 100644
index 5fc53e43043..00000000000
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printer_details_page.js
+++ /dev/null
@@ -1,97 +0,0 @@
-// Copyright 2016 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 'settings-cups-printer-details-page' is the subpage for
- * viewing the details of a CUPS printer.
- */
-Polymer({
-  is: 'settings-cups-printer-details-page',
-
-  properties: {
-    /** @type {!CupsPrinterInfo} */
-    printer: {
-      type: Object,
-      notify: true,
-    },
-
-    advancedExpanded: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  /** @private {settings.CupsPrintersBrowserProxy} */
-  browserProxy_: null,
-
-  /** @override */
-  created: function() {
-    this.browserProxy_ = settings.CupsPrintersBrowserProxyImpl.getInstance();
-  },
-
-  /**
-   * Event triggered when the input value changes.
-   * @private
-   */
-  onValueChange_: function() {
-    this.browserProxy_.updateCupsPrinter(this.printer.printerId,
-                                         this.printer.printerName);
-  },
-
-  /**
-   * @param {Event} event
-   * @private
-   */
-  toggleAdvancedExpanded_: function(event) {
-    if (event.target.id == 'expandButton')
-      return;  // Already handled.
-    this.advancedExpanded = !this.advancedExpanded;
-  },
-
-  /**
-   * @param {string} printerProtocol
-   * @return {string} The Printer's protocol that displays in UI
-   * @private
-   */
-  getPrinterProtocol_: function(printerProtocol) {
-    if (!printerProtocol)
-      return '';
-    if (printerProtocol == 'ipp')
-      return loadTimeData.getString('printerProtocolIpp');
-    if (printerProtocol == 'ipps')
-      return loadTimeData.getString('printerProtocolIpps');
-    if (printerProtocol == 'http')
-      return loadTimeData.getString('printerProtocolHttp');
-    if (printerProtocol == 'https')
-      return loadTimeData.getString('printerProtocolHttps');
-    if (printerProtocol == 'socket')
-      return loadTimeData.getString('printerProtocolAppSocket');
-    if (printerProtocol == 'lpd')
-      return loadTimeData.getString('printerProtocolLpd');
-    if (printerProtocol == 'usb')
-      return loadTimeData.getString('printerProtocolUsb');
-    assertNotReached('Illegal printer protocol!');
-  },
-
-  /**
-   * @param {!CupsPrinterInfo} printer
-   * @return {string} The printer's URI that displays in the UI
-   * @private
-   */
-  getPrinterURI_: function(printer) {
-    if (!printer) {
-      return '';
-    } else if (printer.printerProtocol &&
-               printer.printerAddress &&
-               printer.printerQueue) {
-      return printer.printerProtocol + '://' +
-             printer.printerAddress + '/' +
-             printer.printerQueue;
-    } else if (printer.printerProtocol && printer.printerAddress) {
-      return printer.printerProtocol + '://' + printer.printerAddress;
-    } else {
-      return '';
-    }
-  },
-});
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html b/chromium/chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html
new file mode 100644
index 00000000000..097523c1a5a
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html
@@ -0,0 +1,108 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../settings_vars_css.html">
+
+<!-- Common styles for CUPS printer settings. -->
+<dom-module id="cups-printer-shared">
+  <template>
+    <style include="settings-shared md-select">
+      .dialog-body .settings-box {
+        border-top: none;
+        margin-bottom: 10px;
+      }
+
+      .dialog-body .settings-box .two-line {
+        min-height: 72px;
+      }
+
+      .dialog-body .settings-box .start .label {
+        color: var(--google-grey-700);
+      }
+
+      .dialog-body .settings-box paper-input {
+        --paper-input-container-input: {
+          font-size: inherit;
+        };
+        width: 270px;
+      }
+
+      .dialog-body .settings-box .md-select-wrapper {
+        -webkit-margin-start: calc(-1 * var(--md-select-side-padding));
+        margin-top: 8px;
+      }
+
+      .dialog-body .settings-box .md-select {
+        width: calc(270px + calc(2* var(--md-select-side-padding)));
+      }
+
+      .dialog-body .settings-box .printer-name-input {
+        width: 450px;
+      }
+
+      .dialog-body .settings-box .browse-file-input {
+        --paper-input-container-input: {
+          border: 1px solid lightgray;
+          font-size: inherit;
+        };
+        --paper-input-container-underline: {
+          display: none;
+        };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        --paper-input-suffix: {
+          font-size: inherit;
+        };
+        width: 340px;
+      }
+
+      .dialog-body .settings-box .browse-button {
+        -webkit-margin-start: 5px;
+        color: black;
+      }
+
+      .dialog-body .last {
+        margin-top: 20px;
+      }
+
+      .dialog-body .center {
+        display: flex;
+        justify-content: center;
+        position: absolute;
+        top: 50%;
+        width: 100%;
+      }
+
+      .dialog-buttons {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      .list-item {
+        background: none;
+        border: none;
+        box-sizing: border-box;
+        color: var(--paper-grey-800);
+        font: inherit;
+        min-height: 32px;
+        padding: 0 24px;
+        text-align: start;
+        width: 100%;
+        @apply(--settings-actionable);
+      }
+
+      .list-item:focus {
+        background-color: var(--paper-grey-300);
+        outline: none;
+      }
+
+      paper-input-container {
+        --paper-input-container-input: {
+          font: inherit;
+        };
+        --paper-input-container-input-color: inherit;
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printers.html b/chromium/chrome/browser/resources/settings/printing_page/cups_printers.html
index c6ffeddf0ea..36374ba0f2c 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printers.html
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_printers.html
@@ -6,22 +6,24 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="cups_add_printer_dialog.html">
+<link rel="import" href="cups_edit_printer_dialog.html">
+<link rel="import" href="cups_printer_shared_css.html">
 <link rel="import" href="cups_printers_list.html">
-<link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-cups-printers">
   <template>
-    <style include="settings-shared action-link">
-      .settings-box .start {
-        color: var(--paper-grey-600);
-      }
-
+    <style include="cups-printer-shared action-link">
       .settings-box .start .secondary {
         color: var(--paper-grey-800);
         font-size: 92.31%;  /* 12px / 13px */
       }
-      
+
       .settings-box .primary-button {
+        --paper-button-disabled: {
+          background: none;
+          color: black;
+          opacity: 0.26;
+        };
         -webkit-margin-end: 0;
         -webkit-margin-start: auto;
       }
@@ -55,21 +57,33 @@
     </style>
 
     <div class="settings-box first">
+      <div class="start">
+        <span>$i18n{cupsPrintersLearnMoreLabel}</span>
+        <a href="$i18n{printingCUPSPrintLearnMoreUrl}" target="_blank">
+          $i18n{learnMore}
+        </a>
+        <div class="secondary" hidden="[[canAddPrinter_]]">
+          $i18n{requireNetworkMessage}
+        </div>
+      </div>
       <paper-button class="primary-button" id="addPrinter"
-          on-tap="onAddPrinterTap_" hidden="[[!canAddPrinter_]]">
+          on-tap="onAddPrinterTap_" disabled="[[!canAddPrinter_]]">
         $i18n{addCupsPrinter}
       </paper-button>
-      <div class="start" hidden="[[canAddPrinter_]]">
-        <span>$i18n{addCupsPrinter}</span>
-        <div class="secondary">$i18n{requireNetworkMessage}</div>
-      </div>
     </div>
 
     <settings-cups-add-printer-dialog id="addPrinterDialog"
         on-close="onAddPrinterDialogClose_">
     </settings-cups-add-printer-dialog>
 
+    <template is="dom-if" if="[[showCupsEditPrinterDialog_]]" restamp>
+      <settings-cups-edit-printer-dialog id="editPrinterDialog"
+          active-printer="{{activePrinter}}">
+      </settings-cups-edit-printer-dialog>
+    </template>
+
     <settings-cups-printers-list printers="{{printers}}"
+        active-printer="{{activePrinter}}"
         search-term="[[searchTerm]]">
     </settings-cups-printers-list>
 
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printers.js b/chromium/chrome/browser/resources/settings/printing_page/cups_printers.js
index 95def654e51..9f12f02571a 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printers.js
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_printers.js
@@ -21,12 +21,25 @@ Polymer({
       notify: true,
     },
 
+    /** @type {?CupsPrinterInfo} */
+    activePrinter: {
+      type: Object,
+      notify: true,
+    },
+
     searchTerm: {
       type: String,
     },
 
     /** @private */
     canAddPrinter_: Boolean,
+
+    /** @private */
+    showCupsEditPrinterDialog_: Boolean,
+  },
+
+  listeners: {
+    'edit-cups-printer-details': 'onShowCupsEditPrinterDialog_',
   },
 
   /**
@@ -61,8 +74,10 @@ Polymer({
    */
   refreshNetworks_: function() {
     chrome.networkingPrivate.getNetworks(
-        {'networkType': chrome.networkingPrivate.NetworkType.ALL,
-         'configured': true},
+        {
+          'networkType': chrome.networkingPrivate.NetworkType.ALL,
+          'configured': true
+        },
         this.onNetworksReceived_.bind(this));
   },
 
@@ -75,7 +90,7 @@ Polymer({
   onNetworksReceived_: function(states) {
     this.canAddPrinter_ = states.some(function(entry) {
       return entry.hasOwnProperty('ConnectionState') &&
-             entry.ConnectionState == 'Connected';
+          entry.ConnectionState == 'Connected';
     });
   },
 
@@ -88,8 +103,8 @@ Polymer({
     if (success) {
       this.updateCupsPrintersList_();
       var message = this.$.addPrinterDoneMessage;
-      message.textContent = loadTimeData.getStringF(
-          'printerAddedSuccessfulMessage', printerName);
+      message.textContent =
+          loadTimeData.getStringF('printerAddedSuccessfulMessage', printerName);
     } else {
       var message = this.$.addPrinterErrorMessage;
     }
@@ -101,8 +116,9 @@ Polymer({
 
   /** @private */
   updateCupsPrintersList_: function() {
-    settings.CupsPrintersBrowserProxyImpl.getInstance().
-        getCupsPrintersList().then(this.printersChanged_.bind(this));
+    settings.CupsPrintersBrowserProxyImpl.getInstance()
+        .getCupsPrintersList()
+        .then(this.printersChanged_.bind(this));
   },
 
   /**
@@ -123,4 +139,16 @@ Polymer({
   onAddPrinterDialogClose_: function() {
     cr.ui.focusWithoutInk(assert(this.$$('#addPrinter')));
   },
+
+  /** @private */
+  onShowCupsEditPrinterDialog_: function() {
+    this.showCupsEditPrinterDialog_ = true;
+    this.async(function() {
+      var dialog = this.$$('settings-cups-edit-printer-dialog');
+      dialog.addEventListener('close', function() {
+        this.showCupsEditPrinterDialog_ = false;
+      }.bind(this));
+    });
+  },
+
 });
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printers_browser_proxy.js b/chromium/chrome/browser/resources/settings/printing_page/cups_printers_browser_proxy.js
index c02a562f92b..29ad9bdb4b5 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printers_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_printers_browser_proxy.js
@@ -9,16 +9,20 @@
 
 /**
  * @typedef {{
+ *   ppdManufacturer: string,
+ *   ppdModel: string,
  *   printerAddress: string,
+ *   printerAutoconf: boolean,
  *   printerDescription: string,
  *   printerId: string,
  *   printerManufacturer: string,
  *   printerModel: string,
+ *   printerMakeAndModel: string,
  *   printerName: string,
  *   printerPPDPath: string,
  *   printerProtocol: string,
  *   printerQueue: string,
- *   printerStatus: string
+ *   printerStatus: string,
  * }}
  */
 var CupsPrinterInfo;
@@ -46,108 +50,159 @@ var ManufacturersInfo;
  */
 var ModelsInfo;
 
-cr.define('settings', function() {
-  /** @interface */
-  function CupsPrintersBrowserProxy() {}
+/**
+ * @typedef {{
+ *   manufacturer: string,
+ *   model: string,
+ *   makeAndModel: string,
+ *   autoconf: boolean
+ * }}
+ */
+var PrinterMakeModel;
 
-  CupsPrintersBrowserProxy.prototype = {
+/**
+ * @typedef {{
+ *   ppdManufacturer: string,
+ *   ppdModel: string
+ * }}
+ */
+var PrinterPpdMakeModel;
 
+/**
+ * @typedef {{
+ *   message: string
+ * }}
+ */
+var QueryFailure;
+
+cr.define('settings', function() {
+  /** @interface */
+  class CupsPrintersBrowserProxy {
     /**
      * @return {!Promise<!CupsPrintersList>}
      */
-    getCupsPrintersList: function() {},
+    getCupsPrintersList() {}
 
     /**
      * @param {string} printerId
      * @param {string} printerName
      */
-    updateCupsPrinter: function(printerId, printerName) {},
+    updateCupsPrinter(printerId, printerName) {}
 
     /**
      * @param {string} printerId
      * @param {string} printerName
      */
-    removeCupsPrinter: function(printerId, printerName) {},
+    removeCupsPrinter(printerId, printerName) {}
 
     /**
      * @return {!Promise<string>} The full path of the printer PPD file.
      */
-    getCupsPrinterPPDPath: function() {},
+    getCupsPrinterPPDPath() {}
 
     /**
      * @param {!CupsPrinterInfo} newPrinter
      */
-    addCupsPrinter: function(newPrinter) {},
-
-    startDiscoveringPrinters: function() {},
+    addCupsPrinter(newPrinter) {}
 
-    stopDiscoveringPrinters: function() {},
+    startDiscoveringPrinters() {}
+    stopDiscoveringPrinters() {}
 
     /**
      * @return {!Promise<!ManufacturersInfo>}
      */
-    getCupsPrinterManufacturersList: function() {},
+    getCupsPrinterManufacturersList() {}
 
     /**
      * @param {string} manufacturer
      * @return {!Promise<!ModelsInfo>}
      */
-    getCupsPrinterModelsList: function(manufacturer) {},
-  };
+    getCupsPrinterModelsList(manufacturer) {}
+
+    /**
+     * @param {!CupsPrinterInfo} newPrinter
+     * @return {!Promise<!PrinterMakeModel>}
+     */
+    getPrinterInfo(newPrinter) {}
+
+    /**
+     * @param {string} printerId
+     * @return {!Promise<!PrinterPpdMakeModel>}
+     */
+    getPrinterPpdManufacturerAndModel(printerId) {}
+
+    /**
+     * @param{string} printerId
+     */
+    addDiscoveredPrinter(printerId) {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.CupsPrintersBrowserProxy}
    */
-  function CupsPrintersBrowserProxyImpl() {}
-  cr.addSingletonGetter(CupsPrintersBrowserProxyImpl);
-
-  CupsPrintersBrowserProxyImpl.prototype = {
+  class CupsPrintersBrowserProxyImpl {
     /** @override */
-    getCupsPrintersList: function() {
+    getCupsPrintersList() {
       return cr.sendWithPromise('getCupsPrintersList');
-    },
+    }
 
     /** @override */
-    updateCupsPrinter: function(printerId, printerName) {
+    updateCupsPrinter(printerId, printerName) {
       chrome.send('updateCupsPrinter', [printerId, printerName]);
-    },
+    }
 
     /** @override */
-    removeCupsPrinter: function(printerId, printerName) {
+    removeCupsPrinter(printerId, printerName) {
       chrome.send('removeCupsPrinter', [printerId, printerName]);
-    },
+    }
 
     /** @override */
-    addCupsPrinter: function(newPrinter) {
+    addCupsPrinter(newPrinter) {
       chrome.send('addCupsPrinter', [newPrinter]);
-    },
+    }
 
     /** @override */
-    getCupsPrinterPPDPath: function() {
+    getCupsPrinterPPDPath() {
       return cr.sendWithPromise('selectPPDFile');
-    },
+    }
 
     /** @override */
-    startDiscoveringPrinters: function() {
+    startDiscoveringPrinters() {
       chrome.send('startDiscoveringPrinters');
-    },
+    }
 
     /** @override */
-    stopDiscoveringPrinters: function() {
+    stopDiscoveringPrinters() {
       chrome.send('stopDiscoveringPrinters');
-    },
+    }
 
     /** @override */
-    getCupsPrinterManufacturersList: function() {
+    getCupsPrinterManufacturersList() {
       return cr.sendWithPromise('getCupsPrinterManufacturersList');
-    },
+    }
 
     /** @override */
-    getCupsPrinterModelsList: function(manufacturer) {
+    getCupsPrinterModelsList(manufacturer) {
       return cr.sendWithPromise('getCupsPrinterModelsList', manufacturer);
-    },
-  };
+    }
+
+    /** @override */
+    getPrinterInfo(newPrinter) {
+      return cr.sendWithPromise('getPrinterInfo', newPrinter);
+    }
+
+    /** @override */
+    getPrinterPpdManufacturerAndModel(printerId) {
+      return cr.sendWithPromise('getPrinterPpdManufacturerAndModel', printerId);
+    }
+
+    /** @override */
+    addDiscoveredPrinter(printerId) {
+      chrome.send('addDiscoveredPrinter', [printerId]);
+    }
+  }
+
+  cr.addSingletonGetter(CupsPrintersBrowserProxyImpl);
 
   return {
     CupsPrintersBrowserProxy: CupsPrintersBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.html b/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.html
index 76c891aeb4d..1a332d50761 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.html
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.html
@@ -2,49 +2,38 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-cups-printers-list">
   <template>
     <style include="settings-shared">
-      #container {
-        border-top: 1px solid lightgray;
-        display: flex;
-        padding: 2px 20px;
-      }
-
-      .name-column {
+      .printer-name {
         flex: 1;
-        margin: 2px;
-      }
-
-      .list-item {
-        min-height: 20px;
       }
     </style>
 
     <dialog is="cr-action-menu">
-      <button class="dropdown-item" role="option" on-tap="onDetailsTap_">
-        $i18n{cupsPrinterDetails}
+      <button class="dropdown-item" role="option" on-tap="onEditTap_">
+        $i18n{editPrinter}
       </button>
       <button class="dropdown-item" role="option" on-tap="onRemoveTap_">
         $i18n{removePrinter}
       </button>
     </dialog>
-    <template is="dom-repeat" items="[[printers]]"
-        filter="[[filterPrinter_(searchTerm)]]">
-      <div id="container" class="list-item">
-        <div class="name-column">
-          <span class="name" id="printer-name">[[item.printerName]]</span>
+    <div class="list-frame vertical-list">
+      <template is="dom-repeat" items="[[printers]]"
+          filter="[[filterPrinter_(searchTerm)]]">
+        <div class="list-item">
+          <div class="printer-name text-elide">[[item.printerName]]</div>
           <!--TODO(xdai): Add icon for enterprise CUPS printer. -->
+          <button is="paper-icon-button-light" class="icon-more-vert"
+              on-tap="onOpenActionMenuTap_" title="$i18n{moreActions}">
+          </button>
         </div>
-        <paper-icon-button icon="cr:more-vert" on-tap="onOpenActionMenuTap_"
-            title="$i18n{moreActions}">
-        </paper-icon-button>
-      </div>
-    </template>
+      </template>
+    </div>
   </template>
   <script src="cups_printers_list.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.js b/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.js
index 7ce3f04513e..ebfd12fb69c 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.js
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_printers_list.js
@@ -22,9 +22,12 @@ Polymer({
 
     /**
      * The model for the printer action menu.
-     * @private {?CupsPrinterInfo}
+     * @type {?CupsPrinterInfo}
      */
-    activePrinter_: Object,
+    activePrinter: {
+      type: Object,
+      notify: true,
+    },
   },
 
   /** @private {settings.CupsPrintersBrowserProxy} */
@@ -40,7 +43,7 @@ Polymer({
    * @private
    */
   onOpenActionMenuTap_: function(e) {
-    this.activePrinter_ = e.model.item;
+    this.activePrinter = e.model.item;
     var menu = /** @type {!CrActionMenuElement} */ (
         this.$$('dialog[is=cr-action-menu]'));
     menu.showAt(/** @type {!Element} */ (
@@ -51,9 +54,9 @@ Polymer({
    * @param {{model:Object}} event
    * @private
    */
-  onDetailsTap_: function(event) {
-    // Event is caught by 'settings-printing-page'.
-    this.fire('show-cups-printer-details', this.activePrinter_);
+  onEditTap_: function(event) {
+    // Event is caught by 'settings-cups-printers'.
+    this.fire('edit-cups-printer-details');
     this.closeDropdownMenu_();
   },
 
@@ -62,16 +65,16 @@ Polymer({
    * @private
    */
   onRemoveTap_: function(event) {
-    var index = this.printers.indexOf(assert(this.activePrinter_));
+    var index = this.printers.indexOf(assert(this.activePrinter));
     this.splice('printers', index, 1);
-    this.browserProxy_.removeCupsPrinter(this.activePrinter_.printerId,
-                                         this.activePrinter_.printerName);
+    this.browserProxy_.removeCupsPrinter(
+        this.activePrinter.printerId, this.activePrinter.printerName);
+    this.activePrinter = null;
     this.closeDropdownMenu_();
   },
 
   /** @private */
   closeDropdownMenu_: function() {
-    this.activePrinter_ = null;
     var menu = /** @type {!CrActionMenuElement} */ (
         this.$$('dialog[is=cr-action-menu]'));
     menu.close();
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_set_manufacturer_model_behavior.html b/chromium/chrome/browser/resources/settings/printing_page/cups_set_manufacturer_model_behavior.html
new file mode 100644
index 00000000000..d7e49857795
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_set_manufacturer_model_behavior.html
@@ -0,0 +1 @@
+<script src="cups_set_manufacturer_model_behavior.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/printing_page/cups_set_manufacturer_model_behavior.js b/chromium/chrome/browser/resources/settings/printing_page/cups_set_manufacturer_model_behavior.js
new file mode 100644
index 00000000000..25f65208faf
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/printing_page/cups_set_manufacturer_model_behavior.js
@@ -0,0 +1,107 @@
+// Copyright 2017 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 SetManufacturerModelBehavior for selecting manufacturer and
+ * model from the available lists for a printer.
+ */
+
+/** @polymerBehavior */
+var SetManufacturerModelBehavior = {
+  properties: {
+    /** @type {!CupsPrinterInfo} */
+    activePrinter: {
+      type: Object,
+      notify: true,
+    },
+
+    /** @type {?Array<string>} */
+    manufacturerList: {
+      type: Array,
+    },
+
+    /** @type {?Array<string>} */
+    modelList: {
+      type: Array,
+    },
+  },
+
+  observers: [
+    'selectedManufacturerChanged_(activePrinter.ppdManufacturer)',
+  ],
+
+  /** @override */
+  attached: function() {
+    settings.CupsPrintersBrowserProxyImpl.getInstance()
+        .getCupsPrinterManufacturersList()
+        .then(this.manufacturerListChanged_.bind(this));
+  },
+
+  /**
+   * @param {string} manufacturer The manufacturer for which we are retrieving
+   *     models.
+   * @private
+   */
+  selectedManufacturerChanged_: function(manufacturer) {
+    // Reset model if manufacturer is changed.
+    this.set('activePrinter.ppdModel', '');
+    this.modelList = [];
+    if (manufacturer.length != 0) {
+      settings.CupsPrintersBrowserProxyImpl.getInstance()
+          .getCupsPrinterModelsList(manufacturer)
+          .then(this.modelListChanged_.bind(this));
+    }
+  },
+
+  /** @private */
+  onBrowseFile_: function() {
+    settings.CupsPrintersBrowserProxyImpl.getInstance()
+        .getCupsPrinterPPDPath()
+        .then(this.printerPPDPathChanged_.bind(this));
+  },
+
+  /**
+   * @param {!ManufacturersInfo} manufacturersInfo
+   * @private
+   */
+  manufacturerListChanged_: function(manufacturersInfo) {
+    if (!manufacturersInfo.success)
+      return;
+    this.manufacturerList = manufacturersInfo.manufacturers;
+    if (this.activePrinter.ppdManufacturer.length != 0) {
+      settings.CupsPrintersBrowserProxyImpl.getInstance()
+          .getCupsPrinterModelsList(this.activePrinter.ppdManufacturer)
+          .then(this.modelListChanged_.bind(this));
+    }
+  },
+
+  /**
+   * @param {!ModelsInfo} modelsInfo
+   * @private
+   */
+  modelListChanged_: function(modelsInfo) {
+    if (modelsInfo.success)
+      this.modelList = modelsInfo.models;
+  },
+
+  /**
+   * @param {string} path
+   * @private
+   */
+  printerPPDPathChanged_: function(path) {
+    this.set('activePrinter.printerPPDPath', path);
+  },
+
+  /**
+   * @param {string} path The full path of the file
+   * @return {string} The base name of the file
+   * @private
+   */
+  getBaseName_: function(path) {
+    if (path && path.length > 0)
+      return path.substring(path.lastIndexOf('/') + 1);
+    else
+      return '';
+  },
+};
diff --git a/chromium/chrome/browser/resources/settings/printing_page/printing_page.html b/chromium/chrome/browser/resources/settings/printing_page/printing_page.html
index 48b76bb8aff..43600892348 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/printing_page.html
+++ b/chromium/chrome/browser/resources/settings/printing_page/printing_page.html
@@ -8,7 +8,6 @@
 <link rel="import" href="../settings_page/settings_subpage.html">
 <link rel="import" href="../settings_shared_css.html">
 <if expr="chromeos">
-<link rel="import" href="cups_printer_details_page.html">
 <link rel="import" href="cups_printers.html">
 </if>
 
@@ -22,48 +21,32 @@
       </array-selector>
       <neon-animatable route-path="default">
 <if expr="chromeos">
-        <template is="dom-if" if="[[showCupsPrintingFeatures_]]">
-          <div id="cupsPrinters" class="settings-box first"
-              on-tap="onTapCupsPrinters_" actionable>
-            <div class="start">$i18n{cupsPrintersTitle}</div>
-            <button class="subpage-arrow" is="paper-icon-button-light"
-                aria-label="$i18n{cupsPrintersTitle}"></button>
-          </div>
-        </template>
+        <div id="cupsPrinters" class="settings-box first"
+            on-tap="onTapCupsPrinters_" actionable>
+          <div class="start">$i18n{cupsPrintersTitle}</div>
+          <button class="subpage-arrow" is="paper-icon-button-light"
+              aria-label="$i18n{cupsPrintersTitle}"></button>
+        </div>
 </if>
-        <div id="cloudPrinters" class="settings-box two-line"
+        <div id="cloudPrinters" class="settings-box"
             on-tap="onTapCloudPrinters_" actionable>
-          <div class="start">
-            $i18n{cloudPrintersTitle}
-            <div class="secondary" id="cloudPrintersSecondary">
-              $i18n{cloudPrintersTitleDescription}
-            </div>
-          </div>
+          <div class="start">$i18n{cloudPrintersTitle}</div>
           <button class="subpage-arrow" is="paper-icon-button-light"
               aria-label="$i18n{cloudPrintersTitle}"
               aria-describedby="cloudPrintersSecondary"></button>
         </div>
       </neon-animatable>
 <if expr="chromeos">
-      <template is="dom-if" if="[[showCupsPrintingFeatures_]]">
-        <template is="dom-if" route-path="/cupsPrinters">
-          <settings-subpage
-              associated-control="[[$$('#cupsPrinters')]]"
-              page-title="$i18n{cupsPrintersTitle}"
-              search-label="$i18n{searchLabel}"
+      <template is="dom-if" route-path="/cupsPrinters">
+        <settings-subpage
+            associated-control="[[$$('#cupsPrinters')]]"
+            page-title="$i18n{cupsPrintersTitle}"
+            search-label="$i18n{searchLabel}"
+            search-term="{{searchTerm}}">
+          <settings-cups-printers printers="{{cupsPrinters}}"
               search-term="{{searchTerm}}">
-            <settings-cups-printers printers="{{cupsPrinters}}"
-                search-term="{{searchTerm}}">
-            </settings-cups-printers>
-          </settings-subpage>
-        </template>
-        <template is="dom-if" route-path="/cupsPrinterDetails" restamp
-              no-search>
-          <settings-subpage page-title="$i18n{printerDetailsTitle}">
-            <settings-cups-printer-details-page printer="{{detailPrinter_}}">
-            </settings-cups-printer-details-page>
-          </settings-subpage>
-        </template>
+          </settings-cups-printers>
+        </settings-subpage>
       </template>
 </if>
       <template is="dom-if" route-path="/cloudPrinters">
diff --git a/chromium/chrome/browser/resources/settings/printing_page/printing_page.js b/chromium/chrome/browser/resources/settings/printing_page/printing_page.js
index eb1bb21280b..227e0146e87 100644
--- a/chromium/chrome/browser/resources/settings/printing_page/printing_page.js
+++ b/chromium/chrome/browser/resources/settings/printing_page/printing_page.js
@@ -12,19 +12,6 @@ Polymer({
       notify: true,
     },
 
-// <if expr="chromeos">
-    /**
-     * Whether to show CUPS printers settings.
-     * @private {boolean}
-     */
-    showCupsPrintingFeatures_: {
-      type: Boolean,
-      value: function() {
-        return loadTimeData.getBoolean('showCupsPrintingFeatures');
-      },
-    },
-// </if>
-
     /** @type {!Array<!CupsPrinterInfo>} */
     cupsPrinters: {
       type: Array,
@@ -40,37 +27,32 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-        map.set(
-            settings.Route.CLOUD_PRINTERS.path,
-            '#cloudPrinters .subpage-arrow');
-// <if expr="chromeos">
-        map.set(
-            settings.Route.CUPS_PRINTERS.path, '#cupsPrinters .subpage-arrow');
-// </if>
+        if (settings.routes.CLOUD_PRINTERS) {
+          map.set(
+              settings.routes.CLOUD_PRINTERS.path,
+              '#cloudPrinters .subpage-arrow');
+        }
+        // <if expr="chromeos">
+        if (settings.routes.CUPS_PRINTERS) {
+          map.set(
+              settings.routes.CUPS_PRINTERS.path,
+              '#cupsPrinters .subpage-arrow');
+        }
+        // </if>
         return map;
       },
     },
   },
 
-  listeners: {
-    'show-cups-printer-details': 'onShowCupsPrinterDetailsPage_',
-  },
-
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /** @private */
   onTapCupsPrinters_: function() {
-    settings.navigateTo(settings.Route.CUPS_PRINTERS);
-  },
-
-  /** @private */
-  onShowCupsPrinterDetailsPage_: function(event) {
-    settings.navigateTo(settings.Route.CUPS_PRINTER_DETAIL);
-    this.$.arraySelector.select(event.detail);
+    settings.navigateTo(settings.routes.CUPS_PRINTERS);
   },
-// </if>
+  // </if>
 
   /** @private */
   onTapCloudPrinters_: function() {
-    settings.navigateTo(settings.Route.CLOUD_PRINTERS);
+    settings.navigateTo(settings.routes.CLOUD_PRINTERS);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/privacy_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/privacy_page/compiled_resources2.gyp
index e99c32e82fd..073f1291261 100644
--- a/chromium/chrome/browser/resources/settings/privacy_page/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/privacy_page/compiled_resources2.gyp
@@ -22,7 +22,7 @@
         '../compiled_resources2.gyp:route',
         '../controls/compiled_resources2.gyp:settings_toggle_button',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
-        '../settings_ui/compiled_resources2.gyp:settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility',
         '../site_settings/compiled_resources2.gyp:constants',
         '../site_settings/compiled_resources2.gyp:site_data_details_subpage',
         'privacy_page_browser_proxy',
diff --git a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html
index 49343b7e171..e4555fd9825 100644
--- a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html
+++ b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html
@@ -49,9 +49,9 @@
       <dialog is="cr-dialog" id="confirmDoNotTrackDialog"
           close-text="$i18n{close}" on-cancel="onDoNotTrackDialogCancel_"
           on-close="onDoNotTrackDialogClosed_">
-        <div class="title">$i18n{doNotTrackDialogTitle}</div>
-        <div class="body">$i18nRaw{doNotTrackDialogMessage}</div>
-        <div class="button-container">
+        <div class="title" slot="title">$i18n{doNotTrackDialogTitle}</div>
+        <div class="body" slot="body">$i18nRaw{doNotTrackDialogMessage}</div>
+        <div class="button-container" slot="button-container">
           <paper-button class="cancel-button"
               on-tap="onDoNotTrackDialogCancel_">
             $i18n{cancel}
@@ -407,15 +407,15 @@
       </template>
       <template is="dom-if" if="[[enableSafeBrowsingSubresourceFilter_]]"
           no-search>
-        <template is="dom-if" route-path="/content/subresourceFilter" no-search>
-          <settings-subpage page-title="$i18n{siteSettingsSubresourceFilter}">
+        <template is="dom-if" route-path="/content/ads" no-search>
+          <settings-subpage page-title="$i18n{siteSettingsAds}">
             <category-default-setting
-                category="{{ContentSettingsTypes.SUBRESOURCE_FILTER}}"
-                toggle-off-label="$i18n{siteSettingsSubresourceFilterAllow}"
-                toggle-on-label="$i18n{siteSettingsSubresourceFilterBlock}">
+                category="{{ContentSettingsTypes.ADS}}"
+                toggle-off-label="$i18n{siteSettingsAdsBlockRecommended}"
+                toggle-on-label="$i18n{siteSettingsAllowed}">
             </category-default-setting>
             <category-setting-exceptions
-                category="{{ContentSettingsTypes.SUBRESOURCE_FILTER}}"
+                category="{{ContentSettingsTypes.ADS}}"
                 read-only-list>
             </category-setting-exceptions>
           </settings-subpage>
diff --git a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js
index cc7d882208a..1aff5845e17 100644
--- a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js
+++ b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js
@@ -13,12 +13,7 @@
  * Must be kept in sync with the C++ enum of the same name.
  * @enum {number}
  */
-var NetworkPredictionOptions = {
-  ALWAYS: 0,
-  WIFI_ONLY: 1,
-  NEVER: 2,
-  DEFAULT: 1
-};
+var NetworkPredictionOptions = {ALWAYS: 0, WIFI_ONLY: 1, NEVER: 2, DEFAULT: 1};
 
 Polymer({
   is: 'settings-privacy-page',
@@ -52,7 +47,7 @@ Polymer({
       }
     },
 
-// <if expr="_google_chrome and not chromeos">
+    // <if expr="_google_chrome and not chromeos">
     // TODO(dbeam): make a virtual.* pref namespace and set/get this normally
     // (but handled differently in C++).
     /** @private {chrome.settingsPrivate.PrefObject} */
@@ -61,18 +56,18 @@ Polymer({
       value: function() {
         // TODO(dbeam): this is basically only to appease PrefControlBehavior.
         // Maybe add a no-validate attribute instead? This makes little sense.
-        return /** @type {chrome.settingsPrivate.PrefObject} */({});
+        return /** @type {chrome.settingsPrivate.PrefObject} */ ({});
       },
     },
 
     showRestart_: Boolean,
-// </if>
+    // </if>
 
     /** @private {chrome.settingsPrivate.PrefObject} */
     safeBrowsingExtendedReportingPref_: {
       type: Object,
       value: function() {
-        return /** @type {chrome.settingsPrivate.PrefObject} */({});
+        return /** @type {chrome.settingsPrivate.PrefObject} */ ({});
       },
     },
 
@@ -109,14 +104,18 @@ Polymer({
       type: Object,
       value: function() {
         var map = new Map();
-// <if expr="use_nss_certs">
-        map.set(
-            settings.Route.CERTIFICATES.path,
-            '#manageCertificates .subpage-arrow');
-// </if>
-        map.set(
-            settings.Route.SITE_SETTINGS.path,
-            '#site-settings-subpage-trigger .subpage-arrow');
+        // <if expr="use_nss_certs">
+        if (settings.routes.CERTIFICATES) {
+          map.set(
+              settings.routes.CERTIFICATES.path,
+              '#manageCertificates .subpage-arrow');
+        }
+        // </if>
+        if (settings.routes.SITE_SETTINGS) {
+          map.set(
+              settings.routes.SITE_SETTINGS.path,
+              '#site-settings-subpage-trigger .subpage-arrow');
+        }
         return map;
       },
     },
@@ -132,11 +131,11 @@ Polymer({
 
     this.browserProxy_ = settings.PrivacyPageBrowserProxyImpl.getInstance();
 
-// <if expr="_google_chrome and not chromeos">
+    // <if expr="_google_chrome and not chromeos">
     var setMetricsReportingPref = this.setMetricsReportingPref_.bind(this);
     this.addWebUIListener('metrics-reporting-change', setMetricsReportingPref);
     this.browserProxy_.getMetricsReporting().then(setMetricsReportingPref);
-// </if>
+    // </if>
 
     var setSber = this.setSafeBrowsingExtendedReporting_.bind(this);
     this.addWebUIListener('safe-browsing-extended-reporting-change', setSber);
@@ -146,11 +145,11 @@ Polymer({
   /** @protected */
   currentRouteChanged: function() {
     this.showClearBrowsingDataDialog_ =
-        settings.getCurrentRoute() == settings.Route.CLEAR_BROWSER_DATA;
+        settings.getCurrentRoute() == settings.routes.CLEAR_BROWSER_DATA;
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onDoNotTrackDomChange_: function(event) {
@@ -161,11 +160,11 @@ Polymer({
   /**
    * Handles the change event for the do-not-track toggle. Shows a
    * confirmation dialog when enabling the setting.
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onDoNotTrackChange_: function(event) {
-    var target = /** @type {!SettingsToggleButtonElement} */(event.target);
+    var target = /** @type {!SettingsToggleButtonElement} */ (event.target);
     if (!target.checked) {
       // Always allow disabling the pref.
       target.sendPrefChange();
@@ -218,12 +217,12 @@ Polymer({
 
   /** @private */
   onManageCertificatesTap_: function() {
-// <if expr="use_nss_certs">
-    settings.navigateTo(settings.Route.CERTIFICATES);
-// </if>
-// <if expr="is_win or is_macosx">
+    // <if expr="use_nss_certs">
+    settings.navigateTo(settings.routes.CERTIFICATES);
+    // </if>
+    // <if expr="is_win or is_macosx">
     this.browserProxy_.showManageSSLCertificates();
-// </if>
+    // </if>
   },
 
   /**
@@ -231,20 +230,20 @@ Polymer({
    * @private
    */
   onRemoveAllCookiesFromSite_: function() {
-    var node = /** @type {?SiteDataDetailsSubpageElement} */(this.$$(
-        'site-data-details-subpage'));
+    var node = /** @type {?SiteDataDetailsSubpageElement} */ (
+        this.$$('site-data-details-subpage'));
     if (node)
       node.removeAll();
   },
 
   /** @private */
   onSiteSettingsTap_: function() {
-    settings.navigateTo(settings.Route.SITE_SETTINGS);
+    settings.navigateTo(settings.routes.SITE_SETTINGS);
   },
 
   /** @private */
   onClearBrowsingDataTap_: function() {
-    settings.navigateTo(settings.Route.CLEAR_BROWSER_DATA);
+    settings.navigateTo(settings.routes.CLEAR_BROWSER_DATA);
   },
 
   /** @private */
@@ -259,7 +258,7 @@ Polymer({
     this.browserProxy_.setSafeBrowsingExtendedReportingEnabled(enabled);
   },
 
-// <if expr="_google_chrome and not chromeos">
+  // <if expr="_google_chrome and not chromeos">
   /** @private */
   onMetricsReportingChange_: function() {
     var enabled = this.$.metricsReportingControl.checked;
@@ -294,14 +293,14 @@ Polymer({
   },
 
   /**
-   * @param {Event} e
+   * @param {!Event} e
    * @private
    */
   onRestartTap_: function(e) {
     e.stopPropagation();
     settings.LifetimeBrowserProxyImpl.getInstance().restart();
   },
-// </if>
+  // </if>
 
   /**
    * @param {boolean} enabled Whether reporting is enabled or not.
@@ -329,14 +328,14 @@ Polymer({
 
   /** @private */
   getProtectedContentLabel_: function(value) {
-    return value ? this.i18n('siteSettingsProtectedContentEnable')
-                 : this.i18n('siteSettingsBlocked');
+    return value ? this.i18n('siteSettingsProtectedContentEnable') :
+                   this.i18n('siteSettingsBlocked');
   },
 
   /** @private */
   getProtectedContentIdentifiersLabel_: function(value) {
-    return value ? this.i18n('siteSettingsProtectedContentEnableIdentifiers')
-                 : this.i18n('siteSettingsBlocked');
+    return value ? this.i18n('siteSettingsProtectedContentEnableIdentifiers') :
+                   this.i18n('siteSettingsBlocked');
   },
 });
 })();
diff --git a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page_browser_proxy.js
index 2c2c4729b7b..9d384a2bc0b 100644
--- a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page_browser_proxy.js
@@ -9,66 +9,65 @@ var MetricsReporting;
 
 cr.define('settings', function() {
   /** @interface */
-  function PrivacyPageBrowserProxy() {}
-
-  PrivacyPageBrowserProxy.prototype = {
-// <if expr="_google_chrome and not chromeos">
+  class PrivacyPageBrowserProxy {
+    // <if expr="_google_chrome and not chromeos">
     /** @return {!Promise<!MetricsReporting>} */
-    getMetricsReporting: assertNotReached,
+    getMetricsReporting() {}
 
     /** @param {boolean} enabled */
-    setMetricsReportingEnabled: assertNotReached,
-// </if>
+    setMetricsReportingEnabled(enabled) {}
+
+    // </if>
 
-// <if expr="is_win or is_macosx">
+    // <if expr="is_win or is_macosx">
     /** Invokes the native certificate manager (used by win and mac). */
-    showManageSSLCertificates: function() {},
-// </if>
+    showManageSSLCertificates() {}
+
+    // </if>
 
     /** @return {!Promise<boolean>} */
-    getSafeBrowsingExtendedReporting: assertNotReached,
+    getSafeBrowsingExtendedReporting() {}
 
     /** @param {boolean} enabled */
-    setSafeBrowsingExtendedReportingEnabled: assertNotReached,
-  };
+    setSafeBrowsingExtendedReportingEnabled(enabled) {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.PrivacyPageBrowserProxy}
    */
-  function PrivacyPageBrowserProxyImpl() {}
-  cr.addSingletonGetter(PrivacyPageBrowserProxyImpl);
-
-  PrivacyPageBrowserProxyImpl.prototype = {
-// <if expr="_google_chrome and not chromeos">
+  class PrivacyPageBrowserProxyImpl {
+    // <if expr="_google_chrome and not chromeos">
     /** @override */
-    getMetricsReporting: function() {
+    getMetricsReporting() {
       return cr.sendWithPromise('getMetricsReporting');
-    },
+    }
 
     /** @override */
-    setMetricsReportingEnabled: function(enabled) {
+    setMetricsReportingEnabled(enabled) {
       chrome.send('setMetricsReportingEnabled', [enabled]);
-    },
-// </if>
+    }
+
+    // </if>
 
     /** @override */
-    getSafeBrowsingExtendedReporting: function() {
+    getSafeBrowsingExtendedReporting() {
       return cr.sendWithPromise('getSafeBrowsingExtendedReporting');
-    },
+    }
 
     /** @override */
-    setSafeBrowsingExtendedReportingEnabled: function(enabled) {
+    setSafeBrowsingExtendedReportingEnabled(enabled) {
       chrome.send('setSafeBrowsingExtendedReportingEnabled', [enabled]);
-    },
+    }
 
-// <if expr="is_win or is_macosx">
+    // <if expr="is_win or is_macosx">
     /** @override */
-    showManageSSLCertificates: function() {
+    showManageSSLCertificates() {
       chrome.send('showManageSSLCertificates');
-    },
-// </if>
-  };
+    }
+    // </if>
+  }
+
+  cr.addSingletonGetter(PrivacyPageBrowserProxyImpl);
 
   return {
     PrivacyPageBrowserProxy: PrivacyPageBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html b/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html
index 3156d938dd8..bd4237500dd 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html
+++ b/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html
@@ -12,8 +12,8 @@
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}"
         ignore-enter-key>
-      <div class="title">$i18n{powerwashDialogTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{powerwashDialogTitle}</div>
+      <div class="body" slot="body">
         <span>
           $i18n{powerwashDialogExplanation}
           <a href="$i18nRaw{powerwashLearnMoreUrl}" target="_blank">
@@ -21,7 +21,7 @@
           </a>
         </span>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_"
             id="cancel">$i18n{cancel}</paper-button>
         <paper-button class="action-button" id="powerwash"
diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js b/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js
index f9b9fb6407f..f43c9a08a38 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js
@@ -4,89 +4,83 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function ResetBrowserProxy() {}
-
-  ResetBrowserProxy.prototype = {
+  class ResetBrowserProxy {
     /**
      * @param {boolean} sendSettings Whether the user gave consent to upload
      *     broken settings to Google for analysis.
      * @param {string} requestOrigin The origin of the reset request.
      * @return {!Promise} A promise firing once resetting has completed.
      */
-    performResetProfileSettings: function(sendSettings, requestOrigin) {},
+    performResetProfileSettings(sendSettings, requestOrigin) {}
 
     /**
      * A method to be called when the reset profile dialog is hidden.
      */
-    onHideResetProfileDialog: function() {},
+    onHideResetProfileDialog() {}
 
     /**
      * A method to be called when the reset profile banner is hidden.
      */
-    onHideResetProfileBanner: function() {},
+    onHideResetProfileBanner() {}
 
     /**
      * A method to be called when the reset profile dialog is shown.
      */
-    onShowResetProfileDialog: function() {},
+    onShowResetProfileDialog() {}
 
     /**
      * Shows the settings that are about to be reset and which will be reported
      * to Google for analysis, in a new tab.
      */
-    showReportedSettings: function() {},
+    showReportedSettings() {}
 
     /**
      * Retrieves the triggered reset tool name.
      * @return {!Promise<string>} A promise firing with the tool name, once it
      *     has been retrieved.
      */
-    getTriggeredResetToolName: function() {},
+    getTriggeredResetToolName() {}
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /**
      * A method to be called when the reset powerwash dialog is shown.
      */
-    onPowerwashDialogShow: function() {},
+    onPowerwashDialogShow() {}
 
     /**
      * Initiates a factory reset and restarts ChromeOS.
      */
-    requestFactoryResetRestart: function() {},
-// </if>
-  };
+    requestFactoryResetRestart() {}
+    // </if>
+  }
 
   /**
-   * @constructor
    * @implements {settings.ResetBrowserProxy}
    */
-  function ResetBrowserProxyImpl() {}
-  cr.addSingletonGetter(ResetBrowserProxyImpl);
-
-  ResetBrowserProxyImpl.prototype = {
+  class ResetBrowserProxyImpl {
     /** @override */
-    performResetProfileSettings: function(sendSettings, requestOrigin) {
-      return cr.sendWithPromise('performResetProfileSettings',
-                                sendSettings, requestOrigin);
-    },
+    performResetProfileSettings(sendSettings, requestOrigin) {
+      return cr.sendWithPromise(
+          'performResetProfileSettings', sendSettings, requestOrigin);
+    }
 
     /** @override */
-    onHideResetProfileDialog: function() {
+    onHideResetProfileDialog() {
       chrome.send('onHideResetProfileDialog');
-    },
+    }
 
     /** @override */
-    onHideResetProfileBanner: function() {
+    onHideResetProfileBanner() {
       chrome.send('onHideResetProfileBanner');
-    },
+    }
 
     /** @override */
-    onShowResetProfileDialog: function() {
+    onShowResetProfileDialog() {
       chrome.send('onShowResetProfileDialog');
-    },
+    }
 
     /** @override */
-    showReportedSettings: function() {
+    showReportedSettings() {
       cr.sendWithPromise('getReportedSettings').then(function(settings) {
         var output = settings.map(function(entry) {
           return entry.key + ': ' + entry.value.replace(/\n/g, ', ');
@@ -97,25 +91,27 @@ cr.define('settings', function() {
         div.style.whiteSpace = 'pre';
         win.document.body.appendChild(div);
       });
-    },
+    }
 
     /** @override */
-    getTriggeredResetToolName: function() {
+    getTriggeredResetToolName() {
       return cr.sendWithPromise('getTriggeredResetToolName');
-    },
+    }
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @override */
-    onPowerwashDialogShow: function() {
+    onPowerwashDialogShow() {
       chrome.send('onPowerwashDialogShow');
-    },
+    }
 
     /** @override */
-    requestFactoryResetRestart: function() {
+    requestFactoryResetRestart() {
       chrome.send('requestFactoryResetRestart');
-    },
-// </if>
-  };
+    }
+    // </if>
+  }
+
+  cr.addSingletonGetter(ResetBrowserProxyImpl);
 
   return {
     ResetBrowserProxyImpl: ResetBrowserProxyImpl,
diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_page.js b/chromium/chrome/browser/resources/settings/reset_page/reset_page.js
index a12d5e1d16f..2c4d88e249c 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/reset_page.js
+++ b/chromium/chrome/browser/resources/settings/reset_page/reset_page.js
@@ -21,10 +21,10 @@ Polymer({
   behaviors: [settings.RouteObserverBehavior],
 
   properties: {
-// <if expr="chromeos">
+    // <if expr="chromeos">
     /** @private */
     showPowerwashDialog_: Boolean,
-// </if>
+    // </if>
 
     /** @private */
     allowPowerwash_: {
@@ -46,14 +46,14 @@ Polymer({
    */
   currentRouteChanged: function(route) {
     this.showResetProfileDialog_ =
-        route == settings.Route.TRIGGERED_RESET_DIALOG ||
-        route == settings.Route.RESET_DIALOG;
+        route == settings.routes.TRIGGERED_RESET_DIALOG ||
+        route == settings.routes.RESET_DIALOG;
   },
 
   /** @private */
   onShowResetProfileDialog_: function() {
-    settings.navigateTo(settings.Route.RESET_DIALOG,
-                        new URLSearchParams('origin=userclick'));
+    settings.navigateTo(
+        settings.routes.RESET_DIALOG, new URLSearchParams('origin=userclick'));
   },
 
   /** @private */
@@ -62,7 +62,7 @@ Polymer({
     cr.ui.focusWithoutInk(assert(this.$.resetProfileArrow));
   },
 
-// <if expr="chromeos">
+  // <if expr="chromeos">
   /**
    * @param {!Event} e
    * @private
@@ -77,5 +77,5 @@ Polymer({
     this.showPowerwashDialog_ = false;
     cr.ui.focusWithoutInk(assert(this.$.powerwashArrow));
   },
-// </if>
+  // </if>
 });
diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
index fe6d5e55bac..31741b41452 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
+++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
@@ -9,8 +9,8 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}" ignore-popstate>
-      <div class="title">$i18n{resetAutomatedDialogTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{resetAutomatedDialogTitle}</div>
+      <div class="body" slot="body">
         <span id="description">
           $i18n{resetProfileBannerDescription}
           <a id="learnMore"
@@ -18,7 +18,7 @@
              target="_blank">$i18n{learnMore}</a>
         </span>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onOkTap_" id="ok">
           $i18n{ok}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.js b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.js
index 965efd65777..9b95c0f19de 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.js
+++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.js
@@ -33,6 +33,6 @@ Polymer({
   /** @private */
   onResetTap_: function() {
     this.$.dialog.close();
-    settings.navigateTo(settings.Route.RESET_DIALOG);
+    settings.navigateTo(settings.routes.RESET_DIALOG);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html
index 898da728092..670b2646484 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html
+++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html
@@ -21,10 +21,10 @@
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}"
         ignore-popstate ignore-enter-key>
-      <div class="title">
+      <div class="title" slot="title">
         [[getPageTitle_(isTriggered_, triggeredResetToolName_)]]
       </div>
-      <div class="body">
+      <div class="body" slot="body">
         <span>
           [[getExplanationText_(isTriggered_, triggeredResetToolName_)]]
           <a href="$i18nRaw{resetPageLearnMoreUrl}" target="_blank">
@@ -32,7 +32,7 @@
           </a>
         </span>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-spinner id="resetSpinner" active="[[clearingInProgress_]]">
         </paper-spinner>
         <paper-button class="cancel-button" on-tap="onCancelTap_"
@@ -44,7 +44,7 @@
           $i18n{resetPageCommit}
         </paper-button>
       </div>
-      <div class="footer border-top-divider">
+      <div class="footer" slot="footer">
         <paper-checkbox id="sendSettings" checked>
           $i18nRaw{resetPageFeedback}</paper-checkbox>
       </div>
diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js
index 5328fe42652..ccbe17a0328 100644
--- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js
+++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js
@@ -50,8 +50,8 @@ Polymer({
    */
   getExplanationText_: function() {
     if (this.isTriggered_) {
-      return loadTimeData.getStringF('triggeredResetPageExplanation',
-                                     this.triggeredResetToolName_);
+      return loadTimeData.getStringF(
+          'triggeredResetPageExplanation', this.triggeredResetToolName_);
     }
     return loadTimeData.getStringF('resetPageExplanation');
   },
@@ -62,8 +62,8 @@ Polymer({
    */
   getPageTitle_: function() {
     if (this.isTriggered_) {
-      return loadTimeData.getStringF('triggeredResetPageTitle',
-                                     this.triggeredResetToolName_);
+      return loadTimeData.getStringF(
+          'triggeredResetPageTitle', this.triggeredResetToolName_);
     }
     return loadTimeData.getStringF('resetPageTitle');
   },
@@ -76,12 +76,13 @@ Polymer({
       this.browserProxy_.onHideResetProfileDialog();
     }.bind(this));
 
-    this.$$('paper-checkbox a').addEventListener(
-        'tap', this.onShowReportedSettingsTap_.bind(this));
+    this.$$('paper-checkbox a')
+        .addEventListener('tap', this.onShowReportedSettingsTap_.bind(this));
     // Prevent toggling of the checkbox when hitting the "Enter" key on the
     // link.
-    this.$$('paper-checkbox a').addEventListener(
-        'keydown', function(e) { e.stopPropagation(); });
+    this.$$('paper-checkbox a').addEventListener('keydown', function(e) {
+      e.stopPropagation();
+    });
   },
 
   /** @private */
@@ -93,7 +94,7 @@ Polymer({
   /** @override */
   attached: function() {
     this.isTriggered_ =
-        settings.getCurrentRoute() == settings.Route.TRIGGERED_RESET_DIALOG;
+        settings.getCurrentRoute() == settings.routes.TRIGGERED_RESET_DIALOG;
     if (this.isTriggered_) {
       this.browserProxy_.getTriggeredResetToolName().then(function(name) {
         this.resetRequestOrigin_ = 'triggeredreset';
@@ -105,7 +106,8 @@ Polymer({
       // reset request came from the Chrome Cleanup Tool by launching Chrome
       // with the startup URL chrome://settings/resetProfileSettings#cct.
       var origin = window.location.hash.slice(1).toLowerCase() == 'cct' ?
-          'cct' : settings.getQueryParameters().get('origin');
+          'cct' :
+          settings.getQueryParameters().get('origin');
       this.resetRequestOrigin_ = origin || '';
       this.showDialog_();
     }
@@ -119,13 +121,15 @@ Polymer({
   /** @private */
   onResetTap_: function() {
     this.clearingInProgress_ = true;
-    this.browserProxy_.performResetProfileSettings(
-        this.$.sendSettings.checked, this.resetRequestOrigin_).then(function() {
-      this.clearingInProgress_ = false;
-      if (this.$.dialog.open)
-        this.$.dialog.close();
-      this.fire('reset-done');
-    }.bind(this));
+    this.browserProxy_
+        .performResetProfileSettings(
+            this.$.sendSettings.checked, this.resetRequestOrigin_)
+        .then(function() {
+          this.clearingInProgress_ = false;
+          if (this.$.dialog.open)
+            this.$.dialog.close();
+          this.fire('reset-done');
+        }.bind(this));
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/route.html b/chromium/chrome/browser/resources/settings/route.html
index 1300e8577e7..4156107d5e5 100644
--- a/chromium/chrome/browser/resources/settings/route.html
+++ b/chromium/chrome/browser/resources/settings/route.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="i18n_setup.html">
+<link rel="import" href="page_visibility.html">
 
 <script src="route.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/route.js b/chromium/chrome/browser/resources/settings/route.js
index 50271525426..d7782489646 100644
--- a/chromium/chrome/browser/resources/settings/route.js
+++ b/chromium/chrome/browser/resources/settings/route.js
@@ -2,36 +2,125 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * Specifies all possible routes in settings.
+ *
+ * @typedef {{
+ *   ABOUT: (undefined|!settings.Route),
+ *   ABOUT_ABOUT: (undefined|!settings.Route),
+ *   ACCESSIBILITY: (undefined|!settings.Route),
+ *   ACCOUNTS: (undefined|!settings.Route),
+ *   ADVANCED: (undefined|!settings.Route),
+ *   ANDROID_APPS: (undefined|!settings.Route),
+ *   ANDROID_APPS_DETAILS: (undefined|!settings.Route),
+ *   APPEARANCE: (undefined|!settings.Route),
+ *   AUTOFILL: (undefined|!settings.Route),
+ *   BASIC: (undefined|!settings.Route),
+ *   BLUETOOTH: (undefined|!settings.Route),
+ *   BLUETOOTH_DEVICES: (undefined|!settings.Route),
+ *   CERTIFICATES: (undefined|!settings.Route),
+ *   CHANGE_PICTURE: (undefined|!settings.Route),
+ *   CLEAR_BROWSER_DATA: (undefined|!settings.Route),
+ *   CLOUD_PRINTERS: (undefined|!settings.Route),
+ *   CUPS_PRINTERS: (undefined|!settings.Route),
+ *   DATETIME: (undefined|!settings.Route),
+ *   DEFAULT_BROWSER: (undefined|!settings.Route),
+ *   DETAILED_BUILD_INFO: (undefined|!settings.Route),
+ *   DEVICE: (undefined|!settings.Route),
+ *   DISPLAY: (undefined|!settings.Route),
+ *   DOWNLOADS: (undefined|!settings.Route),
+ *   EDIT_DICTIONARY: (undefined|!settings.Route),
+ *   FINGERPRINT: (undefined|!settings.Route),
+ *   FONTS: (undefined|!settings.Route),
+ *   GOOGLE_ASSISTANT: (undefined|!settings.Route),
+ *   IMPORT_DATA: (undefined|!settings.Route),
+ *   INPUT_METHODS: (undefined|!settings.Route),
+ *   INTERNET: (undefined|!settings.Route),
+ *   INTERNET_NETWORKS: (undefined|!settings.Route),
+ *   KEYBOARD: (undefined|!settings.Route),
+ *   KNOWN_NETWORKS: (undefined|!settings.Route),
+ *   LANGUAGES: (undefined|!settings.Route),
+ *   LOCK_SCREEN: (undefined|!settings.Route),
+ *   MANAGE_ACCESSIBILITY: (undefined|!settings.Route),
+ *   MANAGE_PASSWORDS: (undefined|!settings.Route),
+ *   MANAGE_PROFILE: (undefined|!settings.Route),
+ *   MULTIDEVICE: (undefined|!settings.Route),
+ *   NETWORK_CONFIG: (undefined|!settings.Route),
+ *   NETWORK_DETAIL: (undefined|!settings.Route),
+ *   ON_STARTUP: (undefined|!settings.Route),
+ *   PASSWORDS: (undefined|!settings.Route),
+ *   PEOPLE: (undefined|!settings.Route),
+ *   POINTERS: (undefined|!settings.Route),
+ *   POWER: (undefined|!settings.Route),
+ *   PRINTING: (undefined|!settings.Route),
+ *   PRIVACY: (undefined|!settings.Route),
+ *   RESET: (undefined|!settings.Route),
+ *   RESET_DIALOG: (undefined|!settings.Route),
+ *   SEARCH: (undefined|!settings.Route),
+ *   SEARCH_ENGINES: (undefined|!settings.Route),
+ *   SIGN_OUT: (undefined|!settings.Route),
+ *   SITE_SETTINGS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_ADS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_ALL: (undefined|!settings.Route),
+ *   SITE_SETTINGS_AUTOMATIC_DOWNLOADS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_BACKGROUND_SYNC: (undefined|!settings.Route),
+ *   SITE_SETTINGS_CAMERA: (undefined|!settings.Route),
+ *   SITE_SETTINGS_COOKIES: (undefined|!settings.Route),
+ *   SITE_SETTINGS_DATA_DETAILS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_FLASH: (undefined|!settings.Route),
+ *   SITE_SETTINGS_HANDLERS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_IMAGES: (undefined|!settings.Route),
+ *   SITE_SETTINGS_JAVASCRIPT: (undefined|!settings.Route),
+ *   SITE_SETTINGS_LOCATION: (undefined|!settings.Route),
+ *   SITE_SETTINGS_MICROPHONE: (undefined|!settings.Route),
+ *   SITE_SETTINGS_MIDI_DEVICES: (undefined|!settings.Route),
+ *   SITE_SETTINGS_NOTIFICATIONS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_PDF_DOCUMENTS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_POPUPS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_PROTECTED_CONTENT: (undefined|!settings.Route),
+ *   SITE_SETTINGS_SITE_DETAILS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_UNSANDBOXED_PLUGINS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_USB_DEVICES: (undefined|!settings.Route),
+ *   SITE_SETTINGS_ZOOM_LEVELS: (undefined|!settings.Route),
+ *   STORAGE: (undefined|!settings.Route),
+ *   STYLUS: (undefined|!settings.Route),
+ *   SYNC: (undefined|!settings.Route),
+ *   SYSTEM: (undefined|!settings.Route),
+ *   TRIGGERED_RESET_DIALOG: (undefined|!settings.Route),
+ * }}
+ */
+var SettingsRoutes;
+
 cr.define('settings', function() {
+
   /**
    * Class for navigable routes. May only be instantiated within this file.
-   * @constructor
-   * @param {string} path
-   * @private
    */
-  var Route = function(path) {
-    this.path = path;
+  class Route {
+    /** @param {string} path */
+    constructor(path) {
+      /** @type {string} */
+      this.path = path;
 
-    /** @type {?settings.Route} */
-    this.parent = null;
+      /** @type {?settings.Route} */
+      this.parent = null;
 
-    /** @type {number} */
-    this.depth = 0;
+      /** @type {number} */
+      this.depth = 0;
 
-    /**
-     * @type {boolean} Whether this route corresponds to a navigable
-     *     dialog. Those routes don't belong to a "section".
-     */
-    this.isNavigableDialog = false;
+      /**
+       * @type {boolean} Whether this route corresponds to a navigable
+       *     dialog. Those routes don't belong to a "section".
+       */
+      this.isNavigableDialog = false;
 
-    // Below are all legacy properties to provide compatibility with the old
-    // routing system.
+      // Below are all legacy properties to provide compatibility with the old
+      // routing system.
 
-    /** @type {string} */
-    this.section = '';
-  };
+      /** @type {string} */
+      this.section = '';
+    }
 
-  Route.prototype = {
     /**
      * Returns a new Route instance that's a child of this route.
      * @param {string} path Extends this route's path if it doesn't contain a
@@ -39,7 +128,7 @@ cr.define('settings', function() {
      * @return {!settings.Route}
      * @private
      */
-    createChild: function(path) {
+    createChild(path) {
       assert(path);
 
       // |path| extends this route's path if it doesn't have a leading slash.
@@ -52,7 +141,7 @@ cr.define('settings', function() {
       route.depth = this.depth + 1;
 
       return route;
-    },
+    }
 
     /**
      * Returns a new Route instance that's a child section of this route.
@@ -62,183 +151,401 @@ cr.define('settings', function() {
      * @return {!settings.Route}
      * @private
      */
-    createSection: function(path, section) {
+    createSection(path, section) {
       var route = this.createChild(path);
       route.section = section;
       return route;
-    },
+    }
 
     /**
      * Returns true if this route matches or is an ancestor of the parameter.
      * @param {!settings.Route} route
      * @return {boolean}
      */
-    contains: function(route) {
+    contains(route) {
       for (var r = route; r != null; r = r.parent) {
         if (this == r)
           return true;
       }
       return false;
-    },
+    }
 
     /**
      * Returns true if this route is a subpage of a section.
      * @return {boolean}
      */
-    isSubpage: function() {
+    isSubpage() {
       return !!this.parent && !!this.section &&
           this.parent.section == this.section;
-    },
+    }
+  }
+
+  /**
+   * Computes and return all available routes based on settings.pageVisibility.
+   * @return {!SettingsRoutes}
+   */
+  var computeAvailableRoutes = function() {
+    var pageVisibility = settings.pageVisibility || {};
+
+    /** @type {!SettingsRoutes} */
+    var r = {};
+
+    // Root pages.
+    r.BASIC = new Route('/');
+    r.ABOUT = new Route('/help');
+
+    // Navigable dialogs. These are the only non-section children of root
+    // pages. These are disfavored. If we add anymore, we should add explicit
+    // support.
+    r.IMPORT_DATA = r.BASIC.createChild('/importData');
+    r.IMPORT_DATA.isNavigableDialog = true;
+    r.SIGN_OUT = r.BASIC.createChild('/signOut');
+    r.SIGN_OUT.isNavigableDialog = true;
+
+    // <if expr="chromeos">
+    r.INTERNET = r.BASIC.createSection('/internet', 'internet');
+    r.INTERNET_NETWORKS = r.INTERNET.createChild('/networks');
+    r.NETWORK_CONFIG = r.INTERNET.createChild('/networkConfig');
+    r.NETWORK_DETAIL = r.INTERNET.createChild('/networkDetail');
+    r.KNOWN_NETWORKS = r.INTERNET.createChild('/knownNetworks');
+    r.BLUETOOTH = r.BASIC.createSection('/bluetooth', 'bluetooth');
+    r.BLUETOOTH_DEVICES = r.BLUETOOTH.createChild('/bluetoothDevices');
+    // </if>
+
+    if (pageVisibility.appearance !== false) {
+      r.APPEARANCE = r.BASIC.createSection('/appearance', 'appearance');
+      r.FONTS = r.APPEARANCE.createChild('/fonts');
+    }
+
+    if (pageVisibility.defaultBrowser !== false) {
+      r.DEFAULT_BROWSER =
+          r.BASIC.createSection('/defaultBrowser', 'defaultBrowser');
+    }
+
+    r.SEARCH = r.BASIC.createSection('/search', 'search');
+    r.SEARCH_ENGINES = r.SEARCH.createChild('/searchEngines');
+    // <if expr="chromeos">
+    r.GOOGLE_ASSISTANT = r.SEARCH.createChild('/googleAssistant');
+    // </if>
+
+    // <if expr="chromeos">
+    r.ANDROID_APPS = r.BASIC.createSection('/androidApps', 'androidApps');
+    r.ANDROID_APPS_DETAILS = r.ANDROID_APPS.createChild('/androidApps/details');
+    // </if>
+
+    if (pageVisibility.onStartup !== false) {
+      r.ON_STARTUP = r.BASIC.createSection('/onStartup', 'onStartup');
+      r.STARTUP_URLS = r.ON_STARTUP.createChild('/startupUrls');
+    }
+
+    if (pageVisibility.people !== false) {
+      r.PEOPLE = r.BASIC.createSection('/people', 'people');
+      r.SYNC = r.PEOPLE.createChild('/syncSetup');
+      // <if expr="not chromeos">
+      r.MANAGE_PROFILE = r.PEOPLE.createChild('/manageProfile');
+      // </if>
+      // <if expr="chromeos">
+      r.CHANGE_PICTURE = r.PEOPLE.createChild('/changePicture');
+      r.ACCOUNTS = r.PEOPLE.createChild('/accounts');
+      r.LOCK_SCREEN = r.PEOPLE.createChild('/lockScreen');
+      r.FINGERPRINT = r.LOCK_SCREEN.createChild('/lockScreen/fingerprint');
+      // </if>
+    }
+
+    // <if expr="chromeos">
+    r.DEVICE = r.BASIC.createSection('/device', 'device');
+    r.POINTERS = r.DEVICE.createChild('/pointer-overlay');
+    r.KEYBOARD = r.DEVICE.createChild('/keyboard-overlay');
+    r.STYLUS = r.DEVICE.createChild('/stylus');
+    r.DISPLAY = r.DEVICE.createChild('/display');
+    r.STORAGE = r.DEVICE.createChild('/storage');
+    r.POWER = r.DEVICE.createChild('/power');
+    // </if>
+
+    // Advacned Routes
+    if (pageVisibility.advancedSettings !== false) {
+      r.ADVANCED = new Route('/advanced');
+
+      r.CLEAR_BROWSER_DATA = r.ADVANCED.createChild('/clearBrowserData');
+      r.CLEAR_BROWSER_DATA.isNavigableDialog = true;
+
+      if (pageVisibility.privacy !== false) {
+        r.PRIVACY = r.ADVANCED.createSection('/privacy', 'privacy');
+        r.CERTIFICATES = r.PRIVACY.createChild('/certificates');
+        r.SITE_SETTINGS = r.PRIVACY.createChild('/content');
+      }
+
+      if (loadTimeData.getBoolean('enableSiteSettings')) {
+        r.SITE_SETTINGS_ALL = r.SITE_SETTINGS.createChild('all');
+        r.SITE_SETTINGS_SITE_DETAILS =
+            r.SITE_SETTINGS_ALL.createChild('/content/siteDetails');
+      } else if (loadTimeData.getBoolean('enableSiteDetails')) {
+        // When there is no "All Sites", pressing 'back' from "Site Details"
+        // should return to "Content Settings". This should only occur when
+        // |kSiteSettings| is off and |kSiteDetails| is on.
+        r.SITE_SETTINGS_SITE_DETAILS =
+            r.SITE_SETTINGS.createChild('/content/siteDetails');
+      }
+
+      r.SITE_SETTINGS_HANDLERS = r.SITE_SETTINGS.createChild('/handlers');
+
+      // TODO(tommycli): Find a way to refactor these repetitive category
+      // routes.
+      r.SITE_SETTINGS_ADS = r.SITE_SETTINGS.createChild('ads');
+      r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS =
+          r.SITE_SETTINGS.createChild('automaticDownloads');
+      r.SITE_SETTINGS_BACKGROUND_SYNC =
+          r.SITE_SETTINGS.createChild('backgroundSync');
+      r.SITE_SETTINGS_CAMERA = r.SITE_SETTINGS.createChild('camera');
+      r.SITE_SETTINGS_COOKIES = r.SITE_SETTINGS.createChild('cookies');
+      r.SITE_SETTINGS_DATA_DETAILS =
+          r.SITE_SETTINGS_COOKIES.createChild('/cookies/detail');
+      r.SITE_SETTINGS_IMAGES = r.SITE_SETTINGS.createChild('images');
+      r.SITE_SETTINGS_JAVASCRIPT = r.SITE_SETTINGS.createChild('javascript');
+      r.SITE_SETTINGS_LOCATION = r.SITE_SETTINGS.createChild('location');
+      r.SITE_SETTINGS_MICROPHONE = r.SITE_SETTINGS.createChild('microphone');
+      r.SITE_SETTINGS_NOTIFICATIONS =
+          r.SITE_SETTINGS.createChild('notifications');
+      r.SITE_SETTINGS_FLASH = r.SITE_SETTINGS.createChild('flash');
+      r.SITE_SETTINGS_POPUPS = r.SITE_SETTINGS.createChild('popups');
+      r.SITE_SETTINGS_UNSANDBOXED_PLUGINS =
+          r.SITE_SETTINGS.createChild('unsandboxedPlugins');
+      r.SITE_SETTINGS_MIDI_DEVICES = r.SITE_SETTINGS.createChild('midiDevices');
+      r.SITE_SETTINGS_USB_DEVICES = r.SITE_SETTINGS.createChild('usbDevices');
+      r.SITE_SETTINGS_ZOOM_LEVELS = r.SITE_SETTINGS.createChild('zoomLevels');
+      r.SITE_SETTINGS_PDF_DOCUMENTS =
+          r.SITE_SETTINGS.createChild('pdfDocuments');
+      r.SITE_SETTINGS_PROTECTED_CONTENT =
+          r.SITE_SETTINGS.createChild('protectedContent');
+
+      // <if expr="chromeos">
+      if (pageVisibility.dateTime !== false) {
+        r.DATETIME = r.ADVANCED.createSection('/dateTime', 'dateTime');
+      }
+      // </if>
+
+      if (pageVisibility.passwordsAndForms !== false) {
+        r.PASSWORDS =
+            r.ADVANCED.createSection('/passwordsAndForms', 'passwordsAndForms');
+        r.AUTOFILL = r.PASSWORDS.createChild('/autofill');
+        r.MANAGE_PASSWORDS = r.PASSWORDS.createChild('/passwords');
+      }
+
+      r.LANGUAGES = r.ADVANCED.createSection('/languages', 'languages');
+      // <if expr="chromeos">
+      r.INPUT_METHODS = r.LANGUAGES.createChild('/inputMethods');
+      // </if>
+      // <if expr="not is_macosx">
+      r.EDIT_DICTIONARY = r.LANGUAGES.createChild('/editDictionary');
+      // </if>
+
+      if (pageVisibility.downloads !== false) {
+        r.DOWNLOADS = r.ADVANCED.createSection('/downloads', 'downloads');
+      }
+
+      r.PRINTING = r.ADVANCED.createSection('/printing', 'printing');
+      r.CLOUD_PRINTERS = r.PRINTING.createChild('/cloudPrinters');
+      // <if expr="chromeos">
+      r.CUPS_PRINTERS = r.PRINTING.createChild('/cupsPrinters');
+
+      r.MULTIDEVICE = r.ADVANCED.createSection('/multidevice', 'multidevice');
+      // </if>
+
+      r.ACCESSIBILITY = r.ADVANCED.createSection('/accessibility', 'a11y');
+      // <if expr="chromeos">
+      r.MANAGE_ACCESSIBILITY =
+          r.ACCESSIBILITY.createChild('/manageAccessibility');
+      // </if>
+
+      r.SYSTEM = r.ADVANCED.createSection('/system', 'system');
+
+      if (pageVisibility.reset !== false) {
+        r.RESET = r.ADVANCED.createSection('/reset', 'reset');
+        r.RESET_DIALOG = r.ADVANCED.createChild('/resetProfileSettings');
+        r.RESET_DIALOG.isNavigableDialog = true;
+        r.TRIGGERED_RESET_DIALOG =
+            r.ADVANCED.createChild('/triggeredResetProfileSettings');
+        r.TRIGGERED_RESET_DIALOG.isNavigableDialog = true;
+      }
+    }
+
+    // <if expr="chromeos">
+    // "About" is the only section in About, but we still need to create the
+    // route in order to show the subpage on Chrome OS.
+    r.ABOUT_ABOUT = r.ABOUT.createSection('/help/about', 'about');
+    r.DETAILED_BUILD_INFO = r.ABOUT_ABOUT.createChild('/help/details');
+    // </if>
+
+    return r;
   };
 
-  // Abbreviated variable for easier definitions.
-  var r = Route;
-
-  // Root pages.
-  r.BASIC = new Route('/');
-  r.ADVANCED = new Route('/advanced');
-  r.ABOUT = new Route('/help');
-
-  // Navigable dialogs. These are the only non-section children of root pages.
-  // These are disfavored. If we add anymore, we should add explicit support.
-  r.IMPORT_DATA = r.BASIC.createChild('/importData');
-  r.IMPORT_DATA.isNavigableDialog = true;
-  r.SIGN_OUT = r.BASIC.createChild('/signOut');
-  r.SIGN_OUT.isNavigableDialog = true;
-  r.CLEAR_BROWSER_DATA = r.ADVANCED.createChild('/clearBrowserData');
-  r.CLEAR_BROWSER_DATA.isNavigableDialog = true;
-  r.RESET_DIALOG = r.ADVANCED.createChild('/resetProfileSettings');
-  r.RESET_DIALOG.isNavigableDialog = true;
-  r.TRIGGERED_RESET_DIALOG =
-      r.ADVANCED.createChild('/triggeredResetProfileSettings');
-  r.TRIGGERED_RESET_DIALOG.isNavigableDialog = true;
-
-// <if expr="chromeos">
-  r.INTERNET = r.BASIC.createSection('/internet', 'internet');
-  r.INTERNET_NETWORKS = r.INTERNET.createChild('/networks');
-  r.NETWORK_CONFIG = r.INTERNET.createChild('/networkConfig');
-  r.NETWORK_DETAIL = r.INTERNET.createChild('/networkDetail');
-  r.KNOWN_NETWORKS = r.INTERNET.createChild('/knownNetworks');
-  r.BLUETOOTH = r.BASIC.createSection('/bluetooth', 'bluetooth');
-  r.BLUETOOTH_DEVICES = r.BLUETOOTH.createChild('/bluetoothDevices');
-// </if>
-
-  r.APPEARANCE = r.BASIC.createSection('/appearance', 'appearance');
-  r.FONTS = r.APPEARANCE.createChild('/fonts');
-
-  r.DEFAULT_BROWSER =
-      r.BASIC.createSection('/defaultBrowser', 'defaultBrowser');
-
-  r.SEARCH = r.BASIC.createSection('/search', 'search');
-  r.SEARCH_ENGINES = r.SEARCH.createChild('/searchEngines');
-
-// <if expr="chromeos">
-  r.ANDROID_APPS = r.BASIC.createSection('/androidApps', 'androidApps');
-  r.ANDROID_APPS_DETAILS = r.ANDROID_APPS.createChild('/androidApps/details');
-// </if>
-
-  r.ON_STARTUP = r.BASIC.createSection('/onStartup', 'onStartup');
-
-  r.PEOPLE = r.BASIC.createSection('/people', 'people');
-  r.SYNC = r.PEOPLE.createChild('/syncSetup');
-// <if expr="not chromeos">
-  r.MANAGE_PROFILE = r.PEOPLE.createChild('/manageProfile');
-// </if>
-// <if expr="chromeos">
-  r.CHANGE_PICTURE = r.PEOPLE.createChild('/changePicture');
-  r.ACCOUNTS = r.PEOPLE.createChild('/accounts');
-  r.LOCK_SCREEN = r.PEOPLE.createChild('/lockScreen');
-  r.FINGERPRINT = r.LOCK_SCREEN.createChild('/lockScreen/fingerprint');
-
-  r.DEVICE = r.BASIC.createSection('/device', 'device');
-  r.POINTERS = r.DEVICE.createChild('/pointer-overlay');
-  r.KEYBOARD = r.DEVICE.createChild('/keyboard-overlay');
-  r.STYLUS = r.DEVICE.createChild('/stylus');
-  r.DISPLAY = r.DEVICE.createChild('/display');
-  r.STORAGE = r.DEVICE.createChild('/storage');
-  r.POWER = r.DEVICE.createChild('/power');
-// </if>
-
-  r.PRIVACY = r.ADVANCED.createSection('/privacy', 'privacy');
-  r.CERTIFICATES = r.PRIVACY.createChild('/certificates');
-
-  r.SITE_SETTINGS = r.PRIVACY.createChild('/content');
-
-  if (loadTimeData.getBoolean('enableSiteSettings')) {
-    r.SITE_SETTINGS_ALL = r.SITE_SETTINGS.createChild('all');
-    r.SITE_SETTINGS_SITE_DETAILS =
-        r.SITE_SETTINGS_ALL.createChild('/content/siteDetails');
+  class Router {
+    constructor() {
+      /**
+       * List of available routes. This is populated taking into account current
+       * state (like guest mode).
+       * @private {!SettingsRoutes}
+       */
+      this.routes_ = computeAvailableRoutes();
+
+      /**
+       * The current active route. This updated is only by settings.navigateTo
+       * or settings.initializeRouteFromUrl.
+       * @type {!settings.Route}
+       */
+      this.currentRoute = /** @type {!settings.Route} */ (this.routes_.BASIC);
+
+      /**
+       * The current query parameters. This is updated only by
+       * settings.navigateTo or settings.initializeRouteFromUrl.
+       * @private {!URLSearchParams}
+       */
+      this.currentQueryParameters_ = new URLSearchParams();
+
+      /** @private {boolean} */
+      this.wasLastRouteChangePopstate_ = false;
+
+      /** @private {boolean}*/
+      this.initializeRouteFromUrlCalled_ = false;
+    }
+
+    /** @return {settings.Route} */
+    getRoute(routeName) {
+      return this.routes_[routeName];
+    }
+
+    /** @return {!SettingsRoutes} */
+    getRoutes() {
+      return this.routes_;
+    }
+
+    /**
+     * Helper function to set the current route and notify all observers.
+     * @param {!settings.Route} route
+     * @param {!URLSearchParams} queryParameters
+     * @param {boolean} isPopstate
+     */
+    setCurrentRoute(route, queryParameters, isPopstate) {
+      var oldRoute = this.currentRoute;
+      this.currentRoute = route;
+      this.currentQueryParameters_ = queryParameters;
+      this.wasLastRouteChangePopstate_ = isPopstate;
+      routeObservers.forEach(function(observer) {
+        observer.currentRouteChanged(this.currentRoute, oldRoute);
+      }.bind(this));
+    }
+
+    /** @return {!settings.Route} */
+    getCurrentRoute() {
+      return this.currentRoute;
+    }
+
+    /** @return {!URLSearchParams} */
+    getQueryParameters() {
+      return new URLSearchParams(
+          this.currentQueryParameters_);  // Defensive copy.
+    }
+
+    /** @return {boolean} */
+    lastRouteChangeWasPopstate() {
+      return this.wasLastRouteChangePopstate_;
+    }
+
+    /**
+     * @param {string} path
+     * @return {?settings.Route} The matching canonical route, or null if none
+     *     matches.
+     */
+    getRouteForPath(path) {
+      // Allow trailing slash in paths.
+      var canonicalPath = path.replace(CANONICAL_PATH_REGEX, '$1$2');
+
+      // TODO(tommycli): Use Object.values once Closure compilation supports it.
+      var matchingKey = Object.keys(this.routes_).find(function(key) {
+        return this.routes_[key].path == canonicalPath;
+      }.bind(this));
+
+      return !!matchingKey ? this.routes_[matchingKey] : null;
+    }
+
+    /**
+     * Navigates to a canonical route and pushes a new history entry.
+     * @param {!settings.Route} route
+     * @param {URLSearchParams=} opt_dynamicParameters Navigations to the same
+     *     URL parameters in a different order will still push to history.
+     * @param {boolean=} opt_removeSearch Whether to strip the 'search' URL
+     *     parameter during navigation. Defaults to false.
+     */
+    navigateTo(route, opt_dynamicParameters, opt_removeSearch) {
+      // The ADVANCED route only serves as a parent of subpages, and should not
+      // be possible to navigate to it directly.
+      if (route == this.routes_.ADVANCED)
+        route = /** @type {!settings.Route} */ (this.routes_.BASIC);
+
+      var params = opt_dynamicParameters || new URLSearchParams();
+      var removeSearch = !!opt_removeSearch;
+
+      var oldSearchParam = this.getQueryParameters().get('search') || '';
+      var newSearchParam = params.get('search') || '';
+
+      if (!removeSearch && oldSearchParam && !newSearchParam)
+        params.append('search', oldSearchParam);
+
+      var url = route.path;
+      var queryString = params.toString();
+      if (queryString)
+        url += '?' + queryString;
+
+      // History serializes the state, so we don't push the actual route object.
+      window.history.pushState(this.currentRoute.path, '', url);
+      this.setCurrentRoute(route, params, false);
+    }
+
+    /**
+     * Navigates to the previous route if it has an equal or lesser depth.
+     * If there is no previous route in history meeting those requirements,
+     * this navigates to the immediate parent. This will never exit Settings.
+     */
+    navigateToPreviousRoute() {
+      var previousRoute = window.history.state &&
+          assert(this.getRouteForPath(
+              /** @type {string} */ (window.history.state)));
+
+      if (previousRoute && previousRoute.depth <= this.currentRoute.depth)
+        window.history.back();
+      else
+        this.navigateTo(
+            this.currentRoute.parent ||
+            /** @type {!settings.Route} */ (this.routes_.BASIC));
+    }
+
+    /**
+     * Initialize the route and query params from the URL.
+     */
+    initializeRouteFromUrl() {
+      assert(!this.initializeRouteFromUrlCalled_);
+      this.initializeRouteFromUrlCalled_ = true;
+
+      var route = this.getRouteForPath(window.location.pathname);
+      // Never allow direct navigation to ADVANCED.
+      if (route && route != this.routes_.ADVANCED) {
+        this.currentRoute = route;
+        this.currentQueryParameters_ =
+            new URLSearchParams(window.location.search);
+      } else {
+        window.history.replaceState(undefined, '', this.routes_.BASIC.path);
+      }
+    }
+
+    resetRouteForTesting() {
+      this.initializeRouteFromUrlCalled_ = false;
+      this.wasLastRouteChangePopstate_ = false;
+      this.currentRoute = /** @type {!settings.Route} */ (this.routes_.BASIC);
+      this.currentQueryParameters_ = new URLSearchParams();
+    }
   }
 
-  r.SITE_SETTINGS_HANDLERS = r.SITE_SETTINGS.createChild('/handlers');
-
-  // TODO(tommycli): Find a way to refactor these repetitive category routes.
-  r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS =
-      r.SITE_SETTINGS.createChild('automaticDownloads');
-  r.SITE_SETTINGS_BACKGROUND_SYNC =
-      r.SITE_SETTINGS.createChild('backgroundSync');
-  r.SITE_SETTINGS_CAMERA = r.SITE_SETTINGS.createChild('camera');
-  r.SITE_SETTINGS_COOKIES = r.SITE_SETTINGS.createChild('cookies');
-  r.SITE_SETTINGS_DATA_DETAILS =
-      r.SITE_SETTINGS_COOKIES.createChild('/cookies/detail');
-  r.SITE_SETTINGS_IMAGES = r.SITE_SETTINGS.createChild('images');
-  r.SITE_SETTINGS_JAVASCRIPT = r.SITE_SETTINGS.createChild('javascript');
-  r.SITE_SETTINGS_LOCATION = r.SITE_SETTINGS.createChild('location');
-  r.SITE_SETTINGS_MICROPHONE = r.SITE_SETTINGS.createChild('microphone');
-  r.SITE_SETTINGS_NOTIFICATIONS = r.SITE_SETTINGS.createChild('notifications');
-  r.SITE_SETTINGS_FLASH = r.SITE_SETTINGS.createChild('flash');
-  r.SITE_SETTINGS_POPUPS = r.SITE_SETTINGS.createChild('popups');
-  r.SITE_SETTINGS_UNSANDBOXED_PLUGINS =
-      r.SITE_SETTINGS.createChild('unsandboxedPlugins');
-  r.SITE_SETTINGS_MIDI_DEVICES = r.SITE_SETTINGS.createChild('midiDevices');
-  r.SITE_SETTINGS_USB_DEVICES = r.SITE_SETTINGS.createChild('usbDevices');
-  r.SITE_SETTINGS_ZOOM_LEVELS = r.SITE_SETTINGS.createChild('zoomLevels');
-  r.SITE_SETTINGS_PDF_DOCUMENTS = r.SITE_SETTINGS.createChild('pdfDocuments');
-  r.SITE_SETTINGS_PROTECTED_CONTENT =
-      r.SITE_SETTINGS.createChild('protectedContent');
-  r.SITE_SETTINGS_SUBRESOURCE_FILTER =
-      r.SITE_SETTINGS.createChild('subresourceFilter');
-
-// <if expr="chromeos">
-  r.DATETIME = r.ADVANCED.createSection('/dateTime', 'dateTime');
-// </if>
-
-  r.PASSWORDS =
-      r.ADVANCED.createSection('/passwordsAndForms', 'passwordsAndForms');
-  r.AUTOFILL = r.PASSWORDS.createChild('/autofill');
-  r.MANAGE_PASSWORDS = r.PASSWORDS.createChild('/passwords');
-
-  r.LANGUAGES = r.ADVANCED.createSection('/languages', 'languages');
-// <if expr="chromeos">
-  r.INPUT_METHODS = r.LANGUAGES.createChild('/inputMethods');
-// </if>
-// <if expr="not is_macosx">
-  r.EDIT_DICTIONARY = r.LANGUAGES.createChild('/editDictionary');
-// </if>
-
-  r.DOWNLOADS = r.ADVANCED.createSection('/downloads', 'downloads');
-
-  r.PRINTING = r.ADVANCED.createSection('/printing', 'printing');
-  r.CLOUD_PRINTERS = r.PRINTING.createChild('/cloudPrinters');
-// <if expr="chromeos">
-  r.CUPS_PRINTERS = r.PRINTING.createChild('/cupsPrinters');
-  r.CUPS_PRINTER_DETAIL = r.CUPS_PRINTERS.createChild('/cupsPrinterDetails');
-// </if>
-
-  r.ACCESSIBILITY = r.ADVANCED.createSection('/accessibility', 'a11y');
-// <if expr="chromeos">
-  r.MANAGE_ACCESSIBILITY = r.ACCESSIBILITY.createChild('/manageAccessibility');
-// </if>
-
-  r.SYSTEM = r.ADVANCED.createSection('/system', 'system');
-  r.RESET = r.ADVANCED.createSection('/reset', 'reset');
-
-// <if expr="chromeos">
-  // "About" is the only section in About, but we still need to create the route
-  // in order to show the subpage on Chrome OS.
-  r.ABOUT_ABOUT = r.ABOUT.createSection('/help/about', 'about');
-  r.DETAILED_BUILD_INFO = r.ABOUT_ABOUT.createChild('/help/details');
-// </if>
+  var routerInstance = new Router();
 
   var routeObservers = new Set();
 
@@ -251,7 +558,7 @@ cr.define('settings', function() {
 
       // Emulating Polymer data bindings, the observer is called when the
       // element starts observing the route.
-      this.currentRouteChanged(currentRoute, undefined);
+      this.currentRouteChanged(routerInstance.currentRoute, undefined);
     },
 
     /** @override */
@@ -276,153 +583,40 @@ cr.define('settings', function() {
    */
   var CANONICAL_PATH_REGEX = /(^\/)([\/-\w]+)(\/$)/;
 
-  /**
-   * @param {string} path
-   * @return {?settings.Route} The matching canonical route, or null if none
-   *     matches.
-   */
-  var getRouteForPath = function(path) {
-    // Allow trailing slash in paths.
-    var canonicalPath = path.replace(CANONICAL_PATH_REGEX, '$1$2');
-
-    // TODO(tommycli): Use Object.values once Closure compilation supports it.
-    var matchingKey = Object.keys(Route).find(function(key) {
-      return Route[key].path == canonicalPath;
-    });
-
-    return !!matchingKey ? Route[matchingKey] : null;
-  };
-
-  /**
-   * The current active route. This updated is only by settings.navigateTo or
-   * settings.initializeRouteFromUrl.
-   * @private {!settings.Route}
-   */
-  var currentRoute = Route.BASIC;
-
-  /**
-   * The current query parameters. This is updated only by settings.navigateTo
-   * or settings.initializeRouteFromUrl.
-   * @private {!URLSearchParams}
-   */
-  var currentQueryParameters = new URLSearchParams();
-
-  /** @private {boolean} */
-  var lastRouteChangeWasPopstate_ = false;
-
-  /** @private */
-  var initializeRouteFromUrlCalled = false;
-
-  /**
-   * Initialize the route and query params from the URL.
-   */
-  var initializeRouteFromUrl = function() {
-    assert(!initializeRouteFromUrlCalled);
-    initializeRouteFromUrlCalled = true;
-
-    var route = getRouteForPath(window.location.pathname);
-    // Never allow direct navigation to ADVANCED.
-    if (route && route != Route.ADVANCED) {
-      currentRoute = route;
-      currentQueryParameters = new URLSearchParams(window.location.search);
-    } else {
-      window.history.replaceState(undefined, '', Route.BASIC.path);
-    }
-  };
-
-  function resetRouteForTesting() {
-    initializeRouteFromUrlCalled = false;
-    lastRouteChangeWasPopstate_ = false;
-    currentRoute = Route.BASIC;
-    currentQueryParameters = new URLSearchParams();
-  }
-
-  /**
-   * Helper function to set the current route and notify all observers.
-   * @param {!settings.Route} route
-   * @param {!URLSearchParams} queryParameters
-   * @param {boolean} isPopstate
-   */
-  var setCurrentRoute = function(route, queryParameters, isPopstate) {
-    var oldRoute = currentRoute;
-    currentRoute = route;
-    currentQueryParameters = queryParameters;
-    lastRouteChangeWasPopstate_ = isPopstate;
-    routeObservers.forEach(function(observer) {
-      observer.currentRouteChanged(currentRoute, oldRoute);
-    });
-  };
-
-  /** @return {!settings.Route} */
-  var getCurrentRoute = function() { return currentRoute; };
-
-  /** @return {!URLSearchParams} */
-  var getQueryParameters = function() {
-    return new URLSearchParams(currentQueryParameters);  // Defensive copy.
-  };
-
-  /** @return {boolean} */
-  var lastRouteChangeWasPopstate = function() {
-    return lastRouteChangeWasPopstate_;
-  };
-
-  /**
-   * Navigates to a canonical route and pushes a new history entry.
-   * @param {!settings.Route} route
-   * @param {URLSearchParams=} opt_dynamicParameters Navigations to the same
-   *     URL parameters in a different order will still push to history.
-   * @param {boolean=} opt_removeSearch Whether to strip the 'search' URL
-   *     parameter during navigation. Defaults to false.
-   */
-  var navigateTo = function(route, opt_dynamicParameters, opt_removeSearch) {
-    // The ADVANCED route only serves as a parent of subpages, and should not
-    // be possible to navigate to it directly.
-    if (route == settings.Route.ADVANCED)
-      route = settings.Route.BASIC;
-
-    var params = opt_dynamicParameters || new URLSearchParams();
-    var removeSearch = !!opt_removeSearch;
-
-    var oldSearchParam = getQueryParameters().get('search') || '';
-    var newSearchParam = params.get('search') || '';
-
-    if (!removeSearch && oldSearchParam && !newSearchParam)
-      params.append('search', oldSearchParam);
-
-    var url = route.path;
-    var queryString = params.toString();
-    if (queryString)
-      url += '?' + queryString;
-
-    // History serializes the state, so we don't push the actual route object.
-    window.history.pushState(currentRoute.path, '', url);
-    setCurrentRoute(route, params, false);
-  };
-
-  /**
-   * Navigates to the previous route if it has an equal or lesser depth.
-   * If there is no previous route in history meeting those requirements,
-   * this navigates to the immediate parent. This will never exit Settings.
-   */
-  var navigateToPreviousRoute = function() {
-    var previousRoute =
-        window.history.state &&
-        assert(getRouteForPath(/** @type {string} */ (window.history.state)));
-
-    if (previousRoute && previousRoute.depth <= currentRoute.depth)
-      window.history.back();
-    else
-      navigateTo(currentRoute.parent || Route.BASIC);
-  };
-
   window.addEventListener('popstate', function(event) {
     // On pop state, do not push the state onto the window.history again.
-    setCurrentRoute(getRouteForPath(window.location.pathname) || Route.BASIC,
-                    new URLSearchParams(window.location.search), true);
+    routerInstance.setCurrentRoute(
+        /** @type {!settings.Route} */ (
+            routerInstance.getRouteForPath(window.location.pathname) ||
+            routerInstance.getRoutes().BASIC),
+        new URLSearchParams(window.location.search), true);
   });
 
+  // TODO(scottchen): Change to 'get routes() {}' in export when we fix a bug in
+  // ChromePass that limits the syntax of what can be returned from cr.define().
+  var routes = routerInstance.getRoutes();
+
+  // TODO(scottchen): Stop exposing all those methods directly on settings.*,
+  // and instead update all clients to use the singleton instance directly
+  var getCurrentRoute = routerInstance.getCurrentRoute.bind(routerInstance);
+  var getRouteForPath = routerInstance.getRouteForPath.bind(routerInstance);
+  var initializeRouteFromUrl =
+      routerInstance.initializeRouteFromUrl.bind(routerInstance);
+  var resetRouteForTesting =
+      routerInstance.resetRouteForTesting.bind(routerInstance);
+  var getQueryParameters =
+      routerInstance.getQueryParameters.bind(routerInstance);
+  var lastRouteChangeWasPopstate =
+      routerInstance.lastRouteChangeWasPopstate.bind(routerInstance);
+  var navigateTo = routerInstance.navigateTo.bind(routerInstance);
+  var navigateToPreviousRoute =
+      routerInstance.navigateToPreviousRoute.bind(routerInstance);
+
   return {
-    Route: Route,
+    Route: Route,            // The Route class definition.
+    Router: Router,          // The Router class definition.
+    router: routerInstance,  // the singleton.
+    routes: routes,
     RouteObserverBehavior: RouteObserverBehavior,
     getRouteForPath: getRouteForPath,
     initializeRouteFromUrl: initializeRouteFromUrl,
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html
index 8029eb508eb..fe15b6acc7d 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html
@@ -3,7 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../extension_control_browser_proxy.html">
 <link rel="import" href="../focus_row_behavior.html">
 <link rel="import" href="search_engine_entry_css.html">
@@ -34,10 +34,10 @@
         <span>[[engine.displayName]]</span>
       </div>
       <div class="keyword-column">[[engine.keyword]]</div>
-      <paper-icon-button icon="cr:more-vert" focus-row-control
-          on-tap="onDotsTap_" title="$i18n{moreActions}"
-          focus-type="cr-menu-button">
-      </paper-icon-button>
+      <button is="paper-icon-button-light" class="icon-more-vert"
+          on-tap="onDotsTap_" title="$i18n{moreActions}" focus-row-control
+          focus-type="menu">
+      </button>
       <dialog is="cr-action-menu">
         <button class="dropdown-item" role="option" on-tap="onManageTap_"
             id="manage">
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js
index f547c6695b6..778ec450e5b 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js
@@ -53,8 +53,7 @@ Polymer({
 
   /** @private */
   onDotsTap_: function() {
-    /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).showAt(
-            assert(this.$$('paper-icon-button')));
+    /** @type {!CrActionMenuElement} */ (this.$$('dialog[is=cr-action-menu]'))
+        .showAt(assert(this.$$('button[is="paper-icon-button-light"]')));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html
index 0b0db506366..f9ee6494df8 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html
@@ -23,8 +23,8 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">[[dialogTitle_]]</div>
-      <div class="body">
+      <div class="title" slot="title">[[dialogTitle_]]</div>
+      <div class="body" slot="body">
         <paper-input always-float-label id="searchEngine"
             label="$i18n{searchEnginesSearchEngine}"
             error-message="$i18n{notValid}"
@@ -43,7 +43,7 @@
             disabled$="[[model.urlLocked]]">
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="cancel_" id="cancel">
             $i18n{cancel}</paper-button>
         <paper-button id="actionButton" class="action-button"
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js
index bf275f9ac54..f77d20022fe 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js
@@ -106,11 +106,12 @@ Polymer({
       return;
     }
 
-    this.browserProxy_.validateSearchEngineInput(
-        inputElement.id, inputElement.value).then(function(isValid) {
-      inputElement.invalid = !isValid;
-      this.updateActionButtonState_();
-    }.bind(this));
+    this.browserProxy_
+        .validateSearchEngineInput(inputElement.id, inputElement.value)
+        .then(function(isValid) {
+          inputElement.invalid = !isValid;
+          this.updateActionButtonState_();
+        }.bind(this));
   },
 
   /** @private */
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
index e3ebd8ae703..1b3bea51362 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
@@ -5,7 +5,7 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../focus_row_behavior.html">
 <link rel="import" href="search_engine_dialog.html">
@@ -39,11 +39,6 @@
       #url-column {
         flex: 4;
       }
-
-      :host(:not([show-dots_])) paper-icon-button {
-        pointer-events: none;
-        visibility: hidden;
-      }
     </style>
 
     <template is="dom-if" if="[[showEditSearchEngineDialog_]]" restamp>
@@ -58,10 +53,10 @@
       </div>
       <div id="keyword-column"><div>[[engine.keyword]]</div></div>
       <div id="url-column" class="text-elide">[[engine.url]]</div>
-      <paper-icon-button icon="cr:more-vert" on-tap="onDotsTap_"
-          title="$i18n{moreActions}" focus-row-control
+      <button is="paper-icon-button-light" class="icon-more-vert"
+          on-tap="onDotsTap_" title="$i18n{moreActions}" focus-row-control
           focus-type="cr-menu-button">
-      </paper-icon-button>
+      </button>
       <dialog is="cr-action-menu">
         <button class="dropdown-item" role="option" on-tap="onMakeDefaultTap_"
             hidden$="[[!engine.canBeDefault]]" id="makeDefault">
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js
index 20b2e37046d..be252d7f506 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js
@@ -85,9 +85,8 @@ Polymer({
 
   /** @private */
   onDotsTap_: function() {
-    /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).showAt(
-            assert(this.$$('paper-icon-button')));
+    /** @type {!CrActionMenuElement} */ (this.$$('dialog[is=cr-action-menu]'))
+        .showAt(assert(this.$$('button[is="paper-icon-button-light"]')));
   },
 
   /**
@@ -106,7 +105,8 @@ Polymer({
       // previous dialog's contents are cleared.
       dialog.addEventListener('close', function() {
         this.showEditSearchEngineDialog_ = false;
-        cr.ui.focusWithoutInk(assert(this.$$('paper-icon-button')));
+        cr.ui.focusWithoutInk(
+            assert(this.$$('button[is="paper-icon-button-light"]')));
       }.bind(this));
     }.bind(this));
   },
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_browser_proxy.js b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_browser_proxy.js
index e4819dd0ea5..76642485c21 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_browser_proxy.js
@@ -51,110 +51,108 @@ var SearchPageHotwordInfo;
 
 cr.define('settings', function() {
   /** @interface */
-  function SearchEnginesBrowserProxy() {}
-
-  SearchEnginesBrowserProxy.prototype = {
+  class SearchEnginesBrowserProxy {
     /** @param {number} modelIndex */
-    setDefaultSearchEngine: function(modelIndex) {},
+    setDefaultSearchEngine(modelIndex) {}
 
     /** @param {number} modelIndex */
-    removeSearchEngine: function(modelIndex) {},
+    removeSearchEngine(modelIndex) {}
 
     /** @param {number} modelIndex */
-    searchEngineEditStarted: function(modelIndex) {},
+    searchEngineEditStarted(modelIndex) {}
 
-    searchEngineEditCancelled: function() {},
+    searchEngineEditCancelled() {}
 
     /**
      * @param {string} searchEngine
      * @param {string} keyword
      * @param {string} queryUrl
      */
-    searchEngineEditCompleted: function(searchEngine, keyword, queryUrl) {},
+    searchEngineEditCompleted(searchEngine, keyword, queryUrl) {}
 
     /** @return {!Promise<!SearchEnginesInfo>} */
-    getSearchEnginesList: function() {},
+    getSearchEnginesList() {}
 
     /**
      * @param {string} fieldName
      * @param {string} fieldValue
      * @return {!Promise<boolean>}
      */
-    validateSearchEngineInput: function(fieldName, fieldValue) {},
+    validateSearchEngineInput(fieldName, fieldValue) {}
 
     /** @return {!Promise<!SearchPageHotwordInfo>} */
-    getHotwordInfo: function() {},
+    getHotwordInfo() {}
 
     /** @param {boolean} enabled */
-    setHotwordSearchEnabled: function(enabled) {},
+    setHotwordSearchEnabled(enabled) {}
 
     /** @return {!Promise<boolean>} */
-    getGoogleNowAvailability: function() {},
-  };
+    getGoogleNowAvailability() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.SearchEnginesBrowserProxy}
    */
-  function SearchEnginesBrowserProxyImpl() {}
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(SearchEnginesBrowserProxyImpl);
-
-  SearchEnginesBrowserProxyImpl.prototype = {
+  class SearchEnginesBrowserProxyImpl {
     /** @override */
-    setDefaultSearchEngine: function(modelIndex) {
+    setDefaultSearchEngine(modelIndex) {
       chrome.send('setDefaultSearchEngine', [modelIndex]);
-    },
+    }
 
     /** @override */
-    removeSearchEngine: function(modelIndex) {
+    removeSearchEngine(modelIndex) {
       chrome.send('removeSearchEngine', [modelIndex]);
-    },
+    }
 
     /** @override */
-    searchEngineEditStarted: function(modelIndex) {
+    searchEngineEditStarted(modelIndex) {
       chrome.send('searchEngineEditStarted', [modelIndex]);
-    },
+    }
 
     /** @override */
-    searchEngineEditCancelled: function() {
+    searchEngineEditCancelled() {
       chrome.send('searchEngineEditCancelled');
-    },
+    }
 
     /** @override */
-    searchEngineEditCompleted: function(searchEngine, keyword, queryUrl) {
+    searchEngineEditCompleted(searchEngine, keyword, queryUrl) {
       chrome.send('searchEngineEditCompleted', [
-        searchEngine, keyword, queryUrl,
+        searchEngine,
+        keyword,
+        queryUrl,
       ]);
-    },
+    }
 
     /** @override */
-    getSearchEnginesList: function() {
+    getSearchEnginesList() {
       return cr.sendWithPromise('getSearchEnginesList');
-    },
+    }
 
     /** @override */
-    validateSearchEngineInput: function(fieldName, fieldValue) {
+    validateSearchEngineInput(fieldName, fieldValue) {
       return cr.sendWithPromise(
           'validateSearchEngineInput', fieldName, fieldValue);
-    },
+    }
 
     /** @override */
-    getHotwordInfo: function() {
+    getHotwordInfo() {
       return cr.sendWithPromise('getHotwordInfo');
-    },
+    }
 
     /** @override */
-    setHotwordSearchEnabled: function(enabled) {
+    setHotwordSearchEnabled(enabled) {
       chrome.send('setHotwordSearchEnabled', [enabled]);
-    },
+    }
 
     /** @override */
-    getGoogleNowAvailability: function() {
+    getGoogleNowAvailability() {
       return cr.sendWithPromise('getGoogleNowAvailability');
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(SearchEnginesBrowserProxyImpl);
 
   return {
     SearchEnginesBrowserProxy: SearchEnginesBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_list.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
index 99da789e320..0b74c3f50bd 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
@@ -42,7 +42,9 @@
       }
 
       .icon-placeholder {
-        width: calc(var(--iron-icon-width) + 2 * 10px);
+        -webkit-margin-end: 0;
+        -webkit-margin-start: var(--cr-icon-button-margin-start);
+        width: var(--cr-icon-ripple-size);
       }
     </style>
     <div id="outer">
@@ -56,7 +58,7 @@
           class$="scroll-container [[getHeightClass(scrollTarget)]]"
           scrollable$="[[isScrollable(scrollTarget)]]">
         <iron-list items="[[engines]]" scroll-target="[[scrollTarget]]"
-            scroll-offset="[[scrollOffset]]">
+            scroll-offset="[[scrollOffset]]" preserve-focus>
           <template>
             <settings-search-engine-entry engine="[[item]]"
                 tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
index be6244af326..7323258bf68 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
@@ -52,7 +52,7 @@
         <h2>$i18n{searchEnginesExtension}</h2>
       </div>
       <iron-list id="extensions" class="extension-engines fixed-height-list"
-          items="[[extensions]]">
+          items="[[extensions]]" preserve-focus>
         <template>
           <settings-omnibox-extension-entry engine="[[item]]"
               tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.js b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
index f5cccbd4cd4..57cf8a0a8ec 100644
--- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
+++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
@@ -15,19 +15,25 @@ Polymer({
     /** @type {!Array<!SearchEngine>} */
     defaultEngines: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /** @type {!Array<!SearchEngine>} */
     otherEngines: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /** @type {!Array<!SearchEngine>} */
     extensions: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /**
@@ -36,7 +42,7 @@ Polymer({
      */
     subpageRoute: {
       type: Object,
-      value: settings.Route.SEARCH_ENGINES,
+      value: settings.routes.SEARCH_ENGINES,
     },
 
     /** @private {boolean} */
@@ -58,8 +64,9 @@ Polymer({
 
   /** @override */
   ready: function() {
-    settings.SearchEnginesBrowserProxyImpl.getInstance().
-        getSearchEnginesList().then(this.enginesChanged_.bind(this));
+    settings.SearchEnginesBrowserProxyImpl.getInstance()
+        .getSearchEnginesList()
+        .then(this.enginesChanged_.bind(this));
     this.addWebUIListener(
         'search-engines-changed', this.enginesChanged_.bind(this));
 
@@ -81,7 +88,13 @@ Polymer({
    */
   enginesChanged_: function(searchEnginesInfo) {
     this.defaultEngines = searchEnginesInfo['defaults'];
-    this.otherEngines = searchEnginesInfo['others'];
+
+    // Sort |otherEngines| in alphabetical order.
+    this.otherEngines = searchEnginesInfo['others'].sort(function(a, b) {
+      return a.name.toLocaleLowerCase().localeCompare(
+          b.name.toLocaleLowerCase());
+    });
+
     this.extensions = searchEnginesInfo['extensions'];
   },
 
diff --git a/chromium/chrome/browser/resources/settings/search_page/search_page.html b/chromium/chrome/browser/resources/settings/search_page/search_page.html
index 41f7b1bdd1a..0d3dede7a8e 100644
--- a/chromium/chrome/browser/resources/settings/search_page/search_page.html
+++ b/chromium/chrome/browser/resources/settings/search_page/search_page.html
@@ -1,6 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
@@ -18,13 +19,18 @@
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.html">
 
+<if expr="chromeos">
+  <link rel="import" href="../google_assistant_page/google_assistant_page.html">
+  <link rel="import" href="../google_assistant_page/google_assistant_browser_proxy.html">
+</if>
+
 <dom-module id="settings-search-page">
   <template>
     <style include="settings-shared md-select">
       #search-wrapper {
         align-items: center;
         display: flex;
-        min-height: var(--settings-box-min-height);
+        min-height: var(--settings-row-min-height);
       }
 
       iron-icon {
@@ -134,8 +140,17 @@
           </template>
         </template>
 
+<if expr="chromeos">
+        <template is="dom-if"
+            if="[[hotwordSearchEnablePref_.value]]">
+          <div class="start settings-box continuation indented">
+            $i18n{searchOkGoogleDisabled}
+          </div>
+        </template>
+</if>
+
         <!-- Manage search engines -->
-        <div id="subpage-trigger" class="settings-box"
+        <div id="engines-subpage-trigger" class="settings-box"
             on-tap="onManageSearchEnginesTap_" actionable>
           <div class="start">
             $i18n{searchEnginesManage}
@@ -143,14 +158,45 @@
           <button class="subpage-arrow" is="paper-icon-button-light"
               aria-label="$i18n{searchEnginesManage}"></button>
         </div>
+
+<if expr="chromeos">
+        <!-- Google Assistant -->
+        <template is="dom-if" if="[[showAssistantSection_(
+            voiceInteractionFeatureEnabled_, prefs.arc.enabled.value)]]">
+          <div id="assistant-subpage-trigger" class="settings-box two-line"
+            on-tap="onGoogleAssistantTap_" actionable>
+          <div class="start">
+            $i18n{searchGoogleAssistant}
+            <div class="secondary">
+              [[getAssistantEnabledDisabledLabel_(
+                  prefs.settings.voice_interaction.enabled.value)]]
+            </div>
+          </div>
+          <button class="subpage-arrow" is="paper-icon-button-light"
+              aria-label="$i18n{searchGoogleAssistant}"></button>
+          </div>
+        </template>
+</if>
       </neon-animatable>
       <template is="dom-if" route-path="/searchEngines">
         <settings-subpage
-            associated-control="[[$$('#subpage-trigger')]]"
+            associated-control="[[$$('#engines-subpage-trigger')]]"
             page-title="$i18n{searchEnginesManage}">
           <settings-search-engines-page></settings-search-engines-page>
         </settings-subpage>
       </template>
+<if expr="chromeos">
+      <template is="dom-if" if="[[voiceInteractionFeatureEnabled_]]">
+        <template is="dom-if" route-path="/googleAssistant">
+          <settings-subpage
+              associated-control="[[$$('#assistant-subpage-trigger')]]"
+              page-title="$i18n{googleAssistantPageTitle}">
+            <settings-google-assistant-page prefs="{{prefs}}">
+            </settings-google-assistant-page>
+          </settings-subpage>
+        </template>
+      </template>
+</if>
     </settings-animated-pages>
   </template>
   <script src="search_page.js"></script>
diff --git a/chromium/chrome/browser/resources/settings/search_page/search_page.js b/chromium/chrome/browser/resources/settings/search_page/search_page.js
index 78e8febc264..be8e1648d84 100644
--- a/chromium/chrome/browser/resources/settings/search_page/search_page.js
+++ b/chromium/chrome/browser/resources/settings/search_page/search_page.js
@@ -42,6 +42,16 @@ Polymer({
 
     /** @type {?Map<string, string>} */
     focusConfig_: Object,
+
+    // <if expr="chromeos">
+    /** @private */
+    voiceInteractionFeatureEnabled_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('enableVoiceInteraction');
+      },
+    }
+    // </if>
   },
 
   /** @private {?settings.SearchEnginesBrowserProxy} */
@@ -71,12 +81,22 @@ Polymer({
         'google-now-availability-changed',
         this.googleNowAvailabilityUpdate_.bind(this));
     this.browserProxy_.getGoogleNowAvailability().then(function(available) {
-        this.googleNowAvailabilityUpdate_(available);
+      this.googleNowAvailabilityUpdate_(available);
     }.bind(this));
 
     this.focusConfig_ = new Map();
-    this.focusConfig_.set(
-        settings.Route.SEARCH_ENGINES.path, '#subpage-trigger .subpage-arrow');
+    if (settings.routes.SEARCH_ENGINES) {
+      this.focusConfig_.set(
+          settings.routes.SEARCH_ENGINES.path,
+          '#engines-subpage-trigger .subpage-arrow');
+    }
+    // <if expr="chromeos">
+    if (settings.routes.GOOGLE_ASSISTANT) {
+      this.focusConfig_.set(
+          settings.routes.GOOGLE_ASSISTANT.path,
+          '#assistant-subpage-trigger .subpage-arrow');
+    }
+    // </if>
   },
 
   /** @private */
@@ -93,11 +113,19 @@ Polymer({
 
   /** @private */
   onManageSearchEnginesTap_: function() {
-    settings.navigateTo(settings.Route.SEARCH_ENGINES);
+    settings.navigateTo(settings.routes.SEARCH_ENGINES);
+  },
+
+  // <if expr="chromeos">
+  /** @private */
+  onGoogleAssistantTap_: function() {
+    assert(this.voiceInteractionFeatureEnabled_);
+    settings.navigateTo(settings.routes.GOOGLE_ASSISTANT);
   },
+  // </if>
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onHotwordSearchEnableChange_: function(event) {
@@ -166,8 +194,31 @@ Polymer({
     this.browserProxy_.setHotwordSearchEnabled(this.hotwordInfo_.enabled);
   },
 
+  // <if expr="chromeos">
+  /**
+   * @param {boolean} toggleValue
+   * @return {string}
+   * @private
+   */
+  getAssistantEnabledDisabledLabel_: function(toggleValue) {
+    return this.i18n(
+        toggleValue ? 'searchGoogleAssistantEnabled' :
+                      'searchGoogleAssistantDisabled');
+  },
+
+  /**
+   * @param {boolean} featureAvailable
+   * @param {boolean} arcEnabled
+   * @return {boolean}
+   * @private
+   */
+  showAssistantSection_: function(featureAvailable, arcEnabled) {
+    return featureAvailable && arcEnabled;
+  },
+  // </if>
+
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   doNothing_: function(event) {
diff --git a/chromium/chrome/browser/resources/settings/search_settings.js b/chromium/chrome/browser/resources/settings/search_settings.js
index ad541dd43c2..65c2cc6226c 100644
--- a/chromium/chrome/browser/resources/settings/search_settings.js
+++ b/chromium/chrome/browser/resources/settings/search_settings.js
@@ -67,15 +67,15 @@ cr.define('settings', function() {
   function findAndRemoveHighlights_(node) {
     var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS);
 
-    for (var i = 0; i < wrappers.length; i++ ) {
+    for (var i = 0; i < wrappers.length; i++) {
       var wrapper = wrappers[i];
-      var originalNode = wrapper.querySelector(
-          '.' + ORIGINAL_CONTENT_CSS_CLASS);
+      var originalNode =
+          wrapper.querySelector('.' + ORIGINAL_CONTENT_CSS_CLASS);
       wrapper.parentElement.replaceChild(originalNode.firstChild, wrapper);
     }
 
-    var searchBubbles = node.querySelectorAll(
-        '* /deep/ .' + SEARCH_BUBBLE_CSS_CLASS);
+    var searchBubbles =
+        node.querySelectorAll('* /deep/ .' + SEARCH_BUBBLE_CSS_CLASS);
     for (var j = 0; j < searchBubbles.length; j++)
       searchBubbles[j].remove();
   }
@@ -113,7 +113,7 @@ cr.define('settings', function() {
       } else {
         var span = document.createElement('span');
         span.classList.add(HIT_CSS_CLASS);
-        span.style.backgroundColor = '#ffeb3b'; // --var(--paper-yellow-500)
+        span.style.backgroundColor = '#ffeb3b';  // --var(--paper-yellow-500)
         span.textContent = tokens[i];
         wrapper.appendChild(span);
       }
@@ -143,10 +143,9 @@ cr.define('settings', function() {
         return;
 
       if (node instanceof HTMLElement) {
-        var element = /** @type {HTMLElement} */(node);
+        var element = /** @type {HTMLElement} */ (node);
         if (element.hasAttribute(SKIP_SEARCH_CSS_ATTRIBUTE) ||
-            element.hasAttribute('hidden') ||
-            element.style.display == 'none') {
+            element.hasAttribute('hidden') || element.style.display == 'none') {
           return;
         }
       }
@@ -242,7 +241,8 @@ cr.define('settings', function() {
     var parent = node;
     while (parent && parent.nodeName !== 'SETTINGS-SECTION') {
       parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ?
-          parent.host : parent.parentNode;
+          parent.host :
+          parent.parentNode;
       if (parent.nodeName == 'SETTINGS-SUBPAGE') {
         // TODO(dpapad): Cast to SettingsSubpageElement here.
         associatedControl = assert(
@@ -260,45 +260,43 @@ cr.define('settings', function() {
       highlightAssociatedControl_(associatedControl, rawQuery);
   }
 
-  /**
-   * @constructor
-   *
-   * @param {!settings.SearchRequest} request
-   * @param {!Node} node
-   */
-  function Task(request, node) {
-    /** @protected {!settings.SearchRequest} */
-    this.request = request;
+  /** @abstract */
+  class Task {
+    /**
+     * @param {!settings.SearchRequest} request
+     * @param {!Node} node
+     */
+    constructor(request, node) {
+      /** @protected {!settings.SearchRequest} */
+      this.request = request;
 
-    /** @protected {!Node} */
-    this.node = node;
-  }
+      /** @protected {!Node} */
+      this.node = node;
+    }
 
-  Task.prototype = {
     /**
      * @abstract
      * @return {!Promise}
      */
-    exec: function() {},
-  };
-
-  /**
-   * A task that takes a <template is="dom-if">...</template> node corresponding
-   * to a setting subpage and renders it. A SearchAndHighlightTask is posted for
-   * the newly rendered subtree, once rendering is done.
-   * @constructor
-   * @extends {Task}
-   *
-   * @param {!settings.SearchRequest} request
-   * @param {!Node} node
-   */
-  function RenderTask(request, node) {
-    Task.call(this, request, node);
+    exec() {}
   }
 
-  RenderTask.prototype = {
+  class RenderTask extends Task {
+    /**
+     * A task that takes a <template is="dom-if">...</template> node
+     * corresponding to a setting subpage and renders it. A
+     * SearchAndHighlightTask is posted for the newly rendered subtree, once
+     * rendering is done.
+     *
+     * @param {!settings.SearchRequest} request
+     * @param {!Node} node
+     */
+    constructor(request, node) {
+      super(request, node);
+    }
+
     /** @override */
-    exec: function() {
+    exec() {
       var routePath = this.node.getAttribute('route-path');
       var subpageTemplate =
           this.node['_content'].querySelector('settings-subpage');
@@ -318,43 +316,37 @@ cr.define('settings', function() {
           resolve();
         }.bind(this));
       }.bind(this));
-    },
-  };
-
-  /**
-   * @constructor
-   * @extends {Task}
-   *
-   * @param {!settings.SearchRequest} request
-   * @param {!Node} node
-   */
-  function SearchAndHighlightTask(request, node) {
-    Task.call(this, request, node);
+    }
   }
 
-  SearchAndHighlightTask.prototype = {
+  class SearchAndHighlightTask extends Task {
+    /**
+     * @param {!settings.SearchRequest} request
+     * @param {!Node} node
+     */
+    constructor(request, node) {
+      super(request, node);
+    }
+
     /** @override */
-    exec: function() {
+    exec() {
       var foundMatches = findAndHighlightMatches_(this.request, this.node);
       this.request.updateMatches(foundMatches);
       return Promise.resolve();
-    },
-  };
-
-  /**
-   * @constructor
-   * @extends {Task}
-   *
-   * @param {!settings.SearchRequest} request
-   * @param {!Node} page
-   */
-  function TopLevelSearchTask(request, page) {
-    Task.call(this, request, page);
+    }
   }
 
-  TopLevelSearchTask.prototype = {
+  class TopLevelSearchTask extends Task {
+    /**
+     * @param {!settings.SearchRequest} request
+     * @param {!Node} page
+     */
+    constructor(request, page) {
+      super(request, page);
+    }
+
     /** @override */
-    exec: function() {
+    exec() {
       findAndRemoveHighlights_(this.node);
 
       var shouldSearch = this.request.regExp !== null;
@@ -365,92 +357,88 @@ cr.define('settings', function() {
       }
 
       return Promise.resolve();
-    },
+    }
 
     /**
      * @param {boolean} visible
      * @private
      */
-    setSectionsVisibility_: function(visible) {
+    setSectionsVisibility_(visible) {
       var sections = this.node.querySelectorAll('settings-section');
 
       for (var i = 0; i < sections.length; i++)
         sections[i].hiddenBySearch = !visible;
-    },
-  };
-
-  /**
-   * @constructor
-   * @param {!settings.SearchRequest} request
-   */
-  function TaskQueue(request) {
-    /** @private {!settings.SearchRequest} */
-    this.request_ = request;
-
-    /**
-     * @private {{
-     *   high: !Array<!Task>,
-     *   middle: !Array<!Task>,
-     *   low: !Array<!Task>
-     * }}
-     */
-    this.queues_;
-    this.reset();
-
-    /** @private {?Function} */
-    this.onEmptyCallback_ = null;
-
-    /**
-     * Whether a task is currently running.
-     * @private {boolean}
-     */
-    this.running_ = false;
+    }
   }
 
-  TaskQueue.prototype = {
+  class TaskQueue {
+    /** @param {!settings.SearchRequest} request */
+    constructor(request) {
+      /** @private {!settings.SearchRequest} */
+      this.request_ = request;
+
+      /**
+       * @private {{
+       *   high: !Array<!Task>,
+       *   middle: !Array<!Task>,
+       *   low: !Array<!Task>
+       * }}
+       */
+      this.queues_;
+      this.reset();
+
+      /** @private {?Function} */
+      this.onEmptyCallback_ = null;
+
+      /**
+       * Whether a task is currently running.
+       * @private {boolean}
+       */
+      this.running_ = false;
+    }
+
     /** Drops all tasks. */
-    reset: function() {
+    reset() {
       this.queues_ = {high: [], middle: [], low: []};
-    },
+    }
 
     /** @param {!TopLevelSearchTask} task */
-    addTopLevelSearchTask: function(task) {
+    addTopLevelSearchTask(task) {
       this.queues_.high.push(task);
       this.consumePending_();
-    },
+    }
 
     /** @param {!SearchAndHighlightTask} task */
-    addSearchAndHighlightTask: function(task) {
+    addSearchAndHighlightTask(task) {
       this.queues_.middle.push(task);
       this.consumePending_();
-    },
+    }
 
     /** @param {!RenderTask} task */
-    addRenderTask: function(task) {
+    addRenderTask(task) {
       this.queues_.low.push(task);
       this.consumePending_();
-    },
+    }
 
     /**
      * Registers a callback to be called every time the queue becomes empty.
      * @param {function():void} onEmptyCallback
      */
-    onEmpty: function(onEmptyCallback) {
+    onEmpty(onEmptyCallback) {
       this.onEmptyCallback_ = onEmptyCallback;
-    },
+    }
 
     /**
      * @return {!Task|undefined}
      * @private
      */
-    popNextTask_: function() {
-      return this.queues_.high.shift() ||
-          this.queues_.middle.shift() ||
+    popNextTask_() {
+      return this.queues_.high.shift() || this.queues_.middle.shift() ||
           this.queues_.low.shift();
-    },
+    }
 
     /** @private */
-    consumePending_: function() {
+    consumePending_() {
       if (this.running_)
         return;
 
@@ -476,125 +464,116 @@ cr.define('settings', function() {
         }.bind(this));
         return;
       }
-    },
-  };
-
-  /**
-   * @constructor
-   *
-   * @param {string} rawQuery
-   * @param {!HTMLElement} root
-   */
-  var SearchRequest = function(rawQuery, root) {
-    /** @private {string} */
-    this.rawQuery_ = rawQuery;
-
-    /** @private {!HTMLElement} */
-    this.root_ = root;
-
-    /** @type {?RegExp} */
-    this.regExp = this.generateRegExp_();
+    }
+  }
 
+  class SearchRequest {
     /**
-     * Whether this request was canceled before completing.
-     * @type {boolean}
+     * @param {string} rawQuery
+     * @param {!HTMLElement} root
      */
-    this.canceled = false;
+    constructor(rawQuery, root) {
+      /** @private {string} */
+      this.rawQuery_ = rawQuery;
 
-    /** @private {boolean} */
-    this.foundMatches_ = false;
+      /** @private {!HTMLElement} */
+      this.root_ = root;
 
-    /** @type {!PromiseResolver} */
-    this.resolver = new PromiseResolver();
+      /** @type {?RegExp} */
+      this.regExp = this.generateRegExp_();
 
-    /** @private {!TaskQueue} */
-    this.queue_ = new TaskQueue(this);
-    this.queue_.onEmpty(function() {
-      this.resolver.resolve(this);
-    }.bind(this));
-  };
+      /**
+       * Whether this request was canceled before completing.
+       * @type {boolean}
+       */
+      this.canceled = false;
+
+      /** @private {boolean} */
+      this.foundMatches_ = false;
 
-  /** @private {!RegExp} */
-  SearchRequest.SANITIZE_REGEX_ = /[-[\]{}()*+?.,\\^$|#\s]/g;
+      /** @type {!PromiseResolver} */
+      this.resolver = new PromiseResolver();
+
+      /** @private {!TaskQueue} */
+      this.queue_ = new TaskQueue(this);
+      this.queue_.onEmpty(function() {
+        this.resolver.resolve(this);
+      }.bind(this));
+    }
 
-  SearchRequest.prototype = {
     /**
      * Fires this search request.
      */
-    start: function() {
+    start() {
       this.queue_.addTopLevelSearchTask(
           new TopLevelSearchTask(this, this.root_));
-    },
+    }
 
     /**
      * @return {?RegExp}
      * @private
      */
-    generateRegExp_: function() {
+    generateRegExp_() {
       var regExp = null;
 
       // Generate search text by escaping any characters that would be
       // problematic for regular expressions.
-      var searchText = this.rawQuery_.trim().replace(
-          SearchRequest.SANITIZE_REGEX_, '\\$&');
+      var searchText = this.rawQuery_.trim().replace(SANITIZE_REGEX, '\\$&');
       if (searchText.length > 0)
         regExp = new RegExp('(' + searchText + ')', 'i');
 
       return regExp;
-    },
+    }
 
     /**
      * @param {string} rawQuery
      * @return {boolean} Whether this SearchRequest refers to an identical
      *     query.
      */
-    isSame: function(rawQuery) {
+    isSame(rawQuery) {
       return this.rawQuery_ == rawQuery;
-    },
+    }
 
     /**
      * Updates the result for this search request.
      * @param {boolean} found
      */
-    updateMatches: function(found) {
+    updateMatches(found) {
       this.foundMatches_ = this.foundMatches_ || found;
-    },
+    }
 
     /** @return {boolean} Whether any matches were found. */
-    didFindMatches: function() {
+    didFindMatches() {
       return this.foundMatches_;
-    },
-  };
+    }
+  }
 
-  /** @interface */
-  var SearchManager = function() {};
+  /** @const {!RegExp} */
+  var SANITIZE_REGEX = /[-[\]{}()*+?.,\\^$|#\s]/g;
 
-  SearchManager.prototype = {
+  /** @interface */
+  class SearchManager {
     /**
      * @param {string} text The text to search for.
      * @param {!Node} page
      * @return {!Promise<!settings.SearchRequest>} A signal indicating that
      *     searching finished.
      */
-    search: function(text, page) {}
-  };
+    search(text, page) {}
+  }
 
-  /**
-   * @constructor
-   * @implements {SearchManager}
-   */
-  var SearchManagerImpl = function() {
-    /** @private {!Set<!settings.SearchRequest>} */
-    this.activeRequests_ = new Set();
+  /** @implements {SearchManager} */
+  class SearchManagerImpl {
+    constructor() {
+      /** @private {!Set<!settings.SearchRequest>} */
+      this.activeRequests_ = new Set();
 
-    /** @private {?string} */
-    this.lastSearchedText_ = null;
-  };
-  cr.addSingletonGetter(SearchManagerImpl);
+      /** @private {?string} */
+      this.lastSearchedText_ = null;
+    }
 
-  SearchManagerImpl.prototype = {
     /** @override */
-    search: function(text, page) {
+    search(text, page) {
       // Cancel any pending requests if a request with different text is
       // submitted.
       if (text != this.lastSearchedText_) {
@@ -614,8 +593,9 @@ cr.define('settings', function() {
         this.activeRequests_.delete(request);
         return request;
       }.bind(this));
-    },
-  };
+    }
+  }
+  cr.addSingletonGetter(SearchManagerImpl);
 
   /** @return {!SearchManager} */
   function getSearchManager() {
diff --git a/chromium/chrome/browser/resources/settings/settings_icons_css.html b/chromium/chrome/browser/resources/settings/settings_icons_css.html
new file mode 100644
index 00000000000..8a3722daa1d
--- /dev/null
+++ b/chromium/chrome/browser/resources/settings/settings_icons_css.html
@@ -0,0 +1,26 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<!-- Common icon classes for Material Design settings page. -->
+<dom-module id="settings-icons">
+  <template>
+    <style>
+      button[is='paper-icon-button-light'].icon-arrow-back {
+        background-image: url(./images/settings_icon_arrow_back.svg);
+      }
+      button[is='paper-icon-button-light'].icon-visibility {
+        background-image: url(./images/settings_icon_visibility.svg);
+      }
+      button[is='paper-icon-button-light'].icon-visibility-off {
+        background-image: url(./images/settings_icon_visibility_off.svg);
+      }
+<if expr="chromeos">
+      button[is='paper-icon-button-light'].icon-add-circle {
+        background-image: url(./images/settings_icon_add_circle.svg);
+      }
+      button[is='paper-icon-button-light'].icon-add-wifi {
+        background-image: url(./images/settings_icon_add_wifi.svg);
+      }
+</if>
+    </style>
+  </template>
+</dom-module>
diff --git a/chromium/chrome/browser/resources/settings/settings_main/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/settings_main/compiled_resources2.gyp
index 5a1c7401521..1e1d0fa7af8 100644
--- a/chromium/chrome/browser/resources/settings/settings_main/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/settings_main/compiled_resources2.gyp
@@ -14,7 +14,7 @@
         '../about_page/compiled_resources2.gyp:about_page',
         '../basic_page/compiled_resources2.gyp:basic_page',
         '../settings_page/compiled_resources2.gyp:main_page_behavior',
-        '../settings_ui/compiled_resources2.gyp:settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
diff --git a/chromium/chrome/browser/resources/settings/settings_main/settings_main.html b/chromium/chrome/browser/resources/settings/settings_main/settings_main.html
index 1f12c0e0f42..d5321b5a172 100644
--- a/chromium/chrome/browser/resources/settings/settings_main/settings_main.html
+++ b/chromium/chrome/browser/resources/settings/settings_main/settings_main.html
@@ -37,7 +37,6 @@
         margin-bottom: 10px;
       }
     </style>
-    <content select="paper-icon-button"></content>
     <div id="noSearchResults" hidden$="[[!showNoResultsFound_]]">
       <div>$i18n{searchNoResults}</div>
       <div>$i18nRaw{searchNoResultsHelp}</div>
@@ -46,6 +45,8 @@
       <settings-basic-page prefs="{{prefs}}"
           page-visibility="[[pageVisibility]]"
           show-android-apps="[[showAndroidApps]]"
+          show-multidevice="[[showMultidevice]]"
+          have-play-store-app="[[havePlayStoreApp]]"
           on-subpage-expand="onSubpageExpand_"
           in-search-mode="[[inSearchMode_]]"
           advanced-toggle-expanded="{{advancedToggleExpanded}}">
diff --git a/chromium/chrome/browser/resources/settings/settings_main/settings_main.js b/chromium/chrome/browser/resources/settings/settings_main/settings_main.js
index a7c1e8d9534..d81ee241c32 100644
--- a/chromium/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chromium/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -77,6 +77,10 @@ Polymer({
     pageVisibility: Object,
 
     showAndroidApps: Boolean,
+
+    showMultidevice: Boolean,
+
+    havePlayStoreApp: Boolean,
   },
 
   /** @override */
@@ -126,8 +130,8 @@ Polymer({
     var visibleBottom = scroller.scrollTop + scroller.clientHeight;
     var overscrollBottom = overscroll.offsetTop + overscroll.scrollHeight;
     // How much of the overscroll is visible (may be negative).
-    var visibleOverscroll = overscroll.scrollHeight -
-                            (overscrollBottom - visibleBottom);
+    var visibleOverscroll =
+        overscroll.scrollHeight - (overscrollBottom - visibleBottom);
     this.overscroll_ =
         Math.max(opt_minHeight || 0, Math.ceil(visibleOverscroll));
   },
@@ -173,7 +177,7 @@ Polymer({
    * @private
    */
   updatePagesShown_: function() {
-    var inAbout = settings.Route.ABOUT.contains(settings.getCurrentRoute());
+    var inAbout = settings.routes.ABOUT.contains(settings.getCurrentRoute());
     this.showPages_ = {about: inAbout, settings: !inAbout};
 
     // Calculate and set the overflow padding.
@@ -233,13 +237,14 @@ Polymer({
    * @return {(?SettingsAboutPageElement|?SettingsBasicPageElement)}
    */
   getPage_: function(route) {
-    if (settings.Route.ABOUT.contains(route)) {
-      return /** @type {?SettingsAboutPageElement} */(
+    if (settings.routes.ABOUT.contains(route)) {
+      return /** @type {?SettingsAboutPageElement} */ (
           this.$$('settings-about-page'));
     }
-    if (settings.Route.BASIC.contains(route) ||
-        settings.Route.ADVANCED.contains(route)) {
-      return /** @type {?SettingsBasicPageElement} */(
+    if (settings.routes.BASIC.contains(route) ||
+        (settings.routes.ADVANCED &&
+         settings.routes.ADVANCED.contains(route))) {
+      return /** @type {?SettingsBasicPageElement} */ (
           this.$$('settings-basic-page'));
     }
     assertNotReached();
@@ -257,7 +262,7 @@ Polymer({
     return new Promise(function(resolve, reject) {
       setTimeout(function() {
         var whenSearchDone =
-            assert(this.getPage_(settings.Route.BASIC)).searchContents(query);
+            assert(this.getPage_(settings.routes.BASIC)).searchContents(query);
         whenSearchDone.then(function(result) {
           resolve();
           if (result.canceled) {
diff --git a/chromium/chrome/browser/resources/settings/settings_menu/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/settings_menu/compiled_resources2.gyp
index 9a390d60438..305541dd0c4 100644
--- a/chromium/chrome/browser/resources/settings/settings_menu/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/settings_menu/compiled_resources2.gyp
@@ -8,7 +8,7 @@
       'dependencies': [
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-ripple/compiled_resources2.gyp:paper-ripple-extracted',
         '../compiled_resources2.gyp:route',
-        '../settings_ui/compiled_resources2.gyp:settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
diff --git a/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html
index 1ca810cb59c..6f387f2d476 100644
--- a/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html
+++ b/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html
@@ -26,6 +26,7 @@
         -webkit-margin-end: 2px;  /* Margin so selected outline is visible. */
         -webkit-margin-start: 1px;
         -webkit-padding-start: 23px;  /* 24px - 1px from margin for outline. */
+        align-items: center;
         color: var(--settings-nav-grey);
         display: flex;
         font-weight: 500;
@@ -162,6 +163,12 @@
             <iron-icon icon="cr:print"></iron-icon>
             $i18n{printingPageTitle}
           </a>
+<if expr="chromeos">
+          <a href="/multidevice" hidden="[[!showMultidevice]]">
+            <iron-icon icon="settings:sync"></iron-icon>
+            $i18n{multidevicePageTitle}
+          </a>
+</if>
           <a href="/accessibility">
             <iron-icon icon="settings:accessibility"></iron-icon>
             $i18n{a11yPageTitle}
diff --git a/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js b/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js
index 3886816a911..5ff27d50f22 100644
--- a/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js
+++ b/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js
@@ -13,7 +13,7 @@ var MainPageBehaviorImpl = {
     /**
      * Help CSS to alter style during the horizontal swipe animation.
      * Note that this is unrelated to the |currentAnimation_| (which refers to
-     * the vertical exapand animation).
+     * the vertical expand animation).
      */
     isSubpageAnimating: {
       reflectToAttribute: true,
@@ -35,9 +35,7 @@ var MainPageBehaviorImpl = {
   /** @type {?HTMLElement} The scrolling container. */
   scroller: null,
 
-  listeners: {
-    'neon-animation-finish': 'onNeonAnimationFinish_'
-  },
+  listeners: {'neon-animation-finish': 'onNeonAnimationFinish_'},
 
   /** @override */
   attached: function() {
@@ -60,21 +58,20 @@ var MainPageBehaviorImpl = {
    * @param {settings.Route} oldRoute
    */
   currentRouteChanged: function(newRoute, oldRoute) {
-    var oldRouteWasSection =
-        !!oldRoute && !!oldRoute.parent && !!oldRoute.section &&
-        oldRoute.parent.section != oldRoute.section;
+    var oldRouteWasSection = !!oldRoute && !!oldRoute.parent &&
+        !!oldRoute.section && oldRoute.parent.section != oldRoute.section;
 
     if (this.scroller) {
       // When navigating from a section to the root route, we just need to
       // scroll to the top, and can early exit afterwards.
-      if (oldRouteWasSection && newRoute == settings.Route.BASIC) {
+      if (oldRouteWasSection && newRoute == settings.routes.BASIC) {
         this.scroller.scrollTop = 0;
         return;
       }
 
       // When navigating to the About page, we need to scroll to the top, and
       // still do the rest of section management.
-      if (newRoute == settings.Route.ABOUT)
+      if (newRoute == settings.routes.ABOUT)
         this.scroller.scrollTop = 0;
     }
 
@@ -82,8 +79,8 @@ var MainPageBehaviorImpl = {
     // in-page back/forward navigations (from a section or the root page).
     // Also always scroll when coming from either the About or root page.
     var scrollToSection = !settings.lastRouteChangeWasPopstate() ||
-        oldRouteWasSection || oldRoute == settings.Route.BASIC ||
-        oldRoute == settings.Route.ABOUT;
+        oldRouteWasSection || oldRoute == settings.routes.BASIC ||
+        oldRoute == settings.routes.ABOUT;
 
     // TODO(dschuyler): This doesn't set the flag in the case of going to or
     // from the main page. It seems sensible to set the flag in those cases,
@@ -94,10 +91,17 @@ var MainPageBehaviorImpl = {
 
     // For previously uncreated pages (including on first load), allow the page
     // to render before scrolling to or expanding the section.
-    if (!oldRoute || this.scrollHeight == 0)
+    if (!oldRoute) {
+      this.fire('hide-container');
+      setTimeout(function() {
+        this.fire('show-container');
+        this.tryTransitionToSection_(scrollToSection, true);
+      }.bind(this));
+    } else if (this.scrollHeight == 0) {
       setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection));
-    else
+    } else {
       this.tryTransitionToSection_(scrollToSection);
+    }
   },
 
   /**
@@ -120,9 +124,10 @@ var MainPageBehaviorImpl = {
    * section is quickly shown, without getting the page into a broken state --
    * if currentRoute changes in between calls, just transition to the new route.
    * @param {boolean} scrollToSection
+   * @param {boolean=} immediate Whether to instantly expand instead of animate.
    * @private
    */
-  tryTransitionToSection_: function(scrollToSection) {
+  tryTransitionToSection_: function(scrollToSection, immediate) {
     var currentRoute = settings.getCurrentRoute();
     var currentSection = this.getSection(currentRoute.section);
 
@@ -135,7 +140,7 @@ var MainPageBehaviorImpl = {
     }
 
     var promise;
-    var expandedSection = /** @type {?SettingsSectionElement} */(
+    var expandedSection = /** @type {?SettingsSectionElement} */ (
         this.$$('settings-section.expanded'));
     if (expandedSection) {
       // If the section shouldn't be expanded, collapse it.
@@ -147,24 +152,34 @@ var MainPageBehaviorImpl = {
       }
     } else if (currentSection) {
       // Expand the section into a subpage or scroll to it on the main page.
-      if (currentRoute.isSubpage())
-        promise = this.expandSection_(currentSection);
-      else if (scrollToSection)
+      if (currentRoute.isSubpage()) {
+        if (immediate)
+          this.expandSectionImmediate_(currentSection);
+        else
+          promise = this.expandSection_(currentSection);
+      } else if (scrollToSection) {
         currentSection.scrollIntoView();
+      }
     } else if (
-        this.tagName == 'SETTINGS-BASIC-PAGE' &&
-        settings.Route.ADVANCED.contains(currentRoute) &&
+        this.tagName == 'SETTINGS-BASIC-PAGE' && settings.routes.ADVANCED &&
+        settings.routes.ADVANCED.contains(currentRoute) &&
         // Need to exclude routes that correspond to 'non-sectioned' children of
         // ADVANCED, otherwise tryTransitionToSection_ will recurse endlessly.
         !currentRoute.isNavigableDialog) {
       assert(currentRoute.section);
+      // Hide the container again while Advanced Page template is being loaded.
+      this.fire('hide-container');
       promise = this.$$('#advancedPageTemplate').get();
     }
 
     // When this animation ends, another may be necessary. Call this function
     // again after the promise resolves.
-    if (promise)
-      promise.then(this.tryTransitionToSection_.bind(this, scrollToSection));
+    if (promise) {
+      promise.then(this.tryTransitionToSection_.bind(this, scrollToSection))
+          .then(function() {
+            this.fire('show-container');
+          }.bind(this));
+    }
   },
 
   /**
@@ -174,7 +189,7 @@ var MainPageBehaviorImpl = {
    */
   maybeStopCurrentAnimation_: function() {
     var currentRoute = settings.getCurrentRoute();
-    var animatingSection = /** @type {?SettingsSectionElement} */(
+    var animatingSection = /** @type {?SettingsSectionElement} */ (
         this.$$('settings-section.expanding, settings-section.collapsing'));
     assert(animatingSection);
 
@@ -206,6 +221,19 @@ var MainPageBehaviorImpl = {
   },
 
   /**
+   * Immediately expand the card in |section| to fill the page.
+   * @param {!SettingsSectionElement} section
+   * @private
+   */
+  expandSectionImmediate_: function(section) {
+    assert(this.scroller);
+    section.immediateExpand(this.scroller);
+    this.finishedExpanding_(section);
+    // TODO(scottchen): iron-list inside subpages need this to render correctly.
+    this.fire('resize');
+  },
+
+  /**
    * Animates the card in |section|, expanding it to fill the page.
    * @param {!SettingsSectionElement} section
    * @return {!Promise} Resolved when the transition is finished or canceled.
@@ -213,7 +241,6 @@ var MainPageBehaviorImpl = {
    */
   expandSection_: function(section) {
     assert(this.scroller);
-
     if (!section.canAnimateExpand()) {
       // Try to wait for the section to be created.
       return new Promise(function(resolve, reject) {
@@ -230,28 +257,33 @@ var MainPageBehaviorImpl = {
 
     this.currentAnimation_ = section.animateExpand(this.scroller);
 
-    var finished;
-    return this.currentAnimation_.finished.then(function() {
-      // Hide other sections and scroll to the top of the subpage.
-      this.classList.add('showing-subpage');
-      this.toggleOtherSectionsHidden_(section.section, true);
-      this.scroller.scrollTop = 0;
-      section.setFrozen(false);
-
-      // Notify that the page is fully expanded.
-      this.fire('subpage-expand');
+    return this.currentAnimation_.finished
+        .then(
+            function() {
+              this.finishedExpanding_(section);
+            }.bind(this),
+            function() {
+              // The animation was canceled; restore the section and scroll
+              // position.
+              section.setFrozen(false);
+              this.scroller.scrollTop = this.origScrollTop_;
+            }.bind(this))
+        .then(function() {
+          this.fire('freeze-scroll', false);
+          this.currentAnimation_ = null;
+        }.bind(this));
+  },
 
-      finished = true;
-    }.bind(this), function() {
-      // The animation was canceled; restore the section and scroll position.
-      section.setFrozen(false);
-      this.scroller.scrollTop = this.origScrollTop_;
+  /** @private */
+  finishedExpanding_: function(section) {
+    // Hide other sections and scroll to the top of the subpage.
+    this.classList.add('showing-subpage');
+    this.toggleOtherSectionsHidden_(section.section, true);
+    this.scroller.scrollTop = 0;
+    section.setFrozen(false);
 
-      finished = false;
-    }.bind(this)).then(function() {
-      this.fire('freeze-scroll', false);
-      this.currentAnimation_ = null;
-    }.bind(this));
+    // Notify that the page is fully expanded.
+    this.fire('subpage-expand');
   },
 
   /**
@@ -266,7 +298,7 @@ var MainPageBehaviorImpl = {
     // Don't animate the collapse if we are transitioning between Basic/Advanced
     // and About, since the section won't be visible.
     var needAnimate =
-        settings.Route.ABOUT.contains(settings.getCurrentRoute()) ==
+        settings.routes.ABOUT.contains(settings.getCurrentRoute()) ==
         (section.domHost.tagName == 'SETTINGS-ABOUT-PAGE');
 
     // Animate the collapse if the section knows the original height, except
@@ -307,19 +339,22 @@ var MainPageBehaviorImpl = {
         }
 
         this.currentAnimation_ = section.animateCollapse(
-            /** @type {!HTMLElement} */(this.scroller));
-
-        this.currentAnimation_.finished.catch(function() {
-          // The collapse was canceled, so the page is showing a subpage still.
-          this.fire('subpage-expand');
-        }.bind(this)).then(function() {
-          // Clean up after the animation succeeds or cancels.
-          section.setFrozen(false);
-          section.classList.remove('collapsing');
-          this.fire('freeze-scroll', false);
-          this.currentAnimation_ = null;
-          resolve();
-        }.bind(this));
+            /** @type {!HTMLElement} */ (this.scroller));
+
+        this.currentAnimation_.finished
+            .catch(function() {
+              // The collapse was canceled, so the page is showing a subpage
+              // still.
+              this.fire('subpage-expand');
+            }.bind(this))
+            .then(function() {
+              // Clean up after the animation succeeds or cancels.
+              section.setFrozen(false);
+              section.classList.remove('collapsing');
+              this.fire('freeze-scroll', false);
+              this.currentAnimation_ = null;
+              resolve();
+            }.bind(this));
       }.bind(this));
     }.bind(this));
   },
@@ -332,8 +367,7 @@ var MainPageBehaviorImpl = {
    * @private
    */
   toggleOtherSectionsHidden_: function(sectionName, hidden) {
-    var sections = Polymer.dom(this.root).querySelectorAll(
-        'settings-section');
+    var sections = Polymer.dom(this.root).querySelectorAll('settings-section');
     for (var i = 0; i < sections.length; i++)
       sections[i].hidden = hidden && (sections[i].section != sectionName);
   },
@@ -346,7 +380,7 @@ var MainPageBehaviorImpl = {
   getSection: function(section) {
     if (!section)
       return null;
-    return /** @type {?SettingsSectionElement} */(
+    return /** @type {?SettingsSectionElement} */ (
         this.$$('settings-section[section="' + section + '"]'));
   },
 };
diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js b/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
index 9fa356dce60..d4dd9b9d3f9 100644
--- a/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
+++ b/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
@@ -66,14 +66,19 @@ Polymer({
 
     // Only handle iron-select events from neon-animatable elements and the
     // given whitelist of settings-subpage instances.
-    var whitelist = 'settings-subpage#site-settings, ' +
-        'settings-subpage[route-path=\"' +
-        settings.Route.SITE_SETTINGS_COOKIES.path + '\"]';
-
-// <if expr="chromeos">
-    whitelist += ', settings-subpage[route-path=\"' +
-        settings.Route.INTERNET_NETWORKS.path + '\"]';
-// </if>
+    var whitelist = 'settings-subpage#site-settings';
+
+    if (settings.routes.SITE_SETTINGS_COOKIES) {
+      whitelist += ', settings-subpage[route-path=\"' +
+          settings.routes.SITE_SETTINGS_COOKIES.path + '\"]';
+    }
+
+    // <if expr="chromeos">
+    if (settings.routes.INTERNET_NETWORKS) {
+      whitelist += ', settings-subpage[route-path=\"' +
+          settings.routes.INTERNET_NETWORKS.path + '\"]';
+    }
+    // </if>
 
     if (!e.detail.item.matches('neon-animatable, ' + whitelist))
       return;
diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_section.js b/chromium/chrome/browser/resources/settings/settings_page/settings_section.js
index 0fe5074c402..0265b83585f 100644
--- a/chromium/chrome/browser/resources/settings/settings_page/settings_section.js
+++ b/chromium/chrome/browser/resources/settings/settings_page/settings_section.js
@@ -99,6 +99,17 @@ var SettingsSectionElement = Polymer({
         !this.classList.contains('expanded') && this.$.card.clientHeight > 0;
   },
 
+  immediateExpand: function(container) {
+    // Target position is the container's top edge in the viewport.
+    var containerTop = container.getBoundingClientRect().top;
+
+    this.$.card.position = 'fixed';
+    this.$.card.top = containerTop + 'px';
+    this.$.card.height = 'calc(100% - ' + containerTop + 'px)';
+
+    this.classList.add('expanded');
+  },
+
   /**
    * Animates the section expanding to fill the container. The section is fixed
    * in the viewport during the animation, making it safe to adjust the rest of
@@ -129,13 +140,17 @@ var SettingsSectionElement = Polymer({
 
     var animation =
         this.animateCard_('fixed', startTop, endTop, startHeight, endHeight);
-    animation.finished.then(function() {
-      this.classList.add('expanded');
-    }.bind(this), function() {}).then(function() {
-      // Unset these changes whether the animation finished or canceled.
-      this.classList.remove('expanding');
-      this.style.height = '';
-    }.bind(this));
+    animation.finished
+        .then(
+            function() {
+              this.classList.add('expanded');
+            }.bind(this),
+            function() {})
+        .then(function() {
+          // Unset these changes whether the animation finished or canceled.
+          this.classList.remove('expanding');
+          this.style.height = '';
+        }.bind(this));
     return animation;
   },
 
@@ -206,13 +221,17 @@ var SettingsSectionElement = Polymer({
     this.$.card.style.height = '';
     this.$.card.style.top = '';
 
-    animation.finished.then(function() {
-      this.classList.remove('expanded');
-    }.bind(this), function() {}).then(function() {
-      // The card now determines the section's height automatically.
-      this.style.height = '';
-      this.classList.remove('collapsing');
-    }.bind(this));
+    animation.finished
+        .then(
+            function() {
+              this.classList.remove('expanded');
+            }.bind(this),
+            function() {})
+        .then(function() {
+          // The card now determines the section's height automatically.
+          this.style.height = '';
+          this.classList.remove('collapsing');
+        }.bind(this));
     return animation;
   },
 
@@ -244,7 +263,7 @@ var SettingsSectionElement = Polymer({
       height: endHeight,
     };
 
-    var options = /** @type {!KeyframeEffectOptions} */({
+    var options = /** @type {!KeyframeEffectOptions} */ ({
       duration: settings.animation.Timing.DURATION,
       easing: settings.animation.Timing.EASING,
     });
diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html b/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html
index 2aeaec78fef..f427d98fff7 100644
--- a/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html
+++ b/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html
@@ -3,7 +3,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="../icons.html">
@@ -19,10 +19,6 @@
         padding-bottom: 60px;
       }
 
-      :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] {
-        transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
-      }
-
       #headerLine {
         min-height: 40px;
         padding-bottom: 12px;
@@ -39,7 +35,7 @@
         width: var(--cr-icon-ripple-size);
       }
 
-      paper-icon-button {
+      button[is='paper-icon-button-light'] {
         /* Centers the ripple on the icon with appropriate margin on right. */
         -webkit-margin-end: 10px;
         -webkit-margin-start: -10px;
@@ -62,9 +58,9 @@
       }
     </style>
     <div class="settings-box first" id="headerLine">
-      <paper-icon-button icon="settings:arrow-back" on-tap="onTapBack_"
-          aria-label="$i18n{back}">
-      </paper-icon-button>
+      <button is="paper-icon-button-light" on-tap="onTapBack_"
+          aria-label="$i18n{back}" class="icon-arrow-back">
+      </button>
       <h1>[[pageTitle]]</h1>
       <content select=".subpage-title-extra"></content>
       <template is="dom-if" if="[[learnMoreUrl]]">
@@ -83,7 +79,7 @@
         <paper-spinner active></paper-spinner>
       </template>
     </div>
-    <content></content>
+    <slot></slot>
   </template>
   <script src="settings_subpage.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_subpage_search.html b/chromium/chrome/browser/resources/settings/settings_page/settings_subpage_search.html
index 154449346fd..106131e4889 100644
--- a/chromium/chrome/browser/resources/settings/settings_page/settings_subpage_search.html
+++ b/chromium/chrome/browser/resources/settings/settings_page/settings_subpage_search.html
@@ -46,6 +46,10 @@
         -webkit-appearance: none;
       }
 
+      input[placeholder] {
+        text-overflow: ellipsis;
+      }
+
       #searchInput {
         font-size: 92.3076923%;  /* To 12px from 13px. */
         min-height: 24px;
@@ -68,7 +72,7 @@
     <iron-icon id="searchIcon" icon="cr:search"></iron-icon>
     <paper-input-container no-label-float>
       <input id="searchInput" type="search" on-search="onSearchTermSearch"
-          on-input="onSearchTermInput" aria-labelledby="prompt" incremental
+          on-input="onSearchTermInput" aria-label$="[[label]]" incremental
           autofocus$="[[autofocus]]" placeholder="[[label]]">
       <button suffix is="paper-icon-button-light" id="clearSearch"
           class="icon-cancel" on-tap="onTapClear_" title="[[clearLabel]]"
diff --git a/chromium/chrome/browser/resources/settings/settings_resources.grd b/chromium/chrome/browser/resources/settings/settings_resources.grd
index 2a4bf3065e5..0ae60143c73 100644
--- a/chromium/chrome/browser/resources/settings/settings_resources.grd
+++ b/chromium/chrome/browser/resources/settings/settings_resources.grd
@@ -250,6 +250,10 @@
       <structure name="IDR_SETTINGS_CR_SETTINGS_PAGE_CSS_HTML"
                  file="settings_page_css.html"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_CR_SETTINGS_ICONS_CSS_HTML"
+                 file="settings_icons_css.html"
+                 flattenhtml="true"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_MAIN_PAGE_BEHAVIOR_HTML"
                  file="settings_page/main_page_behavior.html"
                  type="chrome_html" />
@@ -354,6 +358,22 @@
                    file="certificate_manager_page/certificates_error_dialog.html"
                    type="chrome_html" />
       </if>
+      <if expr="is_win">
+        <structure name="IDR_SETTINGS_CHROME_CLEANUP_PROXY_HTML"
+                   file="chrome_cleanup_page/chrome_cleanup_proxy.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CHROME_CLEANUP_PROXY_JS"
+                   file="chrome_cleanup_page/chrome_cleanup_proxy.js"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CHROME_CLEANUP_PAGE_HTML"
+                   file="chrome_cleanup_page/chrome_cleanup_page.html"
+                   type="chrome_html"
+                   preprocess="true" />
+        <structure name="IDR_SETTINGS_CHROME_CLEANUP_PAGE_JS"
+                   file="chrome_cleanup_page/chrome_cleanup_page.js"
+                   type="chrome_html"
+                   preprocess="true" />
+      </if>
       <structure name="IDR_SETTINGS_CLEAR_BROWSING_DATA_BROWSER_PROXY_HTML"
                  file="clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html"
                  type="chrome_html" />
@@ -545,6 +565,13 @@
         <structure name="IDR_SETTINGS_DEVICE_LAYOUT_BEHAVIOR_JS"
                    file="device_page/layout_behavior.js"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_DEVICE_NIGHT_LIGHT_SLIDER_HTML"
+                   file="device_page/night_light_slider.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_DEVICE_NIGHT_LIGHT_SLIDER_JS"
+                   file="device_page/night_light_slider.js"
+                   type="chrome_html" />
+
       </if>
       <structure name="IDR_SETTINGS_DIRECTION_DELEGATE_HTML"
                  file="direction_delegate.html"
@@ -791,6 +818,9 @@
                  preprocess="true"
                  type="chrome_html" />
       <if expr="chromeos">
+        <structure name="IDR_SETTINGS_CUPS_PRINTER_SHARED_CSS_HTML"
+                   file="printing_page/cups_printer_shared_css.html"
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_CUPS_PRINTING_PAGE_HTML"
                    file="printing_page/cups_printers.html"
                    type="chrome_html" />
@@ -809,11 +839,17 @@
         <structure name="IDR_SETTINGS_CUPS_PRINTERS_LIST_JS"
                    file="printing_page/cups_printers_list.js"
                    type="chrome_html" />
-        <structure name="IDR_SETTINGS_CUPS_PRINTER_DETAILS_HTML"
-                   file="printing_page/cups_printer_details_page.html"
+        <structure name="IDR_SETTINGS_CUPS_SET_MANUFACTURER_MODEL_BEHAVIOR_HTML"
+                   file="printing_page/cups_set_manufacturer_model_behavior.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CUPS_SET_MANUFACTURER_MODEL_BEHAVIOR_JS"
+                   file="printing_page/cups_set_manufacturer_model_behavior.js"
                    type="chrome_html" />
-        <structure name="IDR_SETTINGS_CUPS_PRINTER_DETAILS_JS"
-                   file="printing_page/cups_printer_details_page.js"
+        <structure name="IDR_SETTINGS_CUPS_EDIT_PRINTER_DIALOG_HTML"
+                   file="printing_page/cups_edit_printer_dialog.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CUPS_EDIT_PRINTER_DIALOG_JS"
+                   file="printing_page/cups_edit_printer_dialog.js"
                    type="chrome_html" />
         <structure name="IDR_SETTINGS_CUPS_ADD_PRINTER_DIALOG_HTML"
                    file="printing_page/cups_add_printer_dialog.html"
@@ -834,6 +870,13 @@
       <structure name="IDR_SETTINGS_CLOUD_PRINTING_PAGE_JS"
                  file="printing_page/cloud_printers.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_PAGE_VISIBILITY_HTML"
+                 file="page_visibility.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_PAGE_VISIBILITY_JS"
+                 file="page_visibility.js"
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_SETTINGS_PDF_DOCUMENTS_HTML"
                  file="site_settings/pdf_documents.html"
                  type="chrome_html" />
@@ -983,9 +1026,28 @@
                  type="chrome_html"
                  preprocess="true"
                  allowexternalscript="true" />
+      <if expr="chromeos">
+        <structure name="IDR_SETTINGS_GOOGLE_ASSISTANT_PAGE_GOOGLE_ASSISTANT_PAGE_JS"
+                   file="google_assistant_page/google_assistant_page.js"
+                   type="chrome_html"
+                   allowexternalscript="true"/>
+        <structure name="IDR_SETTINGS_GOOGLE_ASSISTANT_PAGE_GOOGLE_ASSISTANT_PAGE_HTML"
+                   file="google_assistant_page/google_assistant_page.html"
+                   type="chrome_html"
+                   allowexternalscript="true" />
+        <structure name="IDR_SETTINGS_GOOGLE_ASSISTANT_PAGE_GOOGLE_ASSISTANT_BROWSER_PROXY_JS"
+                   file="google_assistant_page/google_assistant_browser_proxy.js"
+                   type="chrome_html"
+                   allowexternalscript="true" />
+        <structure name="IDR_SETTINGS_GOOGLE_ASSISTANT_PAGE_GOOGLE_ASSISTANT_BROWSER_PROXY_HTML"
+                   file="google_assistant_page/google_assistant_browser_proxy.html"
+                   type="chrome_html"
+                   allowexternalscript="true" />
+      </if>
       <structure name="IDR_SETTINGS_SEARCH_PAGE_JS"
                  file="search_page/search_page.js"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_SETTINGS_SEARCH_PAGE_HTML"
                  file="search_page/search_page.html"
                  type="chrome_html"
@@ -1061,6 +1123,12 @@
                    type="chrome_html"
                    preprocess="true"
                    allowexternalscript="true" />
+        <structure name="IDR_SETTINGS_ANDROID_SETTINGS_ELEMENT_HTML"
+                   file="android_apps_page/android_settings_element.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_ANDROID_SETTINGS_ELEMENT_JS"
+                   file="android_apps_page/android_settings_element.js"
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_DIALOG_HTML"
                    file="bluetooth_page/bluetooth_device_dialog.html"
                    type="chrome_html" />
@@ -1124,6 +1192,12 @@
         <structure name="IDR_SETTINGS_INTERNET_SUBPAGE_JS"
                    file="internet_page/internet_subpage.js"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_MULTIDEVICE_PAGE_HTML"
+                   file="multidevice_page/multidevice_page.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_MULTIDEVICE_PAGE_JS"
+                   file="multidevice_page/multidevice_page.js"
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_NETWORK_APNLIST_HTML"
                    file="internet_page/network_apnlist.html"
                    type="chrome_html" />
@@ -1202,14 +1276,6 @@
         <structure name="IDR_SETTINGS_TETHER_CONNECTION_DIALOG_JS"
                    file="internet_page/tether_connection_dialog.js"
                    type="chrome_html" />
-        <structure name="IDR_SETTINGS_PEOPLE_PAGE_CAMERA_HTML"
-                   file="people_page/camera.html"
-                   type="chrome_html"
-                   preprocess="true"
-                   allowexternalscript="true" />
-        <structure name="IDR_SETTINGS_PEOPLE_PAGE_CAMERA_JS"
-                   file="people_page/camera.js"
-                   type="chrome_html" />
         <structure name="IDR_SETTINGS_PEOPLE_PAGE_CHANGE_PICTURE_HTML"
                    file="people_page/change_picture.html"
                    type="chrome_html"
diff --git a/chromium/chrome/browser/resources/settings/settings_shared_css.html b/chromium/chrome/browser/resources/settings/settings_shared_css.html
index 917ba17c694..279c57dfbe0 100644
--- a/chromium/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chromium/chrome/browser/resources/settings/settings_shared_css.html
@@ -1,10 +1,19 @@
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="settings_icons_css.html">
 <link rel="import" href="settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
-    <style include="cr-shared-style">
+    <style include="settings-icons paper-button-style cr-shared-style">
+      /* Prevent action-links from being selected to avoid accidental
+       * selection when trying to click it. */
+      a[is=action-link] {
+        -webkit-user-select: none;
+      }
+
       /* Use <h2> as the "sub-header" mentioned in the UX design docs. */
       h2 {
         align-items: center;
@@ -27,44 +36,11 @@
        --iron-icon-fill-color: var(--google-green-500);
       }
 
-      paper-icon-button {
-        -webkit-margin-end: var(--cr-icon-ripple-margin);
-        -webkit-margin-start: 16px;
-        color: var(--paper-grey-600);
-        flex-shrink: 0;
-      }
-
-      .separator + button[is='paper-icon-button-light'],
-      .separator + paper-icon-button {
-        -webkit-margin-start: var(--cr-icon-ripple-margin));
-      }
-
-      .list-item paper-icon-button {
-        /* Workaround iron-list cutting off ripples on paper-icon-buttons.
-         * TODO(dschuyler): Can the end margin be done differently to allow for
-         * ripples to look like they are overlapping the margin. */
-        -webkit-margin-end: 0;
-      }
-
-      /* See notes in .primary-button.
-       * TODO(dschuyler): Remove unnecessary .secondary-button references. */
-      paper-button {
-        --paper-button: {
-          -webkit-padding-end: var(--settings-button-edge-spacing);
-          -webkit-padding-start: var(--settings-button-edge-spacing);
-          color: var(--paper-grey-600);
-          font-weight: 500;
-          min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
-          text-decoration: none;
-        };
-        --paper-button-flat-keyboard-focus: {
-          background: rgba(0, 0, 0, .12);
-        };
-        flex-shrink: 0;
-        height: 36px;
-        margin: 0;
+      .separator + button[is='paper-icon-button-light'] {
+        -webkit-margin-start: var(--cr-icon-ripple-margin);
       }
 
+      /* For "Advanced" toggle button. */
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
       }
@@ -72,7 +48,7 @@
       /* If a button is at the end of the row, shift it to overlap the end of
        * the row. */
       .settings-box paper-button:last-of-type {
-        -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-end: calc(var(--cr-button-edge-spacing) * -1);
       }
 
       /* Special case for buttons inside of toggle-buttons. */
@@ -87,30 +63,19 @@
 
       /* Adjust the margin between the separator and the first button. */
       .settings-box .separator + paper-button {
-        -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
       }
 
       /* There are two settings button styles, .primary-button and normal
        * buttons. The primary is the action button (e.g. "edit", "delete")
        * while the normal (secondary-button) is often a "Cancel" button. */
-      .primary-button {
-        --paper-button: {
-          -webkit-padding-end: var(--settings-button-edge-spacing);
-          -webkit-padding-start: var(--settings-button-edge-spacing);
-          font-weight: 500;
-          text-align: start;
-        };
+      .primary-button:not([disabled]) {
         --paper-button-flat-keyboard-focus: {
           background: rgba(51, 103, 214, .12);  /* --google-blue-700 */
         };
         color: var(--google-blue-500);
       }
 
-      .primary-button[disabled] {
-        background: none;
-        color: var(--paper-grey-600);
-      }
-
       paper-toggle-button {
         @apply(--settings-actionable);
         height: var(--settings-row-min-height);
@@ -259,16 +224,16 @@
         align-items: center;
         border-top: var(--settings-separator-line);
         display: flex;
-        min-height: var(--settings-box-min-height);
+        min-height: var(--settings-row-min-height);
         padding: 0 var(--settings-box-row-padding);
       }
 
       .settings-box.two-line {
-        min-height: var(--settings-box-two-line-min-height);
+        min-height: var(--settings-row-two-line-min-height);
       }
 
       .settings-box.three-line {
-        min-height: var(--settings-box-three-line-min-height);
+        min-height: var(--settings-row-three-line-min-height);
       }
 
       /* We use an explicit tag to remove the top border, rather than a
@@ -346,6 +311,17 @@
         outline: none;
       }
 
+      /* Prevent icon-button's ripples from fighting with potential scrollbars.
+       * Also apply to all iron-lists to align the buttons across them all.*/
+      [scrollable],
+      iron-list,
+      .list-item {
+        --cr-paper-icon-button-margin: {
+          -webkit-margin-end: 0;
+          -webkit-margin-start: var(--cr-icon-button-margin-start);
+        };
+      }
+
       /* Helper for a list frame to automatically avoid the separator line. */
       .vertical-list > *:not(:first-of-type) {
         border-top: var(--settings-separator-line);
@@ -384,25 +360,28 @@
       }
 
       .search-bubble {
+        /* RGB value matches var(--paper-yellow-500). */
+        --search-bubble-color: rgba(255, 235, 59, 0.9);
         position: absolute;
         z-index: 1;
       }
 
       .search-bubble-innards {
         align-items: center;
-        background-color: var(--paper-yellow-500);
+        background-color: var(--search-bubble-color);
         border-radius: 2px;
+        max-width: 100px;
+        min-width: 64px;
         padding: 4px 10px;
         text-align: center;
-        width: 100px;
       }
 
       /* Provides the arrow which points at the anchor element. */
       .search-bubble-innards::after {
-        background-color: var(--paper-yellow-500);
+        background-color: var(--search-bubble-color);
         content: '';
         height: 10px;
-        left: 55px;
+        left: calc(50% - 5px);
         position: absolute;
         top: -5px;
         transform: rotate(-45deg);
diff --git a/chromium/chrome/browser/resources/settings/settings_ui/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/settings_ui/compiled_resources2.gyp
index 3b836f05070..4000384e577 100644
--- a/chromium/chrome/browser/resources/settings/settings_ui/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/settings_ui/compiled_resources2.gyp
@@ -6,22 +6,18 @@
     {
       'target_name': 'settings_ui',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_drawer/compiled_resources2.gyp:cr_drawer',
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_toolbar/compiled_resources2.gyp:cr_toolbar',
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_toolbar/compiled_resources2.gyp:cr_toolbar_search_field',
-        '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_indicator_behavior',
         '../compiled_resources2.gyp:direction_delegate',
         '../compiled_resources2.gyp:global_scroll_target_behavior',
         '../prefs/compiled_resources2.gyp:prefs',
         '../settings_main/compiled_resources2.gyp:settings_main',
-        'settings_ui_types',
+        '../compiled_resources2.gyp:page_visibility'
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
-    {
-      'target_name': 'settings_ui_types',
-      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
-    },
   ],
 }
diff --git a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 131f4e61b08..b66626bf851 100644
--- a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -11,12 +11,13 @@
 <link rel="import" href="../settings_main/settings_main.html">
 <link rel="import" href="../settings_menu/settings_menu.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../page_visibility.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_vars_css.html">
 
 <if expr="chromeos">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 </if>
 
 <dom-module id="settings-ui">
@@ -24,7 +25,7 @@
     <style include="settings-shared">
       :host {
         @apply(--layout-fit);
-        -webkit-user-select: none;
+        -webkit-user-select: text;
         color: var(--primary-text-color);
         display: flex;
         flex-direction: column;
@@ -32,10 +33,6 @@
         overflow: hidden;  /* Prevent double scroll bar bugs. */
       }
 
-      .drawer-header {
-        outline: none;
-      }
-
       .last {
         display: flex;
         justify-content: flex-end;
@@ -92,12 +89,14 @@
         role="none"
         show-menu>
     </cr-toolbar>
-    <dialog id="drawer" is="cr-drawer" on-close="onMenuClosed_">
-      <div class="drawer-header" tabindex="-1">$i18n{settings}</div>
+    <dialog id="drawer" is="cr-drawer" on-close="onMenuClosed_"
+        heading="$i18n{settings}">
       <div class="drawer-content">
         <template is="dom-if" id="drawerTemplate">
           <settings-menu page-visibility="[[pageVisibility_]]"
               show-android-apps="[[showAndroidApps_]]"
+              show-multidevice="[[showMultidevice_]]"
+              have-play-store-app="[[havePlayStoreApp_]]"
               on-iron-activate="onIronActivate_"
               advanced-opened="{{advancedOpened_}}">
           </settings-menu>
@@ -112,6 +111,8 @@
           toolbar-spinner-active="{{toolbarSpinnerActive_}}"
           page-visibility="[[pageVisibility_]]"
           show-android-apps="[[showAndroidApps_]]"
+          show-multidevice="[[showMultidevice_]]"
+          have-play-store-app="[[havePlayStoreApp_]]"
           advanced-toggle-expanded="{{advancedOpened_}}">
       </settings-main>
     </div>
diff --git a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js
index 09c363c0d87..351433de1ff 100644
--- a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js
+++ b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js
@@ -11,8 +11,9 @@
  *    <settings-ui prefs="{{prefs}}"></settings-ui>
  */
 cr.exportPath('settings');
-assert(!settings.defaultResourceLoaded,
-       'settings_ui.js run twice. You probably have an invalid import.');
+assert(
+    !settings.defaultResourceLoaded,
+    'settings_ui.js run twice. You probably have an invalid import.');
 /** Global defined when the main Settings script runs. */
 settings.defaultResourceLoaded = true;
 
@@ -48,17 +49,20 @@ Polymer({
     },
 
     /**
-     * Dictionary defining page visibility.
-     * This is only set when in guest mode. All pages are visible when not set
-     * because polymer only notifies after a property is set.
      * @private {!GuestModePageVisibility}
      */
-    pageVisibility_: Object,
+    pageVisibility_: {type: Object, value: settings.pageVisibility},
 
     /** @private */
     showAndroidApps_: Boolean,
 
     /** @private */
+    showMultidevice_: Boolean,
+
+    /** @private */
+    havePlayStoreApp_: Boolean,
+
+    /** @private */
     lastSearchQuery_: {
       type: String,
       value: '',
@@ -98,18 +102,18 @@ Polymer({
           loadTimeData.getString('controlledSettingRecommendedMatches'),
       controlledSettingRecommendedDiffers:
           loadTimeData.getString('controlledSettingRecommendedDiffers'),
-// <if expr="chromeos">
+      // <if expr="chromeos">
       controlledSettingShared:
           loadTimeData.getString('controlledSettingShared'),
       controlledSettingOwner: loadTimeData.getString('controlledSettingOwner'),
-// </if>
+      // </if>
     };
 
-// <if expr="chromeos">
+    // <if expr="chromeos">
     CrOncStrings = {
       OncTypeCellular: loadTimeData.getString('OncTypeCellular'),
-      OncTypeTether: loadTimeData.getString('OncTypeTether'),
       OncTypeEthernet: loadTimeData.getString('OncTypeEthernet'),
+      OncTypeTether: loadTimeData.getString('OncTypeTether'),
       OncTypeVPN: loadTimeData.getString('OncTypeVPN'),
       OncTypeWiFi: loadTimeData.getString('OncTypeWiFi'),
       OncTypeWiMAX: loadTimeData.getString('OncTypeWiMAX'),
@@ -123,41 +127,23 @@ Polymer({
           loadTimeData.getString('networkListItemNotConnected'),
       vpnNameTemplate: loadTimeData.getString('vpnNameTemplate'),
     };
-// </if>
-
-    if (loadTimeData.getBoolean('isGuest')) {
-      this.pageVisibility_ = {
-        passwordsAndForms: false,
-        people: false,
-        onStartup: false,
-        reset: false,
-// <if expr="not chromeos">
-        appearance: false,
-        defaultBrowser: false,
-        advancedSettings: false,
-// </if>
-// <if expr="chromeos">
-        appearance: {
-          setWallpaper: false,
-          setTheme: false,
-          homeButton: false,
-          bookmarksBar: false,
-          pageZoom: false,
-        },
-        advancedSettings: true,
-        privacy: {
-          searchPrediction: false,
-          networkPrediction: false,
-        },
-        downloads: {
-          googleDrive: false,
-        },
-// </if>
-      };
-    }
+    // </if>
+
+    this.showAndroidApps_ = loadTimeData.valueExists('androidAppsVisible') &&
+        loadTimeData.getBoolean('androidAppsVisible');
+    this.showMultidevice_ =
+        loadTimeData.valueExists('enableMultideviceSettings') &&
+        loadTimeData.getBoolean('enableMultideviceSettings');
+    this.havePlayStoreApp_ = loadTimeData.valueExists('havePlayStoreApp') &&
+        loadTimeData.getBoolean('havePlayStoreApp');
+
+    this.addEventListener('show-container', function() {
+      this.$.container.style.visibility = 'visible';
+    }.bind(this));
 
-    this.showAndroidApps_ = loadTimeData.valueExists('androidAppsAllowed') &&
-        loadTimeData.getBoolean('androidAppsAllowed');
+    this.addEventListener('hide-container', function() {
+      this.$.container.style.visibility = 'hidden';
+    }.bind(this));
   },
 
   /** @private {?IntersectionObserver} */
@@ -179,9 +165,8 @@ Polymer({
 
     // Setup drop shadow logic.
     var callback = function(entries) {
-      assert(entries.length == 1);
       this.$.dropShadow.classList.toggle(
-          'has-shadow', entries[0].intersectionRatio == 0);
+          'has-shadow', entries[entries.length - 1].intersectionRatio == 0);
     }.bind(this);
 
     this.intersectionObserver_ = new IntersectionObserver(
@@ -209,8 +194,8 @@ Polymer({
     this.lastSearchQuery_ = urlSearchQuery;
 
     var toolbar = /** @type {!CrToolbarElement} */ (this.$$('cr-toolbar'));
-    var searchField = /** @type {CrToolbarSearchFieldElement} */ (
-        toolbar.getSearchField());
+    var searchField =
+        /** @type {CrToolbarSearchFieldElement} */ (toolbar.getSearchField());
 
     // If the search was initiated by directly entering a search URL, need to
     // sync the URL parameter to the textbox.
@@ -228,8 +213,8 @@ Polymer({
    * @private
    */
   onRefreshPref_: function(e) {
-    var prefName = /** @type {string} */(e.detail);
-    return /** @type {SettingsPrefsElement} */(this.$.prefs).refresh(prefName);
+    var prefName = /** @type {string} */ (e.detail);
+    return /** @type {SettingsPrefsElement} */ (this.$.prefs).refresh(prefName);
   },
 
   /**
@@ -247,7 +232,7 @@ Polymer({
       return;
 
     settings.navigateTo(
-        settings.Route.BASIC,
+        settings.routes.BASIC,
         query.length > 0 ?
             new URLSearchParams('search=' + encodeURIComponent(query)) :
             undefined,
@@ -255,7 +240,7 @@ Polymer({
   },
 
   /**
-   * @param {Event} event
+   * @param {!Event} event
    * @private
    */
   onIronActivate_: function(event) {
@@ -281,7 +266,6 @@ Polymer({
 
   /** @private */
   directionDelegateChanged_: function() {
-    this.$.drawer.align = this.directionDelegate.isRtl() ?
-        'right' : 'left';
+    this.$.drawer.align = this.directionDelegate.isRtl() ? 'right' : 'left';
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui_types.js b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui_types.js
deleted file mode 100644
index 4727c62031c..00000000000
--- a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui_types.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2016 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 Closure typedefs for settings_ui.
- */
-
-/**
- * Specifies page visibility in guest mode in cr and cros.
- * @typedef {{
- *   advancedSettings: (boolean|undefined),
- *   appearance: (boolean|undefined|AppearancePageVisibility),
- *   dateTime: (boolean|undefined|DateTimePageVisibility),
- *   defaultBrowser: (boolean|undefined),
- *   downloads: (undefined|DownloadsPageVisibility),
- *   onStartup: (boolean|undefined),
- *   passwordsAndForms: (boolean|undefined),
- *   people: (boolean|undefined),
- *   privacy: (undefined|PrivacyPageVisibility),
- *   reset:(boolean|undefined),
- * }}
- */
-var GuestModePageVisibility;
-
-/**
- * @typedef {{
- *   bookmarksBar: boolean,
- *   homeButton: boolean,
- *   pageZoom: boolean,
- *   setTheme: boolean,
- *   setWallpaper: boolean,
- * }}
- */
-var AppearancePageVisibility;
-
-/**
- * @typedef {{
- *   timeZoneSelector: boolean,
- * }}
- */
-var DateTimePageVisibility;
-
-/**
- * @typedef {{
- *   googleDrive: boolean
- * }}
- */
-var DownloadsPageVisibility;
-
-/**
- * @typedef {{
- *   networkPrediction: boolean,
- *   searchPrediction: boolean,
- * }}
- */
-var PrivacyPageVisibility;
-
-// TODO(mahmadi): Dummy code for closure compiler to process this file.
-(function foo() {})();
diff --git a/chromium/chrome/browser/resources/settings/settings_vars_css.html b/chromium/chrome/browser/resources/settings/settings_vars_css.html
index d6f3e6842ae..153aa5ea44c 100644
--- a/chromium/chrome/browser/resources/settings/settings_vars_css.html
+++ b/chromium/chrome/browser/resources/settings/settings_vars_css.html
@@ -13,7 +13,6 @@
      * UX design (bettes@). */
 
     --settings-actionable: var(--cr-actionable);
-    --settings-button-edge-spacing: 12px;
 
     --settings-box-row-padding: 20px;
     --settings-box-row-indent: calc(
@@ -37,15 +36,9 @@
     /* TODO (scottchen): re-implement with paddings instead; */
     /* These are used for row items such as radio buttons, check boxes, list
      * items etc. */
-    --settings-row-min-height: 45px;
+    --settings-row-min-height: 48px;
     --settings-row-two-line-min-height: 64px;
-
-    /* TODO (scottchen): re-implement with paddings instead; */
-    /* These are used for the settings-box containers, which may contain one or
-     * more "row items". */
-    --settings-box-min-height: 45px;
-    --settings-box-two-line-min-height: 64px;
-    --settings-box-three-line-min-height: 84px;
+    --settings-row-three-line-min-height: 84px;
 
     --settings-text-elide: {
       overflow: hidden;
@@ -94,16 +87,7 @@
     --iron-icon-height: var(--cr-icon-size);
     --iron-icon-width: var(--cr-icon-size);
     --paper-checkbox-label-color: inherit;
-    --paper-dialog-color: inherit;
-
-    --paper-icon-button: {
-      /**
-       * This makes the icons 20px (in combination with --cr-icon-ripple-size),
-       * since paper-icon-button>iron-icon width and height are hard-coded to
-       * 100%.
-       */
-      padding: var(--cr-icon-ripple-padding);
-    };
+
     --paper-input-container-focus-color: var(--google-blue-500);
     --paper-input-container-input: {
       color: inherit;
diff --git a/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html
index b8c97a3ce99..7e0080cc23d 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html
@@ -22,8 +22,8 @@
       }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div class="title">$i18n{addSiteTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{addSiteTitle}</div>
+      <div class="body" slot="body">
         <paper-input id="site" always-float-label label="$i18n{addSite}"
             placeholder="$i18n{addSiteExceptionPlaceholder}"
             value="{{site_}}" on-input="validate_"
@@ -33,7 +33,7 @@
           $i18n{incognitoSiteOnly}
         </paper-checkbox>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js
index 91ceb616f6f..c61483a265f 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js
@@ -21,7 +21,7 @@ Polymer({
 
     /**
      * Whether this is about an Allow, Block, SessionOnly, or other.
-     * @type {settings.PermissionValues}
+     * @type {settings.ContentSetting}
      */
     contentSetting: String,
 
@@ -47,7 +47,7 @@ Polymer({
       this.$.incognito.checked = false;
       this.showIncognitoSessionOnly_ = hasIncognito &&
           !loadTimeData.getBoolean('isGuest') &&
-          this.contentSetting != settings.PermissionValues.SESSION_ONLY;
+          this.contentSetting != settings.ContentSetting.SESSION_ONLY;
     }.bind(this));
     this.browserProxy.updateIncognitoStatus();
     this.$.dialog.showModal();
diff --git a/chromium/chrome/browser/resources/settings/site_settings/all_sites.html b/chromium/chrome/browser/resources/settings/site_settings/all_sites.html
index d7e4ec618a8..47fa36b5184 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/all_sites.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/all_sites.html
@@ -11,10 +11,6 @@
       :host {
         display: block;
       }
-
-      .selectable {
-        -webkit-user-select: text;
-      }
     </style>
     <div class="list-frame" hidden$="[[sites.length]]">
       <div class="list-item secondary">$i18n{noSitesAdded}</div>
@@ -27,7 +23,7 @@
             <div class="favicon-image"
                 style$="[[computeSiteIcon(item.origin)]]">
             </div>
-            <div class="middle no-min-width selectable text-elide"
+            <div class="middle no-min-width text-elide"
                 id="displayName">
               [[item.displayName]]
             </div>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/all_sites.js b/chromium/chrome/browser/resources/settings/site_settings/all_sites.js
index 4690c783f74..3ac0f36bbc7 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/all_sites.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/all_sites.js
@@ -66,7 +66,7 @@ Polymer({
    */
   onOriginTap_: function(event) {
     settings.navigateTo(
-        settings.Route.SITE_SETTINGS_SITE_DETAILS,
+        settings.routes.SITE_SETTINGS_SITE_DETAILS,
         new URLSearchParams('site=' + event.model.item.origin));
   },
 
diff --git a/chromium/chrome/browser/resources/settings/site_settings/category_default_setting.js b/chromium/chrome/browser/resources/settings/site_settings/category_default_setting.js
index 4a7e80c4f10..aa82e8d568a 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/category_default_setting.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/category_default_setting.js
@@ -31,7 +31,7 @@ Polymer({
     controlParams_: {
       type: Object,
       value: function() {
-        return /** @type {chrome.settingsPrivate.PrefObject} */({});
+        return /** @type {chrome.settingsPrivate.PrefObject} */ ({});
       },
     },
 
@@ -46,7 +46,7 @@ Polymer({
     priorDefaultContentSetting_: {
       type: Object,
       value: function() {
-        return /** @type {DefaultContentSetting} */({});
+        return /** @type {DefaultContentSetting} */ ({});
       },
     },
 
@@ -58,7 +58,7 @@ Polymer({
     subControlParams_: {
       type: Object,
       value: function() {
-        return /** @type {chrome.settingsPrivate.PrefObject} */({});
+        return /** @type {chrome.settingsPrivate.PrefObject} */ ({});
       },
     },
   },
@@ -71,8 +71,8 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.addWebUIListener('contentSettingCategoryChanged',
-        this.onCategoryChanged_.bind(this));
+    this.addWebUIListener(
+        'contentSettingCategoryChanged', this.onCategoryChanged_.bind(this));
   },
 
   /** @return {boolean} */
@@ -86,19 +86,18 @@ Polymer({
    */
   onChangePermissionControl_: function() {
     switch (this.category) {
+      case settings.ContentSettingsTypes.ADS:
       case settings.ContentSettingsTypes.BACKGROUND_SYNC:
       case settings.ContentSettingsTypes.IMAGES:
       case settings.ContentSettingsTypes.JAVASCRIPT:
       case settings.ContentSettingsTypes.POPUPS:
       case settings.ContentSettingsTypes.PROTOCOL_HANDLERS:
-      case settings.ContentSettingsTypes.SUBRESOURCE_FILTER:
 
         // "Allowed" vs "Blocked".
         this.browserProxy.setDefaultValueForContentType(
             this.category,
-            this.categoryEnabled ?
-                settings.PermissionValues.ALLOW :
-                settings.PermissionValues.BLOCK);
+            this.categoryEnabled ? settings.ContentSetting.ALLOW :
+                                   settings.ContentSetting.BLOCK);
         break;
       case settings.ContentSettingsTypes.AUTOMATIC_DOWNLOADS:
       case settings.ContentSettingsTypes.CAMERA:
@@ -110,28 +109,27 @@ Polymer({
         // "Ask" vs "Blocked".
         this.browserProxy.setDefaultValueForContentType(
             this.category,
-            this.categoryEnabled ?
-                settings.PermissionValues.ASK :
-                settings.PermissionValues.BLOCK);
+            this.categoryEnabled ? settings.ContentSetting.ASK :
+                                   settings.ContentSetting.BLOCK);
         break;
       case settings.ContentSettingsTypes.COOKIES:
         // This category is tri-state: "Allow", "Block", "Keep data until
         // browser quits".
-        var value = settings.PermissionValues.BLOCK;
+        var value = settings.ContentSetting.BLOCK;
         if (this.categoryEnabled) {
           value = this.subControlParams_.value ?
-              settings.PermissionValues.SESSION_ONLY :
-              settings.PermissionValues.ALLOW;
+              settings.ContentSetting.SESSION_ONLY :
+              settings.ContentSetting.ALLOW;
         }
         this.browserProxy.setDefaultValueForContentType(this.category, value);
         break;
       case settings.ContentSettingsTypes.PLUGINS:
         // This category is tri-state: "Allow", "Block", "Ask before running".
-        var value = settings.PermissionValues.BLOCK;
+        var value = settings.ContentSetting.BLOCK;
         if (this.categoryEnabled) {
           value = this.subControlParams_.value ?
-              settings.PermissionValues.IMPORTANT_CONTENT :
-              settings.PermissionValues.ALLOW;
+              settings.ContentSetting.IMPORTANT_CONTENT :
+              settings.ContentSetting.ALLOW;
         }
         this.browserProxy.setDefaultValueForContentType(this.category, value);
         break;
@@ -169,23 +167,24 @@ Polymer({
     var prefValue = this.computeIsSettingEnabled(update.setting);
     // The controlParams_ must be replaced (rather than just value changes) so
     // that observers will be notified of the change.
-    this.controlParams_ = /** @type {chrome.settingsPrivate.PrefObject} */(
+    this.controlParams_ = /** @type {chrome.settingsPrivate.PrefObject} */ (
         Object.assign({'value': prefValue}, basePref));
 
     var subPrefValue = false;
     if (this.category == settings.ContentSettingsTypes.PLUGINS ||
         this.category == settings.ContentSettingsTypes.COOKIES) {
       if (this.category == settings.ContentSettingsTypes.PLUGINS &&
-          update.setting == settings.PermissionValues.IMPORTANT_CONTENT) {
+          update.setting == settings.ContentSetting.IMPORTANT_CONTENT) {
         subPrefValue = true;
-      } else if (this.category == settings.ContentSettingsTypes.COOKIES &&
-          update.setting == settings.PermissionValues.SESSION_ONLY) {
+      } else if (
+          this.category == settings.ContentSettingsTypes.COOKIES &&
+          update.setting == settings.ContentSetting.SESSION_ONLY) {
         subPrefValue = true;
       }
     }
     // The subControlParams_ must be replaced (rather than just value changes)
     // so that observers will be notified of the change.
-    this.subControlParams_ = /** @type {chrome.settingsPrivate.PrefObject} */(
+    this.subControlParams_ = /** @type {chrome.settingsPrivate.PrefObject} */ (
         Object.assign({'value': subPrefValue}, basePref));
   },
 
@@ -194,25 +193,24 @@ Polymer({
    * @private
    */
   onCategoryChanged_: function() {
-    this.browserProxy
-        .getDefaultValueForContentType(
-          this.category).then(function(defaultValue) {
-            this.updateControlParams_(defaultValue);
-
-            // Flash only shows ALLOW or BLOCK descriptions on the toggle.
-            var setting = defaultValue.setting;
-            if (this.category == settings.ContentSettingsTypes.PLUGINS &&
-                setting == settings.PermissionValues.IMPORTANT_CONTENT) {
-              setting = settings.PermissionValues.ALLOW;
-            } else if (
-                this.category == settings.ContentSettingsTypes.COOKIES &&
-                setting == settings.PermissionValues.SESSION_ONLY) {
-              setting = settings.PermissionValues.ALLOW;
-            }
-            var categoryEnabled = setting != settings.PermissionValues.BLOCK;
-            this.optionLabel_ =
-                categoryEnabled ? this.toggleOnLabel : this.toggleOffLabel;
-          }.bind(this));
+    this.browserProxy.getDefaultValueForContentType(this.category)
+        .then(function(defaultValue) {
+          this.updateControlParams_(defaultValue);
+
+          // Flash only shows ALLOW or BLOCK descriptions on the toggle.
+          var setting = defaultValue.setting;
+          if (this.category == settings.ContentSettingsTypes.PLUGINS &&
+              setting == settings.ContentSetting.IMPORTANT_CONTENT) {
+            setting = settings.ContentSetting.ALLOW;
+          } else if (
+              this.category == settings.ContentSettingsTypes.COOKIES &&
+              setting == settings.ContentSetting.SESSION_ONLY) {
+            setting = settings.ContentSetting.ALLOW;
+          }
+          var categoryEnabled = setting != settings.ContentSetting.BLOCK;
+          this.optionLabel_ =
+              categoryEnabled ? this.toggleOnLabel : this.toggleOffLabel;
+        }.bind(this));
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.html b/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.html
index e5ac51dadb4..ab0925dea92 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.html
@@ -17,19 +17,19 @@
     </style>
     <site-list
         category="[[category]]"
-        category-subtype="[[PermissionValues.BLOCK]]"
+        category-subtype="[[ContentSetting.BLOCK]]"
         category-header="$i18n{siteSettingsBlock}"
         read-only-list="[[readOnlyList]]">
     </site-list>
     <site-list
         category="[[category]]"
-        category-subtype="[[PermissionValues.SESSION_ONLY]]"
+        category-subtype="[[ContentSetting.SESSION_ONLY]]"
         category-header="$i18n{siteSettingsSessionOnly}"
         read-only-list="[[readOnlyList]]">
     </site-list>
     <site-list
         category="[[category]]"
-        category-subtype="[[PermissionValues.ALLOW]]"
+        category-subtype="[[ContentSetting.ALLOW]]"
         category-header="$i18n{siteSettingsAllow}"
         read-only-list="[[readOnlyList]]">
     </site-list>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.js b/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.js
index 0e457fefd77..0d4a2107300 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/category_setting_exceptions.js
@@ -24,6 +24,6 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.PermissionValues = settings.PermissionValues;
+    this.ContentSetting = settings.ContentSetting;
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp
index 653c9fa8717..8130e09241a 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp
+++ b/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp
@@ -195,6 +195,7 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(EXTERNS_GYP):chrome_send',
+        '<(EXTERNS_GYP):settings_private',
         'constants',
         'cookie_tree_node',
       ],
diff --git a/chromium/chrome/browser/resources/settings/site_settings/constants.js b/chromium/chrome/browser/resources/settings/site_settings/constants.js
index ea801eb704d..a494fcb6d0e 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/constants.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/constants.js
@@ -29,20 +29,19 @@ settings.ContentSettingsTypes = {
   MIDI_DEVICES: 'midi-sysex',
   USB_DEVICES: 'usb-chooser-data',
   ZOOM_LEVELS: 'zoom-levels',
-// <if expr="chromeos">
+  // <if expr="chromeos">
   PROTECTED_CONTENT: 'protectedContent',
-// </if>
-  SUBRESOURCE_FILTER: 'subresource-filter',
+  // </if>
+  ADS: 'ads',
 };
 
 /**
- * Contains the possible string values for a given contentSettingsType.
+ * Contains the possible string values for a given ContentSettingsTypes.
+ * This should be kept in sync with the |ContentSetting| enum in
+ * components/content_settings/core/common/content_settings.h
  * @enum {string}
- *
- * TODO(dschuyler): This should be rename as ContentSetting to maintain
- * nomenclature with C++.
  */
-settings.PermissionValues = {
+settings.ContentSetting = {
   DEFAULT: 'default',
   ALLOW: 'allow',
   BLOCK: 'block',
diff --git a/chromium/chrome/browser/resources/settings/site_settings/cookie_info.js b/chromium/chrome/browser/resources/settings/site_settings/cookie_info.js
index ba05b4a2e2c..43056bb906f 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/cookie_info.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/cookie_info.js
@@ -26,44 +26,50 @@ var CookieDataForDisplay;
 // 2) What order to show it in.
 // 3) What user friendly label to prefix the data with.
 /** @const */ var cookieInfo = {
-  'cookie': [['name', 'cookieName'],
-             ['content', 'cookieContent'],
-             ['domain', 'cookieDomain'],
-             ['path', 'cookiePath'],
-             ['sendfor', 'cookieSendFor'],
-             ['accessibleToScript', 'cookieAccessibleToScript'],
-             ['created', 'cookieCreated'],
-             ['expires', 'cookieExpires']],
-  'app_cache': [['manifest', 'appCacheManifest'],
-                ['size', 'localStorageSize'],
-                ['created', 'cookieCreated'],
-                ['accessed', 'cookieLastAccessed']],
-  'database': [['name', 'cookieName'],
-               ['desc', 'webdbDesc'],
-               ['size', 'localStorageSize'],
-               ['modified', 'localStorageLastModified']],
-  'local_storage': [['origin', 'localStorageOrigin'],
-                    ['size', 'localStorageSize'],
-                    ['modified', 'localStorageLastModified']],
-  'indexed_db': [['origin', 'indexedDbOrigin'],
-                 ['size', 'indexedDbSize'],
-                 ['modified', 'indexedDbLastModified']],
-  'file_system': [['origin', 'fileSystemOrigin'],
-                  ['persistent', 'fileSystemPersistentUsage'],
-                  ['temporary', 'fileSystemTemporaryUsage']],
-  'channel_id': [['serverId', 'channelIdServerId'],
-                 ['certType', 'channelIdType'],
-                 ['created', 'channelIdCreated']],
-  'service_worker': [['origin', 'serviceWorkerOrigin'],
-                     ['size', 'serviceWorkerSize'],
-                     ['scopes', 'serviceWorkerScopes']],
-  'cache_storage': [['origin', 'cacheStorageOrigin'],
-                    ['size', 'cacheStorageSize'],
-                    ['modified', 'cacheStorageLastModified']],
+  'cookie': [
+    ['name', 'cookieName'], ['content', 'cookieContent'],
+    ['domain', 'cookieDomain'], ['path', 'cookiePath'],
+    ['sendfor', 'cookieSendFor'],
+    ['accessibleToScript', 'cookieAccessibleToScript'],
+    ['created', 'cookieCreated'], ['expires', 'cookieExpires']
+  ],
+  'app_cache': [
+    ['manifest', 'appCacheManifest'], ['size', 'localStorageSize'],
+    ['created', 'cookieCreated'], ['accessed', 'cookieLastAccessed']
+  ],
+  'database': [
+    ['name', 'cookieName'], ['desc', 'webdbDesc'], ['size', 'localStorageSize'],
+    ['modified', 'localStorageLastModified']
+  ],
+  'local_storage': [
+    ['origin', 'localStorageOrigin'], ['size', 'localStorageSize'],
+    ['modified', 'localStorageLastModified']
+  ],
+  'indexed_db': [
+    ['origin', 'indexedDbOrigin'], ['size', 'indexedDbSize'],
+    ['modified', 'indexedDbLastModified']
+  ],
+  'file_system': [
+    ['origin', 'fileSystemOrigin'], ['persistent', 'fileSystemPersistentUsage'],
+    ['temporary', 'fileSystemTemporaryUsage']
+  ],
+  'channel_id': [
+    ['serverId', 'channelIdServerId'], ['certType', 'channelIdType'],
+    ['created', 'channelIdCreated']
+  ],
+  'service_worker': [
+    ['origin', 'serviceWorkerOrigin'], ['size', 'serviceWorkerSize'],
+    ['scopes', 'serviceWorkerScopes']
+  ],
+  'cache_storage': [
+    ['origin', 'cacheStorageOrigin'], ['size', 'cacheStorageSize'],
+    ['modified', 'cacheStorageLastModified']
+  ],
   'flash_lso': [['domain', 'cookieDomain']],
-  'media_license': [['origin', 'mediaLicenseOrigin'],
-                    ['size', 'mediaLicenseSize'],
-                    ['modified', 'mediaLicenseLastModified']],
+  'media_license': [
+    ['origin', 'mediaLicenseOrigin'], ['size', 'mediaLicenseSize'],
+    ['modified', 'mediaLicenseLastModified']
+  ],
 };
 
 /**
@@ -82,7 +88,7 @@ var getCookieData = function(data) {
     // (in the order determined by |cookieInfo|).
     var key = field[0];
     if (data[key].length > 0) {
-      var entry = /** @type {CookieDataForDisplay} */({
+      var entry = /** @type {CookieDataForDisplay} */ ({
         label: loadTimeData.getString(field[1]),
         content: data[key],
       });
diff --git a/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_behavior.js b/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_behavior.js
index 287622ca3a8..0b540b9c63a 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_behavior.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_behavior.js
@@ -26,8 +26,8 @@ var CookieTreeBehaviorImpl = {
 
   /** @override */
   ready: function() {
-    cr.addWebUIListener('onTreeItemRemoved',
-                        this.onTreeItemRemoved_.bind(this));
+    cr.addWebUIListener(
+        'onTreeItemRemoved', this.onTreeItemRemoved_.bind(this));
     this.rootCookieNode = new settings.CookieTreeNode(null);
   },
 
@@ -43,16 +43,16 @@ var CookieTreeBehaviorImpl = {
       var children = childList.children;
       var prefix = '';
       if (parentId !== null) {
-        this.rootCookieNode.populateChildNodes(parentId,
-            this.rootCookieNode, children);
+        this.rootCookieNode.populateChildNodes(
+            parentId, this.rootCookieNode, children);
         prefix = parentId + ', ';
       }
       var promises = [];
       for (var i = 0; i < children.length; i++) {
         var child = children[i];
         if (child.hasChildren) {
-          promises.push(this.browserProxy.loadCookieChildren(
-              prefix + child.id).then(loadChildrenRecurse.bind(this)));
+          promises.push(this.browserProxy.loadCookieChildren(prefix + child.id)
+                            .then(loadChildrenRecurse.bind(this)));
         }
       }
       return Promise.all(promises);
diff --git a/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_node.js b/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
index 030099b413d..2e27145a167 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
@@ -59,24 +59,21 @@ function getCookieDataCategoryText(dataType, totalUsage) {
 cr.define('settings', function() {
   'use strict';
 
-  /**
-   * @constructor
-   */
-  function CookieTreeNode(data) {
-    /**
-     * The data for this cookie node.
-     * @type {CookieDetails}
-     */
-    this.data = data;
-
-    /**
-     * The child cookie nodes.
-     * @private {!Array<!settings.CookieTreeNode>}
-     */
-    this.children_ = [];
-  }
+  class CookieTreeNode {
+    constructor(data) {
+      /**
+       * The data for this cookie node.
+       * @type {CookieDetails}
+       */
+      this.data = data;
+
+      /**
+       * The child cookie nodes.
+       * @private {!Array<!settings.CookieTreeNode>}
+       */
+      this.children_ = [];
+    }
 
-  CookieTreeNode.prototype = {
     /**
      * Converts a list of cookies and add them as CookieTreeNode children to
      * the given parent node.
@@ -85,12 +82,12 @@ cr.define('settings', function() {
      * @param {!Array<!CookieDetails>} newNodes The list containing the data to
      *     add.
      */
-    addChildNodes: function(parentNode, newNodes) {
+    addChildNodes(parentNode, newNodes) {
       var nodes = newNodes.map(function(x) {
         return new settings.CookieTreeNode(x);
       });
       parentNode.children_ = nodes;
-    },
+    }
 
     /**
      * Looks up a parent node and adds a list of CookieTreeNodes to them.
@@ -101,7 +98,7 @@ cr.define('settings', function() {
          add.
      * @return {boolean} True if the parent node was found.
      */
-    populateChildNodes: function(parentId, startingNode, newNodes) {
+    populateChildNodes(parentId, startingNode, newNodes) {
       for (var i = 0; i < startingNode.children_.length; ++i) {
         if (startingNode.children_[i].data.id == parentId) {
           this.addChildNodes(startingNode.children_[i], newNodes);
@@ -109,12 +106,12 @@ cr.define('settings', function() {
         }
 
         if (this.populateChildNodes(
-            parentId, startingNode.children_[i], newNodes)) {
+                parentId, startingNode.children_[i], newNodes)) {
           return true;
         }
       }
       return false;
-    },
+    }
 
     /**
      * Removes child nodes from a node with a given id.
@@ -123,35 +120,37 @@ cr.define('settings', function() {
      *     from.
      * @param {number} count The number of children to delete.
      */
-    removeByParentId: function(id, firstChild, count) {
+    removeByParentId(id, firstChild, count) {
       var node = id == null ? this : this.fetchNodeById(id, true);
       node.children_.splice(firstChild, count);
-    },
+    }
 
     /**
      * Returns an array of cookies from the current node within the cookie tree.
      * @return {!Array<!CookieDataItem>} The Cookie List.
      */
-    getCookieList: function() {
+    getCookieList() {
       var list = [];
       for (var i = 0; i < this.children_.length; i++) {
         var child = this.children_[i];
         for (var j = 0; j < child.children_.length; j++) {
           var cookie = child.children_[j];
-          list.push({title: cookie.data.title,
-                     id: cookie.data.id,
-                     data: cookie.data});
+          list.push({
+            title: cookie.data.title,
+            id: cookie.data.id,
+            data: cookie.data
+          });
         }
       }
 
       return list;
-    },
+    }
 
     /**
      * Get a summary list of all sites and their stored data.
      * @return {!Array<!CookieDataSummaryItem>} The summary list.
      */
-    getSummaryList: function() {
+    getSummaryList() {
       var list = [];
       for (var i = 0; i < this.children_.length; ++i) {
         var siteEntry = this.children_[i];
@@ -186,13 +185,13 @@ cr.define('settings', function() {
                 dataType, descriptionNode.data.totalUsage);
           }
         }
-        list.push({ site: title, id: id, localData: description });
+        list.push({site: title, id: id, localData: description});
       }
       list.sort(function(a, b) {
         return a.site.localeCompare(b.site);
       });
       return list;
-    },
+    }
 
     /**
      * Fetch a CookieTreeNode by ID.
@@ -200,7 +199,7 @@ cr.define('settings', function() {
      * @param {boolean} recursive Whether to search the children also.
      * @return {settings.CookieTreeNode} The node found, if any.
      */
-    fetchNodeById: function(id, recursive) {
+    fetchNodeById(id, recursive) {
       for (var i = 0; i < this.children_.length; ++i) {
         if (this.children_[i] == null)
           return null;
@@ -213,21 +212,21 @@ cr.define('settings', function() {
         }
       }
       return null;
-    },
+    }
 
     /**
      * Fetch a CookieTreeNode by site.
      * @param {string} site The web site to look up.
      * @return {?settings.CookieTreeNode} The node found, if any.
      */
-    fetchNodeBySite: function(site) {
+    fetchNodeBySite(site) {
       for (var i = 0; i < this.children_.length; ++i) {
         if (this.children_[i].data.title == site)
           return this.children_[i];
       }
       return null;
-    },
-  };
+    }
+  }
 
   return {
     CookieTreeNode: CookieTreeNode,
diff --git a/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.html b/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.html
index ffbfd7c764e..44430cac709 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.html
@@ -10,15 +10,15 @@
   <template>
     <style include="settings-shared"></style>
     <dialog is="cr-dialog" id="dialog">
-      <div class="title">$i18n{editSiteTitle}</div>
-      <div class="body">
+      <div class="title" slot="title">$i18n{editSiteTitle}</div>
+      <div class="body" slot="body">
         <paper-input always-float-label label="$i18n{addSite}"
             placeholder="$i18n{addSiteExceptionPlaceholder}" value="{{origin_}}"
             on-input="validate_" error-message="$i18n{notValidWebAddress}"
             invalid="[[invalid_]]" autofocus>
         </paper-input>
       </div>
-      <div class="button-container">
+      <div class="button-container" slot="button-container">
         <div class="action-buttons">
           <paper-button class="cancel-button" on-tap="onCancelTap_"
               id="cancel">$i18n{cancel}</paper-button>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.js b/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.js
index bc5cc802430..b4d39aa5b4b 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/edit_exception_dialog.js
@@ -50,16 +50,11 @@ Polymer({
     if (this.model.origin != this.origin_) {
       // The way to "edit" an exception is to remove it and and a new one.
       this.browserProxy_.resetCategoryPermissionForOrigin(
-          this.model.origin,
-          this.model.embeddingOrigin,
-          this.model.category,
+          this.model.origin, this.model.embeddingOrigin, this.model.category,
           this.model.incognito);
 
       this.browserProxy_.setCategoryPermissionForOrigin(
-          this.origin_,
-          this.origin_,
-          this.model.category,
-          this.model.setting,
+          this.origin_, this.origin_, this.model.category, this.model.setting,
           this.model.incognito);
     }
 
diff --git a/chromium/chrome/browser/resources/settings/site_settings/media_picker.js b/chromium/chrome/browser/resources/settings/site_settings/media_picker.js
index 213eea72274..f39f5f9a94c 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/media_picker.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/media_picker.js
@@ -30,8 +30,8 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.addWebUIListener('updateDevicesMenu',
-        this.updateDevicesMenu_.bind(this));
+    this.addWebUIListener(
+        'updateDevicesMenu', this.updateDevicesMenu_.bind(this));
     this.browserProxy.getDefaultCaptureDevices(this.type);
   },
 
diff --git a/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.html b/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.html
index edc1f5c7e09..e83967b08a7 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.html
@@ -1,7 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
@@ -49,9 +49,9 @@
               </div>
             </div>
 
-            <paper-icon-button icon="cr:more-vert" on-tap="showMenu_"
-                class="dropdown-trigger" title="$i18n{moreActions}">
-            </paper-icon-button>
+            <button is="paper-icon-button-light" on-tap="showMenu_"
+                class="icon-more-vert" title="$i18n{moreActions}">
+            </button>
           </div>
 
         </template>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.js b/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.js
index 923bbabc34a..871659b8eb8 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/protocol_handlers.js
@@ -63,11 +63,12 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.addWebUIListener('setHandlersEnabled',
-        this.setHandlersEnabled_.bind(this));
-    this.addWebUIListener('setProtocolHandlers',
-        this.setProtocolHandlers_.bind(this));
-    this.addWebUIListener('setIgnoredProtocolHandlers',
+    this.addWebUIListener(
+        'setHandlersEnabled', this.setHandlersEnabled_.bind(this));
+    this.addWebUIListener(
+        'setProtocolHandlers', this.setProtocolHandlers_.bind(this));
+    this.addWebUIListener(
+        'setIgnoredProtocolHandlers',
         this.setIgnoredProtocolHandlers_.bind(this));
     this.browserProxy.observeProtocolHandlers();
   },
@@ -159,8 +160,9 @@ Polymer({
    * @return {boolean} if actionMenuModel_ is default handler of its protocol.
    */
   isModelDefault_: function() {
-    return !!this.actionMenuModel_ && (this.actionMenuModel_.index ==
-        this.actionMenuModel_.protocol.default_handler);
+    return !!this.actionMenuModel_ &&
+        (this.actionMenuModel_.index ==
+         this.actionMenuModel_.protocol.default_handler);
   },
 
   /**
@@ -171,8 +173,8 @@ Polymer({
    */
   showMenu_: function(event) {
     this.actionMenuModel_ = event.model;
-    /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).showAt(
+    /** @type {!CrActionMenuElement} */ (this.$$('dialog[is=cr-action-menu]'))
+        .showAt(
             /** @type {!Element} */ (
                 Polymer.dom(/** @type {!Event} */ (event)).localTarget));
   }
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_data.html b/chromium/chrome/browser/resources/settings/site_settings/site_data.html
index 690a7de615c..04d81749fc7 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_data.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_data.html
@@ -23,10 +23,6 @@
         -webkit-padding-start: 0;
       }
 
-      .remove-site {
-        -webkit-margin-end: 0;
-      }
-
       .subtitle-row {
         margin-top: 9px;  /* With 15px in sub-items == 24px total margin. */
       }
@@ -61,10 +57,9 @@
               aria-label$="[[item.site]]"
               aria-describedby="siteSecondary"></button>
           <div class="separator" id="removeSecondary"></div>
-          <button is="paper-icon-button-light" class="remove-site"
+          <button is="paper-icon-button-light" class="icon-delete-gray"
               title$="[[i18n('siteSettingsCookieRemoveSite', item.site)]]"
               on-tap="onRemoveSiteTap_">
-            <iron-icon icon="cr:delete"></iron-icon>
           </button>
         </div>
       </template>
@@ -73,9 +68,11 @@
     <!-- Confirm Delete dialog -->
     <dialog is="cr-dialog" id="confirmDeleteDialog" close-text="$i18n{close}"
         on-close="onConfirmDeleteDialogClosed_">
-      <div class="title">$i18n{siteSettingsCookieRemoveDialogTitle}</div>
-      <div class="body">[[confirmationDeleteMsg_]]</div>
-      <div class="button-container">
+      <div class="title" slot="title">
+        $i18n{siteSettingsCookieRemoveDialogTitle}
+      </div>
+      <div class="body" slot="body">[[confirmationDeleteMsg_]]</div>
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCloseDialog_">
           $i18n{cancel}
         </paper-button>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_data.js b/chromium/chrome/browser/resources/settings/site_settings/site_data.js
index 64b8d932ede..0d0b1a760a4 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_data.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_data.js
@@ -55,9 +55,11 @@ Polymer({
     // Populate the |focusConfig| map of the parent <settings-animated-pages>
     // element, with additional entries that correspond to subpage trigger
     // elements residing in this element's Shadow DOM.
-    this.focusConfig.set(
-        settings.Route.SITE_SETTINGS_DATA_DETAILS.path,
-        '* /deep/ #filter /deep/ #searchInput');
+    if (settings.routes.SITE_SETTINGS_DATA_DETAILS) {
+      this.focusConfig.set(
+          settings.routes.SITE_SETTINGS_DATA_DETAILS.path,
+          '* /deep/ #filter /deep/ #searchInput');
+    }
   },
 
   /** @override */
@@ -119,8 +121,8 @@ Polymer({
    */
   onRemoveShowingSitesTap_: function(e) {
     e.preventDefault();
-    this.confirmationDeleteMsg_ = loadTimeData.getString(
-        'siteSettingsCookieRemoveMultipleConfirmation');
+    this.confirmationDeleteMsg_ =
+        loadTimeData.getString('siteSettingsCookieRemoveMultipleConfirmation');
     this.$.confirmDeleteDialog.showModal();
   },
 
@@ -140,7 +142,7 @@ Polymer({
           this.browserProxy.removeCookie(items[i].id);
       }
       // We just deleted all items found by the filter, let's reset the filter.
-      /** @type {SettingsSubpageSearchElement} */(this.$.filter).setValue('');
+      /** @type {SettingsSubpageSearchElement} */ (this.$.filter).setValue('');
     }
   },
 
@@ -159,7 +161,8 @@ Polymer({
    * @private
    */
   onSiteTap_: function(event) {
-    settings.navigateTo(settings.Route.SITE_SETTINGS_DATA_DETAILS,
+    settings.navigateTo(
+        settings.routes.SITE_SETTINGS_DATA_DETAILS,
         new URLSearchParams('site=' + event.model.item.site));
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.html b/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.html
index c57459438ef..20063068b15 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.html
@@ -3,7 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="site_settings_prefs_browser_proxy.html">
@@ -17,7 +17,6 @@
 
       .secondary,
       .start {
-        -webkit-user-select: text;
         max-width: 100%;
         word-wrap: break-word;
       }
@@ -27,9 +26,9 @@
         <div class="start">[[getEntryDescription_(item)]]</div>
         <cr-expand-button expanded="{{item.expanded_}}">
         </cr-expand-button>
-        <paper-icon-button data-id-path$="[[item.idPath]]" icon="cr:close"
-            on-tap="onRemove_">
-        </paper-icon-button>
+        <button is="paper-icon-button-light" data-id-path$="[[item.idPath]]"
+            class="icon-clear" on-tap="onRemove_">
+        </button>
       </div>
       <iron-collapse class="list-frame vertical-list"
           opened="[[item.expanded_]]">
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.js b/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.js
index ed83ad966cd..0e913982cc0 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_data_details_subpage.js
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
+'use strict';
 
 /**
  * 'site-data-details-subpage' Display cookie contents.
@@ -45,8 +45,8 @@ Polymer({
     this.browserProxy_ =
         settings.SiteSettingsPrefsBrowserProxyImpl.getInstance();
 
-    this.addWebUIListener('onTreeItemRemoved',
-                          this.getCookieDetails_.bind(this));
+    this.addWebUIListener(
+        'onTreeItemRemoved', this.getCookieDetails_.bind(this));
   },
 
   /**
@@ -55,7 +55,8 @@ Polymer({
    * @protected
    */
   currentRouteChanged: function(route) {
-    if (settings.getCurrentRoute() != settings.Route.SITE_SETTINGS_DATA_DETAILS)
+    if (settings.getCurrentRoute() !=
+        settings.routes.SITE_SETTINGS_DATA_DETAILS)
       return;
     var site = settings.getQueryParameters().get('site');
     if (!site || site == this.site_)
@@ -69,9 +70,10 @@ Polymer({
   getCookieDetails_: function() {
     if (!this.site_)
       return;
-    this.browserProxy_.getCookieDetails(this.site_).then(
-        this.onCookiesLoaded_.bind(this),
-        this.onCookiesLoadFailed_.bind(this));
+    this.browserProxy_.getCookieDetails(this.site_)
+        .then(
+            this.onCookiesLoaded_.bind(this),
+            this.onCookiesLoadFailed_.bind(this));
   },
 
   /**
@@ -90,7 +92,9 @@ Polymer({
     this.siteId_ = cookies.id;
     this.entries_ = cookies.children;
     // Set up flag for expanding cookie details.
-    this.entries_.forEach(function(e) { e.expanded_ = false; });
+    this.entries_.forEach(function(e) {
+      e.expanded_ = false;
+    });
   },
 
   /**
@@ -125,7 +129,7 @@ Polymer({
    */
   onRemove_: function(event) {
     this.browserProxy_.removeCookie(
-        /** @type {!CookieDetails} */(event.currentTarget.dataset).idPath);
+        /** @type {!CookieDetails} */ (event.currentTarget.dataset).idPath);
   },
 
   /**
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details.html b/chromium/chrome/browser/resources/settings/site_settings/site_details.html
index 3e902fe7d93..e20e43022db 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_details.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_details.html
@@ -4,7 +4,7 @@
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="constants.html">
@@ -25,9 +25,11 @@
     </style>
     <!-- Confirm Delete dialog -->
     <dialog is="cr-dialog" id="confirmDeleteDialog" close-text="$i18n{close}">
-      <div class="title">$i18n{siteSettingsSiteRemoveDialogTitle}</div>
-      <div class="body">[[confirmationDeleteMsg_]]</div>
-      <div class="button-container">
+      <div class="title" slot="title">
+        $i18n{siteSettingsSiteRemoveDialogTitle}
+      </div>
+      <div class="body" slot="body">[[confirmationDeleteMsg_]]</div>
+      <div class="button-container" slot="button-container">
         <paper-button class="cancel-button" on-tap="onCloseDialog_">
           $i18n{cancel}
         </paper-button>
@@ -39,9 +41,10 @@
 
     <div class="settings-box first">
       <div class="favicon-image"
-          style$="[[computeSiteIcon(site.origin)]]">
+          style$="[[computeSiteIcon(origin)]]">
       </div>
-      <div class="middle">[[site.displayName]]</div>
+      <!-- TODO(patricialor): This should show the origin's display name. -->
+      <div class="middle">[[origin]]</div>
     </div>
     <template is="dom-if" if="[[storedData_]]">
       <div id="usage">
@@ -51,9 +54,9 @@
         <div class="list-frame">
           <div class="list-item" id="storage">
             <div class="start">[[storedData_]]</div>
-            <paper-icon-button icon="cr:delete"
+            <button is="paper-icon-button-light" class="icon-delete-gray"
                 on-tap="onConfirmClearStorage_"
-                alt="$i18n{siteSettingsDelete}"></paper-icon-button>
+                alt="$i18n{siteSettingsDelete}"></button>
           </div>
         </div>
       </div>
@@ -62,52 +65,49 @@
       <h2>$i18n{siteSettingsPermissions}</h2>
     </div>
     <div class="list-frame">
-      <site-details-permission category="{{ContentSettingsTypes.COOKIES}}"
-          icon="settings:cookie" id="cookies" label="$i18n{siteSettingsCookies}"
-          site="[[site]]">
-      </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.GEOLOCATION}}"
           icon="settings:location-on" id="geolocation"
-          label="$i18n{siteSettingsLocation}" site="[[site]]">
+          label="$i18n{siteSettingsLocation}">
       </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.CAMERA}}"
           icon="settings:videocam" id="camera"
-          label="$i18n{siteSettingsCamera}" site="[[site]]">
+          label="$i18n{siteSettingsCamera}">
       </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.MIC}}"
           icon="settings:mic" id="mic"
-          label="$i18n{siteSettingsMic}" site="[[site]]">
+          label="$i18n{siteSettingsMic}">
       </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.NOTIFICATIONS}}"
-          icon="settings:notifications" id="notification"
-          label="$i18n{siteSettingsNotifications}" site="[[site]]">
+          icon="settings:notifications" id="notifications"
+          label="$i18n{siteSettingsNotifications}">
       </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.JAVASCRIPT}}"
           icon="settings:code" id="javascript"
-          label="$i18n{siteSettingsJavascript}" site="[[site]]">
+          label="$i18n{siteSettingsJavascript}">
       </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.PLUGINS}}"
-          icon="cr:extension" id="plugins" label="$i18n{siteSettingsFlash}"
-          site="[[site]]">
+          icon="cr:extension" id="plugins" label="$i18n{siteSettingsFlash}">
+      </site-details-permission>
+      <site-details-permission category="{{ContentSettingsTypes.IMAGES}}"
+          icon="settings:photo" id="images" label="$i18n{siteSettingsImages}">
       </site-details-permission>
       <site-details-permission category="{{ContentSettingsTypes.POPUPS}}"
-          icon="cr:open-in-new" id="popups" label="$i18n{siteSettingsPopups}"
-          site="[[site]]">
+          icon="cr:open-in-new" id="popups" label="$i18n{siteSettingsPopups}">
       </site-details-permission>
       <site-details-permission
           category="{{ContentSettingsTypes.BACKGROUND_SYNC}}"
           icon="settings:sync" id="backgroundSync"
-          label="$i18n{siteSettingsBackgroundSync}" site="[[site]]">
+          label="$i18n{siteSettingsBackgroundSync}">
       </site-details-permission>
       <site-details-permission
           category="{{ContentSettingsTypes.AUTOMATIC_DOWNLOADS}}"
           icon="cr:file-download" id="automaticDownloads"
-          label="$i18n{siteSettingsAutomaticDownloads}" site="[[site]]">
+          label="$i18n{siteSettingsAutomaticDownloads}">
       </site-details-permission>
       <site-details-permission
           category="{{ContentSettingsTypes.UNSANDBOXED_PLUGINS}}"
           icon="cr:extension" id="unsandboxedPlugins"
-          label="$i18n{siteSettingsUnsandboxedPlugins}" site="[[site]]">
+          label="$i18n{siteSettingsUnsandboxedPlugins}">
       </site-details-permission>
 
       <div class="list-item">
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details.js b/chromium/chrome/browser/resources/settings/site_settings/site_details.js
index d1022348f90..0a08f0c5224 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_details.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_details.js
@@ -14,12 +14,12 @@ Polymer({
 
   properties: {
     /**
-     * The site that this widget is showing details for.
-     * @type {SiteException}
+     * The origin that this widget is showing details for.
+     * @private
      */
-    site: {
-      type: Object,
-      observer: 'onSiteChanged_',
+    origin: {
+      type: String,
+      observer: 'onOriginChanged_',
     },
 
     /**
@@ -59,21 +59,34 @@ Polymer({
     var site = settings.getQueryParameters().get('site');
     if (!site)
       return;
-    this.browserProxy.getSiteDetails(site).then(function(siteInfo) {
-      this.site = this.expandSiteException(siteInfo);
-    }.bind(this));
+    this.origin = site;
   },
 
   /**
    * Handler for when the origin changes.
    * @private
    */
-  onSiteChanged_: function() {
-    // origin may be initially undefined if the user follows a direct
-    // link (URL) to this page.
-    var origin = this.site.origin;
-    if (origin !== undefined)
-      this.$.usageApi.fetchUsageTotal(this.toUrl(origin).hostname);
+  onOriginChanged_: function() {
+    this.$.usageApi.fetchUsageTotal(this.toUrl(this.origin).hostname);
+
+    var siteDetailsPermissions =
+        /** @type{!NodeList<!SiteDetailsPermissionElement>} */
+        (this.root.querySelectorAll('site-details-permission'));
+    var categoryList =
+        /** @type{!Array<!string>} */ (
+            Array.prototype.map.call(siteDetailsPermissions, function(element) {
+              return element.category;
+            }));
+
+    this.browserProxy.getOriginPermissions(this.origin, categoryList)
+        .then(function(exceptionList) {
+          exceptionList.forEach(function(exception, i) {
+            // |exceptionList| should be in the same order as |categoryList|,
+            // which is in the same order as |siteDetailsPermissions|.
+            siteDetailsPermissions[i].site =
+                /** @type {!RawSiteException} */ (exception);
+          });
+        });
   },
 
   /** @private */
@@ -89,8 +102,7 @@ Polymer({
   onConfirmClearStorage_: function(e) {
     e.preventDefault();
     this.confirmationDeleteMsg_ = loadTimeData.getStringF(
-        'siteSettingsSiteRemoveConfirmation',
-        this.toUrl(this.site.origin).href);
+        'siteSettingsSiteRemoveConfirmation', this.toUrl(this.origin).href);
     this.$.confirmDeleteDialog.showModal();
   },
 
@@ -99,8 +111,7 @@ Polymer({
    * @private
    */
   onClearStorage_: function() {
-    this.$.usageApi.clearUsage(
-        this.toUrl(this.site.origin).href, this.storageType_);
+    this.$.usageApi.clearUsage(this.toUrl(this.origin).href, this.storageType_);
   },
 
   /**
@@ -109,7 +120,7 @@ Polymer({
    * @private
    */
   onUsageDeleted_: function(event) {
-    if (event.detail.origin == this.toUrl(this.site.origin).href) {
+    if (event.detail.origin == this.toUrl(this.origin).href) {
       this.storedData_ = '';
       this.navigateBackIfNoData_();
     }
@@ -120,9 +131,10 @@ Polymer({
    * @private
    */
   onClearAndReset_: function() {
-    Array.prototype.forEach.call(
-        this.root.querySelectorAll('site-details-permission'),
-        function(element) { element.resetPermission(); });
+    this.root.querySelectorAll('site-details-permission')
+        .forEach(function(element) {
+          element.resetPermission();
+        });
 
     if (this.storedData_ != '')
       this.onClearStorage_();
@@ -146,6 +158,8 @@ Polymer({
   permissionShowing_: function() {
     return Array.prototype.some.call(
         this.root.querySelectorAll('site-details-permission'),
-        function(element) { return element.offsetHeight > 0; });
+        function(element) {
+          return element.offsetHeight > 0;
+        });
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html
index 068df173a3d..6e667648b4c 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html
@@ -12,7 +12,7 @@
 <dom-module id="site-details-permission">
   <template>
     <style include="settings-shared md-select"></style>
-    <div id="details" hidden>
+    <div id="details">
       <div class="list-item underbar">
         <div>
           <iron-icon icon="[[icon]]">
@@ -23,16 +23,19 @@
           <select id="permission" class="md-select"
               aria-labelledby="permissionHeader"
               on-change="onPermissionSelectionChange_">
-            <option id="allow" value$="[[PermissionValues.ALLOW]]">
+            <option id="default" value$="[[ContentSetting.DEFAULT]]">
+              [[defaultSettingString_(
+                  defaultSetting_,
+                  '$i18nPolymer{siteSettingsActionAskDefault}',
+                  '$i18nPolymer{siteSettingsActionAllowDefault}',
+                  '$i18nPolymer{siteSettingsActionBlockDefault}')]]
+            </option>
+            <option id="allow" value$="[[ContentSetting.ALLOW]]">
               $i18n{siteSettingsActionAllow}
             </option>
-            <option id="block" value$="[[PermissionValues.BLOCK]]">
+            <option id="block" value$="[[ContentSetting.BLOCK]]">
               $i18n{siteSettingsActionBlock}
             </option>
-            <option id="sessionOnly" value$="[[PermissionValues.SESSION_ONLY]]"
-                hidden$="[[!isCookiesCategory_(category)]]">
-              $i18n{siteSettingsActionSessionOnly}
-            </option>
           </select>
           <span class="md-select-underline"></span>
         </div>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js
index 3408b6fa2ed..a590d465ed1 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js
@@ -15,16 +15,24 @@ Polymer({
   properties: {
     /**
      * The site that this widget is showing details for.
-     * @type {SiteException}
+     * @type {RawSiteException}
      */
     site: Object,
+
+    /**
+     * The default setting for this permission category.
+     * @type {settings.ContentSetting}
+     * @private
+     */
+    defaultSetting_: String,
   },
 
   observers: ['siteChanged_(site, category)'],
 
   /** @override */
   attached: function() {
-    this.addWebUIListener('contentSettingSitePermissionChanged',
+    this.addWebUIListener(
+        'contentSettingSitePermissionChanged',
         this.sitePermissionChanged_.bind(this));
   },
 
@@ -41,30 +49,23 @@ Polymer({
         this.removePatternWildcard(right);
   },
 
-  /** @private */
-  isCookiesCategory_: function(category) {
-    return category == settings.ContentSettingsTypes.COOKIES;
-  },
-
   /**
-   * Sets the site to display.
-   * @param {!SiteException} site The site to display.
+   * Updates the drop-down value after |site| has changed.
+   * @param {!RawSiteException} site The site to display.
    * @private
    */
   siteChanged_: function(site) {
-    this.$.details.hidden = true;
-
-    this.browserProxy.getExceptionList(this.category).then(
-        function(exceptionList) {
-      for (var i = 0; i < exceptionList.length; ++i) {
-        if (exceptionList[i].embeddingOrigin == site.embeddingOrigin &&
-            this.sameOrigin_(exceptionList[i].origin, site.origin)) {
-          this.$.permission.value = exceptionList[i].setting;
-          this.$.details.hidden = false;
-          break;
-        }
-      }
-    }.bind(this));
+    if (site.source == 'default') {
+      this.defaultSetting_ = site.setting;
+      this.$.permission.value = settings.ContentSetting.DEFAULT;
+      return;
+    }
+    // The default setting is unknown, so consult the C++ backend for it.
+    this.browserProxy.getDefaultValueForContentType(this.category)
+        .then((defaultValue) => {
+          this.defaultSetting_ = defaultValue.setting;
+        });
+    this.$.permission.value = site.setting;
   },
 
   /**
@@ -81,8 +82,9 @@ Polymer({
     if (category != this.category)
       return;
 
-    if (origin == '' || (origin == this.site.origin &&
-                         embeddingOrigin == this.site.embeddingOrigin)) {
+    if (origin == '' ||
+        (origin == this.site.origin &&
+         embeddingOrigin == this.site.embeddingOrigin)) {
       this.siteChanged_(this.site);
     }
   },
@@ -94,7 +96,6 @@ Polymer({
     this.browserProxy.resetCategoryPermissionForOrigin(
         this.site.origin, this.site.embeddingOrigin, this.category,
         this.site.incognito);
-    this.$.details.hidden = true;
   },
 
   /**
@@ -102,8 +103,34 @@ Polymer({
    * @private
    */
   onPermissionSelectionChange_: function() {
+    if (this.$.permission.value == settings.ContentSetting.DEFAULT) {
+      this.resetPermission();
+      return;
+    }
     this.browserProxy.setCategoryPermissionForOrigin(
         this.site.origin, this.site.embeddingOrigin, this.category,
         this.$.permission.value, this.site.incognito);
   },
+
+  /**
+   * Updates the string used for this permission category's default setting.
+   * @param {!settings.ContentSetting} defaultSetting Value of the default
+   *    setting for this permission category.
+   * @param {string} askString 'Ask' label, e.g. 'Ask (default)'.
+   * @param {string} allowString 'Allow' label, e.g. 'Allow (default)'.
+   * @param {string} blockString 'Block' label, e.g. 'Blocked (default)'.
+   * @private
+   */
+  defaultSettingString_(defaultSetting, askString, allowString, blockString) {
+    if (defaultSetting == settings.ContentSetting.ASK ||
+        defaultSetting == settings.ContentSetting.IMPORTANT_CONTENT) {
+      return askString;
+    } else if (defaultSetting == settings.ContentSetting.ALLOW) {
+      return allowString;
+    } else if (defaultSetting == settings.ContentSetting.BLOCK) {
+      return blockString;
+    }
+    assertNotReached(
+        `No string for ${this.category}'s default of ${defaultSetting}`);
+  },
 });
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_list.html b/chromium/chrome/browser/resources/settings/site_settings/site_list.html
index 359094e3c1e..e5a7273fd26 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_list.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_list.html
@@ -7,7 +7,7 @@
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../route.html">
@@ -20,11 +20,7 @@
 
 <dom-module id="site-list">
   <template>
-    <style include="settings-shared iron-flex">
-      .selectable {
-        -webkit-user-select: text;
-      }
-    </style>
+    <style include="settings-shared iron-flex"></style>
     <div id="category">
       <div class="settings-box first">
         <h2 class="start">[[categoryHeader]]</h2>
@@ -71,10 +67,10 @@
                   style$="[[computeSiteIcon(item.origin)]]">
               </div>
               <div class="middle no-min-width">
-                <div class="selectable text-elide">[[item.displayName]]</div>
+                <div class="text-elide">[[item.displayName]]</div>
 
                 <!-- This div must not contain extra whitespace. -->
-                <div class="selectable secondary text-elide"
+                <div class="secondary text-elide"
                     id="siteDescription">[[computeSiteDescription_(item)]]</div>
               </div>
               <template is="dom-if" if="[[enableSiteSettings_]]">
@@ -91,16 +87,16 @@
                   icon-aria-label="[[label]]">
               </cr-policy-pref-indicator>
             </template>
-
-            <paper-icon-button id="resetSite" icon="cr:delete"
+            <button is="paper-icon-button-light" id="resetSite"
+                class="icon-delete-gray" on-tap="onResetButtonTap_"
                 hidden="[[shouldHideResetButton_(item, readOnlyList)]]"
-                on-tap="onResetButtonTap_"
                 alt="$i18n{siteSettingsActionReset}">
-            </paper-icon-button>
-            <paper-icon-button id="actionMenuButton" icon="cr:more-vert"
+            </button>
+            <button is="paper-icon-button-light" id="actionMenuButton"
+                class="icon-more-vert" on-tap="onShowActionMenuTap_"
                 hidden="[[shouldHideActionMenu_(item, readOnlyList)]]"
-                on-tap="onShowActionMenuTap_" title="$i18n{moreActions}">
-            </paper-icon-button>
+                title="$i18n{moreActions}">
+            </button>
           </div>
         </template>
       </div>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_list.js b/chromium/chrome/browser/resources/settings/site_settings/site_list.js
index e95115fe7d3..f53c6193332 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_list.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_list.js
@@ -110,10 +110,11 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.addWebUIListener('contentSettingSitePermissionChanged',
+    this.addWebUIListener(
+        'contentSettingSitePermissionChanged',
         this.siteWithinCategoryChanged_.bind(this));
-    this.addWebUIListener('onIncognitoStatusChanged',
-        this.onIncognitoStatusChanged_.bind(this));
+    this.addWebUIListener(
+        'onIncognitoStatusChanged', this.onIncognitoStatusChanged_.bind(this));
   },
 
   /**
@@ -136,7 +137,7 @@ Polymer({
   onIncognitoStatusChanged_: function() {
     // The SESSION_ONLY list won't have any incognito exceptions. (Minor
     // optimization, not required).
-    if (this.categorySubtype == settings.PermissionValues.SESSION_ONLY)
+    if (this.categorySubtype == settings.ContentSetting.SESSION_ONLY)
       return;
 
     // A change notification is not sent for each site. So we repopulate the
@@ -160,7 +161,7 @@ Polymer({
     this.populateList_();
 
     // The Session permissions are only for cookies.
-    if (this.categorySubtype == settings.PermissionValues.SESSION_ONLY) {
+    if (this.categorySubtype == settings.ContentSetting.SESSION_ONLY) {
       this.$.category.hidden =
           this.category != settings.ContentSettingsTypes.COOKIES;
     }
@@ -243,7 +244,7 @@ Polymer({
     for (var i = 0; i < data.length; ++i) {
       var exceptionList = data[i];
       for (var k = 0; k < exceptionList.length; ++k) {
-        if (exceptionList[k].setting == settings.PermissionValues.DEFAULT ||
+        if (exceptionList[k].setting == settings.ContentSetting.DEFAULT ||
             exceptionList[k].setting != this.categorySubtype) {
           continue;
         }
@@ -262,7 +263,7 @@ Polymer({
    * @private
    */
   toSiteArray_: function(sites) {
-    var results = /** @type {!Array<SiteException>} */([]);
+    var results = /** @type {!Array<SiteException>} */ ([]);
     var lastOrigin = '';
     var lastEmbeddingOrigin = '';
     for (var i = 0; i < sites.length; ++i) {
@@ -282,11 +283,11 @@ Polymer({
    */
   setUpActionMenu_: function() {
     this.showAllowAction_ =
-        this.categorySubtype != settings.PermissionValues.ALLOW;
+        this.categorySubtype != settings.ContentSetting.ALLOW;
     this.showBlockAction_ =
-        this.categorySubtype != settings.PermissionValues.BLOCK;
+        this.categorySubtype != settings.ContentSetting.BLOCK;
     this.showSessionOnlyAction_ =
-        this.categorySubtype != settings.PermissionValues.SESSION_ONLY &&
+        this.categorySubtype != settings.ContentSetting.SESSION_ONLY &&
         this.category == settings.ContentSettingsTypes.COOKIES;
   },
 
@@ -313,7 +314,8 @@ Polymer({
   onOriginTap_: function(event) {
     if (!this.enableSiteSettings_)
       return;
-    settings.navigateTo(settings.Route.SITE_SETTINGS_SITE_DETAILS,
+    settings.navigateTo(
+        settings.routes.SITE_SETTINGS_SITE_DETAILS,
         new URLSearchParams('site=' + event.model.item.origin));
   },
 
@@ -328,32 +330,32 @@ Polymer({
   },
 
   /**
-   * @param {string} permissionValue
+   * @param {!settings.ContentSetting} contentSetting
    * @private
    */
-  setPermissionForActionMenuSite_: function(permissionValue) {
+  setContentSettingForActionMenuSite_: function(contentSetting) {
     assert(this.actionMenuSite_);
     this.browserProxy.setCategoryPermissionForOrigin(
         this.actionMenuSite_.origin, this.actionMenuSite_.embeddingOrigin,
-        this.category, permissionValue, this.actionMenuSite_.incognito);
+        this.category, contentSetting, this.actionMenuSite_.incognito);
   },
 
   /** @private */
   onAllowTap_: function() {
-    this.setPermissionForActionMenuSite_(settings.PermissionValues.ALLOW);
+    this.setContentSettingForActionMenuSite_(settings.ContentSetting.ALLOW);
     this.closeActionMenu_();
   },
 
   /** @private */
   onBlockTap_: function() {
-    this.setPermissionForActionMenuSite_(settings.PermissionValues.BLOCK);
+    this.setContentSettingForActionMenuSite_(settings.ContentSetting.BLOCK);
     this.closeActionMenu_();
   },
 
   /** @private */
   onSessionOnlyTap_: function() {
-    this.setPermissionForActionMenuSite_(
-        settings.PermissionValues.SESSION_ONLY);
+    this.setContentSettingForActionMenuSite_(
+        settings.ContentSetting.SESSION_ONLY);
     this.closeActionMenu_();
   },
 
@@ -361,8 +363,8 @@ Polymer({
   onEditTap_: function() {
     // Close action menu without resetting |this.actionMenuSite_| since it is
     // bound to the dialog.
-    /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).close();
+    /** @type {!CrActionMenuElement} */ (this.$$('dialog[is=cr-action-menu]'))
+        .close();
     this.showEditExceptionDialog_ = true;
   },
 
@@ -388,14 +390,20 @@ Polymer({
    * @return {string} The site description.
    */
   computeSiteDescription_: function(item) {
-    if (item.incognito && item.embeddingDisplayName.length > 0) {
-      return loadTimeData.getStringF('embeddedIncognitoSite',
-          item.embeddingDisplayName);
+    var displayName = '';
+    if (item.embeddingOrigin) {
+      displayName = loadTimeData.getStringF(
+          'embeddedOnHost', this.sanitizePort(item.embeddingOrigin));
+    } else if (this.category == settings.ContentSettingsTypes.GEOLOCATION) {
+      displayName = loadTimeData.getString('embeddedOnAnyHost');
     }
 
-    if (item.incognito)
+    if (item.incognito) {
+      if (displayName.length > 0)
+        return loadTimeData.getStringF('embeddedIncognitoSite', displayName);
       return loadTimeData.getString('incognitoSite');
-    return item.embeddingDisplayName;
+    }
+    return displayName;
   },
 
   /**
@@ -415,8 +423,8 @@ Polymer({
         Polymer.dom(/** @type {!Event} */ (e)).localTarget);
 
     this.actionMenuSite_ = e.model.item;
-    /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).showAt(this.activeDialogAnchor_);
+    /** @type {!CrActionMenuElement} */ (this.$$('dialog[is=cr-action-menu]'))
+        .showAt(this.activeDialogAnchor_);
   },
 
   /** @private */
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js b/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js
index 318bbd5f2d6..762da0c000c 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js
@@ -47,7 +47,7 @@ var SiteSettingsBehaviorImpl = {
 
   /** @override */
   ready: function() {
-    this.PermissionValues = settings.PermissionValues;
+    this.ContentSetting = settings.ContentSetting;
   },
 
   /**
@@ -72,8 +72,7 @@ var SiteSettingsBehaviorImpl = {
         urlWithScheme.endsWith(':443')) {
       return url.slice(0, -4);
     }
-    if (urlWithScheme.startsWith('http://') &&
-        urlWithScheme.endsWith(':80')) {
+    if (urlWithScheme.startsWith('http://') && urlWithScheme.endsWith(':80')) {
       return url.slice(0, -3);
     }
     return url;
@@ -96,22 +95,6 @@ var SiteSettingsBehaviorImpl = {
   },
 
   /**
-   * Looks up the human-friendly embedder string to show in the UI.
-   * @param {string} embeddingOrigin The embedding origin to show.
-   * @param {string} category The category requesting it.
-   * @return {string} The string to show.
-   */
-  getEmbedderString: function(embeddingOrigin, category) {
-    if (embeddingOrigin == '') {
-      if (category != settings.ContentSettingsTypes.GEOLOCATION)
-        return '';
-      return loadTimeData.getStringF('embeddedOnHost', '*');
-    }
-    return loadTimeData.getStringF(
-        'embeddedOnHost', this.sanitizePort(embeddingOrigin));
-  },
-
-  /**
    * Returns the icon to use for a given site.
    * @param {string} site The url of the site to fetch the icon for.
    * @return {string} The background-image style with the favicon.
@@ -129,7 +112,7 @@ var SiteSettingsBehaviorImpl = {
    * @private
    */
   computeIsSettingEnabled: function(setting) {
-    return setting != settings.PermissionValues.BLOCK;
+    return setting != settings.ContentSetting.BLOCK;
   },
 
   /**
@@ -161,26 +144,22 @@ var SiteSettingsBehaviorImpl = {
   expandSiteException: function(exception) {
     var origin = exception.origin;
     var embeddingOrigin = exception.embeddingOrigin;
-    var embeddingDisplayName = '';
-    if (origin != embeddingOrigin) {
-      embeddingDisplayName =
-          this.getEmbedderString(embeddingOrigin, this.category);
-    }
 
-    var enforcement = '';
+    var enforcement = /** @type {?chrome.settingsPrivate.Enforcement} */ (null);
     if (exception.source == 'extension' || exception.source == 'HostedApp' ||
         exception.source == 'platform_app' || exception.source == 'policy') {
       enforcement = chrome.settingsPrivate.Enforcement.ENFORCED;
     }
 
-    var controlledBy = kControlledByLookup[exception.source] || '';
+    var controlledBy = /** @type {!chrome.settingsPrivate.ControlledBy} */ (
+        kControlledByLookup[exception.source] ||
+        chrome.settingsPrivate.ControlledBy.PRIMARY_USER);
 
     return {
       category: this.category,
       origin: origin,
       displayName: exception.displayName,
       embeddingOrigin: embeddingOrigin,
-      embeddingDisplayName: embeddingDisplayName,
       incognito: exception.incognito,
       setting: exception.setting,
       enforcement: enforcement,
diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js b/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js
index 82954acfcc7..bac63cd1b5a 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js
@@ -19,14 +19,14 @@ var ContentSettingProvider = {
 };
 
 /**
- * The site exception information passed form the C++ handler.
+ * The site exception information passed from the C++ handler.
  * See also: SiteException.
+ * TODO(patricialor): Investigate making the |source| field an enum type.
  * @typedef {{embeddingOrigin: string,
- *            embeddingDisplayName: string,
  *            incognito: boolean,
  *            origin: string,
  *            displayName: string,
- *            setting: string,
+ *            setting: !settings.ContentSetting,
  *            source: string}}
  */
 var RawSiteException;
@@ -36,25 +36,18 @@ var RawSiteException;
  * See also: RawSiteException.
  * @typedef {{category: !settings.ContentSettingsTypes,
  *            embeddingOrigin: string,
- *            embeddingDisplayName: string,
  *            incognito: boolean,
  *            origin: string,
  *            displayName: string,
- *            setting: string,
- *            enforcement: string,
- *            controlledBy: string}}
+ *            setting: !settings.ContentSetting,
+ *            enforcement: ?chrome.settingsPrivate.Enforcement,
+ *            controlledBy: !chrome.settingsPrivate.ControlledBy}}
  */
 var SiteException;
 
 /**
- * @typedef {{location: string,
- *            notifications: string}}
- */
-var CategoryDefaultsPref;
-
-/**
- * @typedef {{setting: string,
- *            source: ContentSettingProvider}}
+ * @typedef {{setting: !settings.ContentSetting,
+ *            source: !ContentSettingProvider}}
  */
 var DefaultContentSetting;
 
@@ -68,7 +61,7 @@ var MediaPickerEntry;
  * @typedef {{protocol: string,
  *            spec: string}}
  */
- var ProtocolHandlerEntry;
+var ProtocolHandlerEntry;
 
 /**
  * @typedef {{name: string,
@@ -98,43 +91,34 @@ var ZoomLevelEntry;
 
 cr.define('settings', function() {
   /** @interface */
-  function SiteSettingsPrefsBrowserProxy() {}
-
-  SiteSettingsPrefsBrowserProxy.prototype = {
+  class SiteSettingsPrefsBrowserProxy {
     /**
      * Sets the default value for a site settings category.
      * @param {string} contentType The name of the category to change.
      * @param {string} defaultValue The name of the value to set as default.
      */
-    setDefaultValueForContentType: function(contentType, defaultValue) {},
+    setDefaultValueForContentType(contentType, defaultValue) {}
 
     /**
      * Gets the cookie details for a particular site.
      * @param {string} site The name of the site.
      * @return {!Promise<!CookieList>}
      */
-    getCookieDetails: function(site) {},
+    getCookieDetails(site) {}
 
     /**
      * Gets the default value for a site settings category.
      * @param {string} contentType The name of the category to query.
      * @return {!Promise<!DefaultContentSetting>}
      */
-    getDefaultValueForContentType: function(contentType) {},
+    getDefaultValueForContentType(contentType) {}
 
     /**
      * Gets the exceptions (site list) for a particular category.
      * @param {string} contentType The name of the category to query.
      * @return {!Promise<!Array<!RawSiteException>>}
      */
-    getExceptionList: function(contentType) {},
-
-    /**
-     * Gets the exception details for a particular site.
-     * @param {string} site The name of the site.
-     * @return {!Promise<!RawSiteException>}
-     */
-    getSiteDetails: function(site) {},
+    getExceptionList(contentType) {}
 
     /**
      * Resets the category permission for a given origin (expressed as primary
@@ -146,8 +130,19 @@ cr.define('settings', function() {
      * @param {boolean} incognito Whether this applies only to a current
      *     incognito session exception.
      */
-    resetCategoryPermissionForOrigin: function(
-        primaryPattern, secondaryPattern, contentType, incognito) {},
+    resetCategoryPermissionForOrigin(
+        primaryPattern, secondaryPattern, contentType, incognito) {}
+
+    /**
+     * Gets a list of category permissions for a given origin. Note that this
+     * may be different to the results retrieved by getExceptionList(), since it
+     * combines different sources of data to get a permission's value.
+     * @param {string} origin The origin to look up permissions for.
+     * @param {!Array<string>} contentTypes A list of categories to retrieve
+     *     the ContentSetting for.
+     * @return {!Promise<!NodeList<!RawSiteException>>}
+     */
+    getOriginPermissions(origin, contentTypes) {}
 
     /**
      * Sets the category permission for a given origin (expressed as primary
@@ -160,36 +155,36 @@ cr.define('settings', function() {
      * @param {boolean} incognito Whether this rule applies only to the current
      *     incognito session.
      */
-    setCategoryPermissionForOrigin: function(
-        primaryPattern, secondaryPattern, contentType, value, incognito) {},
+    setCategoryPermissionForOrigin(
+        primaryPattern, secondaryPattern, contentType, value, incognito) {}
 
     /**
      * Checks whether a pattern is valid.
      * @param {string} pattern The pattern to check
      * @return {!Promise<boolean>} True if the pattern is valid.
      */
-    isPatternValid: function(pattern) {},
+    isPatternValid(pattern) {}
 
     /**
      * Gets the list of default capture devices for a given type of media. List
      * is returned through a JS call to updateDevicesMenu.
      * @param {string} type The type to look up.
      */
-    getDefaultCaptureDevices: function(type) {},
+    getDefaultCaptureDevices(type) {}
 
     /**
      * Sets a default devices for a given type of media.
      * @param {string} type The type of media to configure.
      * @param {string} defaultValue The id of the media device to set.
      */
-    setDefaultCaptureDevice: function(type, defaultValue) {},
+    setDefaultCaptureDevice(type, defaultValue) {}
 
     /**
      * Reloads all cookies.
      * @return {!Promise<!CookieList>} Returns the full cookie
      *     list.
      */
-    reloadCookies: function() {},
+    reloadCookies() {}
 
     /**
      * Fetches all children of a given cookie.
@@ -197,20 +192,20 @@ cr.define('settings', function() {
      * @return {!Promise<!Array<!CookieDataSummaryItem>>} Returns a cookie list
      *     for the given path.
      */
-    loadCookieChildren: function(path) {},
+    loadCookieChildren(path) {}
 
     /**
      * Removes a given cookie.
      * @param {string} path The path to the parent cookie.
      */
-    removeCookie: function(path) {},
+    removeCookie(path) {}
 
     /**
      * Removes all cookies.
      * @return {!Promise<!CookieList>} Returns the up to date
      *     cookie list once deletion is complete (empty list).
      */
-    removeAllCookies: function() {},
+    removeAllCookies() {}
 
     /**
      * observes _all_ of the the protocol handler state, which includes a list
@@ -218,7 +213,7 @@ cr.define('settings', function() {
      * other state sent with the messages 'setIgnoredProtocolHandler' and
      * 'setHandlersEnabled'.
      */
-    observeProtocolHandlers: function() {},
+    observeProtocolHandlers() {}
 
     /**
      * Observes one aspect of the protocol handler so that updates to the
@@ -229,34 +224,34 @@ cr.define('settings', function() {
      * If |observeProtocolHandlers| is called, there's no need to call this
      * observe as well.
      */
-    observeProtocolHandlersEnabledState: function() {},
+    observeProtocolHandlersEnabledState() {}
 
     /**
      * Enables or disables the ability for sites to ask to become the default
      * protocol handlers.
      * @param {boolean} enabled Whether sites can ask to become default.
      */
-    setProtocolHandlerDefault: function(enabled) {},
+    setProtocolHandlerDefault(enabled) {}
 
     /**
      * Sets a certain url as default for a given protocol handler.
      * @param {string} protocol The protocol to set a default for.
      * @param {string} url The url to use as the default.
      */
-    setProtocolDefault: function(protocol, url) {},
+    setProtocolDefault(protocol, url) {}
 
     /**
      * Deletes a certain protocol handler by url.
      * @param {string} protocol The protocol to delete the url from.
      * @param {string} url The url to delete.
      */
-    removeProtocolHandler: function(protocol, url) {},
+    removeProtocolHandler(protocol, url) {}
 
     /**
      * Fetches a list of all USB devices and the sites permitted to use them.
      * @return {!Promise<!Array<!UsbDeviceEntry>>} The list of USB devices.
      */
-    fetchUsbDevices: function() {},
+    fetchUsbDevices() {}
 
     /**
      * Removes a particular USB device object permission by origin and embedding
@@ -266,73 +261,66 @@ cr.define('settings', function() {
      * @param {!UsbDeviceDetails} usbDevice The USB device to revoke permission
      *     for.
      */
-    removeUsbDevice: function(origin, embeddingOrigin, usbDevice) {},
+    removeUsbDevice(origin, embeddingOrigin, usbDevice) {}
 
     /**
      * Fetches the incognito status of the current profile (whether an icognito
      * profile exists). Returns the results via onIncognitoStatusChanged.
      */
-    updateIncognitoStatus: function() {},
+    updateIncognitoStatus() {}
 
     /**
      * Fetches the currently defined zoom levels for sites. Returns the results
      * via onZoomLevelsChanged.
      */
-    fetchZoomLevels: function() {},
+    fetchZoomLevels() {}
 
     /**
      * Removes a zoom levels for a given host.
      * @param {string} host The host to remove zoom levels for.
      */
-    removeZoomLevel: function(host) {},
-  };
+    removeZoomLevel(host) {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.SiteSettingsPrefsBrowserProxy}
    */
-  function SiteSettingsPrefsBrowserProxyImpl() {}
-
-  // The singleton instance_ is replaced with a test version of this wrapper
-  // during testing.
-  cr.addSingletonGetter(SiteSettingsPrefsBrowserProxyImpl);
-
-  SiteSettingsPrefsBrowserProxyImpl.prototype = {
+  class SiteSettingsPrefsBrowserProxyImpl {
     /** @override */
-    setDefaultValueForContentType: function(contentType, defaultValue) {
+    setDefaultValueForContentType(contentType, defaultValue) {
       chrome.send('setDefaultValueForContentType', [contentType, defaultValue]);
-    },
+    }
 
     /** @override */
-    getCookieDetails: function(site) {
+    getCookieDetails(site) {
       return cr.sendWithPromise('getCookieDetails', site);
-    },
+    }
 
     /** @override */
-    getDefaultValueForContentType: function(contentType) {
+    getDefaultValueForContentType(contentType) {
       return cr.sendWithPromise('getDefaultValueForContentType', contentType);
-    },
+    }
 
     /** @override */
-    getExceptionList: function(contentType) {
+    getExceptionList(contentType) {
       return cr.sendWithPromise('getExceptionList', contentType);
-    },
-
-    /** @override */
-    getSiteDetails: function(site) {
-      return cr.sendWithPromise('getSiteDetails', site);
-    },
+    }
 
     /** @override */
-    resetCategoryPermissionForOrigin: function(
+    resetCategoryPermissionForOrigin(
         primaryPattern, secondaryPattern, contentType, incognito) {
       chrome.send(
           'resetCategoryPermissionForOrigin',
           [primaryPattern, secondaryPattern, contentType, incognito]);
-    },
+    }
 
     /** @override */
-    setCategoryPermissionForOrigin: function(
+    getOriginPermissions(origin, contentTypes) {
+      return cr.sendWithPromise('getOriginPermissions', origin, contentTypes);
+    }
+
+    /** @override */
+    setCategoryPermissionForOrigin(
         primaryPattern, secondaryPattern, contentType, value, incognito) {
       // TODO(dschuyler): It may be incorrect for JS to send the embeddingOrigin
       // pattern. Look into removing this parameter from site_settings_handler.
@@ -340,93 +328,97 @@ cr.define('settings', function() {
       chrome.send(
           'setCategoryPermissionForOrigin',
           [primaryPattern, '', contentType, value, incognito]);
-    },
+    }
 
     /** @override */
-    isPatternValid: function(pattern) {
+    isPatternValid(pattern) {
       return cr.sendWithPromise('isPatternValid', pattern);
-    },
+    }
 
     /** @override */
-    getDefaultCaptureDevices: function(type) {
+    getDefaultCaptureDevices(type) {
       chrome.send('getDefaultCaptureDevices', [type]);
-    },
+    }
 
     /** @override */
-    setDefaultCaptureDevice: function(type, defaultValue) {
+    setDefaultCaptureDevice(type, defaultValue) {
       chrome.send('setDefaultCaptureDevice', [type, defaultValue]);
-    },
+    }
 
     /** @override */
-    reloadCookies: function() {
+    reloadCookies() {
       return cr.sendWithPromise('reloadCookies');
-    },
+    }
 
     /** @override */
-    loadCookieChildren: function(path) {
+    loadCookieChildren(path) {
       return cr.sendWithPromise('loadCookie', path);
-    },
+    }
 
     /** @override */
-    removeCookie: function(path) {
+    removeCookie(path) {
       chrome.send('removeCookie', [path]);
-    },
+    }
 
     /** @override */
-    removeAllCookies: function() {
+    removeAllCookies() {
       return cr.sendWithPromise('removeAllCookies');
-    },
+    }
 
     /** @override */
-    observeProtocolHandlers: function() {
+    observeProtocolHandlers() {
       chrome.send('observeProtocolHandlers');
-    },
+    }
 
     /** @override */
-    observeProtocolHandlersEnabledState: function() {
+    observeProtocolHandlersEnabledState() {
       chrome.send('observeProtocolHandlersEnabledState');
-    },
+    }
 
     /** @override */
-    setProtocolHandlerDefault: function(enabled) {
+    setProtocolHandlerDefault(enabled) {
       chrome.send('setHandlersEnabled', [enabled]);
-    },
+    }
 
     /** @override */
-    setProtocolDefault: function(protocol, url) {
+    setProtocolDefault(protocol, url) {
       chrome.send('setDefault', [[protocol, url]]);
-    },
+    }
 
     /** @override */
-    removeProtocolHandler: function(protocol, url) {
+    removeProtocolHandler(protocol, url) {
       chrome.send('removeHandler', [[protocol, url]]);
-    },
+    }
 
     /** @override */
-    fetchUsbDevices: function() {
+    fetchUsbDevices() {
       return cr.sendWithPromise('fetchUsbDevices');
-    },
+    }
 
     /** @override */
-    removeUsbDevice: function(origin, embeddingOrigin, usbDevice) {
+    removeUsbDevice(origin, embeddingOrigin, usbDevice) {
       chrome.send('removeUsbDevice', [origin, embeddingOrigin, usbDevice]);
-    },
+    }
 
     /** @override */
-    updateIncognitoStatus: function() {
+    updateIncognitoStatus() {
       chrome.send('updateIncognitoStatus');
-    },
+    }
 
     /** @override */
-    fetchZoomLevels: function() {
+    fetchZoomLevels() {
       chrome.send('fetchZoomLevels');
-    },
+    }
 
     /** @override */
-    removeZoomLevel: function(host) {
+    removeZoomLevel(host) {
       chrome.send('removeZoomLevel', [host]);
-    },
-  };
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(SiteSettingsPrefsBrowserProxyImpl);
 
   return {
     SiteSettingsPrefsBrowserProxy: SiteSettingsPrefsBrowserProxy,
diff --git a/chromium/chrome/browser/resources/settings/site_settings/usb_devices.html b/chromium/chrome/browser/resources/settings/site_settings/usb_devices.html
index 6f4dd76c82d..f50308a1a77 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/usb_devices.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/usb_devices.html
@@ -1,6 +1,5 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 
 <link rel="import" href="../i18n_setup.html">
@@ -34,9 +33,9 @@
               style$="[[computeSiteIcon(item.origin)]]"></div>
           <div class="middle">[[item.origin]]</div>
 
-          <paper-icon-button icon="cr:more-vert" on-tap="showMenu_"
-              class="dropdown-trigger" title="$i18n{moreActions}">
-          </paper-icon-button>
+          <button is="paper-icon-button-light" on-tap="showMenu_"
+              class="icon-more-vert" title="$i18n{moreActions}">
+          </button>
         </div>
       </div>
     </template>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/usb_devices.js b/chromium/chrome/browser/resources/settings/site_settings/usb_devices.js
index a80fc6f21cf..28a489875d0 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/usb_devices.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/usb_devices.js
@@ -71,8 +71,8 @@ Polymer({
    */
   showMenu_: function(event) {
     this.actionMenuModel_ = event.model.item;
-    /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).showAt(
+    /** @type {!CrActionMenuElement} */ (this.$$('dialog[is=cr-action-menu]'))
+        .showAt(
             /** @type {!Element} */ (
                 Polymer.dom(/** @type {!Event} */ (event)).localTarget));
   }
diff --git a/chromium/chrome/browser/resources/settings/site_settings/website_usage_private_api.js b/chromium/chrome/browser/resources/settings/site_settings/website_usage_private_api.js
index 7be7520f64d..4540e26a315 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/website_usage_private_api.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/website_usage_private_api.js
@@ -116,9 +116,11 @@ cr.define('settings.WebsiteUsagePrivateApi', function() {
     instance.notifyUsageDeleted(origin);
   };
 
-  return { websiteUsagePolymerInstance: websiteUsagePolymerInstance,
-           fetchUsageTotal: fetchUsageTotal,
-           returnUsageTotal: returnUsageTotal,
-           clearUsage: clearUsage,
-           onUsageCleared: onUsageCleared, };
+  return {
+    websiteUsagePolymerInstance: websiteUsagePolymerInstance,
+    fetchUsageTotal: fetchUsageTotal,
+    returnUsageTotal: returnUsageTotal,
+    clearUsage: clearUsage,
+    onUsageCleared: onUsageCleared,
+  };
 });
diff --git a/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.html b/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.html
index 456585beecb..e651cd9ad88 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.html
+++ b/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.html
@@ -1,7 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -35,8 +35,9 @@
           </div>
           <div class="zoom-label">[[item.zoom]]</div>
           <div>
-            <paper-icon-button icon="cr:clear" on-tap="removeZoomLevel_"
-                title="$i18n{siteSettingsRemoveZoomLevel}"></paper-icon-button>
+            <button is="paper-icon-button-light" class="icon-clear"
+                on-tap="removeZoomLevel_"
+                title="$i18n{siteSettingsRemoveZoomLevel}"></button>
           </div>
         </div>
       </template>
diff --git a/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.js b/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.js
index 362223a0fd0..850501b8cd5 100644
--- a/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.js
+++ b/chromium/chrome/browser/resources/settings/site_settings/zoom_levels.js
@@ -23,8 +23,8 @@ Polymer({
 
   /** @override */
   ready: function() {
-    this.addWebUIListener('onZoomLevelsChanged',
-        this.onZoomLevelsChanged_.bind(this));
+    this.addWebUIListener(
+        'onZoomLevelsChanged', this.onZoomLevelsChanged_.bind(this));
     this.browserProxy.fetchZoomLevels();
   },
 
diff --git a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html
index 07c322ecb88..50ef70e2c73 100644
--- a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html
+++ b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html
@@ -187,23 +187,23 @@
           aria-describedby="popupsSecondary"></button>
     </div>
     <template is="dom-if" if="[[enableSafeBrowsingSubresourceFilter_]]">
-      <div id="subresource-filter" class="settings-box two-line"
-          category$="[[ContentSettingsTypes.SUBRESOURCE_FILTER]]"
-          data-route="SITE_SETTINGS_SUBRESOURCE_FILTER" on-tap="onTapNavigate_"
+      <div id="ads" class="settings-box two-line"
+          category$="[[ContentSettingsTypes.ADS]]"
+          data-route="SITE_SETTINGS_ADS" on-tap="onTapNavigate_"
           actionable>
-        <iron-icon icon="cr:open-in-new"></iron-icon>
+        <iron-icon icon="settings:ads"></iron-icon>
         <div class="middle">
-          $i18n{siteSettingsSubresourceFilter}
-          <div class="secondary" id="subresourceFilterSecondary">
+          $i18n{siteSettingsAds}
+          <div class="secondary" id="adsSecondary">
             [[defaultSettingLabel_(
-                default_.subresourceFilter,
-                '$i18nPolymer{siteSettingsSubresourceFilterBlock}',
-                '$i18nPolymer{siteSettingsSubresourceFilterAllow}')]]
+                default_.ads,
+                '$i18nPolymer{siteSettingsAllowed}',
+                '$i18nPolymer{siteSettingsAdsBlock}')]]
           </div>
         </div>
         <button class="subpage-arrow" is="paper-icon-button-light"
-            aria-label="$i18n{siteSettingsSubresourceFilter}"
-            aria-describedby="subresourceFilterSecondary"></button>
+            aria-label="$i18n{siteSettingsAds}"
+            aria-describedby="adsSecondary"></button>
       </div>
     </template>
     <div id="background-sync" class="settings-box two-line"
diff --git a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js
index a3d54f28062..e07ce92b87c 100644
--- a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js
+++ b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js
@@ -38,7 +38,9 @@ Polymer({
     /** @private */
     isGuest_: {
       type: Boolean,
-      value: function() { return loadTimeData.getBoolean('isGuest'); }
+      value: function() {
+        return loadTimeData.getBoolean('isGuest');
+      }
     },
 
     /** @private */
@@ -69,32 +71,27 @@ Polymer({
     // Populate the |focusConfig| map of the parent <settings-animated-pages>
     // element, with additional entries that correspond to subpage trigger
     // elements residing in this element's Shadow DOM.
-    var R = settings.Route;
-    [
-      [R.SITE_SETTINGS_COOKIES, 'cookies'],
-      [R.SITE_SETTINGS_LOCATION, 'location'],
-      [R.SITE_SETTINGS_CAMERA, 'camera'],
-      [R.SITE_SETTINGS_MICROPHONE, 'microphone'],
-      [R.SITE_SETTINGS_NOTIFICATIONS, 'notifications'],
-      [R.SITE_SETTINGS_JAVASCRIPT,'javascript'],
-      [R.SITE_SETTINGS_FLASH,'flash'],
-      [R.SITE_SETTINGS_IMAGES,'images'],
-      [R.SITE_SETTINGS_POPUPS,'popups'],
-      [R.SITE_SETTINGS_BACKGROUND_SYNC,'background-sync'],
-      [R.SITE_SETTINGS_AUTOMATIC_DOWNLOADS,'automatic-downloads'],
-      [R.SITE_SETTINGS_UNSANDBOXED_PLUGINS,'unsandboxed-plugins'],
-      [R.SITE_SETTINGS_HANDLERS,'protocol-handlers'],
-      [R.SITE_SETTINGS_MIDI_DEVICES,'midi-devices'],
-      [R.SITE_SETTINGS_SUBRESOURCE_FILTER,'subresource-filter'],
-      [R.SITE_SETTINGS_ZOOM_LEVELS,'zoom-levels'],
-      [R.SITE_SETTINGS_USB_DEVICES,'usb-devices'],
-      [R.SITE_SETTINGS_PDF_DOCUMENTS,'pdf-documents'],
-      [R.SITE_SETTINGS_PROTECTED_CONTENT,'protected-content'],
+    var R = settings.routes;
+    [[R.SITE_SETTINGS_COOKIES, 'cookies'],
+     [R.SITE_SETTINGS_LOCATION, 'location'], [R.SITE_SETTINGS_CAMERA, 'camera'],
+     [R.SITE_SETTINGS_MICROPHONE, 'microphone'],
+     [R.SITE_SETTINGS_NOTIFICATIONS, 'notifications'],
+     [R.SITE_SETTINGS_JAVASCRIPT, 'javascript'],
+     [R.SITE_SETTINGS_FLASH, 'flash'], [R.SITE_SETTINGS_IMAGES, 'images'],
+     [R.SITE_SETTINGS_POPUPS, 'popups'],
+     [R.SITE_SETTINGS_BACKGROUND_SYNC, 'background-sync'],
+     [R.SITE_SETTINGS_AUTOMATIC_DOWNLOADS, 'automatic-downloads'],
+     [R.SITE_SETTINGS_UNSANDBOXED_PLUGINS, 'unsandboxed-plugins'],
+     [R.SITE_SETTINGS_HANDLERS, 'protocol-handlers'],
+     [R.SITE_SETTINGS_MIDI_DEVICES, 'midi-devices'],
+     [R.SITE_SETTINGS_ADS, 'ads'], [R.SITE_SETTINGS_ZOOM_LEVELS, 'zoom-levels'],
+     [R.SITE_SETTINGS_USB_DEVICES, 'usb-devices'],
+     [R.SITE_SETTINGS_PDF_DOCUMENTS, 'pdf-documents'],
+     [R.SITE_SETTINGS_PROTECTED_CONTENT, 'protected-content'],
     ].forEach(function(pair) {
       var route = pair[0];
       var id = pair[1];
-      this.focusConfig.set(
-          route.path, '* /deep/ #' + id + ' .subpage-arrow');
+      this.focusConfig.set(route.path, '* /deep/ #' + id + ' .subpage-arrow');
     }.bind(this));
   },
 
@@ -122,22 +119,21 @@ Polymer({
         'contentSettingCategoryChanged',
         this.updateDefaultValueLabel_.bind(this));
     this.addWebUIListener(
-        'setHandlersEnabled',
-        this.updateHandlersEnabled_.bind(this));
+        'setHandlersEnabled', this.updateHandlersEnabled_.bind(this));
     this.browserProxy.observeProtocolHandlersEnabledState();
   },
 
   /**
-   * @param {string} setting Value from settings.PermissionValues.
+   * @param {string} setting Value from settings.ContentSetting.
    * @param {string} enabled Non-block label ('feature X not allowed').
    * @param {string} disabled Block label (likely just, 'Blocked').
    * @param {?string} other Tristate value (maybe, 'session only').
    * @private
    */
   defaultSettingLabel_: function(setting, enabled, disabled, other) {
-    if (setting == settings.PermissionValues.BLOCK)
+    if (setting == settings.ContentSetting.BLOCK)
       return disabled;
-    if (setting == settings.PermissionValues.ALLOW)
+    if (setting == settings.ContentSetting.ALLOW)
       return enabled;
     if (other)
       return other;
@@ -149,8 +145,8 @@ Polymer({
    * @private
    */
   updateDefaultValueLabel_: function(category) {
-    this.browserProxy.getDefaultValueForContentType(
-        category).then(function(defaultValue) {
+    this.browserProxy.getDefaultValueForContentType(category).then(
+        function(defaultValue) {
           this.set(
               'default_.' + Polymer.CaseMap.dashToCamelCase(category),
               defaultValue.setting);
@@ -166,9 +162,8 @@ Polymer({
     var category = settings.ContentSettingsTypes.PROTOCOL_HANDLERS;
     this.set(
         'default_.' + Polymer.CaseMap.dashToCamelCase(category),
-        enabled ?
-            settings.PermissionValues.ALLOW :
-            settings.PermissionValues.BLOCK);
+        enabled ? settings.ContentSetting.ALLOW :
+                  settings.ContentSetting.BLOCK);
   },
 
   /**
@@ -177,7 +172,7 @@ Polymer({
    * @private
    */
   onTapNavigate_: function(event) {
-    var dataSet = /** @type {{route: string}} */(event.currentTarget.dataset);
-    settings.navigateTo(settings.Route[dataSet.route]);
+    var dataSet = /** @type {{route: string}} */ (event.currentTarget.dataset);
+    settings.navigateTo(settings.routes[dataSet.route]);
   },
 });
diff --git a/chromium/chrome/browser/resources/settings/system_page/system_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/system_page/system_page_browser_proxy.js
index b9ac51b3328..3b4d509bc4b 100644
--- a/chromium/chrome/browser/resources/settings/system_page/system_page_browser_proxy.js
+++ b/chromium/chrome/browser/resources/settings/system_page/system_page_browser_proxy.js
@@ -6,38 +6,33 @@
 
 cr.define('settings', function() {
   /** @interface */
-  function SystemPageBrowserProxy() {}
-
-  SystemPageBrowserProxy.prototype = {
+  class SystemPageBrowserProxy {
     /** Shows the native system proxy settings. */
-    showProxySettings: function() {},
+    showProxySettings() {}
 
     /**
      * @return {boolean} Whether hardware acceleration was enabled when the user
      *     started Chrome.
      */
-    wasHardwareAccelerationEnabledAtStartup: function() {},
-  };
+    wasHardwareAccelerationEnabledAtStartup() {}
+  }
 
   /**
-   * @constructor
    * @implements {settings.SystemPageBrowserProxy}
    */
-  function SystemPageBrowserProxyImpl() {}
-
-  cr.addSingletonGetter(SystemPageBrowserProxyImpl);
-
-  SystemPageBrowserProxyImpl.prototype = {
+  class SystemPageBrowserProxyImpl {
     /** @override */
-    showProxySettings: function() {
+    showProxySettings() {
       chrome.send('showProxySettings');
-    },
+    }
 
     /** @override */
-    wasHardwareAccelerationEnabledAtStartup: function() {
+    wasHardwareAccelerationEnabledAtStartup() {
       return loadTimeData.getBoolean('hardwareAccelerationEnabledAtStartup');
-    },
-  };
+    }
+  }
+
+  cr.addSingletonGetter(SystemPageBrowserProxyImpl);
 
   return {
     SystemPageBrowserProxy: SystemPageBrowserProxy,
diff --git a/chromium/chrome/browser/resources/signin/signin_dice_internals/signin_dice_internals.html b/chromium/chrome/browser/resources/signin/signin_dice_internals/signin_dice_internals.html
new file mode 100644
index 00000000000..54136bcd87c
--- /dev/null
+++ b/chromium/chrome/browser/resources/signin/signin_dice_internals/signin_dice_internals.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="import" href="chrome://resources/html/polymer.html">
+    <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+    <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <link rel="import" href="chrome://resources/html/cr.html">
+    <link rel="import" href="chrome://resources/html/util.html">
+    <style is="custom-style">
+      .top-title-bar {
+        align-items: center;
+        border-bottom: 1px solid var(--paper-grey-300);
+        display: flex;
+        font-size: 16px;
+        height: 52px;
+        padding: 0 24px;
+      }
+      .container {
+        background-color: white;
+        color: #333;
+        width: 448px;
+      }
+      .action-container {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+      }
+      paper-button.primary-action {
+        --paper-button-flat-keyboard-focus: {
+          background: rgb(58, 117, 215);
+          font-weight: 500;
+        };
+        background: var(--google-blue-500);
+        color: white;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="top-title-bar">Desktop Identity Consistency Internals</div>
+      <div class="action-container">
+        <paper-button class="primary-action" id="enableSyncButton">
+          Enable Sync
+        </paper-button>
+      </div>
+    </div>
+  </body>
+  <script src="signin_dice_internals.js"></script>
+</html>
diff --git a/chromium/chrome/browser/resources/signin/signin_dice_internals/signin_dice_internals.js b/chromium/chrome/browser/resources/signin/signin_dice_internals/signin_dice_internals.js
new file mode 100644
index 00000000000..4a63983482f
--- /dev/null
+++ b/chromium/chrome/browser/resources/signin/signin_dice_internals/signin_dice_internals.js
@@ -0,0 +1,21 @@
+/* Copyright 2017 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. */
+
+cr.define('signin.dice', function() {
+  'use strict';
+
+  function initialize() {
+    $('enableSyncButton').addEventListener('click', onEnableSync);
+  }
+
+  function onEnableSync(e) {
+    chrome.send('enableSync');
+  }
+
+  return {
+    initialize: initialize,
+  };
+});
+
+document.addEventListener('DOMContentLoaded', signin.dice.initialize);
diff --git a/chromium/chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js b/chromium/chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js
index 84ecd498784..46c58954f11 100644
--- a/chromium/chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js
+++ b/chromium/chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js
@@ -9,8 +9,8 @@ cr.define('signin.emailConfirmation', function() {
     var args = JSON.parse(chrome.getVariableValue('dialogArguments'));
     var lastEmail = args.lastEmail;
     var newEmail = args.newEmail;
-    $('dialogTitle').textContent = loadTimeData.getStringF(
-        'signinEmailConfirmationTitle', lastEmail);
+    $('dialogTitle').textContent =
+        loadTimeData.getStringF('signinEmailConfirmationTitle', lastEmail);
     $('createNewUserRadioButtonSubtitle').textContent = loadTimeData.getStringF(
         'signinEmailConfirmationCreateProfileButtonSubtitle', newEmail);
     $('startSyncRadioButtonSubtitle').textContent = loadTimeData.getStringF(
@@ -54,5 +54,5 @@ cr.define('signin.emailConfirmation', function() {
   };
 });
 
-document.addEventListener('DOMContentLoaded',
-                          signin.emailConfirmation.initialize);
+document.addEventListener(
+    'DOMContentLoaded', signin.emailConfirmation.initialize);
diff --git a/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html b/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html
index ca47f6a9bf4..6f7d2effcaa 100644
--- a/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html
+++ b/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html
@@ -3,9 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link rel="import" href="chrome://resources/html/polymer.html">
-    <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-    <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
     <link rel="import" href="signin_shared_css.html">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
@@ -17,20 +15,6 @@
         -webkit-margin-start: 0;
       }
 </if>
-      /* TODO(dbeam): de-duplicate this style with MD Settings. */
-      paper-checkbox {
-        --paper-checkbox-checked-color: var(--google-blue-500);
-        --paper-checkbox-label-color: inherit;
-        --paper-checkbox-label-spacing: 22px;
-        --paper-checkbox-size: 16px;
-        --paper-checkbox-unchecked-color: var(--paper-grey-600);
-        -webkit-margin-start: 2px;
-      }
-<if expr="is_macosx">
-      html:not(.focus-allowed) paper-checkbox {
-        --paper-checkbox-ink-size: 0;
-      }
-</if>
     </style>
   </head>
   <body>
@@ -72,9 +56,7 @@
           <div id="chrome-logo" class="logo"></div>
           <div>
             <div class="title">$i18n{syncConfirmationChromeSyncTitle}</div>
-            <div class="body text">
-              $i18nRaw{syncConfirmationChromeSyncBody}
-            </div>
+            <div class="body text">$i18n{syncConfirmationChromeSyncBody}</div>
           </div>
         </div>
         <div class="message-container">
@@ -93,11 +75,7 @@
           </div>
         </div>
         <div class="message-container">
-          <div class="body">
-            <paper-checkbox id="configure-before-signing-in">
-              $i18n{syncConfirmationSyncSettingsLabel}
-            </paper-checkbox>
-          </div>
+          <div class="body">$i18nRaw{syncConfirmationSyncSettingsLinkBody}</div>
         </div>
       </div>
       <div class="details" id="syncDisabledDetails">
diff --git a/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.js b/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.js
index 53d68539b61..5ae5bafca7b 100644
--- a/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.js
+++ b/chromium/chrome/browser/resources/signin/sync_confirmation/sync_confirmation.js
@@ -6,18 +6,23 @@ cr.define('sync.confirmation', function() {
   'use strict';
 
   function onConfirm(e) {
-    chrome.send('confirm', [$('configure-before-signing-in').checked]);
+    chrome.send('confirm');
   }
 
   function onUndo(e) {
     chrome.send('undo');
   }
 
+  function onGoToSettings(e) {
+    chrome.send('goToSettings');
+  }
+
   function initialize() {
     document.addEventListener('keydown', onKeyDown);
     $('confirmButton').addEventListener('click', onConfirm);
     $('undoButton').addEventListener('click', onUndo);
     if (loadTimeData.getBoolean('isSyncAllowed')) {
+      $('settingsLink').addEventListener('click', onGoToSettings);
       $('profile-picture').addEventListener('load', onPictureLoaded);
       $('syncDisabledDetails').hidden = true;
     } else {
@@ -32,7 +37,6 @@ cr.define('sync.confirmation', function() {
 
   function clearFocus() {
     document.activeElement.blur();
-    document.documentElement.classList.add('focus-allowed');
   }
 
   function setUserImageURL(url) {
diff --git a/chromium/chrome/browser/resources/snippets_internals.html b/chromium/chrome/browser/resources/snippets_internals.html
index c1f7511d6d3..0c2df4eb20e 100644
--- a/chromium/chrome/browser/resources/snippets_internals.html
+++ b/chromium/chrome/browser/resources/snippets_internals.html
@@ -175,6 +175,9 @@ found in the LICENSE file.
                 <tr>
                   <td>Publisher name
                   <td jscontent="publisherName">
+                <tr>
+                  <td>Score
+                  <td jscontent="score">
               </table>
             </div>
       </table>
@@ -209,6 +212,9 @@ found in the LICENSE file.
                 <tr>
                   <td>Publisher name
                   <td jscontent="publisherName">
+                <tr>
+                  <td>Score
+                  <td jscontent="score">
               </table>
             </div>
       </table>
diff --git a/chromium/chrome/browser/resources/snippets_internals.js b/chromium/chrome/browser/resources/snippets_internals.js
index 9f36642dead..d971832652d 100644
--- a/chromium/chrome/browser/resources/snippets_internals.js
+++ b/chromium/chrome/browser/resources/snippets_internals.js
@@ -50,8 +50,7 @@ cr.define('chrome.SnippetsInternals', function() {
 
   function receiveContentSuggestions(categoriesList) {
     lastSuggestions = categoriesList;
-    displayList(categoriesList, 'content-suggestions',
-                'hidden-toggler');
+    displayList(categoriesList, 'content-suggestions', 'hidden-toggler');
 
     var clearCachedButtons =
         document.getElementsByClassName('submit-clear-cached-suggestions');
@@ -89,7 +88,8 @@ cr.define('chrome.SnippetsInternals', function() {
     var id = parseInt(event.currentTarget.getAttribute('category-id'), 10);
     var table = $('dismissed-suggestions-' + id);
     table.classList.toggle('hidden');
-    chrome.send('toggleDismissedSuggestions',
+    chrome.send(
+        'toggleDismissedSuggestions',
         [id, !table.classList.contains('hidden')]);
   }
 
@@ -119,7 +119,8 @@ cr.define('chrome.SnippetsInternals', function() {
 
   function receiveLastRemoteSuggestionsBackgroundFetchTime(
       lastRemoteSuggestionsBackgroundFetchTime) {
-    receiveProperty('last-background-fetch-time-label',
+    receiveProperty(
+        'last-background-fetch-time-label',
         lastRemoteSuggestionsBackgroundFetchTime);
   }
 
@@ -156,8 +157,10 @@ cr.define('chrome.SnippetsInternals', function() {
       display = 'none';
     }
 
-    if ($(domId + '-empty')) $(domId + '-empty').textContent = text;
-    if ($(domId + '-clear')) $(domId + '-clear').style.display = display;
+    if ($(domId + '-empty'))
+      $(domId + '-empty').textContent = text;
+    if ($(domId + '-clear'))
+      $(domId + '-clear').style.display = display;
 
     var links = document.getElementsByClassName(toggleClass);
     for (var link of links) {
@@ -178,5 +181,5 @@ cr.define('chrome.SnippetsInternals', function() {
   };
 });
 
-document.addEventListener('DOMContentLoaded',
-                          chrome.SnippetsInternals.initialize);
+document.addEventListener(
+    'DOMContentLoaded', chrome.SnippetsInternals.initialize);
diff --git a/chromium/chrome/browser/resources/standalone/standalone_hack.js b/chromium/chrome/browser/resources/standalone/standalone_hack.js
index c7d3c335872..c830a6cc15c 100644
--- a/chromium/chrome/browser/resources/standalone/standalone_hack.js
+++ b/chromium/chrome/browser/resources/standalone/standalone_hack.js
@@ -34,38 +34,32 @@ if (!window.chrome) {
  */
 chrome.send = (function() {
   var users = [
-  {
-    name: 'Alan Beaker',
-    emailAddress: 'beaker@chromium.org',
-    imageUrl: '../../app/theme/avatar_beaker.png',
-    canRemove: false
-  },
-  {
-    name: 'Alex Briefcase',
-    emailAddress: 'briefcase@chromium.org',
-    imageUrl: '../../app/theme/avatar_briefcase.png',
-    canRemove: true
-  },
-  {
-    name: 'Alex Circles',
-    emailAddress: 'circles@chromium.org',
-    imageUrl: '../../app/theme/avatar_circles.png',
-    canRemove: true
-  },
-  {
-    name: 'Guest',
-    emailAddress: '',
-    imageUrl: '',
-    canRemove: false
-  }
+    {
+      name: 'Alan Beaker',
+      emailAddress: 'beaker@chromium.org',
+      imageUrl: '../../app/theme/avatar_beaker.png',
+      canRemove: false
+    },
+    {
+      name: 'Alex Briefcase',
+      emailAddress: 'briefcase@chromium.org',
+      imageUrl: '../../app/theme/avatar_briefcase.png',
+      canRemove: true
+    },
+    {
+      name: 'Alex Circles',
+      emailAddress: 'circles@chromium.org',
+      imageUrl: '../../app/theme/avatar_circles.png',
+      canRemove: true
+    },
+    {name: 'Guest', emailAddress: '', imageUrl: '', canRemove: false}
   ];
 
   /**
    * Invoke the getAppsCallback function with a snapshot of the current app
    * database.
    */
-  function sendGetUsersCallback()
-  {
+  function sendGetUsersCallback() {
     // We don't want to hand out our array directly because the NTP will
     // assume it owns the array and is free to modify it.  For now we make a
     // one-level deep copy of the array (since cloning the whole thing is
@@ -97,7 +91,9 @@ chrome.send = (function() {
    * @return {number} The index in apps for an object with the specified ID.
    */
   function getUserIndex(name) {
-    var i = indexOfPred(apps, function(e) { return e.name === name;});
+    var i = indexOfPred(apps, function(e) {
+      return e.name === name;
+    });
     if (i == -1)
       alert('Error: got unexpected App ID');
     return i;
@@ -226,14 +222,14 @@ if (/iPhone|iPod|iPad/.test(navigator.userAgent) &&
 if (typeof Element !== 'undefined' &&
     !Element.prototype.hasOwnProperty('classList')) {
   (function() {
-    var classListProp = 'classList',
-        protoProp = 'prototype',
-        elemCtrProto = Element[protoProp],
-        objCtr = Object,
-        strTrim = String[protoProp].trim || function() {
+    var classListProp = 'classList', protoProp = 'prototype',
+        elemCtrProto = Element[protoProp], objCtr = Object,
+        strTrim = String[protoProp].trim ||
+        function() {
           return this.replace(/^\s+|\s+$/g, '');
         },
-        arrIndexOf = Array[protoProp].indexOf || function(item) {
+        arrIndexOf = Array[protoProp].indexOf ||
+        function(item) {
           for (var i = 0, len = this.length; i < len; i++) {
             if (i in this && this[i] === item) {
               return i;
@@ -243,29 +239,29 @@ if (typeof Element !== 'undefined' &&
         },
         // Vendors: please allow content code to instantiate DOMExceptions
         /** @constructor  */
-        DOMEx = function(type, message) {
+        DOMEx =
+            function(type, message) {
           this.name = type;
           this.code = DOMException[type];
           this.message = message;
         },
-        checkTokenAndGetIndex = function(classList, token) {
+        checkTokenAndGetIndex =
+            function(classList, token) {
           if (token === '') {
             throw new DOMEx(
-                'SYNTAX_ERR',
-                'An invalid or illegal string was specified'
-            );
+                'SYNTAX_ERR', 'An invalid or illegal string was specified');
           }
           if (/\s/.test(token)) {
             throw new DOMEx(
                 'INVALID_CHARACTER_ERR',
-                'String contains an invalid character'
-            );
+                'String contains an invalid character');
           }
           return arrIndexOf.call(classList, token);
         },
         /** @constructor
          *  @extends {Array} */
-        ClassList = function(elem) {
+        ClassList =
+            function(elem) {
           var trimmedClasses = strTrim.call(elem.className),
               classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [];
 
@@ -346,18 +342,15 @@ if (!Function.prototype.bind) {
    *  @suppress {duplicate}
    */
   Function.prototype.bind = function(selfObj, var_args) {
-    var slice = [].slice,
-        args = slice.call(arguments, 1),
-        self = this,
+    var slice = [].slice, args = slice.call(arguments, 1), self = this,
         /** @constructor  */
-        nop = function() {},
-        bound = function() {
-          return self.apply(this instanceof nop ? this : (selfObj || {}),
-                              args.concat(slice.call(arguments)));
+        nop = function() {}, bound = function() {
+          return self.apply(
+              this instanceof nop ? this : (selfObj || {}),
+              args.concat(slice.call(arguments)));
         };
     nop.prototype = self.prototype;
     bound.prototype = new nop();
     return bound;
   };
 }
-
diff --git a/chromium/chrome/browser/resources/supervised_user_internals.js b/chromium/chrome/browser/resources/supervised_user_internals.js
index de5a370e280..beb982ac978 100644
--- a/chromium/chrome/browser/resources/supervised_user_internals.js
+++ b/chromium/chrome/browser/resources/supervised_user_internals.js
@@ -46,7 +46,9 @@ cr.define('chrome.supervised_user_internals', function() {
     // Hack: Schedule another refresh after a while.
     // TODO(treib): Get rid of this once we're properly notified of all
     // relevant changes.
-    setTimeout(function() { chrome.send('getBasicInfo'); }, 5000);
+    setTimeout(function() {
+      chrome.send('getBasicInfo');
+    }, 5000);
   }
 
   function receiveUserSettings(settings) {
@@ -62,10 +64,7 @@ cr.define('chrome.supervised_user_internals', function() {
     // This is not done recursively, values are passed as their JSON
     // representation.
     var kvpairs = Object.keys(settings).map(function(key) {
-      return {
-        key: key,
-        value: JSON.stringify(settings[key], null, 2)
-      };
+      return {key: key, value: JSON.stringify(settings[key], null, 2)};
     });
 
     jstProcess(new JsEvalContext({settings: kvpairs}), $('user-settings'));
@@ -110,7 +109,7 @@ cr.define('chrome.supervised_user_internals', function() {
     // the scrollbar alone.
     var shouldScrollDown = isScrolledToBottom(container);
 
-    jstProcess(new JsEvalContext({ results: filteringResults }), container);
+    jstProcess(new JsEvalContext({results: filteringResults}), container);
 
     if (shouldScrollDown)
       scrollToBottom(container);
@@ -127,5 +126,5 @@ cr.define('chrome.supervised_user_internals', function() {
   };
 });
 
-document.addEventListener('DOMContentLoaded',
-                          chrome.supervised_user_internals.initialize);
+document.addEventListener(
+    'DOMContentLoaded', chrome.supervised_user_internals.initialize);
diff --git a/chromium/chrome/browser/resources/sync_file_system_internals/dump_database.js b/chromium/chrome/browser/resources/sync_file_system_internals/dump_database.js
index 58025bc4170..95ac9b7774d 100644
--- a/chromium/chrome/browser/resources/sync_file_system_internals/dump_database.js
+++ b/chromium/chrome/browser/resources/sync_file_system_internals/dump_database.js
@@ -6,85 +6,85 @@
  * Handles DumpDatabase tab for syncfs-internals.
  */
 var DumpDatabase = (function() {
-'use strict';
+  'use strict';
 
-var DumpDatabase = {};
+  var DumpDatabase = {};
 
-/**
- * Get the database dump.
- */
-function getDatabaseDump() {
-  chrome.send('getDatabaseDump');
-}
-
-/**
- * Creates an element named |elementName| containing the content |text|.
- * @param {string} elementName Name of the new element to be created.
- * @param {string} text Text to be contained in the new element.
- * @return {HTMLElement} The newly created HTML element.
- */
-function createElementFromText(elementName, text) {
-  var element = document.createElement(elementName);
-  element.appendChild(document.createTextNode(text));
-  return element;
-}
+  /**
+   * Get the database dump.
+   */
+  function getDatabaseDump() {
+    chrome.send('getDatabaseDump');
+  }
 
-/**
- * Creates a table by filling |header| and |body|.
- * @param {HTMLElement} div The outer container of the table to be renderered.
- * @param {HTMLElement} header The table header element to be fillied by
- *     this function.
- * @param {HTMLElement} body The table body element to be filled by this
- *     function.
- * @param {Array} databaseDump List of dictionaries for the database dump.
- *     The first element must have metadata of the entry.
- *     The remaining elements must be dictionaries for the database dump,
- *     which can be iterated using the 'keys' fields given by the first
- *     element.
- */
-function createDatabaseDumpTable(div, header, body, databaseDump) {
-  var metadata = databaseDump.shift();
-  div.appendChild(createElementFromText('h3', metadata['title']));
+  /**
+   * Creates an element named |elementName| containing the content |text|.
+   * @param {string} elementName Name of the new element to be created.
+   * @param {string} text Text to be contained in the new element.
+   * @return {HTMLElement} The newly created HTML element.
+   */
+  function createElementFromText(elementName, text) {
+    var element = document.createElement(elementName);
+    element.appendChild(document.createTextNode(text));
+    return element;
+  }
 
-  var tr = document.createElement('tr');
-  for (var i = 0; i < metadata.keys.length; ++i)
-    tr.appendChild(createElementFromText('td', metadata.keys[i]));
-  header.appendChild(tr);
+  /**
+   * Creates a table by filling |header| and |body|.
+   * @param {HTMLElement} div The outer container of the table to be renderered.
+   * @param {HTMLElement} header The table header element to be fillied by
+   *     this function.
+   * @param {HTMLElement} body The table body element to be filled by this
+   *     function.
+   * @param {Array} databaseDump List of dictionaries for the database dump.
+   *     The first element must have metadata of the entry.
+   *     The remaining elements must be dictionaries for the database dump,
+   *     which can be iterated using the 'keys' fields given by the first
+   *     element.
+   */
+  function createDatabaseDumpTable(div, header, body, databaseDump) {
+    var metadata = databaseDump.shift();
+    div.appendChild(createElementFromText('h3', metadata['title']));
 
-  for (var i = 0; i < databaseDump.length; i++) {
-    var entry = databaseDump[i];
     var tr = document.createElement('tr');
-    for (var k = 0; k < metadata.keys.length; ++k)
-      tr.appendChild(createElementFromText('td', entry[metadata.keys[k]]));
-    body.appendChild(tr);
-  }
-}
+    for (var i = 0; i < metadata.keys.length; ++i)
+      tr.appendChild(createElementFromText('td', metadata.keys[i]));
+    header.appendChild(tr);
 
-/**
- * Handles callback from onGetDatabaseDump.
- * @param {Array} databaseDump List of lists for the database dump.
- */
-DumpDatabase.onGetDatabaseDump = function(databaseDump) {
-  var placeholder = $('dump-database-placeholder');
-  placeholder.innerHTML = '';
-  for (var i = 0; i < databaseDump.length; ++i) {
-    var div = document.createElement('div');
-    var table = document.createElement('table');
-    var header = document.createElement('thead');
-    var body = document.createElement('tbody');
-    createDatabaseDumpTable(div, header, body, databaseDump[i]);
-    table.appendChild(header);
-    table.appendChild(body);
-    div.appendChild(table);
-    placeholder.appendChild(div);
+    for (var i = 0; i < databaseDump.length; i++) {
+      var entry = databaseDump[i];
+      var tr = document.createElement('tr');
+      for (var k = 0; k < metadata.keys.length; ++k)
+        tr.appendChild(createElementFromText('td', entry[metadata.keys[k]]));
+      body.appendChild(tr);
+    }
   }
-}
 
-function main() {
-  getDatabaseDump();
-  $('refresh-database-dump').addEventListener('click', getDatabaseDump);
-}
+  /**
+   * Handles callback from onGetDatabaseDump.
+   * @param {Array} databaseDump List of lists for the database dump.
+   */
+  DumpDatabase.onGetDatabaseDump = function(databaseDump) {
+    var placeholder = $('dump-database-placeholder');
+    placeholder.innerHTML = '';
+    for (var i = 0; i < databaseDump.length; ++i) {
+      var div = document.createElement('div');
+      var table = document.createElement('table');
+      var header = document.createElement('thead');
+      var body = document.createElement('tbody');
+      createDatabaseDumpTable(div, header, body, databaseDump[i]);
+      table.appendChild(header);
+      table.appendChild(body);
+      div.appendChild(table);
+      placeholder.appendChild(div);
+    }
+  };
+
+  function main() {
+    getDatabaseDump();
+    $('refresh-database-dump').addEventListener('click', getDatabaseDump);
+  }
 
-document.addEventListener('DOMContentLoaded', main);
-return DumpDatabase;
+  document.addEventListener('DOMContentLoaded', main);
+  return DumpDatabase;
 })();
diff --git a/chromium/chrome/browser/resources/sync_file_system_internals/extension_statuses.js b/chromium/chrome/browser/resources/sync_file_system_internals/extension_statuses.js
index a31de2355ff..99c78ba584f 100644
--- a/chromium/chrome/browser/resources/sync_file_system_internals/extension_statuses.js
+++ b/chromium/chrome/browser/resources/sync_file_system_internals/extension_statuses.js
@@ -6,56 +6,56 @@
  * Handles the Extension ID -> SyncStatus tab for syncfs-internals.
  */
 var ExtensionStatuses = (function() {
-'use strict';
+  'use strict';
 
-var ExtensionStatuses = {};
+  var ExtensionStatuses = {};
 
-/**
- * Get initial map of extension statuses (pending batch sync, enabled and
- * disabled).
- */
-function getExtensionStatuses() {
-  chrome.send('getExtensionStatuses');
-}
-
-// TODO(calvinlo): Move to helper file so it doesn't need to be duplicated.
-/**
- * Creates an element named |elementName| containing the content |text|.
- * @param {string} elementName Name of the new element to be created.
- * @param {string} text Text to be contained in the new element.
- * @return {HTMLElement} The newly created HTML element.
- */
-function createElementFromText(elementName, text) {
-  var element = document.createElement(elementName);
-  element.appendChild(document.createTextNode(text));
-  return element;
-}
+  /**
+   * Get initial map of extension statuses (pending batch sync, enabled and
+   * disabled).
+   */
+  function getExtensionStatuses() {
+    chrome.send('getExtensionStatuses');
+  }
 
-/**
- * Handles callback from onGetExtensionStatuses.
- * @param {Array} list of dictionaries containing 'extensionName',
- *     'extensionID, 'status'.
- */
-ExtensionStatuses.onGetExtensionStatuses = function(extensionStatuses) {
-  var itemContainer = $('extension-entries');
-  itemContainer.textContent = '';
-
-  for (var i = 0; i < extensionStatuses.length; i++) {
-    var originEntry = extensionStatuses[i];
-    var tr = document.createElement('tr');
-    tr.appendChild(createElementFromText('td', originEntry.extensionName));
-    tr.appendChild(createElementFromText('td', originEntry.extensionID));
-    tr.appendChild(createElementFromText('td', originEntry.status));
-    itemContainer.appendChild(tr);
+  // TODO(calvinlo): Move to helper file so it doesn't need to be duplicated.
+  /**
+   * Creates an element named |elementName| containing the content |text|.
+   * @param {string} elementName Name of the new element to be created.
+   * @param {string} text Text to be contained in the new element.
+   * @return {HTMLElement} The newly created HTML element.
+   */
+  function createElementFromText(elementName, text) {
+    var element = document.createElement(elementName);
+    element.appendChild(document.createTextNode(text));
+    return element;
   }
-}
 
-function main() {
-  getExtensionStatuses();
-  $('refresh-extensions-statuses').addEventListener('click',
-                                                    getExtensionStatuses);
-}
+  /**
+   * Handles callback from onGetExtensionStatuses.
+   * @param {Array} list of dictionaries containing 'extensionName',
+   *     'extensionID, 'status'.
+   */
+  ExtensionStatuses.onGetExtensionStatuses = function(extensionStatuses) {
+    var itemContainer = $('extension-entries');
+    itemContainer.textContent = '';
+
+    for (var i = 0; i < extensionStatuses.length; i++) {
+      var originEntry = extensionStatuses[i];
+      var tr = document.createElement('tr');
+      tr.appendChild(createElementFromText('td', originEntry.extensionName));
+      tr.appendChild(createElementFromText('td', originEntry.extensionID));
+      tr.appendChild(createElementFromText('td', originEntry.status));
+      itemContainer.appendChild(tr);
+    }
+  };
+
+  function main() {
+    getExtensionStatuses();
+    $('refresh-extensions-statuses')
+        .addEventListener('click', getExtensionStatuses);
+  }
 
-document.addEventListener('DOMContentLoaded', main);
-return ExtensionStatuses;
+  document.addEventListener('DOMContentLoaded', main);
+  return ExtensionStatuses;
 })();
diff --git a/chromium/chrome/browser/resources/sync_file_system_internals/file_metadata.js b/chromium/chrome/browser/resources/sync_file_system_internals/file_metadata.js
index 11c0e3473ac..cc9eae5c0be 100644
--- a/chromium/chrome/browser/resources/sync_file_system_internals/file_metadata.js
+++ b/chromium/chrome/browser/resources/sync_file_system_internals/file_metadata.js
@@ -6,132 +6,133 @@
  * WebUI to monitor File Metadata per Extension ID.
  */
 var FileMetadata = (function() {
-'use strict';
+  'use strict';
 
-var FileMetadata = {};
+  var FileMetadata = {};
 
-/**
- * Gets extension data so the select drop down can be filled.
- */
-function getExtensions() {
-  chrome.send('getExtensions');
-}
-
-/**
- * Renders result of getFileMetadata as a table.
- * @param {Array} list of dictionaries containing 'extensionName',
- *     'extensionID', 'status'.
- */
-FileMetadata.onGetExtensions = function(extensionStatuses) {
-  var select = $('extensions-select');
-
-  // Record existing drop down extension ID. If it's still there after the
-  // refresh then keep it as the selected value.
-  var oldSelectedExtension = getSelectedExtensionId();
-
-  select.textContent = '';
-  for (var i = 0; i < extensionStatuses.length; i++) {
-    var originEntry = extensionStatuses[i];
-    var tr = document.createElement('tr');
-    var title = originEntry.extensionName + ' [' + originEntry.status + ']';
-    select.options.add(new Option(title, originEntry.extensionID));
-
-    // If option was the previously only selected, make it selected again.
-    if (originEntry.extensionID != oldSelectedExtension)
-      continue;
-    select.options[select.options.length - 1].selected = true;
+  /**
+   * Gets extension data so the select drop down can be filled.
+   */
+  function getExtensions() {
+    chrome.send('getExtensions');
   }
 
-  // After drop down has been loaded with options, file metadata can be loaded
-  getFileMetadata();
-};
-
-/**
- * @return {string} extension ID that's currently selected in drop down box.
- */
-function getSelectedExtensionId() {
-  var dropDown = $('extensions-select').options;
-  if (dropDown.selectedIndex >= 0)
-    return dropDown[dropDown.selectedIndex].value;
-
-  return null;
-}
-
-/**
- * Get File Metadata depending on which extension is selected from the drop down
- * if any.
- */
-function getFileMetadata() {
-  var dropDown = $('extensions-select');
-  if (dropDown.options.length === 0) {
-    $('file-metadata-header').textContent = '';
-    $('file-metadata-entries').textContent = 'No file metadata available.';
-    return;
+  /**
+   * Renders result of getFileMetadata as a table.
+   * @param {Array} list of dictionaries containing 'extensionName',
+   *     'extensionID', 'status'.
+   */
+  FileMetadata.onGetExtensions = function(extensionStatuses) {
+    var select = $('extensions-select');
+
+    // Record existing drop down extension ID. If it's still there after the
+    // refresh then keep it as the selected value.
+    var oldSelectedExtension = getSelectedExtensionId();
+
+    select.textContent = '';
+    for (var i = 0; i < extensionStatuses.length; i++) {
+      var originEntry = extensionStatuses[i];
+      var tr = document.createElement('tr');
+      var title = originEntry.extensionName + ' [' + originEntry.status + ']';
+      select.options.add(new Option(title, originEntry.extensionID));
+
+      // If option was the previously only selected, make it selected again.
+      if (originEntry.extensionID != oldSelectedExtension)
+        continue;
+      select.options[select.options.length - 1].selected = true;
+    }
+
+    // After drop down has been loaded with options, file metadata can be loaded
+    getFileMetadata();
+  };
+
+  /**
+   * @return {string} extension ID that's currently selected in drop down box.
+   */
+  function getSelectedExtensionId() {
+    var dropDown = $('extensions-select').options;
+    if (dropDown.selectedIndex >= 0)
+      return dropDown[dropDown.selectedIndex].value;
+
+    return null;
   }
 
-  var selectedExtensionId = getSelectedExtensionId();
-  chrome.send('getFileMetadata', [selectedExtensionId]);
-}
-
-/**
- * Renders result of getFileMetadata as a table.
- */
-FileMetadata.onGetFileMetadata = function(fileMetadataMap) {
-  var header = $('file-metadata-header');
-  // Only draw the header if it hasn't been drawn yet
-  if (header.children.length === 0) {
-    var tr = document.createElement('tr');
-    tr.appendChild(createElementFromText('td', 'Type'));
-    tr.appendChild(createElementFromText('td', 'Status'));
-    tr.appendChild(createElementFromText('td', 'Path', {width: '250px'}));
-    tr.appendChild(createElementFromText('td', 'Details'));
-    header.appendChild(tr);
+  /**
+   * Get File Metadata depending on which extension is selected from the drop
+   * down if any.
+   */
+  function getFileMetadata() {
+    var dropDown = $('extensions-select');
+    if (dropDown.options.length === 0) {
+      $('file-metadata-header').textContent = '';
+      $('file-metadata-entries').textContent = 'No file metadata available.';
+      return;
+    }
+
+    var selectedExtensionId = getSelectedExtensionId();
+    chrome.send('getFileMetadata', [selectedExtensionId]);
   }
 
-  // Add row entries.
-  var itemContainer = $('file-metadata-entries');
-  itemContainer.textContent = '';
-  for (var i = 0; i < fileMetadataMap.length; i++) {
-    var metadatEntry = fileMetadataMap[i];
-    var tr = document.createElement('tr');
-    tr.appendChild(createFileIconCell(metadatEntry.type));
-    tr.appendChild(createElementFromText('td', metadatEntry.status));
-    tr.appendChild(createElementFromText('td', metadatEntry.path));
-    tr.appendChild(createElementFromDictionary('td', metadatEntry.details));
-    itemContainer.appendChild(tr);
+  /**
+   * Renders result of getFileMetadata as a table.
+   */
+  FileMetadata.onGetFileMetadata = function(fileMetadataMap) {
+    var header = $('file-metadata-header');
+    // Only draw the header if it hasn't been drawn yet
+    if (header.children.length === 0) {
+      var tr = document.createElement('tr');
+      tr.appendChild(createElementFromText('td', 'Type'));
+      tr.appendChild(createElementFromText('td', 'Status'));
+      tr.appendChild(createElementFromText('td', 'Path', {width: '250px'}));
+      tr.appendChild(createElementFromText('td', 'Details'));
+      header.appendChild(tr);
+    }
+
+    // Add row entries.
+    var itemContainer = $('file-metadata-entries');
+    itemContainer.textContent = '';
+    for (var i = 0; i < fileMetadataMap.length; i++) {
+      var metadatEntry = fileMetadataMap[i];
+      var tr = document.createElement('tr');
+      tr.appendChild(createFileIconCell(metadatEntry.type));
+      tr.appendChild(createElementFromText('td', metadatEntry.status));
+      tr.appendChild(createElementFromText('td', metadatEntry.path));
+      tr.appendChild(createElementFromDictionary('td', metadatEntry.details));
+      itemContainer.appendChild(tr);
+    }
+  };
+
+  /**
+   * @param {string} file type string.
+   * @return {HTMLElement} TD with file or folder icon depending on type.
+   */
+  function createFileIconCell(type) {
+    var img = document.createElement('div');
+    var lowerType = type.toLowerCase();
+    if (lowerType == 'file') {
+      img.style.content =
+          cr.icon.getImage('chrome://theme/IDR_DEFAULT_FAVICON');
+    } else if (lowerType == 'folder') {
+      img.style.content = cr.icon.getImage('chrome://theme/IDR_FOLDER_CLOSED');
+      img.className = 'folder-image';
+    }
+
+    var imgWrapper = document.createElement('div');
+    imgWrapper.appendChild(img);
+
+    var td = document.createElement('td');
+    td.className = 'file-icon-cell';
+    td.appendChild(imgWrapper);
+    td.appendChild(document.createTextNode(type));
+    return td;
   }
-};
 
-/**
- * @param {string} file type string.
- * @return {HTMLElement} TD with file or folder icon depending on type.
- */
-function createFileIconCell(type) {
-  var img = document.createElement('div');
-  var lowerType = type.toLowerCase();
-  if (lowerType == 'file') {
-    img.style.content = cr.icon.getImage('chrome://theme/IDR_DEFAULT_FAVICON');
-  } else if (lowerType == 'folder') {
-    img.style.content = cr.icon.getImage('chrome://theme/IDR_FOLDER_CLOSED');
-    img.className = 'folder-image';
+  function main() {
+    getExtensions();
+    $('refresh-metadata-button').addEventListener('click', getExtensions);
+    $('extensions-select').addEventListener('change', getFileMetadata);
   }
 
-  var imgWrapper = document.createElement('div');
-  imgWrapper.appendChild(img);
-
-  var td = document.createElement('td');
-  td.className = 'file-icon-cell';
-  td.appendChild(imgWrapper);
-  td.appendChild(document.createTextNode(type));
-  return td;
-}
-
-function main() {
-  getExtensions();
-  $('refresh-metadata-button').addEventListener('click', getExtensions);
-  $('extensions-select').addEventListener('change', getFileMetadata);
-}
-
-document.addEventListener('DOMContentLoaded', main);
-return FileMetadata;
+  document.addEventListener('DOMContentLoaded', main);
+  return FileMetadata;
 })();
diff --git a/chromium/chrome/browser/resources/sync_file_system_internals/sync_service.js b/chromium/chrome/browser/resources/sync_file_system_internals/sync_service.js
index b5a2578ee3d..8772f4c8c9e 100644
--- a/chromium/chrome/browser/resources/sync_file_system_internals/sync_service.js
+++ b/chromium/chrome/browser/resources/sync_file_system_internals/sync_service.js
@@ -6,91 +6,91 @@
  * WebUI to monitor the Sync File System Service.
  */
 var SyncService = (function() {
-'use strict';
+  'use strict';
 
-var SyncService = {};
+  var SyncService = {};
 
-/**
- * Request Sync Service Status.
- */
-function getServiceStatus() {
-  chrome.send('getServiceStatus');
-}
+  /**
+   * Request Sync Service Status.
+   */
+  function getServiceStatus() {
+    chrome.send('getServiceStatus');
+  }
 
-/**
- * Called when service status is initially retrieved or updated via events.
- * @param {string} Service status enum as a string.
- */
-SyncService.onGetServiceStatus = function(statusString) {
-  $('service-status').textContent = statusString;
-}
+  /**
+   * Called when service status is initially retrieved or updated via events.
+   * @param {string} Service status enum as a string.
+   */
+  SyncService.onGetServiceStatus = function(statusString) {
+    $('service-status').textContent = statusString;
+  };
 
-/**
- * Request Google Drive Notification Source. e.g. XMPP or polling.
- */
-function getNotificationSource() {
-  chrome.send('getNotificationSource');
-}
+  /**
+   * Request Google Drive Notification Source. e.g. XMPP or polling.
+   */
+  function getNotificationSource() {
+    chrome.send('getNotificationSource');
+  }
 
-/**
- * Handles callback from getNotificationSource.
- * @param {string} Notification source as a string.
- */
-SyncService.onGetNotificationSource = function(sourceString) {
-  $('notification-source').textContent = sourceString;
-}
+  /**
+   * Handles callback from getNotificationSource.
+   * @param {string} Notification source as a string.
+   */
+  SyncService.onGetNotificationSource = function(sourceString) {
+    $('notification-source').textContent = sourceString;
+  };
 
-// Keeps track of the last log event seen so it's not reprinted.
-var lastLogEventId = -1;
+  // Keeps track of the last log event seen so it's not reprinted.
+  var lastLogEventId = -1;
 
-/**
- * Request debug log.
- */
-function getLog() {
-  chrome.send('getLog', [lastLogEventId]);
-}
+  /**
+   * Request debug log.
+   */
+  function getLog() {
+    chrome.send('getLog', [lastLogEventId]);
+  }
 
-/**
- * Clear old logs.
- */
-function clearLogs() {
-  chrome.send('clearLogs');
-  $('log-entries').innerHTML = '';
-}
+  /**
+   * Clear old logs.
+   */
+  function clearLogs() {
+    chrome.send('clearLogs');
+    $('log-entries').innerHTML = '';
+  }
 
-/**
- * Handles callback from getUpdateLog.
- * @param {Array} list List of dictionaries containing 'id', 'time', 'logEvent'.
- */
-SyncService.onGetLog = function(logEntries) {
-  var itemContainer = $('log-entries');
-  for (var i = 0; i < logEntries.length; i++) {
-    var logEntry = logEntries[i];
-    var tr = document.createElement('tr');
-    var error = /ERROR/.test(logEntry.logEvent) ? ' error' : '';
-    tr.appendChild(createElementFromText('td', logEntry.time,
-                                         {'class': 'log-time'}));
-    tr.appendChild(createElementFromText('td', logEntry.logEvent,
-                                         {'class': 'log-event' + error}));
-    itemContainer.appendChild(tr);
+  /**
+   * Handles callback from getUpdateLog.
+   * @param {Array} list List of dictionaries containing 'id', 'time', 'logEvent'.
+   */
+  SyncService.onGetLog = function(logEntries) {
+    var itemContainer = $('log-entries');
+    for (var i = 0; i < logEntries.length; i++) {
+      var logEntry = logEntries[i];
+      var tr = document.createElement('tr');
+      var error = /ERROR/.test(logEntry.logEvent) ? ' error' : '';
+      tr.appendChild(
+          createElementFromText('td', logEntry.time, {'class': 'log-time'}));
+      tr.appendChild(createElementFromText(
+          'td', logEntry.logEvent, {'class': 'log-event' + error}));
+      itemContainer.appendChild(tr);
 
-    lastLogEventId = logEntry.id;
-  }
-}
+      lastLogEventId = logEntry.id;
+    }
+  };
 
-/**
- * Get initial sync service values and set listeners to get updated values.
- */
-function main() {
-  cr.ui.decorate('tabbox', cr.ui.TabBox);
-  $('clear-log-button').addEventListener('click', clearLogs);
-  getServiceStatus();
-  getNotificationSource();
+  /**
+   * Get initial sync service values and set listeners to get updated values.
+   */
+  function main() {
+    cr.ui.decorate('tabbox', cr.ui.TabBox);
+    $('clear-log-button').addEventListener('click', clearLogs);
+    getServiceStatus();
+    getNotificationSource();
 
-  // TODO: Look for a way to push entries to the page when necessary.
-  window.setInterval(getLog, 1000);
-}
+    // TODO: Look for a way to push entries to the page when necessary.
+    window.setInterval(getLog, 1000);
+  }
 
-document.addEventListener('DOMContentLoaded', main);
-return SyncService;
+  document.addEventListener('DOMContentLoaded', main);
+  return SyncService;
 })();
diff --git a/chromium/chrome/browser/resources/sync_file_system_internals/task_log.js b/chromium/chrome/browser/resources/sync_file_system_internals/task_log.js
index 0cc24db35f5..a0eb22a85f5 100644
--- a/chromium/chrome/browser/resources/sync_file_system_internals/task_log.js
+++ b/chromium/chrome/browser/resources/sync_file_system_internals/task_log.js
@@ -3,56 +3,56 @@
 // found in the LICENSE file.
 
 var TaskLog = (function() {
-'use strict';
-
-var nextTaskLogSeq = 1;
-var TaskLog = {};
-
-function observeTaskLog() {
-  chrome.send('observeTaskLog');
-}
-
-/**
- * Handles per-task log event.
- * @param {Object} taskLog a dictionary containing 'duration',
- * 'task_description', 'result_description' and 'details'.
- */
-TaskLog.onTaskLogRecorded = function(taskLog) {
-  var details = document.createElement('td');
-  details.classList.add('task-log-details');
-
-  var label = document.createElement('label');
-  details.appendChild(label);
-
-  var collapseCheck = document.createElement('input');
-  collapseCheck.setAttribute('type', 'checkbox');
-  collapseCheck.classList.add('task-log-collapse-check');
-  label.appendChild(collapseCheck);
-
-  var ul = document.createElement('ul');
-  for (var i = 0; i < taskLog.details.length; ++i)
-    ul.appendChild(createElementFromText('li', taskLog.details[i]));
-  label.appendChild(ul);
-
-  var tr = document.createElement('tr');
-  tr.appendChild(createElementFromText(
-      'td', taskLog.duration, {'class': 'task-log-duration'}));
-  tr.appendChild(createElementFromText(
-      'td', taskLog.task_description, {'class': 'task-log-description'}));
-  tr.appendChild(createElementFromText(
-      'td', taskLog.result_description, {'class': 'task-log-result'}));
-  tr.appendChild(details);
-
-  $('task-log-entries').appendChild(tr);
-}
-
-/**
- * Get initial sync service values and set listeners to get updated values.
- */
-function main() {
-  observeTaskLog();
-}
-
-document.addEventListener('DOMContentLoaded', main);
-return TaskLog;
+  'use strict';
+
+  var nextTaskLogSeq = 1;
+  var TaskLog = {};
+
+  function observeTaskLog() {
+    chrome.send('observeTaskLog');
+  }
+
+  /**
+   * Handles per-task log event.
+   * @param {Object} taskLog a dictionary containing 'duration',
+   * 'task_description', 'result_description' and 'details'.
+   */
+  TaskLog.onTaskLogRecorded = function(taskLog) {
+    var details = document.createElement('td');
+    details.classList.add('task-log-details');
+
+    var label = document.createElement('label');
+    details.appendChild(label);
+
+    var collapseCheck = document.createElement('input');
+    collapseCheck.setAttribute('type', 'checkbox');
+    collapseCheck.classList.add('task-log-collapse-check');
+    label.appendChild(collapseCheck);
+
+    var ul = document.createElement('ul');
+    for (var i = 0; i < taskLog.details.length; ++i)
+      ul.appendChild(createElementFromText('li', taskLog.details[i]));
+    label.appendChild(ul);
+
+    var tr = document.createElement('tr');
+    tr.appendChild(createElementFromText(
+        'td', taskLog.duration, {'class': 'task-log-duration'}));
+    tr.appendChild(createElementFromText(
+        'td', taskLog.task_description, {'class': 'task-log-description'}));
+    tr.appendChild(createElementFromText(
+        'td', taskLog.result_description, {'class': 'task-log-result'}));
+    tr.appendChild(details);
+
+    $('task-log-entries').appendChild(tr);
+  };
+
+  /**
+   * Get initial sync service values and set listeners to get updated values.
+   */
+  function main() {
+    observeTaskLog();
+  }
+
+  document.addEventListener('DOMContentLoaded', main);
+  return TaskLog;
 })();
diff --git a/chromium/chrome/browser/resources/translate_internals/translate_internals.js b/chromium/chrome/browser/resources/translate_internals/translate_internals.js
index 6e159def0e2..6c33ca49cdb 100644
--- a/chromium/chrome/browser/resources/translate_internals/translate_internals.js
+++ b/chromium/chrome/browser/resources/translate_internals/translate_internals.js
@@ -3,496 +3,498 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
+'use strict';
 
-  cr.define('cr.translateInternals', function() {
+cr.define('cr.translateInternals', function() {
 
-    var detectionLogs = [];
+  var detectionLogs = [];
 
-    /**
-     * Initializes UI and sends a message to the browser for
-     * initialization.
-     */
-    function initialize() {
-      cr.ui.decorate('tabbox', cr.ui.TabBox);
-      chrome.send('requestInfo');
+  /**
+   * Initializes UI and sends a message to the browser for
+   * initialization.
+   */
+  function initialize() {
+    cr.ui.decorate('tabbox', cr.ui.TabBox);
+    chrome.send('requestInfo');
+
+    var button = $('detection-logs-dump');
+    button.addEventListener('click', onDetectionLogsDump);
+
+    var tabpanelNodeList = document.getElementsByTagName('tabpanel');
+    var tabpanels = Array.prototype.slice.call(tabpanelNodeList, 0);
+    var tabpanelIds = tabpanels.map(function(tab) {
+      return tab.id;
+    });
+
+    var tabNodeList = document.getElementsByTagName('tab');
+    var tabs = Array.prototype.slice.call(tabNodeList, 0);
+    tabs.forEach(function(tab) {
+      tab.onclick = function(e) {
+        var tabbox = document.querySelector('tabbox');
+        var tabpanel = tabpanels[tabbox.selectedIndex];
+        var hash = tabpanel.id.match(/(?:^tabpanel-)(.+)/)[1];
+        window.location.hash = hash;
+      };
+    });
 
-      var button = $('detection-logs-dump');
-      button.addEventListener('click', onDetectionLogsDump);
+    var activateTabByHash = function() {
+      var hash = window.location.hash;
 
-      var tabpanelNodeList = document.getElementsByTagName('tabpanel');
-      var tabpanels = Array.prototype.slice.call(tabpanelNodeList, 0);
-      var tabpanelIds = tabpanels.map(function(tab) {
-        return tab.id;
-      });
+      // Remove the first character '#'.
+      hash = hash.substring(1);
 
-      var tabNodeList = document.getElementsByTagName('tab');
-      var tabs = Array.prototype.slice.call(tabNodeList, 0);
-      tabs.forEach(function(tab) {
-        tab.onclick = function(e) {
-          var tabbox = document.querySelector('tabbox');
-          var tabpanel = tabpanels[tabbox.selectedIndex];
-          var hash = tabpanel.id.match(/(?:^tabpanel-)(.+)/)[1];
-          window.location.hash = hash;
-        };
-      });
+      var id = 'tabpanel-' + hash;
+      if (tabpanelIds.indexOf(id) == -1)
+        return;
 
-      var activateTabByHash = function() {
-        var hash = window.location.hash;
+      $(id).selected = true;
+    };
 
-        // Remove the first character '#'.
-        hash = hash.substring(1);
+    window.onhashchange = activateTabByHash;
+    activateTabByHash();
+  }
 
-        var id = 'tabpanel-' + hash;
-        if (tabpanelIds.indexOf(id) == -1)
-          return;
+  /*
+   * Creates a button to dismiss an item.
+   *
+   * @param {Function} func Callback called when the button is clicked.
+   */
+  function createDismissingButton(func) {
+    var button = document.createElement('button');
+    button.textContent = 'X';
+    button.classList.add('dismissing');
+    button.addEventListener('click', function(e) {
+      e.preventDefault();
+      func();
+    }, false);
+    return button;
+  }
 
-        $(id).selected = true;
-      };
+  /**
+   * Creates a new LI element with a button to dismiss the item.
+   *
+   * @param {string} text The lable of the LI element.
+   * @param {Function} func Callback called when the button is clicked.
+   */
+  function createLIWithDismissingButton(text, func) {
+    var span = document.createElement('span');
+    span.textContent = text;
+
+    var li = document.createElement('li');
+    li.appendChild(span);
+    li.appendChild(createDismissingButton(func));
+    return li;
+  }
 
-      window.onhashchange = activateTabByHash;
-      activateTabByHash();
+  /**
+   * Formats the language name to a human-readable text. For example, if
+   * |langCode| is 'en', this may return 'en (English)'.
+   *
+   * @param {string} langCode ISO 639 language code.
+   * @return {string} The formatted string.
+   */
+  function formatLanguageCode(langCode) {
+    var key = 'language-' + langCode;
+    if (loadTimeData.valueExists(key)) {
+      var langName = loadTimeData.getString(key);
+      return langCode + ' (' + langName + ')';
     }
 
-    /*
-     * Creates a button to dismiss an item.
-     *
-     * @param {Function} func Callback called when the button is clicked.
-     */
-    function createDismissingButton(func) {
-      var button = document.createElement('button');
-      button.textContent = 'X';
-      button.classList.add('dismissing');
-      button.addEventListener('click', function(e) {
-        e.preventDefault();
-        func();
-      }, false);
-      return button;
-    }
+    return langCode;
+  }
 
-    /**
-     * Creates a new LI element with a button to dismiss the item.
-     *
-     * @param {string} text The lable of the LI element.
-     * @param {Function} func Callback called when the button is clicked.
-     */
-    function createLIWithDismissingButton(text, func) {
-      var span = document.createElement('span');
-      span.textContent = text;
+  /**
+   * Formats the error type to a human-readable text.
+   *
+   * @param {string} error Translation error type from the browser.
+   * @return {string} The formatted string.
+   */
+  function formatTranslateErrorsType(error) {
+    // This list is from chrome/common/translate/translate_errors.h.
+    // If this header file is updated, the below list also should be updated.
+    var errorStrs = {
+      0: 'None',
+      1: 'Network',
+      2: 'Initialization Error',
+      3: 'Unknown Language',
+      4: 'Unsupported Language',
+      5: 'Identical Languages',
+      6: 'Translation Error',
+      7: 'Translation Timeout',
+      8: 'Unexpected Script Error',
+      9: 'Bad Origin',
+      10: 'Script Load Error',
+    };
 
-      var li = document.createElement('li');
-      li.appendChild(span);
-      li.appendChild(createDismissingButton(func));
-      return li;
+    if (error < 0 || errorStrs.length <= error) {
+      console.error('Invalid error code:', error);
+      return 'Invalid Error Code';
     }
+    return errorStrs[error];
+  }
 
-    /**
-     * Formats the language name to a human-readable text. For example, if
-     * |langCode| is 'en', this may return 'en (English)'.
-     *
-     * @param {string} langCode ISO 639 language code.
-     * @return {string} The formatted string.
-     */
-    function formatLanguageCode(langCode) {
-      var key = 'language-' + langCode;
-      if (loadTimeData.valueExists(key)) {
-        var langName = loadTimeData.getString(key);
-        return langCode + ' (' + langName + ')';
-      }
+  /**
+   * Handles the message of 'prefsUpdated' from the browser.
+   *
+   * @param {Object} detail the object which represents pref values.
+   */
+  function onPrefsUpdated(detail) {
+    var ul;
 
-      return langCode;
-    }
+    ul = document.querySelector('#prefs-blocked-languages ul');
+    ul.innerHTML = '';
 
-    /**
-     * Formats the error type to a human-readable text.
-     *
-     * @param {string} error Translation error type from the browser.
-     * @return {string} The formatted string.
-     */
-    function formatTranslateErrorsType(error) {
-      // This list is from chrome/common/translate/translate_errors.h.
-      // If this header file is updated, the below list also should be updated.
-      var errorStrs = {
-        0: 'None',
-        1: 'Network',
-        2: 'Initialization Error',
-        3: 'Unknown Language',
-        4: 'Unsupported Language',
-        5: 'Identical Languages',
-        6: 'Translation Error',
-        7: 'Translation Timeout',
-        8: 'Unexpected Script Error',
-        9: 'Bad Origin',
-        10: 'Script Load Error',
-      };
+    if ('translate_blocked_languages' in detail) {
+      var langs = detail['translate_blocked_languages'];
 
-      if (error < 0 || errorStrs.length <= error) {
-        console.error('Invalid error code:', error);
-        return 'Invalid Error Code';
-      }
-      return errorStrs[error];
-    }
+      langs.forEach(function(langCode) {
+        var text = formatLanguageCode(langCode);
 
-    /**
-     * Handles the message of 'prefsUpdated' from the browser.
-     *
-     * @param {Object} detail the object which represents pref values.
-     */
-    function onPrefsUpdated(detail) {
-      var ul;
+        var li = createLIWithDismissingButton(text, function() {
+          chrome.send('removePrefItem', ['blocked_languages', langCode]);
+        });
+        ul.appendChild(li);
+      });
+    }
 
-      ul = document.querySelector('#prefs-blocked-languages ul');
-      ul.innerHTML = '';
+    ul = document.querySelector('#prefs-language-blacklist ul');
+    ul.innerHTML = '';
 
-      if ('translate_blocked_languages' in detail) {
-        var langs = detail['translate_blocked_languages'];
+    if ('translate_language_blacklist' in detail) {
+      var langs = detail['translate_language_blacklist'];
 
-        langs.forEach(function(langCode) {
-          var text = formatLanguageCode(langCode);
+      langs.forEach(function(langCode) {
+        var text = formatLanguageCode(langCode);
 
-          var li = createLIWithDismissingButton(text, function() {
-            chrome.send('removePrefItem',
-                        ['blocked_languages', langCode]);
-          });
-          ul.appendChild(li);
+        var li = createLIWithDismissingButton(text, function() {
+          chrome.send('removePrefItem', ['language_blacklist', langCode]);
         });
-      }
-
-      ul = document.querySelector('#prefs-language-blacklist ul');
-      ul.innerHTML = '';
+        ul.appendChild(li);
+      });
+    }
 
-      if ('translate_language_blacklist' in detail) {
-        var langs = detail['translate_language_blacklist'];
+    ul = document.querySelector('#prefs-site-blacklist ul');
+    ul.innerHTML = '';
 
-        langs.forEach(function(langCode) {
-          var text = formatLanguageCode(langCode);
+    if ('translate_site_blacklist' in detail) {
+      var sites = detail['translate_site_blacklist'];
 
-          var li = createLIWithDismissingButton(text, function() {
-            chrome.send('removePrefItem',
-                        ['language_blacklist', langCode]);
-          });
-          ul.appendChild(li);
+      sites.forEach(function(site) {
+        var li = createLIWithDismissingButton(site, function() {
+          chrome.send('removePrefItem', ['site_blacklist', site]);
         });
-      }
+        ul.appendChild(li);
+      });
+    }
 
-      ul = document.querySelector('#prefs-site-blacklist ul');
-      ul.innerHTML = '';
+    ul = document.querySelector('#prefs-whitelists ul');
+    ul.innerHTML = '';
 
-      if ('translate_site_blacklist' in detail) {
-        var sites = detail['translate_site_blacklist'];
+    if ('translate_whitelists' in detail) {
+      var pairs = detail['translate_whitelists'];
 
-        sites.forEach(function(site) {
-          var li = createLIWithDismissingButton(site, function() {
-            chrome.send('removePrefItem', ['site_blacklist', site]);
-          });
-          ul.appendChild(li);
-        });
-      }
+      Object.keys(pairs).forEach(function(fromLangCode) {
+        var toLangCode = pairs[fromLangCode];
+        var text = formatLanguageCode(fromLangCode) + ' \u2192 ' +
+            formatLanguageCode(toLangCode);
 
-      ul = document.querySelector('#prefs-whitelists ul');
-      ul.innerHTML = '';
+        var li = createLIWithDismissingButton(text, function() {
+          chrome.send(
+              'removePrefItem', ['whitelists', fromLangCode, toLangCode]);
+        });
+        ul.appendChild(li);
+      });
+    }
 
-      if ('translate_whitelists' in detail) {
-        var pairs = detail['translate_whitelists'];
+    var p = $('prefs-too-often-denied');
+    p.classList.toggle(
+        'prefs-setting-disabled', !detail['translate_too_often_denied']);
+    p.appendChild(createDismissingButton(
+        chrome.send.bind(null, 'removePrefItem', ['too_often_denied'])));
 
-        Object.keys(pairs).forEach(function(fromLangCode) {
-          var toLangCode = pairs[fromLangCode];
-          var text = formatLanguageCode(fromLangCode) + ' \u2192 ' +
-              formatLanguageCode(toLangCode);
+    p = document.querySelector('#prefs-dump p');
+    var content = JSON.stringify(detail, null, 2);
+    p.textContent = content;
+  }
 
-          var li = createLIWithDismissingButton(text, function() {
-            chrome.send('removePrefItem',
-                        ['whitelists', fromLangCode, toLangCode]);
-          });
-          ul.appendChild(li);
-        });
-      }
+  /**
+   * Handles the message of 'supportedLanguagesUpdated' from the browser.
+   *
+   * @param {Object} details the object which represents the supported
+   *     languages by the Translate server.
+   */
+  function onSupportedLanguagesUpdated(details) {
+    var span =
+        $('prefs-supported-languages-last-updated').querySelector('span');
+    span.textContent = formatDate(new Date(details['last_updated']));
+
+    var ul = $('prefs-supported-languages-languages');
+    ul.innerHTML = '';
+    var languages = details['languages'];
+    for (var i = 0; i < languages.length; i++) {
+      var language = languages[i];
+      var li = document.createElement('li');
 
-      var p = $('prefs-too-often-denied');
-      p.classList.toggle('prefs-setting-disabled',
-                         !detail['translate_too_often_denied']);
-      p.appendChild(createDismissingButton(
-          chrome.send.bind(null, 'removePrefItem', ['too_often_denied'])));
+      var text = formatLanguageCode(language);
+      li.innerText = text;
 
-      p = document.querySelector('#prefs-dump p');
-      var content = JSON.stringify(detail, null, 2);
-      p.textContent = content;
+      ul.appendChild(li);
     }
+  }
 
-    /**
-     * Handles the message of 'supportedLanguagesUpdated' from the browser.
-     *
-     * @param {Object} details the object which represents the supported
-     *     languages by the Translate server.
-     */
-    function onSupportedLanguagesUpdated(details) {
-      var span =
-          $('prefs-supported-languages-last-updated').querySelector('span');
-      span.textContent = formatDate(new Date(details['last_updated']));
-
-      var ul = $('prefs-supported-languages-languages');
-      ul.innerHTML = '';
-      var languages = details['languages'];
-      for (var i = 0; i < languages.length; i++) {
-        var language = languages[i];
-        var li = document.createElement('li');
-
-        var text = formatLanguageCode(language);
-        li.innerText = text;
+  /**
+   * Handles the message of 'countryUpdated' from the browser.
+   *
+   * @param {Object} details the object containing the country
+   *     information.
+   */
+  function onCountryUpdated(details) {
+    var p;
+    p = $('country-override');
 
-        ul.appendChild(li);
-      }
-    }
+    p.innerHTML = '';
+
+    if ('country' in details) {
+      var country = details['country'];
+
+      var h2 = $('override-variations-country');
+      h2.title =
+          ('Changing this value will override the permanent country stored ' +
+           'by variations. Normally, this value gets automatically updated ' +
+           'with a new value received from the variations server when ' +
+           'Chrome is updated.');
 
-    /**
-     * Handles the message of 'countryUpdated' from the browser.
-     *
-     * @param {Object} details the object containing the country
-     *     information.
-     */
-    function onCountryUpdated(details) {
-      var p;
-      p = $('country-override');
-
-      p.innerHTML = '';
-
-      if ('country' in details) {
-        var country = details['country'];
-
-        var h2 = $('override-variations-country');
-        h2.title = (
-            'Changing this value will override the permanent country stored ' +
-            'by variations. Normally, this value gets automatically updated ' +
-            'with a new value received from the variations server when ' +
-            'Chrome is updated.');
-
-        var input = document.createElement('input');
-        input.type = 'text';
-        input.value = country;
-
-        var button = document.createElement('button');
-        button.textContent = 'update';
-        button.addEventListener('click', function() {
-          chrome.send('overrideCountry', [input.value]);
-        }, false);
-        p.appendChild(input);
-        p.appendChild(document.createElement('br'));
-        p.appendChild(button);
-
-        if ('update' in details && details['update']) {
-          var div1 = document.createElement('div');
-          div1.textContent = 'Permanent stored country updated.';
-          var div2 = document.createElement('div');
-          div2.textContent = ('You will need to restart your browser ' +
-              'for the changes to take effect.');
-          p.appendChild(div1);
-          p.appendChild(div2);
-        }
-      } else {
-        p.textContent = 'Could not load country info from Variations.';
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.value = country;
+
+      var button = document.createElement('button');
+      button.textContent = 'update';
+      button.addEventListener('click', function() {
+        chrome.send('overrideCountry', [input.value]);
+      }, false);
+      p.appendChild(input);
+      p.appendChild(document.createElement('br'));
+      p.appendChild(button);
+
+      if ('update' in details && details['update']) {
+        var div1 = document.createElement('div');
+        div1.textContent = 'Permanent stored country updated.';
+        var div2 = document.createElement('div');
+        div2.textContent =
+            ('You will need to restart your browser ' +
+             'for the changes to take effect.');
+        p.appendChild(div1);
+        p.appendChild(div2);
       }
+    } else {
+      p.textContent = 'Could not load country info from Variations.';
     }
+  }
 
-    /**
-     * Adds '0's to |number| as a string. |width| is length of the string
-     * including '0's.
-     *
-     * @param {string} number The number to be converted into a string.
-     * @param {number} width The width of the returned string.
-     * @return {string} The formatted string.
-     */
-    function padWithZeros(number, width) {
-      var numberStr = number.toString();
-      var restWidth = width - numberStr.length;
-      if (restWidth <= 0)
-        return numberStr;
-
-      return Array(restWidth + 1).join('0') + numberStr;
-    }
+  /**
+   * Adds '0's to |number| as a string. |width| is length of the string
+   * including '0's.
+   *
+   * @param {string} number The number to be converted into a string.
+   * @param {number} width The width of the returned string.
+   * @return {string} The formatted string.
+   */
+  function padWithZeros(number, width) {
+    var numberStr = number.toString();
+    var restWidth = width - numberStr.length;
+    if (restWidth <= 0)
+      return numberStr;
 
-    /**
-     * Formats |date| as a Date object into a string. The format is like
-     * '2006-01-02 15:04:05'.
-     *
-     * @param {Date} date Date to be formatted.
-     * @return {string} The formatted string.
-     */
-    function formatDate(date) {
-      var year = date.getFullYear();
-      var month = date.getMonth() + 1;
-      var day = date.getDate();
-      var hour = date.getHours();
-      var minute = date.getMinutes();
-      var second = date.getSeconds();
-
-      var yearStr = padWithZeros(year, 4);
-      var monthStr = padWithZeros(month, 2);
-      var dayStr = padWithZeros(day, 2);
-      var hourStr = padWithZeros(hour, 2);
-      var minuteStr = padWithZeros(minute, 2);
-      var secondStr = padWithZeros(second, 2);
-
-      var str = yearStr + '-' + monthStr + '-' + dayStr + ' ' +
-          hourStr + ':' + minuteStr + ':' + secondStr;
-
-      return str;
-    }
+    return Array(restWidth + 1).join('0') + numberStr;
+  }
 
-    /**
-     * Appends a new TD element to the specified element.
-     *
-     * @param {string} parent The element to which a new TD element is appended.
-     * @param {string} content The text content of the element.
-     * @param {string} className The class name of the element.
-     */
-    function appendTD(parent, content, className) {
-      var td = document.createElement('td');
-      td.textContent = content;
-      td.className = className;
-      parent.appendChild(td);
-    }
+  /**
+   * Formats |date| as a Date object into a string. The format is like
+   * '2006-01-02 15:04:05'.
+   *
+   * @param {Date} date Date to be formatted.
+   * @return {string} The formatted string.
+   */
+  function formatDate(date) {
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var hour = date.getHours();
+    var minute = date.getMinutes();
+    var second = date.getSeconds();
+
+    var yearStr = padWithZeros(year, 4);
+    var monthStr = padWithZeros(month, 2);
+    var dayStr = padWithZeros(day, 2);
+    var hourStr = padWithZeros(hour, 2);
+    var minuteStr = padWithZeros(minute, 2);
+    var secondStr = padWithZeros(second, 2);
+
+    var str = yearStr + '-' + monthStr + '-' + dayStr + ' ' + hourStr + ':' +
+        minuteStr + ':' + secondStr;
+
+    return str;
+  }
 
-    /**
-     * Handles the message of 'languageDetectionInfoAdded' from the
-     * browser.
-     *
-     * @param {Object} detail The object which represents the logs.
-     */
-    function onLanguageDetectionInfoAdded(detail) {
-      detectionLogs.push(detail);
-
-      var tr = document.createElement('tr');
-
-      appendTD(tr, formatDate(new Date(detail['time'])), 'detection-logs-time');
-      appendTD(tr, detail['url'], 'detection-logs-url');
-      appendTD(tr, formatLanguageCode(detail['content_language']),
-               'detection-logs-content-language');
-      appendTD(tr, formatLanguageCode(detail['cld_language']),
-               'detection-logs-cld-language');
-      appendTD(tr, detail['is_cld_reliable'], 'detection-logs-is-cld-reliable');
-      appendTD(tr, detail['has_notranslate'], 'detection-logs-has-notranslate');
-      appendTD(tr, formatLanguageCode(detail['html_root_language']),
-               'detection-logs-html-root-language');
-      appendTD(tr, formatLanguageCode(detail['adopted_language']),
-               'detection-logs-adopted-language');
-      appendTD(tr, formatLanguageCode(detail['content']),
-               'detection-logs-content');
-
-      // TD (and TR) can't use the CSS property 'max-height', so DIV
-      // in the content is needed.
-      var contentTD = tr.querySelector('.detection-logs-content');
-      var div = document.createElement('div');
-      div.textContent = contentTD.textContent;
-      contentTD.textContent = '';
-      contentTD.appendChild(div);
-
-      var tabpanel = $('tabpanel-detection-logs');
-      var tbody = tabpanel.getElementsByTagName('tbody')[0];
-      tbody.appendChild(tr);
-    }
+  /**
+   * Appends a new TD element to the specified element.
+   *
+   * @param {string} parent The element to which a new TD element is appended.
+   * @param {string} content The text content of the element.
+   * @param {string} className The class name of the element.
+   */
+  function appendTD(parent, content, className) {
+    var td = document.createElement('td');
+    td.textContent = content;
+    td.className = className;
+    parent.appendChild(td);
+  }
 
-    /**
-     * Handles the message of 'translateErrorDetailsAdded' from the
-     * browser.
-     *
-     * @param {Object} details The object which represents the logs.
-     */
-    function onTranslateErrorDetailsAdded(details) {
-      var tr = document.createElement('tr');
-
-      appendTD(tr, formatDate(new Date(details['time'])), 'error-logs-time');
-      appendTD(tr, details['url'], 'error-logs-url');
-      appendTD(
-          tr,
-          details['error'] + ': ' + formatTranslateErrorsType(details['error']),
-          'error-logs-error');
-
-      var tabpanel = $('tabpanel-error-logs');
-      var tbody = tabpanel.getElementsByTagName('tbody')[0];
-      tbody.appendChild(tr);
-    }
+  /**
+   * Handles the message of 'languageDetectionInfoAdded' from the
+   * browser.
+   *
+   * @param {Object} detail The object which represents the logs.
+   */
+  function onLanguageDetectionInfoAdded(detail) {
+    detectionLogs.push(detail);
+
+    var tr = document.createElement('tr');
+
+    appendTD(tr, formatDate(new Date(detail['time'])), 'detection-logs-time');
+    appendTD(tr, detail['url'], 'detection-logs-url');
+    appendTD(
+        tr, formatLanguageCode(detail['content_language']),
+        'detection-logs-content-language');
+    appendTD(
+        tr, formatLanguageCode(detail['cld_language']),
+        'detection-logs-cld-language');
+    appendTD(tr, detail['is_cld_reliable'], 'detection-logs-is-cld-reliable');
+    appendTD(tr, detail['has_notranslate'], 'detection-logs-has-notranslate');
+    appendTD(
+        tr, formatLanguageCode(detail['html_root_language']),
+        'detection-logs-html-root-language');
+    appendTD(
+        tr, formatLanguageCode(detail['adopted_language']),
+        'detection-logs-adopted-language');
+    appendTD(
+        tr, formatLanguageCode(detail['content']), 'detection-logs-content');
+
+    // TD (and TR) can't use the CSS property 'max-height', so DIV
+    // in the content is needed.
+    var contentTD = tr.querySelector('.detection-logs-content');
+    var div = document.createElement('div');
+    div.textContent = contentTD.textContent;
+    contentTD.textContent = '';
+    contentTD.appendChild(div);
+
+    var tabpanel = $('tabpanel-detection-logs');
+    var tbody = tabpanel.getElementsByTagName('tbody')[0];
+    tbody.appendChild(tr);
+  }
 
-    /**
-     * Handles the message of 'translateEventDetailsAdded' from the browser.
-     *
-     * @param {Object} details The object which contains event information.
-     */
-    function onTranslateEventDetailsAdded(details) {
-      var tr = document.createElement('tr');
-      appendTD(tr, formatDate(new Date(details['time'])), 'event-logs-time');
-      appendTD(tr, details['filename'] + ': ' + details['line'],
-               'event-logs-place');
-      appendTD(tr, details['message'], 'event-logs-message');
-
-      var tbody = $('tabpanel-event-logs').getElementsByTagName('tbody')[0];
-      tbody.appendChild(tr);
-    }
+  /**
+   * Handles the message of 'translateErrorDetailsAdded' from the
+   * browser.
+   *
+   * @param {Object} details The object which represents the logs.
+   */
+  function onTranslateErrorDetailsAdded(details) {
+    var tr = document.createElement('tr');
+
+    appendTD(tr, formatDate(new Date(details['time'])), 'error-logs-time');
+    appendTD(tr, details['url'], 'error-logs-url');
+    appendTD(
+        tr,
+        details['error'] + ': ' + formatTranslateErrorsType(details['error']),
+        'error-logs-error');
+
+    var tabpanel = $('tabpanel-error-logs');
+    var tbody = tabpanel.getElementsByTagName('tbody')[0];
+    tbody.appendChild(tr);
+  }
 
-    /**
-     * The callback entry point from the browser. This function will be
-     * called by the browser.
-     *
-     * @param {string} message The name of the sent message.
-     * @param {Object} details The argument of the sent message.
-     */
-    function messageHandler(message, details) {
-      switch (message) {
-        case 'languageDetectionInfoAdded':
-          onLanguageDetectionInfoAdded(details);
-          break;
-        case 'prefsUpdated':
-          onPrefsUpdated(details);
-          break;
-        case 'supportedLanguagesUpdated':
-          onSupportedLanguagesUpdated(details);
-          break;
-        case 'countryUpdated':
-          onCountryUpdated(details);
-          break;
-        case 'translateErrorDetailsAdded':
-          onTranslateErrorDetailsAdded(details);
-          break;
-        case 'translateEventDetailsAdded':
-          onTranslateEventDetailsAdded(details);
-          break;
-        default:
-          console.error('Unknown message:', message);
-          break;
-      }
-    }
+  /**
+   * Handles the message of 'translateEventDetailsAdded' from the browser.
+   *
+   * @param {Object} details The object which contains event information.
+   */
+  function onTranslateEventDetailsAdded(details) {
+    var tr = document.createElement('tr');
+    appendTD(tr, formatDate(new Date(details['time'])), 'event-logs-time');
+    appendTD(
+        tr, details['filename'] + ': ' + details['line'], 'event-logs-place');
+    appendTD(tr, details['message'], 'event-logs-message');
+
+    var tbody = $('tabpanel-event-logs').getElementsByTagName('tbody')[0];
+    tbody.appendChild(tr);
+  }
 
-    /**
-     * The callback of button#detetion-logs-dump.
-     */
-    function onDetectionLogsDump() {
-      var data = JSON.stringify(detectionLogs);
-      var blob = new Blob([data], {'type': 'text/json'});
-      var url = URL.createObjectURL(blob);
-      var filename = 'translate_internals_detect_logs_dump.json';
-
-      var a = document.createElement('a');
-      a.setAttribute('href', url);
-      a.setAttribute('download', filename);
-
-      var event = document.createEvent('MouseEvent');
-      event.initMouseEvent('click', true, true, window, 0,
-                           0, 0, 0, 0, 0, 0, 0, 0, 0, null);
-      a.dispatchEvent(event);
+  /**
+   * The callback entry point from the browser. This function will be
+   * called by the browser.
+   *
+   * @param {string} message The name of the sent message.
+   * @param {Object} details The argument of the sent message.
+   */
+  function messageHandler(message, details) {
+    switch (message) {
+      case 'languageDetectionInfoAdded':
+        onLanguageDetectionInfoAdded(details);
+        break;
+      case 'prefsUpdated':
+        onPrefsUpdated(details);
+        break;
+      case 'supportedLanguagesUpdated':
+        onSupportedLanguagesUpdated(details);
+        break;
+      case 'countryUpdated':
+        onCountryUpdated(details);
+        break;
+      case 'translateErrorDetailsAdded':
+        onTranslateErrorDetailsAdded(details);
+        break;
+      case 'translateEventDetailsAdded':
+        onTranslateEventDetailsAdded(details);
+        break;
+      default:
+        console.error('Unknown message:', message);
+        break;
     }
-
-    return {
-      initialize: initialize,
-      messageHandler: messageHandler,
-    };
-  });
+  }
 
   /**
-   * The entry point of the UI.
+   * The callback of button#detetion-logs-dump.
    */
-  function main() {
-    cr.doc.addEventListener('DOMContentLoaded',
-                            cr.translateInternals.initialize);
+  function onDetectionLogsDump() {
+    var data = JSON.stringify(detectionLogs);
+    var blob = new Blob([data], {'type': 'text/json'});
+    var url = URL.createObjectURL(blob);
+    var filename = 'translate_internals_detect_logs_dump.json';
+
+    var a = document.createElement('a');
+    a.setAttribute('href', url);
+    a.setAttribute('download', filename);
+
+    var event = document.createEvent('MouseEvent');
+    event.initMouseEvent(
+        'click', true, true, window, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
+    a.dispatchEvent(event);
   }
 
-  main();
+  return {
+    initialize: initialize,
+    messageHandler: messageHandler,
+  };
+});
+
+/**
+ * The entry point of the UI.
+ */
+function main() {
+  cr.doc.addEventListener('DOMContentLoaded', cr.translateInternals.initialize);
+}
+
+main();
 })();
diff --git a/chromium/chrome/browser/resources/usb_internals/usb_internals.html b/chromium/chrome/browser/resources/usb_internals/usb_internals.html
index 46bfe496aeb..51a95766ecb 100644
--- a/chromium/chrome/browser/resources/usb_internals/usb_internals.html
+++ b/chromium/chrome/browser/resources/usb_internals/usb_internals.html
@@ -6,7 +6,10 @@
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   <link rel="stylesheet" href="usb_internals.css">
   <script src="chrome://resources/js/cr.js"></script>
+  <script src="chrome://resources/js/mojo_bindings.js"></script>
   <script src="chrome://resources/js/util.js"></script>
+  <script src="chrome/browser/ui/webui/usb_internals/usb_internals.mojom.js">
+  </script>
   <script src="usb_internals.js"></script>
 </head>
 <body>
diff --git a/chromium/chrome/browser/resources/usb_internals/usb_internals.js b/chromium/chrome/browser/resources/usb_internals/usb_internals.js
index 889706ec563..a09a7ea5c8d 100644
--- a/chromium/chrome/browser/resources/usb_internals/usb_internals.js
+++ b/chromium/chrome/browser/resources/usb_internals/usb_internals.js
@@ -7,70 +7,59 @@
  */
 
 (function() {
-  // Connection to the UsbInternalsPageHandler instance running in the browser
-  // process.
-  let pageHandler = null;
+// Connection to the UsbInternalsPageHandler instance running in the browser
+// process.
+let pageHandler = null;
 
-  function refreshDeviceList() {
-    pageHandler.getTestDevices().then(function(response) {
-      let tableBody = $('test-device-list');
-      tableBody.innerHTML = '';
-      for (let device of response.devices) {
-        let row = document.createElement('tr');
-        let name = document.createElement('td');
-        let serialNumber = document.createElement('td');
-        let landingPage = document.createElement('td');
-        let remove = document.createElement('td');
-        let removeButton = document.createElement('button');
-        name.textContent = device.name;
-        serialNumber.textContent = device.serial_number;
-        landingPage.textContent = device.landing_page.url;
-        removeButton.addEventListener('click', function() {
-          pageHandler.removeDeviceForTesting(device.guid)
-              .then(refreshDeviceList);
-        });
-        removeButton.textContent = 'Remove';
-        row.appendChild(name);
-        row.appendChild(serialNumber);
-        row.appendChild(landingPage);
-        remove.appendChild(removeButton);
-        row.appendChild(remove);
-        tableBody.appendChild(row);
-      }
-    });
-  }
-
-  function addTestDevice(event) {
-    pageHandler.addDeviceForTesting(
-        $('test-device-name').value,
-        $('test-device-serial').value,
-        $('test-device-landing-page').value).then(function(response) {
-      if (response.success)
-        refreshDeviceList();
-      $('add-test-device-result').textContent = response.message;
-      $('add-test-device-result').className =
-          response.success ? 'action-success' : 'action-failure';
-    });
-    event.preventDefault();
-  }
+function refreshDeviceList() {
+  pageHandler.getTestDevices().then(function(response) {
+    let tableBody = $('test-device-list');
+    tableBody.innerHTML = '';
+    for (let device of response.devices) {
+      let row = document.createElement('tr');
+      let name = document.createElement('td');
+      let serialNumber = document.createElement('td');
+      let landingPage = document.createElement('td');
+      let remove = document.createElement('td');
+      let removeButton = document.createElement('button');
+      name.textContent = device.name;
+      serialNumber.textContent = device.serialNumber;
+      landingPage.textContent = device.landingPage.url;
+      removeButton.addEventListener('click', function() {
+        pageHandler.removeDeviceForTesting(device.guid).then(refreshDeviceList);
+      });
+      removeButton.textContent = 'Remove';
+      row.appendChild(name);
+      row.appendChild(serialNumber);
+      row.appendChild(landingPage);
+      remove.appendChild(removeButton);
+      row.appendChild(remove);
+      tableBody.appendChild(row);
+    }
+  });
+}
 
-  function initializeProxies() {
-    return importModules([
-      'chrome/browser/ui/webui/usb_internals/usb_internals.mojom',
-      'content/public/renderer/frame_interfaces',
-    ]).then(function(modules) {
-      let mojom = modules[0];
-      let frameInterfaces = modules[1];
+function addTestDevice(event) {
+  pageHandler
+      .addDeviceForTesting(
+          $('test-device-name').value, $('test-device-serial').value,
+          $('test-device-landing-page').value)
+      .then(function(response) {
+        if (response.success)
+          refreshDeviceList();
+        $('add-test-device-result').textContent = response.message;
+        $('add-test-device-result').className =
+            response.success ? 'action-success' : 'action-failure';
+      });
+  event.preventDefault();
+}
 
-      pageHandler = new mojom.UsbInternalsPageHandlerPtr(
-          frameInterfaces.getInterface(mojom.UsbInternalsPageHandler.name));
-    });
-  }
+document.addEventListener('DOMContentLoaded', function() {
+  pageHandler = new mojom.UsbInternalsPageHandlerPtr;
+  Mojo.bindInterface(
+      mojom.UsbInternalsPageHandler.name, mojo.makeRequest(pageHandler).handle);
 
-  document.addEventListener('DOMContentLoaded', function() {
-    initializeProxies().then(function() {
-      $('add-test-device-form').addEventListener('submit', addTestDevice);
-      refreshDeviceList();
-    });
-  });
+  $('add-test-device-form').addEventListener('submit', addTestDevice);
+  refreshDeviceList();
+});
 })();
diff --git a/chromium/chrome/browser/resources/user_actions/user_actions.js b/chromium/chrome/browser/resources/user_actions/user_actions.js
index 0064d66b862..4b884d3fcf3 100644
--- a/chromium/chrome/browser/resources/user_actions/user_actions.js
+++ b/chromium/chrome/browser/resources/user_actions/user_actions.js
@@ -32,7 +32,5 @@ cr.define('userActions', function() {
     table.appendChild(tr);
   }
 
-  return {
-    observeUserAction: observeUserAction
-  };
+  return {observeUserAction: observeUserAction};
 });
diff --git a/chromium/chrome/browser/resources/vr_shell_resources.grd b/chromium/chrome/browser/resources/vr_shell_resources.grd
new file mode 100644
index 00000000000..06de759f2f6
--- /dev/null
+++ b/chromium/chrome/browser/resources/vr_shell_resources.grd
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
+  <outputs>
+    <output filename="grit/vr_shell_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="vr_shell_resources.pak" type="data_package" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <!-- TODO(vollick): add conditionals for test-specific generic assets (see crbug.com/743687) -->
+      <include name="IDR_VR_SHELL_DDCONTROLLER_MODEL" file="vr_shell\ddcontroller.glb" type="BINDATA" />
+      <include name="IDR_VR_SHELL_DDCONTROLLER_IDLE_TEXTURE" file="vr_shell\tex\ddcontroller_idle.png" type="BINDATA" />
+      <include name="IDR_VR_SHELL_DDCONTROLLER_APP_PATCH" file="vr_shell\tex\ddcontroller_app.png" type="BINDATA" />
+      <include name="IDR_VR_SHELL_DDCONTROLLER_TOUCHPAD_PATCH" file="vr_shell\tex\ddcontroller_touchpad.png" type="BINDATA" />
+      <include name="IDR_VR_SHELL_DDCONTROLLER_SYSTEM_PATCH" file="vr_shell\tex\ddcontroller_system.png" type="BINDATA" />
+    </includes>
+  </release>
+</grit>
diff --git a/chromium/chrome/browser/resources/vulcanize_gn.py b/chromium/chrome/browser/resources/vulcanize_gn.py
index 309ab32be4b..e6983018f02 100755
--- a/chromium/chrome/browser/resources/vulcanize_gn.py
+++ b/chromium/chrome/browser/resources/vulcanize_gn.py
@@ -158,25 +158,44 @@ def _vulcanize(in_folder, args):
     # that by adding a <base> tag to the (post-processed) generated output.
     output = output.replace('<head>', '<head>' + args.insert_in_head)
 
-  with tempfile.NamedTemporaryFile(mode='wt+', delete=False) as tmp:
-    tmp.write(output)
+  crisper_input = tempfile.NamedTemporaryFile(mode='wt+', delete=False)
+  crisper_input.write(output)
+  crisper_input.close()
+
+  crisper_output = tempfile.NamedTemporaryFile(mode='wt+', delete=False)
+  crisper_output.close()
 
   try:
     node.RunNode([node_modules.PathToCrisper(),
-                 '--source', tmp.name,
+                 '--source', crisper_input.name,
                  '--script-in-head', 'false',
+                 '--only-split',
                  '--html', html_out_path,
-                 '--js', js_out_path])
-
-    # Create an empty JS file if crisper did not create one.
-    if not os.path.isfile(js_out_path):
-      open(js_out_path, 'w').close()
-
-    node.RunNode([node_modules.PathToUglifyJs(), js_out_path,
+                 '--js', crisper_output.name])
+
+    # Crisper by default inserts a <script> tag with the name of the --js file,
+    # but since we are using a temporary file, need to manually insert a
+    # <script> tag with the correct final filename (in combination with
+    # --only-split flag). There is no way currently to manually specify the
+    # <script> tag's path, see https://github.com/PolymerLabs/crisper/issues/46.
+    with open(html_out_path, 'r+') as f:
+      data = f.read()
+      new_data = data.replace(
+          '</body></html>',
+          '<script src="' + args.js_out_file + '"></script></body></html>')
+      assert new_data != data, 'Expected to find </body></html> token.'
+      f.seek(0)
+      f.write(new_data)
+      f.truncate()
+
+    node.RunNode([node_modules.PathToUglify(), crisper_output.name,
                   '--comments', '"/Copyright|license|LICENSE|\<\/?if/"',
                   '--output', js_out_path])
   finally:
-    os.remove(tmp.name)
+    if os.path.exists(crisper_input.name):
+      os.remove(crisper_input.name)
+    if os.path.exists(crisper_output.name):
+      os.remove(crisper_output.name)
 
 
 def main(argv):
diff --git a/chromium/chrome/browser/resources/vulcanize_gn_test.py b/chromium/chrome/browser/resources/vulcanize_gn_test.py
index 702f5a46556..9af9495993d 100755
--- a/chromium/chrome/browser/resources/vulcanize_gn_test.py
+++ b/chromium/chrome/browser/resources/vulcanize_gn_test.py
@@ -71,6 +71,7 @@ class VulcanizeGnTest(unittest.TestCase):
     self.assertFalse('element.html' in fast_html)
     self.assertFalse('element.js' in fast_html)
     self.assertTrue('got here!' in fast_html)
+    self.assertTrue('<script src="fast.js"></script>' in fast_html)
 
     fast_js = self._read_out_file('fast.js')
     self.assertTrue('yay' in fast_js)
diff --git a/chromium/chrome/browser/resources/webapks/about_webapks.js b/chromium/chrome/browser/resources/webapks/about_webapks.js
index 9d5fb8f5869..72f4b9b2237 100644
--- a/chromium/chrome/browser/resources/webapks/about_webapks.js
+++ b/chromium/chrome/browser/resources/webapks/about_webapks.js
@@ -81,8 +81,8 @@ function addWebApk(webApkInfo) {
 
   addWebApkField(webApkList, 'Package name: ', webApkInfo.packageName);
   addWebApkField(
-      webApkList, 'Shell APK version: ', "" + webApkInfo.shellApkVersion);
-  addWebApkField(webApkList, 'Version code: ', "" + webApkInfo.versionCode);
+      webApkList, 'Shell APK version: ', '' + webApkInfo.shellApkVersion);
+  addWebApkField(webApkList, 'Version code: ', '' + webApkInfo.versionCode);
   addWebApkField(webApkList, 'URI: ', webApkInfo.uri);
   addWebApkField(webApkList, 'Scope: ', webApkInfo.scope);
   addWebApkField(webApkList, 'Manifest URL: ', webApkInfo.manifestUrl);
diff --git a/chromium/chrome/browser/resources/welcome/welcome.js b/chromium/chrome/browser/resources/welcome/welcome.js
index 72569810ab4..fbfcfd4f969 100644
--- a/chromium/chrome/browser/resources/welcome/welcome.js
+++ b/chromium/chrome/browser/resources/welcome/welcome.js
@@ -20,18 +20,18 @@ cr.define('welcome', function() {
 
     var logo = document.querySelector('.logo-icon');
     logo.onclick = function(e) {
-      logo.animate({
-        transform: ['none', 'rotate(-10turn)'],
-      }, /** @type {!KeyframeEffectOptions} */({
-        duration: 500,
-        easing: 'cubic-bezier(1, 0, 0, 1)',
-      }));
+      logo.animate(
+          {
+            transform: ['none', 'rotate(-10turn)'],
+          },
+          /** @type {!KeyframeEffectOptions} */ ({
+            duration: 500,
+            easing: 'cubic-bezier(1, 0, 0, 1)',
+          }));
     };
   }
 
-  return {
-    initialize: initialize
-  };
+  return {initialize: initialize};
 });
 
 document.addEventListener('DOMContentLoaded', welcome.initialize);
diff --git a/chromium/chrome/browser/resources/welcome/win10/inline.js b/chromium/chrome/browser/resources/welcome/win10/inline.js
index bef49ae4d76..df67df5afb2 100644
--- a/chromium/chrome/browser/resources/welcome/win10/inline.js
+++ b/chromium/chrome/browser/resources/welcome/win10/inline.js
@@ -16,7 +16,7 @@ Polymer({
     // TODO(pmonette): Remove these checks when they are no longer needed.
     /** @const */
     var VARIANT_KEY = 'variant';
-    var VariantTypeMap = { 'defaultonly': false, 'combined': true };
+    var VariantTypeMap = {'defaultonly': false, 'combined': true};
     var params = new URLSearchParams(location.search.slice(1));
     if (params.has(VARIANT_KEY) && params.get(VARIANT_KEY) in VariantTypeMap)
       this.isCombined = VariantTypeMap[params.get(VARIANT_KEY)];
@@ -30,8 +30,8 @@ Polymer({
   ready: function() {
     this.isCombined = false;
     // Asynchronously check if Chrome is pinned to the taskbar.
-    cr.sendWithPromise('getPinnedToTaskbarState').then(
-      this.receivePinnedState_.bind(this));
+    cr.sendWithPromise('getPinnedToTaskbarState')
+        .then(this.receivePinnedState_.bind(this));
   },
 
   computeClasses: function(isCombined) {
@@ -52,8 +52,8 @@ Polymer({
     var sections = this.shadowRoot.querySelectorAll('.section.expandable');
     sections.forEach(function(section) {
       var isExpanded = section.classList.toggle('expanded');
-      section.querySelector('[role~="button"]').setAttribute(
-          'aria-expanded', isExpanded);
+      section.querySelector('[role~="button"]')
+          .setAttribute('aria-expanded', isExpanded);
     });
   }
 });
diff --git a/chromium/chrome/browser/resources/welcome/win10/sectioned.js b/chromium/chrome/browser/resources/welcome/win10/sectioned.js
index 9d5e07f71a8..09137e957f6 100644
--- a/chromium/chrome/browser/resources/welcome/win10/sectioned.js
+++ b/chromium/chrome/browser/resources/welcome/win10/sectioned.js
@@ -50,30 +50,25 @@ cr.define('sectioned', function() {
 
 
     // Asynchronously check if Chrome is pinned to the taskbar.
-    cr.sendWithPromise('getPinnedToTaskbarState').then(
-      function(isPinnedToTaskbar) {
-        // Allow overriding of the result via a query parameter.
-        // TODO(pmonette): Remove these checks when they are no longer needed.
-        /** @const */ var VARIANT_KEY = 'variant';
-        var VariantType = {
-          DEFAULT_ONLY: 'defaultonly',
-          COMBINED: 'combined'
-        };
-        var params = new URLSearchParams(location.search.slice(1));
-        if (params.has(VARIANT_KEY)) {
-          if (params.get(VARIANT_KEY) === VariantType.DEFAULT_ONLY)
-            app.isCombined = false;
-          else if (params.get(VARIANT_KEY) === VariantType.COMBINED)
-            app.isCombined = true;
-        } else {
-          app.isCombined = !isPinnedToTaskbar;
-        }
-      });
+    cr.sendWithPromise('getPinnedToTaskbarState')
+        .then(function(isPinnedToTaskbar) {
+          // Allow overriding of the result via a query parameter.
+          // TODO(pmonette): Remove these checks when they are no longer needed.
+          /** @const */ var VARIANT_KEY = 'variant';
+          var VariantType = {DEFAULT_ONLY: 'defaultonly', COMBINED: 'combined'};
+          var params = new URLSearchParams(location.search.slice(1));
+          if (params.has(VARIANT_KEY)) {
+            if (params.get(VARIANT_KEY) === VariantType.DEFAULT_ONLY)
+              app.isCombined = false;
+            else if (params.get(VARIANT_KEY) === VariantType.COMBINED)
+              app.isCombined = true;
+          } else {
+            app.isCombined = !isPinnedToTaskbar;
+          }
+        });
   }
 
-  return {
-    initialize: initialize
-  };
+  return {initialize: initialize};
 });
 
 document.addEventListener('DOMContentLoaded', sectioned.initialize);