BASELINE: Update Chromium to 51.0.2704.41

Also adds in all smaller components by reversing logic for exclusion. Change-Id: Ibf90b506e7da088ea2f65dcf23f2b0992c504422 Reviewed-by: Joerg Bornemann <joerg.bornemann@theqtcompany.com>
author: Allan Sandfeld Jensen <allan.jensen@theqtcompany.com> 2016-05-09 14:22:11 +0200
committer: Allan Sandfeld Jensen <allan.jensen@qt.io> 2016-05-09 15:11:45 +0000
commit: 2ddb2d3e14eef3de7dbd0cef553d669b9ac2361c (patch)
tree: e75f511546c5fd1a173e87c1f9fb11d7ac8d1af3 /chromium/ui/webui
parent: a4f3d46271c57e8155ba912df46a05559d14726e (diff)
download: qtwebengine-chromium-2ddb2d3e14eef3de7dbd0cef553d669b9ac2361c.tar.gz
76 files changed, 863 insertions, 372 deletions
diff --git a/chromium/ui/webui/resources/cr_elements/compiled_resources.gyp b/chromium/ui/webui/resources/cr_elements/compiled_resources2.gyp
index 7b24a067bda..cbd32348c3b 100644
--- a/chromium/ui/webui/resources/cr_elements/compiled_resources.gyp
+++ b/chromium/ui/webui/resources/cr_elements/compiled_resources2.gyp
@@ -7,8 +7,8 @@
       'target_name': 'cr_elements_resources',
       'type': 'none',
       'dependencies': [
-        'network/compiled_resources.gyp:*',
-        'policy/compiled_resources.gyp:*',
+        'network/compiled_resources2.gyp:*',
+        'policy/compiled_resources2.gyp:*',
       ],
     },
   ]
diff --git a/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.html b/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.html
index fc17728bd78..f726fe3f366 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
 
 <dom-module id="cr-events">
   <script src="cr_events.js"></script>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.js b/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.js
index 99d083791b5..dc82d6d71ba 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_events/cr_events.js
@@ -13,8 +13,6 @@
  * Usage:
  *
  *    this.$.events.forward(this.$.element, ['change']);
- *
- * @element cr-events
  */
 Polymer({
   is: 'cr-events',
diff --git a/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html b/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html
index 26b367027d2..edcdd597f1a 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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">
 
diff --git a/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js b/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js
index c75d3622b73..a3a5cc20581 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js
@@ -10,9 +10,6 @@
  * Example:
  *
  *    <cr-expand-button expanded="{{sectionIsExpanded}}"></cr-expand-button>
- *
- * @group Chrome Elements
- * @element cr-expand-button
  */
 Polymer({
   is: 'cr-expand-button',
diff --git a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
index f8d203cc80e..8524c94860b 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
@@ -1,5 +1,5 @@
 <link rel="import" href="chrome://resources/html/assert.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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/iron-input/iron-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
diff --git a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js
index e24e3093538..a507fc34f66 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js
@@ -29,21 +29,63 @@ var SearchField = Polymer({
     showingSearch_: {
       type: Boolean,
       value: false,
+      observer: 'showingSearchChanged_',
     },
   },
 
+  /**
+   * Returns the value of the search field.
+   * @return {string}
+   */
+  getValue: function() {
+    var searchInput = this.getSearchInput_();
+    return searchInput ? searchInput.value : '';
+  },
+
+  /**
+   * Sets the value of the search field, if it exists.
+   * @param {string} value
+   */
+  setValue: function(value) {
+    var searchInput = this.getSearchInput_();
+    if (searchInput)
+      searchInput.value = value;
+  },
+
   /** @param {SearchFieldDelegate} delegate */
   setDelegate: function(delegate) {
     this.delegate_ = delegate;
   },
 
+  /** @return {Promise<boolean>} */
+  showAndFocus: function() {
+    this.showingSearch_ = true;
+    return this.focus_();
+  },
+
   /**
-   * Returns the value of the search field.
-   * @return {string}
+   * @return {Promise<boolean>}
+   * @private
    */
-  getValue: function() {
-    var searchInput = this.$$('#search-input');
-    return searchInput ? searchInput.value : '';
+  focus_: function() {
+    return new Promise(function(resolve) {
+      this.async(function() {
+        if (this.showingSearch_) {
+          var searchInput = this.getSearchInput_();
+          if (searchInput)
+            searchInput.focus();
+        }
+        resolve(this.showingSearch_);
+      });
+    }.bind(this));
+  },
+
+  /**
+   * @return {?Element}
+   * @private
+   */
+  getSearchInput_: function() {
+    return this.$$('#search-input');
   },
 
   /** @private */
@@ -54,22 +96,27 @@ var SearchField = Polymer({
 
   /** @private */
   onSearchTermKeydown_: function(e) {
-    assert(this.showingSearch_);
     if (e.keyIdentifier == 'U+001B')  // Escape.
-      this.toggleShowingSearch_();
+      this.showingSearch_ = false;
+  },
+
+  /** @private */
+  showingSearchChanged_: function() {
+    if (this.showingSearch_) {
+      this.focus_();
+      return;
+    }
+
+    var searchInput = this.getSearchInput_();
+    if (!searchInput)
+      return;
+
+    searchInput.value = '';
+    this.onSearchTermSearch_();
   },
 
   /** @private */
   toggleShowingSearch_: function() {
     this.showingSearch_ = !this.showingSearch_;
-    this.async(function() {
-      var searchInput = this.$$('#search-input');
-      if (this.showingSearch_) {
-        searchInput.focus();
-      } else {
-        searchInput.value = '';
-        this.onSearchTermSearch_();
-      }
-    });
   },
 });
diff --git a/chromium/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources.gyp b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources.gyp
new file mode 100644
index 00000000000..ee4ebfb21af
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources.gyp
@@ -0,0 +1,20 @@
+# 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.
+{
+  'targets': [
+    {
+      'target_name': 'cr_shared_menu',
+      'variables': {
+        'depends': [
+          '../../../../../third_party/polymer/v1_0/components-chromium/iron-list/iron-list-extracted.js',
+          '../../js/assert.js',
+          '../../js/cr.js',
+          '../../js/cr/ui/position_util.js',
+          '../../js/util.js',
+        ],
+      },
+      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
+    },
+  ],
+}
diff --git a/chromium/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp
new file mode 100644
index 00000000000..bcfaa7c1381
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp
@@ -0,0 +1,17 @@
+# 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.
+{
+  'targets': [
+    {
+      'target_name': 'cr_shared_menu',
+      'dependencies': [
+        '../../js/compiled_resources2.gyp:assert',
+        '../../js/compiled_resources2.gyp:cr',
+        '../../js/compiled_resources2.gyp:util',
+        '../../js/cr/ui/compiled_resources2.gyp:position_util',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
new file mode 100644
index 00000000000..6ff5f550d4d
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
@@ -0,0 +1,27 @@
+<link rel="import" href="chrome://resources/html/polymer.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/cr/ui/position_util.html">
+<link rel="import" href="chrome://resources/html/util.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
+
+<dom-module id="cr-shared-menu">
+  <template>
+    <style>
+      :host {
+        @apply(--shadow-elevation-2dp);
+        display: none;
+        position: absolute;
+      }
+
+      :host([menu-open]) {
+        display: block;
+      }
+    </style>
+    <paper-listbox id="menu">
+      <content></content>
+    </paper-listbox>
+  </template>
+  <script src="cr_shared_menu.js"></script>
+</dom-module>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js
new file mode 100644
index 00000000000..9833a30a6b4
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js
@@ -0,0 +1,90 @@
+// 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.
+
+Polymer({
+  is: 'cr-shared-menu',
+
+  properties: {
+    menuOpen: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+
+    /**
+     * The contextual item that this menu was clicked for.
+     *  e.g. the data used to render an item in an <iron-list> or <dom-repeat>
+     * @type {?Object}
+     */
+    itemData: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  /**
+   * The last anchor that was used to open a menu. It's necessary for toggling.
+   * @type {?Element}
+   */
+  lastAnchor_: null,
+
+  /**
+   * Adds listeners to the window in order to dismiss the menu on resize and
+   * when escape is pressed.
+   */
+  attached: function() {
+    window.addEventListener('resize', this.closeMenu.bind(this));
+    window.addEventListener('keydown', function(e) {
+      // Escape button on keyboard
+      if (e.keyCode == 27)
+        this.closeMenu();
+    }.bind(this));
+  },
+
+  /** Closes the menu. */
+  closeMenu: function() {
+    this.menuOpen = false;
+    this.itemData = null;
+  },
+
+  /**
+   * Opens the menu at the anchor location.
+   * @param {!Element} anchor The location to display the menu.
+   * @param {!Object} itemData The contextual item's data.
+   */
+  openMenu: function(anchor, itemData) {
+    this.menuOpen = true;
+    this.itemData = itemData;
+    this.lastAnchor_ = anchor;
+
+    // Move the menu to the anchor.
+    var anchorRect = anchor.getBoundingClientRect();
+    var parentRect = this.offsetParent.getBoundingClientRect();
+
+    var left = (isRTL() ? anchorRect.left : anchorRect.right) - parentRect.left;
+    var top = anchorRect.top - parentRect.top;
+
+    cr.ui.positionPopupAtPoint(left, top, this, cr.ui.AnchorType.BEFORE);
+
+    // Handle the bottom of the screen.
+    if (this.getBoundingClientRect().top != anchorRect.top) {
+      var bottom = anchorRect.bottom - parentRect.top;
+      cr.ui.positionPopupAtPoint(left, bottom, this, cr.ui.AnchorType.BEFORE);
+    }
+
+    this.$.menu.focus();
+  },
+
+  /**
+   * Toggles the menu for the anchor that is passed in.
+   * @param {!Element} anchor The location to display the menu.
+   * @param {!Object} itemData The contextual item's data.
+   */
+  toggleMenu: function(anchor, itemData) {
+    if (anchor == this.lastAnchor_ && this.menuOpen)
+      this.closeMenu();
+    else
+      this.openMenu(anchor, itemData);
+  },
+});
diff --git a/chromium/ui/webui/resources/cr_elements/demo_element.html b/chromium/ui/webui/resources/cr_elements/demo_element.html
index 440d82ecffc..220741c82c9 100644
--- a/chromium/ui/webui/resources/cr_elements/demo_element.html
+++ b/chromium/ui/webui/resources/cr_elements/demo_element.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.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">
diff --git a/chromium/ui/webui/resources/cr_elements/network/compiled_resources.gyp b/chromium/ui/webui/resources/cr_elements/network/compiled_resources.gyp
deleted file mode 100644
index 601aead59fd..00000000000
--- a/chromium/ui/webui/resources/cr_elements/network/compiled_resources.gyp
+++ /dev/null
@@ -1,43 +0,0 @@
-# Copyright 2014 The Chromium Authors. All rights reserved.
-# Use of this source code is governed by a BSD-style license that can be
-# found in the LICENSE file.
-{
-  'targets': [
-    {
-      'target_name': 'cr_network_icon',
-      'variables': {
-        'depends': [
-          'cr_onc_types.js',
-        ],
-        'externs': [
-          '../../../../../third_party/closure_compiler/externs/networking_private.js'
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
-      'target_name': 'cr_network_list',
-      'variables': {
-        'depends': [
-          '../../../../../third_party/jstemplate/compiled_resources.gyp:jstemplate',
-          'cr_onc_types.js',
-          'cr_network_list_item.js',
-          '../../../../../ui/webui/resources/js/load_time_data.js',
-        ],
-        'externs': [
-          '../../../../../third_party/closure_compiler/externs/networking_private.js'
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
-      'target_name': 'cr_network_select',
-      'variables': {
-        'depends': [
-          'compiled_resources.gyp:cr_network_list',
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    }, 
-  ],
-}
diff --git a/chromium/ui/webui/resources/cr_elements/network/compiled_resources2.gyp b/chromium/ui/webui/resources/cr_elements/network/compiled_resources2.gyp
new file mode 100644
index 00000000000..2a193a33100
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/network/compiled_resources2.gyp
@@ -0,0 +1,48 @@
+# Copyright 2014 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+{
+  'targets': [
+    {
+      'target_name': 'cr_network_icon',
+      'dependencies': [
+        'cr_onc_types',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_network_icon_externs',
+      'includes': ['../../../../../third_party/closure_compiler/include_js.gypi'],
+    },
+    {
+      'target_name': 'cr_network_list',
+      'dependencies': [
+        'cr_onc_types',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_network_list_item',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        'cr_onc_types',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_network_select',
+      'dependencies': [
+        '<(EXTERNS_GYP):networking_private',
+        'cr_onc_types',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_onc_types',
+      'dependencies': [
+        '<(EXTERNS_GYP):networking_private',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.html b/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.html
index ca8fd04730f..cb82c74b60e 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.html
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 
 <dom-module id="cr-network-icon">
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.js b/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.js
index d6ee5537f1a..13a3d6da9e0 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.js
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_icon.js
@@ -46,7 +46,6 @@ function getIconTypeFromNetworkType(networkType) {
 
 /**
  * Polymer class definition for 'cr-network-icon'.
- * @element cr-network-icon
  */
 Polymer({
   is: 'cr-network-icon',
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_list.html b/chromium/ui/webui/resources/cr_elements/network/cr_network_list.html
index 7f2878604ed..2b8f82c58b2 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_list.html
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_list.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/polymer.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-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list_item.html">
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_list.js b/chromium/ui/webui/resources/cr_elements/network/cr_network_list.js
index 04962be36ad..24178c4e6c4 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_list.js
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_list.js
@@ -11,7 +11,6 @@
 /**
  * Polymer class definition for 'cr-network-list'.
  * TODO(stevenjb): Update with iron-list(?) once implemented in Polymer 1.0.
- * @element cr-network-list
  */
 Polymer({
   is: 'cr-network-list',
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.html b/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.html
index 6be1c16ecb2..3fe72aafd28 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.html
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.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">
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.js b/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.js
index 84d2c1375e6..b362f8ae202 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.js
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_list_item.js
@@ -66,7 +66,6 @@ function getNetworkName(network) {
 
 /**
  * Polymer class definition for 'cr-network-list-item'.
- * @element cr-network-list-item
  */
 Polymer({
   is: 'cr-network-list-item',
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_select.html b/chromium/ui/webui/resources/cr_elements/network/cr_network_select.html
index bc703bcb914..b085806efb1 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_select.html
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_select.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html">
diff --git a/chromium/ui/webui/resources/cr_elements/network/cr_network_select.js b/chromium/ui/webui/resources/cr_elements/network/cr_network_select.js
index 6bc77b40ae7..ecf439385f5 100644
--- a/chromium/ui/webui/resources/cr_elements/network/cr_network_select.js
+++ b/chromium/ui/webui/resources/cr_elements/network/cr_network_select.js
@@ -7,9 +7,6 @@
  * networkingPrivate calls to populate it.
  */
 
-/**
- * @element cr-network-select
- */
 Polymer({
   is: 'cr-network-select',
 
diff --git a/chromium/ui/webui/resources/cr_elements/policy/compiled_resources.gyp b/chromium/ui/webui/resources/cr_elements/policy/compiled_resources.gyp
deleted file mode 100644
index 4d3578649ab..00000000000
--- a/chromium/ui/webui/resources/cr_elements/policy/compiled_resources.gyp
+++ /dev/null
@@ -1,81 +0,0 @@
-# Copyright 2014 The Chromium Authors. All rights reserved.
-# Use of this source code is governed by a BSD-style license that can be
-# found in the LICENSE file.
-{
-  'targets': [
-    {
-      'target_name': 'cr_policy_indicator_behavior',
-      'variables': {
-        'depends': [
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
-      'target_name': 'cr_policy_pref_behavior',
-      'variables': {
-        'depends': [
-          '../../../../../third_party/polymer/v1_0/components-chromium/iron-iconset-svg/iron-iconset-svg-extracted.js',
-          '../../../../../third_party/polymer/v1_0/components-chromium/iron-meta/iron-meta-extracted.js',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
-          'cr_policy_indicator_behavior.js',
-        ],
-        'externs': [
-          '../../../../../third_party/closure_compiler/externs/settings_private.js'
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
-      'target_name': 'cr_policy_pref_indicator',
-      'variables': {
-        'depends': [
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
-          'cr_policy_indicator_behavior.js',
-          'cr_policy_pref_behavior.js',
-        ],
-        'externs': [
-          '../../../../../third_party/closure_compiler/externs/settings_private.js'
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
-      'target_name': 'cr_policy_network_behavior',
-      'variables': {
-        'depends': [
-          '../../../../../third_party/polymer/v1_0/components-chromium/iron-iconset-svg/iron-iconset-svg-extracted.js',
-          '../../../../../third_party/polymer/v1_0/components-chromium/iron-meta/iron-meta-extracted.js',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
-          '../network/cr_onc_types.js',
-          'cr_policy_indicator_behavior.js',
-        ],
-        'externs': [
-          '../../../../../third_party/closure_compiler/externs/networking_private.js',
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
-      'target_name': 'cr_policy_network_indicator',
-      'variables': {
-        'depends': [
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
-          '../network/cr_onc_types.js',
-          'cr_policy_indicator_behavior.js',
-          'cr_policy_network_behavior.js',
-        ],
-        'externs': [
-          '../../../../../third_party/closure_compiler/externs/networking_private.js',
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-  ],
-}
diff --git a/chromium/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp b/chromium/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp
new file mode 100644
index 00000000000..7e71e2bdb5e
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp
@@ -0,0 +1,44 @@
+# Copyright 2014 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+{
+  'targets': [
+    {
+      'target_name': 'cr_policy_indicator_behavior',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_policy_pref_behavior',
+      'dependencies': [
+        'cr_policy_indicator_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_policy_pref_indicator',
+      'dependencies': [
+        '<(EXTERNS_GYP):settings_private',
+        'cr_policy_indicator_behavior',
+        'cr_policy_pref_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_policy_network_behavior',
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'cr_policy_network_indicator',
+      'dependencies': [
+        '../network/compiled_resources2.gyp:cr_onc_types',
+        'cr_policy_indicator_behavior',
+        'cr_policy_network_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}
diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html
index 377786542ed..3c86d9937c5 100644
--- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html
+++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html">
diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js
index d036c06973b..29c09719c33 100644
--- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js
+++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js
@@ -7,7 +7,6 @@
  * properties.
  */
 
-/** @element cr-policy-network-indicator */
 Polymer({
   is: 'cr-policy-network-indicator',
 
diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
index 49edb142edc..9fa274a89cc 100644
--- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
+++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
@@ -1,4 +1,4 @@
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html">
diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js
index 769ba62f791..cd2562b1713 100644
--- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js
+++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js
@@ -5,8 +5,6 @@
 /**
  * @fileoverview Polymer element for indicating policies that apply to an
  * element controlling a settings preference.
- *
- * @element cr-policy-pref-indicator
  */
 Polymer({
   is: 'cr-policy-pref-indicator',
diff --git a/chromium/ui/webui/resources/cr_elements_resources.grdp b/chromium/ui/webui/resources/cr_elements_resources.grdp
index 66b50842c66..368f5a997df 100644
--- a/chromium/ui/webui/resources/cr_elements_resources.grdp
+++ b/chromium/ui/webui/resources/cr_elements_resources.grdp
@@ -117,6 +117,12 @@
   <structure name="IDR_CR_ELEMENTS_CR_SEARCH_FIELD_JS"
              file="../../webui/resources/cr_elements/cr_search_field/cr_search_field.js"
              type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_SHARED_MENU_HTML"
+             file="../../webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_SHARED_MENU_JS"
+             file="../../webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_SHARED_CSS"
              file="../../webui/resources/cr_elements/shared.css"
              type="chrome_html" />
diff --git a/chromium/ui/webui/resources/css/bubble.css b/chromium/ui/webui/resources/css/bubble.css
index b0092e5e45c..52e0d102a53 100644
--- a/chromium/ui/webui/resources/css/bubble.css
+++ b/chromium/ui/webui/resources/css/bubble.css
@@ -68,7 +68,7 @@ html[dir='rtl'] .bubble-close {
 }
 
 .bubble-arrow {
-  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
   box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
   height: 15px;
   position: absolute;
diff --git a/chromium/ui/webui/resources/css/dialogs.css b/chromium/ui/webui/resources/css/dialogs.css
index 9c16aca557b..fde32aab91e 100644
--- a/chromium/ui/webui/resources/css/dialogs.css
+++ b/chromium/ui/webui/resources/css/dialogs.css
@@ -38,16 +38,16 @@
 
 @-webkit-keyframes pulse {
  0% {
-   -webkit-transform: scale(1);
+   transform: scale(1);
  }
  40% {
-   -webkit-transform: scale(1.02);
+   transform: scale(1.02);
   }
  60% {
-   -webkit-transform: scale(1.02);
+   transform: scale(1.02);
   }
  100% {
-   -webkit-transform: scale(1);
+   transform: scale(1);
  }
 }
 
@@ -59,13 +59,13 @@
 }
 
 .shown > .cr-dialog-frame {
-  -webkit-transform: perspective(500px) scale(1)
+  transform: perspective(500px) scale(1)
                      translateY(0) rotateX(0);
   opacity: 1;
 }
 
 .cr-dialog-frame {
-  -webkit-transform: perspective(500px) scale(0.99)
+  transform: perspective(500px) scale(0.99)
                      translateY(-20px) rotateX(5deg);
   -webkit-transition: all 180ms;
   -webkit-transition-duration: 250ms;
diff --git a/chromium/ui/webui/resources/css/overlay.css b/chromium/ui/webui/resources/css/overlay.css
index 361fb8218ad..3b3340d26de 100644
--- a/chromium/ui/webui/resources/css/overlay.css
+++ b/chromium/ui/webui/resources/css/overlay.css
@@ -25,14 +25,14 @@
 .overlay.transparent .page {
   /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
    * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
-  -webkit-transform: scale(0.99) translateY(-20px);
+  transform: scale(0.99) translateY(-20px);
 }
 
 /* The foreground dialog. */
 .overlay .page {
   -webkit-border-radius: 3px;
   -webkit-box-orient: vertical;
-  -webkit-transition: 200ms -webkit-transform;
+  -webkit-transition: 200ms transform;
   background: white;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
   color: #333;
@@ -52,16 +52,16 @@
 /* keyframes used to pulse the overlay */
 @-webkit-keyframes pulse {
  0% {
-   -webkit-transform: scale(1);
+   transform: scale(1);
  }
  40% {
-   -webkit-transform: scale(1.02);
+   transform: scale(1.02);
   }
  60% {
-   -webkit-transform: scale(1.02);
+   transform: scale(1.02);
   }
  100% {
-   -webkit-transform: scale(1);
+   transform: scale(1);
  }
 }
 
diff --git a/chromium/ui/webui/resources/css/text_defaults.css b/chromium/ui/webui/resources/css/text_defaults.css
index 037ade7efb1..ac989687c0f 100644
--- a/chromium/ui/webui/resources/css/text_defaults.css
+++ b/chromium/ui/webui/resources/css/text_defaults.css
@@ -13,17 +13,17 @@
  *
  * 2. via the webui::AppendWebUICSSTextDefaults() method to directly append it
  * to an HTML string.
- * Otherwise its $placeholders won't be expanded. */
+ * Otherwise its placeholders won't be expanded. */
 
 html {
-  direction: ${textDirection};
+  direction: $i18n{textDirection};
 }
 
 body {
-  font-family: ${fontFamily};
-  font-size: ${fontSize};
+  font-family: $i18nRaw{fontFamily};
+  font-size: $i18n{fontSize};
 }
 
 button {
-  font-family: ${fontFamily};
+  font-family: $i18nRaw{fontFamily};
 }
diff --git a/chromium/ui/webui/resources/css/text_defaults_md.css b/chromium/ui/webui/resources/css/text_defaults_md.css
index a2b2022667a..b378ba293f0 100644
--- a/chromium/ui/webui/resources/css/text_defaults_md.css
+++ b/chromium/ui/webui/resources/css/text_defaults_md.css
@@ -13,19 +13,19 @@
  *
  * 2. via the webui::AppendWebUICSSTextDefaultsMd() method to directly append it
  * to an HTML string.
- * Otherwise its $placeholders won't be expanded. */
+ * Otherwise its placeholders won't be expanded. */
 
 @import url(chrome://resources/css/roboto.css);
 
 html {
-  direction: ${textDirection};
+  direction: $i18n{textDirection};
 }
 
 body {
-  font-family: Roboto, ${fontFamily};
-  font-size: ${fontSize};
+  font-family: Roboto, $i18nRaw{fontFamily};
+  font-size: 81.25%
 }
 
 button {
-  font-family: Roboto, ${fontFamily};
+  font-family: Roboto, $i18nRaw{fontFamily};
 }
diff --git a/chromium/ui/webui/resources/css/trash.css b/chromium/ui/webui/resources/css/trash.css
index fb06e9aa5b7..dfe66dc0c3f 100644
--- a/chromium/ui/webui/resources/css/trash.css
+++ b/chromium/ui/webui/resources/css/trash.css
@@ -29,7 +29,7 @@
 
 .trash > .lid {
   -webkit-transform-origin: -7% 100%;
-  -webkit-transition: -webkit-transform 150ms;
+  -webkit-transition: transform 150ms;
   height: 6px;
   width: 14px;
 }
@@ -39,12 +39,12 @@ html[dir='rtl'] .trash > .lid {
 }
 
 .trash:-webkit-any(:focus, :hover, .open) > .lid {
-  -webkit-transform: rotate(-45deg);
-  -webkit-transition: -webkit-transform 250ms;
+  transform: rotate(-45deg);
+  -webkit-transition: transform 250ms;
 }
 
 html[dir='rtl'] .trash:-webkit-any(:focus, :hover, .open) > .lid {
-  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 
 .trash > .can {
diff --git a/chromium/ui/webui/resources/css/tree.css b/chromium/ui/webui/resources/css/tree.css
index a47735a1f3f..a86baba5b08 100644
--- a/chromium/ui/webui/resources/css/tree.css
+++ b/chromium/ui/webui/resources/css/tree.css
@@ -22,7 +22,7 @@ tree {
 }
 
 .expand-icon {
-  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
   -webkit-transition: all 150ms;
   background: url(../images/tree_triangle.svg) no-repeat center center;
   background-size: 8px 5px;
@@ -36,11 +36,11 @@ tree {
 }
 
 html[dir=rtl] .expand-icon {
-  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 .tree-item[expanded] > .tree-row > .expand-icon {
-  -webkit-transform: rotate(0);
+  transform: rotate(0);
   background-image: url(../images/tree_triangle.svg);
   opacity: .5;
 }
diff --git a/chromium/ui/webui/resources/css/widgets.css b/chromium/ui/webui/resources/css/widgets.css
index 4897138a2a4..5a5dbc21c69 100644
--- a/chromium/ui/webui/resources/css/widgets.css
+++ b/chromium/ui/webui/resources/css/widgets.css
@@ -145,6 +145,7 @@ input[type='radio']:checked::before {
   top: 3px;
 }
 
+<if expr="not is_ios">
 /* Hover **********************************************************************/
 
 :enabled:hover:-webkit-any(
@@ -167,6 +168,7 @@ input[type='radio']:checked::before {
   background-image: url(../images/select.png),
       -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 }
+</if>
 
 /* Active *********************************************************************/
 
diff --git a/chromium/ui/webui/resources/html/cr.html b/chromium/ui/webui/resources/html/cr.html
index 6e7b3b83471..df43b18b41a 100644
--- a/chromium/ui/webui/resources/html/cr.html
+++ b/chromium/ui/webui/resources/html/cr.html
@@ -1 +1,2 @@
+<link rel="import" href="chrome://resources/html/promise_resolver.html">
 <script src="chrome://resources/js/cr.js"></script>
diff --git a/chromium/ui/webui/resources/html/polymer.html b/chromium/ui/webui/resources/html/polymer.html
new file mode 100644
index 00000000000..4b9e0414092
--- /dev/null
+++ b/chromium/ui/webui/resources/html/polymer.html
@@ -0,0 +1,2 @@
+<script src="chrome://resources/js/polymer_config.js"></script>
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
diff --git a/chromium/ui/webui/resources/html/polymer_config.html b/chromium/ui/webui/resources/html/polymer_config.html
deleted file mode 100644
index d805abd7ba7..00000000000
--- a/chromium/ui/webui/resources/html/polymer_config.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="chrome://resources/js/polymer_config.js"></script>
diff --git a/chromium/ui/webui/resources/html/promise_resolver.html b/chromium/ui/webui/resources/html/promise_resolver.html
new file mode 100644
index 00000000000..3a171fa9e64
--- /dev/null
+++ b/chromium/ui/webui/resources/html/promise_resolver.html
@@ -0,0 +1 @@
+<script src="chrome://resources/js/promise_resolver.js"></script>
diff --git a/chromium/ui/webui/resources/html/web_ui_listener_behavior.html b/chromium/ui/webui/resources/html/web_ui_listener_behavior.html
new file mode 100644
index 00000000000..1c1906de592
--- /dev/null
+++ b/chromium/ui/webui/resources/html/web_ui_listener_behavior.html
@@ -0,0 +1,2 @@
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome://resources/js/web_ui_listener_behavior.js"></script>
diff --git a/chromium/ui/webui/resources/images/2x/otr_icon_standalone.png b/chromium/ui/webui/resources/images/2x/otr_icon_standalone.png
deleted file mode 100644
index af06732e608..00000000000
--- a/chromium/ui/webui/resources/images/2x/otr_icon_standalone.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/icon_bookmarks.svg b/chromium/ui/webui/resources/images/icon_bookmarks.svg
new file mode 100644
index 00000000000..cc93d8cbc65
--- /dev/null
+++ b/chromium/ui/webui/resources/images/icon_bookmarks.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
+  <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
diff --git a/chromium/ui/webui/resources/images/icon_extensions.svg b/chromium/ui/webui/resources/images/icon_extensions.svg
new file mode 100644
index 00000000000..e678d5839bb
--- /dev/null
+++ b/chromium/ui/webui/resources/images/icon_extensions.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/>
+</svg>
diff --git a/chromium/ui/webui/resources/images/icon_history.svg b/chromium/ui/webui/resources/images/icon_history.svg
new file mode 100644
index 00000000000..8c0d7762881
--- /dev/null
+++ b/chromium/ui/webui/resources/images/icon_history.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+</svg>
diff --git a/chromium/ui/webui/resources/images/icon_passwords.svg b/chromium/ui/webui/resources/images/icon_passwords.svg
new file mode 100644
index 00000000000..246a9dbeee8
--- /dev/null
+++ b/chromium/ui/webui/resources/images/icon_passwords.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
+  <path d="M3 5.005v19.99C3 26.103 3.895 27 5 27h30c1.108 0 2-.898 2-2.005V5.005C37 3.897 36.105 3 35 3H5c-1.108 0-2 .898-2 2.005zm-3 0C0 2.242 2.234 0 5 0h30c2.763 0 5 2.242 5 5.005v19.99C40 27.758 37.766 30 35 30H5c-2.763 0-5-2.242-5-5.005V5.005zM29 8h3v13h-3V8zm-6 6.14l-.632-1.834-.147.046-3.195.98V10H16.98v3.33l-3.2-.978-.148-.046L13 14.14l.146.045 3.21.984-1.987 2.58-.09.115L15.93 19l.09-.118L18 16.316l1.978 2.566.09.118 1.655-1.133-.09-.117-1.988-2.58 3.21-.985.145-.045zM7.222 12.352l-3.2.98V10H3v6.316l1.977 2.566.09.118 1.654-1.133-.09-.117-1.985-2.58 3.21-.985L8 14.14l-.63-1.834-.148.046z" fill-rule="evenodd"/>
+</svg>
diff --git a/chromium/ui/webui/resources/images/icon_tabs.svg b/chromium/ui/webui/resources/images/icon_tabs.svg
new file mode 100644
index 00000000000..9fbe81c7f88
--- /dev/null
+++ b/chromium/ui/webui/resources/images/icon_tabs.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h24v24H0V0z"/>
+    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 4h5v16H6V4zm5 7h7v9h-7v-9z" fill="#000"/>
+  </g>
+</svg>
diff --git a/chromium/ui/webui/resources/images/icon_themes.svg b/chromium/ui/webui/resources/images/icon_themes.svg
new file mode 100644
index 00000000000..6e225fdfe91
--- /dev/null
+++ b/chromium/ui/webui/resources/images/icon_themes.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" viewBox="0 0 32 30">
+  <path d="M20.04 16.74L12.776 24l-2.42-2.42c-.668-.668 0-2.42 0-2.42l1.21-3.632c.302-.91.364-2.057 0-2.422-3.63-3.63-8.472-6.05-9.684-7.26-1.337-1.338-1.337-3.507 0-4.842 1.34-1.34 3.506-1.34 4.842 0 1.21 1.21 3.63 6.05 7.263 9.682.363.363 1.512.303 2.42 0l3.63-1.21s1.754-.668 2.422 0l2.42 2.42-4.84 4.843zM3.657 2.44c-.586.585-.586 1.535 0 2.12.585.586 1.535.586 2.122 0 .582-.585.582-1.535 0-2.12-.59-.587-1.54-.587-2.125 0zM24.32 24.9h-3.4v3.4l-1.7 1.7-5.1-5.1L26.02 13l5.1 5.1-6.8 6.8z" fill-rule="evenodd"/>
+</svg>
diff --git a/chromium/ui/webui/resources/images/otr_icon_standalone.png b/chromium/ui/webui/resources/images/otr_icon_standalone.png
deleted file mode 100644
index 27d3dc44045..00000000000
--- a/chromium/ui/webui/resources/images/otr_icon_standalone.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/throbber_medium.svg b/chromium/ui/webui/resources/images/throbber_medium.svg
index 2a7aaca7af9..c6f51b277eb 100644
--- a/chromium/ui/webui/resources/images/throbber_medium.svg
+++ b/chromium/ui/webui/resources/images/throbber_medium.svg
@@ -42,8 +42,8 @@
 
       /* Rotating the whole thing */
       @-webkit-keyframes rotate {
-        from {-webkit-transform: rotate(0deg);}
-        to {-webkit-transform: rotate(360deg);}
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
       }
       .qp-circular-loader {
         -webkit-animation-name: rotate;
@@ -68,10 +68,10 @@
       }
       @-webkit-keyframes rot {
         from {
-          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
         }
         to {
-          -webkit-transform: rotate(-360deg);
+          transform: rotate(-360deg);
         }
       }
       @-webkit-keyframes colors {
diff --git a/chromium/ui/webui/resources/images/throbber_small.svg b/chromium/ui/webui/resources/images/throbber_small.svg
index 0cf4db122e9..6f31d493fd8 100644
--- a/chromium/ui/webui/resources/images/throbber_small.svg
+++ b/chromium/ui/webui/resources/images/throbber_small.svg
@@ -43,8 +43,8 @@
 
       /* Rotating the whole thing */
       @-webkit-keyframes rotate {
-        from {-webkit-transform: rotate(0deg);}
-        to {-webkit-transform: rotate(360deg);}
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
       }
       .qp-circular-loader {
         -webkit-animation-name: rotate;
@@ -69,10 +69,10 @@
       }
       @-webkit-keyframes rot {
         from {
-          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
         }
         to {
-          -webkit-transform: rotate(-360deg);
+          transform: rotate(-360deg);
         }
       }
       @-webkit-keyframes colors {
diff --git a/chromium/ui/webui/resources/js/action_link.js b/chromium/ui/webui/resources/js/action_link.js
index bd607f524b1..70b89e728a6 100644
--- a/chromium/ui/webui/resources/js/action_link.js
+++ b/chromium/ui/webui/resources/js/action_link.js
@@ -44,7 +44,7 @@ var ActionLink = document.registerElement('action-link', {
         this.setAttribute('role', 'link');
 
       this.addEventListener('keydown', function(e) {
-        if (!this.disabled && e.keyIdentifier == 'Enter') {
+        if (!this.disabled && e.keyIdentifier == 'Enter' && !this.href) {
           // Schedule a click asynchronously because other 'keydown' handlers
           // may still run later (e.g. document.addEventListener('keydown')).
           // Specifically options dialogs break when this timeout isn't here.
diff --git a/chromium/ui/webui/resources/js/assert.js b/chromium/ui/webui/resources/js/assert.js
index 9b0be57b318..94f25358294 100644
--- a/chromium/ui/webui/resources/js/assert.js
+++ b/chromium/ui/webui/resources/js/assert.js
@@ -62,7 +62,11 @@ function assertNotReached(opt_message) {
  * @template T
  */
 function assertInstanceof(value, type, opt_message) {
-  assert(value instanceof type,
-      opt_message || value + ' is not a[n] ' + (type.name || typeof type));
+  // We don't use assert immediately here so that we avoid constructing an error
+  // message if we don't have to.
+  if (!(value instanceof type)) {
+    assertNotReached(opt_message || 'Value ' + value +
+                     ' is not a[n] ' + (type.name || typeof type));
+  }
   return value;
 }
diff --git a/chromium/ui/webui/resources/js/chromeos/compiled_resources.gyp b/chromium/ui/webui/resources/js/chromeos/compiled_resources2.gyp
index 05e7e0a9be9..a363475a954 100644
--- a/chromium/ui/webui/resources/js/chromeos/compiled_resources.gyp
+++ b/chromium/ui/webui/resources/js/chromeos/compiled_resources2.gyp
@@ -5,13 +5,11 @@
   'targets': [
     {
       'target_name': 'ui_account_tweaks',
-      'variables': {
-        'depends': [
-          '../compiled_resources.gyp:cr',
-          '../compiled_resources.gyp:load_time_data',
-        ],
-      },
-      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
+      'dependencies': [
+        '../compiled_resources2.gyp:cr',
+        '../compiled_resources2.gyp:load_time_data',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
   ]
 }
diff --git a/chromium/ui/webui/resources/js/compiled_resources.gyp b/chromium/ui/webui/resources/js/compiled_resources.gyp
index cbfeab6278a..d679f4c32a2 100644
--- a/chromium/ui/webui/resources/js/compiled_resources.gyp
+++ b/chromium/ui/webui/resources/js/compiled_resources.gyp
@@ -10,6 +10,7 @@
     {
       'target_name': 'cr',
       'variables': {
+        'depends': ['compiled_resources.gyp:promise_resolver'],
         'externs': ['../../../../third_party/closure_compiler/externs/chrome_send.js'],
       },
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
@@ -19,6 +20,22 @@
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     },
     {
+      'target_name': 'i18n_template_no_process',
+      'variables': {
+        'depends': ['compiled_resources.gyp:load_time_data'],
+        'externs': ['../../../../third_party/closure_compiler/externs/pending_compiler_externs.js'],
+      },
+      'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
+    },
+    {
+      'target_name': 'i18n_template',
+      'variables': {
+        'depends': ['compiled_resources.gyp:load_time_data'],
+        'externs': ['../../../../third_party/closure_compiler/externs/pending_compiler_externs.js'],
+      },
+      'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
+    },
+    {
       'target_name': 'load_time_data',
       'variables': {
         'depends': [
@@ -30,31 +47,19 @@
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     },
     {
-      'target_name': 'util',
-      'variables': {
-        'depends': ['compiled_resources.gyp:cr'],
-        # TODO(jlklein): Get <(VARIABLES) in transient externs/depends working.
-        'externs': ['../../../../third_party/closure_compiler/externs/chrome_send.js'],
-      },
-      'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
-    },
-    {
       'target_name': 'parse_html_subset',
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     },
     {
-      'target_name': 'i18n_template_no_process',
-      'variables': {
-        'depends': ['compiled_resources.gyp:load_time_data'],
-        'externs': ['../../../../third_party/closure_compiler/externs/pending_compiler_externs.js'],
-      },
+      'target_name': 'promise_resolver',
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     },
     {
-      'target_name': 'i18n_template',
+      'target_name': 'util',
       'variables': {
-        'depends': ['compiled_resources.gyp:load_time_data'],
-        'externs': ['../../../../third_party/closure_compiler/externs/pending_compiler_externs.js'],
+        'depends': ['compiled_resources.gyp:cr', 'assert.js'],
+        # TODO(jlklein): Get <(VARIABLES) in transient externs/depends working.
+        'externs': ['../../../../third_party/closure_compiler/externs/chrome_send.js'],
       },
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     },
diff --git a/chromium/ui/webui/resources/js/compiled_resources2.gyp b/chromium/ui/webui/resources/js/compiled_resources2.gyp
index 2d0ce6627ae..e24ce72d519 100644
--- a/chromium/ui/webui/resources/js/compiled_resources2.gyp
+++ b/chromium/ui/webui/resources/js/compiled_resources2.gyp
@@ -14,47 +14,66 @@
     {
       'target_name': 'cr',
       'dependencies': [
+        'promise_resolver',
         '<(EXTERNS_GYP):chrome_send',
         'assert',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'load_time_data',
-      'dependencies': ['<(DEPTH)/third_party/jstemplate/compiled_resources2.gyp:jstemplate'],
+      'target_name': 'event_tracker',
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'event_tracker',
+      'target_name': 'i18n_template_no_process',
+      'dependencies': [
+        'load_time_data',
+        '<(EXTERNS_GYP):pending_compiler_externs',
+      ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'util',
+      'target_name': 'i18n_template',
       'dependencies': [
-        '<(EXTERNS_GYP):chrome_send',
-        'cr',
+        'load_time_data',
+        # Ideally, <include> would automatically import externs as well, but
+        # it current doesn't and that sounds hard. Let's just kill <include>.
+        '<(EXTERNS_GYP):pending_compiler_externs',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'i18n_behavior',
+      'dependencies': [
+        'load_time_data',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'load_time_data',
+      'dependencies': ['<(DEPTH)/third_party/jstemplate/compiled_resources2.gyp:jstemplate'],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'parse_html_subset',
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'i18n_template_no_process',
+      'target_name': 'promise_resolver',
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'util',
       'dependencies': [
-        'load_time_data',
-        '<(EXTERNS_GYP):pending_compiler_externs',
+        '<(EXTERNS_GYP):chrome_send',
+        'cr',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
-      'target_name': 'i18n_template',
+      'target_name': 'web_ui_listener_behavior',
       'dependencies': [
-        'load_time_data',
-        # Ideally, <include> would automatically import externs as well, but
-        # it current doesn't and that sounds hard. Let's just kill <include>.
-        '<(EXTERNS_GYP):pending_compiler_externs',
+        'cr',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
diff --git a/chromium/ui/webui/resources/js/cr.js b/chromium/ui/webui/resources/js/cr.js
index a38c59f8473..090cfd94f7d 100644
--- a/chromium/ui/webui/resources/js/cr.js
+++ b/chromium/ui/webui/resources/js/cr.js
@@ -9,8 +9,11 @@
  */
 var global = this;
 
+/** @typedef {{eventName: string, uid: number}} */
+var WebUIListener;
+
 /** Platform, package, object property, and Event support. **/
-var cr = function() {
+var cr = cr || function() {
   'use strict';
 
   /**
@@ -22,6 +25,8 @@ var cr = function() {
    * @param {*=} opt_object The object to expose at the end of the path.
    * @param {Object=} opt_objectToExportTo The object to add the path to;
    *     default is {@code global}.
+   * @return {!Object} The last object exported (i.e. exportPath('cr.ui')
+   *     returns a reference to the ui property of window.cr).
    * @private
    */
   function exportPath(name, opt_object, opt_objectToExportTo) {
@@ -39,7 +44,7 @@ var cr = function() {
       }
     }
     return cur;
-  };
+  }
 
   /**
    * Fires a property change event on the target.
@@ -313,56 +318,62 @@ var cr = function() {
   }
 
   /**
-   * The mapping used by the sendWithCallback mechanism to tie the callback
-   * supplied to an invocation of sendWithCallback with the WebUI response
-   * sent by the browser in response to the chrome.send call. The mapping is
-   * from ID to callback function; the ID is generated by sendWithCallback and
-   * is unique across all invocations of said method.
-   * @type {!Object<Function>}
+   * The mapping used by the sendWithPromise mechanism to tie the Promise
+   * returned to callers with the corresponding WebUI response. The mapping is
+   * from ID to the PromiseResolver helper; the ID is generated by
+   * sendWithPromise and is unique across all invocations of said method.
+   * @type {!Object<!PromiseResolver>}
    */
-  var chromeSendCallbackMap = Object.create(null);
+  var chromeSendResolverMap = {};
 
   /**
    * The named method the WebUI handler calls directly in response to a
-   * chrome.send call that expects a callback. The handler requires no knowledge
+   * chrome.send call that expects a response. The handler requires no knowledge
    * of the specific name of this method, as the name is passed to the handler
    * as the first argument in the arguments list of chrome.send. The handler
    * must pass the ID, also sent via the chrome.send arguments list, as the
    * first argument of the JS invocation; additionally, the handler may
-   * supply any number of other arguments that will be forwarded to the
-   * callback.
-   * @param {string} id The unique ID identifying the callback method this
-   *    response is tied to.
+   * supply any number of other arguments that will be included in the response.
+   * @param {string} id The unique ID identifying the Promise this response is
+   *     tied to.
+   * @param {boolean} isSuccess Whether the request was successful.
+   * @param {*} response The response as sent from C++.
    */
-  function webUIResponse(id) {
-    chromeSendCallbackMap[id].apply(
-        null, Array.prototype.slice.call(arguments, 1));
-    delete chromeSendCallbackMap[id];
+  function webUIResponse(id, isSuccess, response) {
+    var resolver = chromeSendResolverMap[id];
+    delete chromeSendResolverMap[id];
+
+    if (isSuccess)
+      resolver.resolve(response);
+    else
+      resolver.reject(response);
   }
 
   /**
-   * A variation of chrome.send which allows the client to receive a direct
-   * callback without requiring the handler to have specific knowledge of any
-   * JS internal method names or state. The callback will be removed from the
-   * mapping once it has fired.
+   * A variation of chrome.send, suitable for messages that expect a single
+   * response from C++.
    * @param {string} methodName The name of the WebUI handler API.
-   * @param {Array|undefined} args Arguments for the method call sent to the
-   *     WebUI handler. Pass undefined if no args should be sent to the handler.
-   * @param {Function} callback A callback function which is called (indirectly)
-   *     by the WebUI handler.
+   * @param {...*} var_args Varibale number of arguments to be forwarded to the
+   *     C++ call.
+   * @return {!Promise}
    */
-  function sendWithCallback(methodName, args, callback) {
-    var id = methodName + createUid();
-    chromeSendCallbackMap[id] = callback;
-    chrome.send(methodName, ['cr.webUIResponse', id].concat(args || []));
+  function sendWithPromise(methodName, var_args) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    var promiseResolver = new PromiseResolver();
+    var id = methodName + '_' + createUid();
+    chromeSendResolverMap[id] = promiseResolver;
+    chrome.send(methodName, [id].concat(args));
+    return promiseResolver.promise;
   }
 
   /**
-   * A registry of callbacks keyed by event name. Used by addWebUIListener to
-   * register listeners.
-   * @type {!Object<Array<Function>>}
+   * A map of maps associating event names with listeners. The 2nd level map
+   * associates a listener ID with the callback function, such that individual
+   * listeners can be removed from an event without affecting other listeners of
+   * the same event.
+   * @type {!Object<!Object<!Function>>}
    */
-  var webUIListenerMap = Object.create(null);
+  var webUIListenerMap = {};
 
   /**
    * The named method the WebUI handler calls directly when an event occurs.
@@ -370,26 +381,52 @@ var cr = function() {
    * of the JS invocation; additionally, the handler may supply any number of
    * other arguments that will be forwarded to the listener callbacks.
    * @param {string} event The name of the event that has occurred.
+   * @param {...*} var_args Additional arguments passed from C++.
    */
-  function webUIListenerCallback(event) {
-    var listenerCallbacks = webUIListenerMap[event];
-    for (var i = 0; i < listenerCallbacks.length; i++) {
-      var callback = listenerCallbacks[i];
-      callback.apply(null, Array.prototype.slice.call(arguments, 1));
+  function webUIListenerCallback(event, var_args) {
+    var eventListenersMap = webUIListenerMap[event];
+    if (!eventListenersMap) {
+      // C++ event sent for an event that has no listeners.
+      // TODO(dpapad): Should a warning be displayed here?
+      return;
+    }
+
+    var args = Array.prototype.slice.call(arguments, 1);
+    for (var listenerId in eventListenersMap) {
+      eventListenersMap[listenerId].apply(null, args);
     }
   }
 
   /**
    * Registers a listener for an event fired from WebUI handlers. Any number of
    * listeners may register for a single event.
-   * @param {string} event The event to listen to.
-   * @param {Function} callback The callback run when the event is fired.
+   * @param {string} eventName The event to listen to.
+   * @param {!Function} callback The callback run when the event is fired.
+   * @return {!WebUIListener} An object to be used for removing a listener via
+   *     cr.removeWebUIListener. Should be treated as read-only.
    */
-  function addWebUIListener(event, callback) {
-    if (event in webUIListenerMap)
-      webUIListenerMap[event].push(callback);
-    else
-      webUIListenerMap[event] = [callback];
+  function addWebUIListener(eventName, callback) {
+    webUIListenerMap[eventName] = webUIListenerMap[eventName] || {};
+    var uid = createUid();
+    webUIListenerMap[eventName][uid] = callback;
+    return {eventName: eventName, uid: uid};
+  }
+
+  /**
+   * Removes a listener. Does nothing if the specified listener is not found.
+   * @param {!WebUIListener} listener The listener to be removed (as returned by
+   *     addWebUIListener).
+   * @return {boolean} Whether the given listener was found and actually
+   *     removed.
+   */
+  function removeWebUIListener(listener) {
+    var listenerExists = webUIListenerMap[listener.eventName] &&
+        webUIListenerMap[listener.eventName][listener.uid];
+    if (listenerExists) {
+      delete webUIListenerMap[listener.eventName][listener.uid];
+      return true;
+    }
+    return false;
   }
 
   return {
@@ -402,12 +439,15 @@ var cr = function() {
     exportPath: exportPath,
     getUid: getUid,
     makePublic: makePublic,
-    webUIResponse: webUIResponse,
-    sendWithCallback: sendWithCallback,
-    webUIListenerCallback: webUIListenerCallback,
-    addWebUIListener: addWebUIListener,
     PropertyKind: PropertyKind,
 
+    // C++ <-> JS communication related methods.
+    addWebUIListener: addWebUIListener,
+    removeWebUIListener: removeWebUIListener,
+    sendWithPromise: sendWithPromise,
+    webUIListenerCallback: webUIListenerCallback,
+    webUIResponse: webUIResponse,
+
     get doc() {
       return document;
     },
@@ -431,5 +471,10 @@ var cr = function() {
     get isLinux() {
       return /Linux/.test(navigator.userAgent);
     },
+
+    /** Whether this is on Android. */
+    get isAndroid() {
+      return /Android/.test(navigator.userAgent);
+    }
   };
 }();
diff --git a/chromium/ui/webui/resources/js/cr/ui/card_slider.js b/chromium/ui/webui/resources/js/cr/ui/card_slider.js
index b8684228962..f19199125a1 100644
--- a/chromium/ui/webui/resources/js/cr/ui/card_slider.js
+++ b/chromium/ui/webui/resources/js/cr/ui/card_slider.js
@@ -328,7 +328,7 @@ cr.define('cr.ui', function() {
     },
 
     /**
-     * Handles the ends of -webkit-transitions on -webkit-transform (animated
+     * Handles the ends of -webkit-transitions on transform (animated
      * card switches).
      * @param {Event} e The webkitTransitionEnd event.
      * @private
@@ -381,11 +381,10 @@ cr.define('cr.ui', function() {
 
     /**
      * Append a card to the end of the list.
-     * @param {!Node} card A card to add at the end of the card slider.
+     * @param {!Element} card A card to add at the end of the card slider.
      */
     appendCard: function(card) {
-      assert(card instanceof Node, '|card| isn\'t a Node');
-      this.cards_.push(card);
+      this.cards_.push(assertInstanceof(card, Element));
       this.fireAddedEvent_(card, this.cards_.length - 1);
     },
 
@@ -419,11 +418,11 @@ cr.define('cr.ui', function() {
      * Removes a card by index from the card slider. If the card to be removed
      * is the current card or in front of the current card, the current card
      * will be updated (to current card - 1).
-     * @param {!Node} card A card to be removed.
+     * @param {!Element} card A card to be removed.
      */
     removeCard: function(card) {
-      assert(card instanceof Node, '|card| isn\'t a Node');
-      this.removeCardAtIndex(this.cards_.indexOf(card));
+      this.removeCardAtIndex(
+          this.cards_.indexOf(assertInstanceof(card, Element)));
     },
 
     /**
@@ -460,7 +459,7 @@ cr.define('cr.ui', function() {
     },
 
     /**
-     * This re-syncs the -webkit-transform that's used to position the frame in
+     * This re-syncs the transform that's used to position the frame in
      * the likely event it needs to be updated by a card being inserted or
      * removed in the flow.
      */
@@ -534,7 +533,7 @@ cr.define('cr.ui', function() {
 
     /**
      * Selects a card from the stack. Passes through to selectCard.
-     * @param {Node} newCard The card that should be selected.
+     * @param {!Element} newCard The card that should be selected.
      * @param {boolean=} opt_animate Whether to animate.
      */
     selectCardByValue: function(newCard, opt_animate) {
@@ -567,7 +566,7 @@ cr.define('cr.ui', function() {
       // enough to change cards.
       var transition = '';
       if (opt_animate) {
-        transition = '-webkit-transform ' + CardSlider.TRANSITION_TIME_ +
+        transition = 'transform ' + CardSlider.TRANSITION_TIME_ +
                      'ms ease-in-out';
       }
       this.container_.style.WebkitTransition = transition;
@@ -582,12 +581,12 @@ cr.define('cr.ui', function() {
      * @private
      */
     translateTo_: function(x) {
-      // We use a webkitTransform to slide because this is GPU accelerated on
+      // We use a transform to slide because this is GPU accelerated on
       // Chrome and iOS.  Once Chrome does GPU acceleration on the position
       // fixed-layout elements we could simply set the element's position to
       // fixed and modify 'left' instead.
       this.deltaX_ = x - this.currentLeft_;
-      this.container_.style.WebkitTransform = 'translate3d(' + x + 'px, 0, 0)';
+      this.container_.style.transform = 'translate3d(' + x + 'px, 0, 0)';
     },
 
     /* Touch ******************************************************************/
diff --git a/chromium/ui/webui/resources/js/cr/ui/compiled_resources.gyp b/chromium/ui/webui/resources/js/cr/ui/compiled_resources.gyp
index 1d4cde6a5bb..8f06cd10f02 100644
--- a/chromium/ui/webui/resources/js/cr/ui/compiled_resources.gyp
+++ b/chromium/ui/webui/resources/js/cr/ui/compiled_resources.gyp
@@ -18,6 +18,7 @@
       'variables': {
         'depends': [
           '../../cr.js',
+          '../../promise_resolver.js',
           '../../util.js',
         ],
         'externs': [
diff --git a/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp b/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
index a420949cea1..1bc7c7fcb1e 100644
--- a/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
+++ b/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
@@ -4,10 +4,18 @@
 {
   'targets': [
     {
+      'target_name': 'alert_overlay',
+      'dependencies': [
+        '../../compiled_resources2.gyp:cr',
+        '../../compiled_resources2.gyp:util',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'command',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
-        '<(DEPTH)/ui/webui/resources/js/cr/compiled_resources2.gyp:ui',
+        '../../compiled_resources2.gyp:cr',
+        '../compiled_resources2.gyp:ui',
       ],
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -27,6 +35,11 @@
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'focus_outline_manager',
+      'dependencies': ['../../compiled_resources2.gyp:cr'],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'focus_row',
       'dependencies': [
         '../../compiled_resources2.gyp:assert',
@@ -37,6 +50,39 @@
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'menu_button',
+      'dependencies': [
+        '../../compiled_resources2.gyp:assert',
+        '../../compiled_resources2.gyp:cr',
+        '../../compiled_resources2.gyp:event_tracker',
+        '../compiled_resources2.gyp:ui',
+        'menu',
+        'menu_item',
+        'position_util',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'menu_item',
+      'dependencies': [
+        '../../compiled_resources2.gyp:cr',
+        '../../compiled_resources2.gyp:load_time_data',
+        '../compiled_resources2.gyp:ui',
+        'command',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'menu',
+      'dependencies': [
+        '../../compiled_resources2.gyp:assert',
+        '../../compiled_resources2.gyp:cr',
+        '../compiled_resources2.gyp:ui',
+        'menu_item',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'overlay',
       'dependencies': [
         '../../compiled_resources2.gyp:cr',
@@ -44,5 +90,12 @@
       ],
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'position_util',
+      'dependencies': [
+        '../../compiled_resources2.gyp:cr',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }
diff --git a/chromium/ui/webui/resources/js/cr/ui/focus_grid.js b/chromium/ui/webui/resources/js/cr/ui/focus_grid.js
index 5e9590883f9..4eda10b6af0 100644
--- a/chromium/ui/webui/resources/js/cr/ui/focus_grid.js
+++ b/chromium/ui/webui/resources/js/cr/ui/focus_grid.js
@@ -82,7 +82,7 @@ cr.define('cr.ui', function() {
     },
 
     /**
-     * @param {Node} target A target item to find in this grid.
+     * @param {!Element} target A target item to find in this grid.
      * @return {number} The row index. -1 if not found.
      */
     getRowIndexForTarget: function(target) {
@@ -122,7 +122,7 @@ cr.define('cr.ui', function() {
     addRowBefore: function(row, nextRow) {
       row.delegate = row.delegate || this;
 
-      var nextRowIndex = this.rows.indexOf(nextRow);
+      var nextRowIndex = nextRow ? this.rows.indexOf(nextRow) : -1;
       if (nextRowIndex == -1)
         this.rows.push(row);
       else
@@ -134,7 +134,7 @@ cr.define('cr.ui', function() {
      * @param {cr.ui.FocusRow} row The row that needs to be removed.
      */
     removeRow: function(row) {
-      var nextRowIndex = this.rows.indexOf(row);
+      var nextRowIndex = row ? this.rows.indexOf(row) : -1;
       if (nextRowIndex > -1)
         this.rows.splice(nextRowIndex, 1);
     },
diff --git a/chromium/ui/webui/resources/js/cr/ui/focus_row.js b/chromium/ui/webui/resources/js/cr/ui/focus_row.js
index bb5471e9761..a545d14d7be 100644
--- a/chromium/ui/webui/resources/js/cr/ui/focus_row.js
+++ b/chromium/ui/webui/resources/js/cr/ui/focus_row.js
@@ -17,7 +17,8 @@ cr.define('cr.ui', function() {
    *
    * @param {!Element} root The root of this focus row. Focus classes are
    *     applied to |root| and all added elements must live within |root|.
-   * @param {?Node} boundary Focus events are ignored outside of this node.
+   * @param {?Element} boundary Focus events are ignored outside of this
+   *     element.
    * @param {cr.ui.FocusRow.Delegate=} opt_delegate An optional event delegate.
    * @constructor
    */
@@ -25,8 +26,8 @@ cr.define('cr.ui', function() {
     /** @type {!Element} */
     this.root = root;
 
-    /** @private {!Node} */
-    this.boundary_ = boundary || document;
+    /** @private {!Element} */
+    this.boundary_ = boundary || document.documentElement;
 
     /** @type {cr.ui.FocusRow.Delegate|undefined} */
     this.delegate = opt_delegate;
@@ -221,10 +222,11 @@ cr.define('cr.ui', function() {
      * @private
      */
     onBlur_: function(e) {
-      if (!this.boundary_.contains(/** @type {Node} */(e.relatedTarget)))
+      if (!this.boundary_.contains(/** @type {Element} */(e.relatedTarget)))
         return;
 
-      if (this.getFocusableElements().indexOf(e.currentTarget) >= 0)
+      var currentTarget = /** @type {!Element} */(e.currentTarget);
+      if (this.getFocusableElements().indexOf(currentTarget) >= 0)
         this.makeActive(false);
     },
 
@@ -257,7 +259,8 @@ cr.define('cr.ui', function() {
      */
     onKeydown_: function(e) {
       var elements = this.getFocusableElements();
-      var elementIndex = elements.indexOf(e.currentTarget);
+      var currentElement = /** @type {!Element} */(e.currentTarget);
+      var elementIndex = elements.indexOf(currentElement);
       assert(elementIndex >= 0);
 
       if (this.delegate && this.delegate.onKeydown(this, e))
diff --git a/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js b/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js
index 550f4b52614..f9aca63c668 100644
--- a/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js
+++ b/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js
@@ -65,6 +65,7 @@ cr.define('cr.ui', function() {
       }
 
       for (var index in unselected) {
+        index = +index;
         delete this.selectedIndexes_[index];
         // Mark the index as changed. If previously marked, then unmark,
         // since it just got reverted to the original state.
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu_item.js b/chromium/ui/webui/resources/js/cr/ui/menu_item.js
index 2b8b12339b7..b4726f282f9 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu_item.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu_item.js
@@ -161,10 +161,12 @@ cr.define('cr.ui', function() {
       var shortcutText = '';
 
       // TODO(zvorygin): if more cornercases appear - optimize following
-      // code. Currently 'Enter' keystroke is passed as 'Enter', and 'Space'
-      // is passed as 'U+0020'
+      // code. Currently 'Enter' keystroke is passed as 'Enter', but 'Space'
+      // and 'Backspace' are passed as 'U+0020' and 'U+0008'.
       if (ident == 'U+0020')
         ident = 'Space';
+      else if (ident == 'U+0008')
+        ident = 'Backspace';
 
       ['CTRL', 'ALT', 'SHIFT', 'META'].forEach(function(mod) {
         if (mods[mod])
@@ -197,7 +199,8 @@ cr.define('cr.ui', function() {
       if (!this.disabled && !this.isSeparator() && this.selected) {
         // Store |contextElement| since it'll be removed by {Menu} on handling
         // 'activate' event.
-        var contextElement = this.parentNode.contextElement;
+        var contextElement = /** @type {{contextElement: Element}} */(
+            this.parentNode).contextElement;
         var activationEvent = cr.doc.createEvent('Event');
         activationEvent.initEvent('activate', true, true);
         activationEvent.originalEvent = e;
diff --git a/chromium/ui/webui/resources/js/cr/ui/overlay.js b/chromium/ui/webui/resources/js/cr/ui/overlay.js
index 56f339f1b1d..7d02f13999b 100644
--- a/chromium/ui/webui/resources/js/cr/ui/overlay.js
+++ b/chromium/ui/webui/resources/js/cr/ui/overlay.js
@@ -13,7 +13,8 @@ cr.define('cr.ui.overlay', function() {
    * @return {HTMLElement} The overlay.
    */
   function getTopOverlay() {
-    var overlays = document.querySelectorAll('.overlay:not([hidden])');
+    var overlays = /** @type !NodeList<!HTMLElement> */(
+        document.querySelectorAll('.overlay:not([hidden])'));
     return overlays[overlays.length - 1];
   }
 
@@ -26,8 +27,8 @@ cr.define('cr.ui.overlay', function() {
    */
   function getDefaultButton(overlay) {
     function isHidden(node) { return node.hidden; }
-    var defaultButtons =
-        overlay.querySelectorAll('.page .button-strip > .default-button');
+    var defaultButtons = /** @type !NodeList<!HTMLElement> */(
+        overlay.querySelectorAll('.page .button-strip > .default-button'));
     for (var i = 0; i < defaultButtons.length; i++) {
       if (!findAncestor(defaultButtons[i], isHidden))
         return defaultButtons[i];
diff --git a/chromium/ui/webui/resources/js/cr/ui/page_manager/page_manager.js b/chromium/ui/webui/resources/js/cr/ui/page_manager/page_manager.js
index 8fafc82c4f3..9d2492b3d02 100644
--- a/chromium/ui/webui/resources/js/cr/ui/page_manager/page_manager.js
+++ b/chromium/ui/webui/resources/js/cr/ui/page_manager/page_manager.js
@@ -61,7 +61,8 @@ cr.define('cr.ui.pageManager', function() {
       this.handleScroll_();
 
       // Shake the dialog if the user clicks outside the dialog bounds.
-      var containers = document.querySelectorAll('body > .overlay');
+      var containers = /** @type {!NodeList<!HTMLElement>} */(
+          document.querySelectorAll('body > .overlay'));
       for (var i = 0; i < containers.length; i++) {
         var overlay = containers[i];
         cr.ui.overlay.setupOverlay(overlay);
diff --git a/chromium/ui/webui/resources/js/cr/ui/position_util.js b/chromium/ui/webui/resources/js/cr/ui/position_util.js
index 14b29d92d97..c0c483b9196 100644
--- a/chromium/ui/webui/resources/js/cr/ui/position_util.js
+++ b/chromium/ui/webui/resources/js/cr/ui/position_util.js
@@ -226,8 +226,9 @@ cr.define('cr.ui', function() {
    * @param {number} x The client x position.
    * @param {number} y The client y position.
    * @param {!HTMLElement} popupElement The popup element we are positioning.
+   * @param {cr.ui.AnchorType=} opt_anchorType The type of anchoring we want.
    */
-  function positionPopupAtPoint(x, y, popupElement) {
+  function positionPopupAtPoint(x, y, popupElement, opt_anchorType) {
     var rect = {
       left: x,
       top: y,
@@ -236,7 +237,9 @@ cr.define('cr.ui', function() {
       right: x,
       bottom: y
     };
-    positionPopupAroundRect(rect, popupElement, AnchorType.BELOW);
+
+    var anchorType = opt_anchorType || AnchorType.BELOW;
+    positionPopupAroundRect(rect, popupElement, anchorType);
   }
 
   // Export
diff --git a/chromium/ui/webui/resources/js/cr/ui/splitter.js b/chromium/ui/webui/resources/js/cr/ui/splitter.js
index 2c1799e4f22..c457e421e9e 100644
--- a/chromium/ui/webui/resources/js/cr/ui/splitter.js
+++ b/chromium/ui/webui/resources/js/cr/ui/splitter.js
@@ -71,6 +71,15 @@ cr.define('cr.ui', function() {
                             true);
       this.addEventListener('touchstart', this.handleTouchStart_.bind(this),
                             true);
+      this.resizeNextElement_ = false;
+    },
+
+    /**
+     * @param {boolean} resizeNext True if resize the next element.
+     *     By default, splitter resizes previous (left) element.
+     */
+    set resizeNextElement(resizeNext) {
+      this.resizeNextElement_ = resizeNext;
     },
 
     /**
@@ -129,12 +138,33 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * @return {Element}
+     * @private
+     */
+    getResizeTarget_: function() {
+      return this.resizeNextElement_ ? this.nextElementSibling :
+                                       this.previousElementSibling;
+    },
+
+    /**
+     * Calculate width to resize target element.
+     * @param {number} deltaX horizontal drag amount
+     * @return {number}
+     * @private
+     */
+    calcDeltaX_: function(deltaX) {
+      return this.resizeNextElement_ ? -deltaX : deltaX;
+    },
+
+    /**
      * Handles the mousedown event which starts the dragging of the splitter.
      * @param {!Event} e The mouse event.
      * @private
      */
     handleMouseDown_: function(e) {
       e = /** @type {!MouseEvent} */(e);
+      if (e.button)
+        return;
       this.startDrag(e.clientX, false);
       // Default action is to start selection and to move focus.
       e.preventDefault();
@@ -203,10 +233,10 @@ cr.define('cr.ui', function() {
     handleSplitterDragStart: function() {
       // Use the computed width style as the base so that we can ignore what
       // box sizing the element has.
-      var leftComponent = this.previousElementSibling;
-      var doc = leftComponent.ownerDocument;
+      var targetElement = this.getResizeTarget_();
+      var doc = targetElement.ownerDocument;
       this.startWidth_ = parseFloat(
-          doc.defaultView.getComputedStyle(leftComponent).width);
+          doc.defaultView.getComputedStyle(targetElement).width);
     },
 
     /**
@@ -215,8 +245,9 @@ cr.define('cr.ui', function() {
      * @protected
      */
     handleSplitterDragMove: function(deltaX) {
-      var leftComponent = this.previousElementSibling;
-      leftComponent.style.width = this.startWidth_ + deltaX + 'px';
+      var targetElement = this.getResizeTarget_();
+      var newWidth = this.startWidth_ + this.calcDeltaX_(deltaX);
+      targetElement.style.width = newWidth + 'px';
     },
 
     /**
@@ -226,10 +257,10 @@ cr.define('cr.ui', function() {
      */
     handleSplitterDragEnd: function() {
       // Check if the size changed.
-      var leftComponent = this.previousElementSibling;
-      var doc = leftComponent.ownerDocument;
+      var targetElement = this.getResizeTarget_();
+      var doc = targetElement.ownerDocument;
       var computedWidth = parseFloat(
-          doc.defaultView.getComputedStyle(leftComponent).width);
+          doc.defaultView.getComputedStyle(targetElement).width);
       if (this.startWidth_ != computedWidth)
         cr.dispatchSimpleEvent(this, 'resize');
     },
diff --git a/chromium/ui/webui/resources/js/event_tracker.js b/chromium/ui/webui/resources/js/event_tracker.js
index f2ec3e207c7..126c6f5b247 100644
--- a/chromium/ui/webui/resources/js/event_tracker.js
+++ b/chromium/ui/webui/resources/js/event_tracker.js
@@ -17,7 +17,7 @@
  * is fixed.
  * @typedef {{target: !EventTarget,
  *            eventType: string,
- *            listener: Function,
+ *            listener: (EventListener|Function),
  *            capture: boolean}}
  */
 var EventTrackerEntry;
diff --git a/chromium/ui/webui/resources/js/i18n_behavior.js b/chromium/ui/webui/resources/js/i18n_behavior.js
index 98cf154ac32..64dd57c4253 100644
--- a/chromium/ui/webui/resources/js/i18n_behavior.js
+++ b/chromium/ui/webui/resources/js/i18n_behavior.js
@@ -11,18 +11,17 @@
  *   behaviors: [
  *     I18nBehavior,
  *   ],
- *
- * @group Chrome UI Behavior
  */
 
 /** @polymerBehavior */
 var I18nBehavior = {
   /**
    * @param {string} id The ID of the string to translate.
-   * @param {...string} var_args Placeholders required by the string ($1-9).
+   * @param {...string} var_args Placeholders required by the string ($0-9).
    * @return {string} A translated, substituted string.
    */
   i18n: function(id, var_args) {
-    return loadTimeData.getStringF.apply(loadTimeData, arguments);
+    return arguments.length == 1 ? loadTimeData.getString(id) :
+        loadTimeData.getStringF.apply(loadTimeData, arguments);
   },
 };
diff --git a/chromium/ui/webui/resources/js/promise_resolver.js b/chromium/ui/webui/resources/js/promise_resolver.js
new file mode 100644
index 00000000000..0759c955584
--- /dev/null
+++ b/chromium/ui/webui/resources/js/promise_resolver.js
@@ -0,0 +1,35 @@
+// 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 PromiseResolver is a helper class that allows creating a
+ * Promise that will be fulfilled (resolved or rejected) some time later.
+ *
+ * Example:
+ *  var resolver = new PromiseResolver();
+ *  resolver.promise.then(function(result) {
+ *    console.log('resolved with', result);
+ *  });
+ *  ...
+ *  ...
+ *  resolver.resolve({hello: 'world'});
+ */
+
+/**
+ * @constructor @struct
+ * @template T
+ */
+function PromiseResolver() {
+  /** @type {function(T): void} */
+  this.resolve;
+
+  /** @type {function(*=): void} */
+  this.reject;
+
+  /** @type {!Promise<T>} */
+  this.promise = new Promise(function(resolve, reject) {
+    this.resolve = resolve;
+    this.reject = reject;
+  }.bind(this));
+}
diff --git a/chromium/ui/webui/resources/js/util.js b/chromium/ui/webui/resources/js/util.js
index 3907c5215aa..82a4e50328d 100644
--- a/chromium/ui/webui/resources/js/util.js
+++ b/chromium/ui/webui/resources/js/util.js
@@ -5,12 +5,25 @@
 // <include src="assert.js">
 
 /**
- * Alias for document.getElementById.
+ * Alias for document.getElementById. Found elements must be HTMLElements.
  * @param {string} id The ID of the element to find.
  * @return {HTMLElement} The found element or null if not found.
  */
 function $(id) {
-  return document.getElementById(id);
+  var el = document.getElementById(id);
+  return el ? assertInstanceof(el, HTMLElement) : null;
+}
+
+// TODO(devlin): This should return SVGElement, but closure compiler is missing
+// those externs.
+/**
+ * Alias for document.getElementById. Found elements must be SVGElements.
+ * @param {string} id The ID of the element to find.
+ * @return {Element} The found element or null if not found.
+ */
+function getSVGElement(id) {
+  var el = document.getElementById(id);
+  return el ? assertInstanceof(el, Element) : null;
 }
 
 /**
@@ -33,25 +46,6 @@ function announceAccessibleMessage(msg) {
 }
 
 /**
- * Calls chrome.send with a callback and restores the original afterwards.
- * @param {string} name The name of the message to send.
- * @param {!Array} params The parameters to send.
- * @param {string} callbackName The name of the function that the backend calls.
- * @param {!Function} callback The function to call.
- */
-function chromeSend(name, params, callbackName, callback) {
-  var old = global[callbackName];
-  global[callbackName] = function() {
-    // restore
-    global[callbackName] = old;
-
-    var args = Array.prototype.slice.call(arguments);
-    return callback.apply(global, args);
-  };
-  chrome.send(name, params);
-}
-
-/**
  * Returns the scale factors supported by this platform for webui
  * resources.
  * @return {Array} The supported scale factors.
@@ -380,10 +374,19 @@ function createElementWithClassName(type, className) {
  * or when no paint happens during the animation). This function sets up
  * a timer and emulate the event if it is not fired when the timer expires.
  * @param {!HTMLElement} el The element to watch for webkitTransitionEnd.
- * @param {number} timeOut The maximum wait time in milliseconds for the
- *     webkitTransitionEnd to happen.
+ * @param {number=} opt_timeOut The maximum wait time in milliseconds for the
+ *     webkitTransitionEnd to happen. If not specified, it is fetched from |el|
+ *     using the transitionDuration style value.
  */
-function ensureTransitionEndEvent(el, timeOut) {
+function ensureTransitionEndEvent(el, opt_timeOut) {
+  if (opt_timeOut === undefined) {
+    var style = getComputedStyle(el);
+    opt_timeOut = parseFloat(style.transitionDuration) * 1000;
+
+    // Give an additional 50ms buffer for the animation to complete.
+    opt_timeOut += 50;
+  }
+
   var fired = false;
   el.addEventListener('webkitTransitionEnd', function f(e) {
     el.removeEventListener('webkitTransitionEnd', f);
@@ -392,7 +395,7 @@ function ensureTransitionEndEvent(el, timeOut) {
   window.setTimeout(function() {
     if (!fired)
       cr.dispatchSimpleEvent(el, 'webkitTransitionEnd', true);
-  }, timeOut);
+  }, opt_timeOut);
 }
 
 /**
@@ -462,3 +465,12 @@ function elide(original, maxLength) {
     return original;
   return original.substring(0, maxLength - 1) + '\u2026';
 }
+
+/**
+ * Quote a string so it can be used in a regular expression.
+ * @param {string} str The source string.
+ * @return {string} The escaped string.
+ */
+function quoteString(str) {
+  return str.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
+}
diff --git a/chromium/ui/webui/resources/js/web_ui_listener_behavior.js b/chromium/ui/webui/resources/js/web_ui_listener_behavior.js
new file mode 100644
index 00000000000..d7fc56b5fff
--- /dev/null
+++ b/chromium/ui/webui/resources/js/web_ui_listener_behavior.js
@@ -0,0 +1,43 @@
+// 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 Behavior to be used by Polymer elements that want to
+ * automatically remove WebUI listeners when detached.
+ */
+
+/** @polymerBehavior */
+var WebUIListenerBehavior = {
+  properties: {
+    /**
+     * Holds WebUI listeners that need to be removed when this element is
+     * destroyed.
+     * @private {!Array<!WebUIListener>}
+     */
+    webUIListeners_: {
+      type: Array,
+      value: function() { return []; },
+    },
+  },
+
+  /**
+   * Adds a WebUI listener and registers it for automatic removal when this
+   * element is detached.
+   * Note: Do not use this method if you intend to remove this listener
+   * manually (use cr.addWebUIListener directly instead).
+   *
+   * @param {string} eventName The event to listen to.
+   * @param {!Function} callback The callback run when the event is fired.
+   */
+  addWebUIListener: function(eventName, callback) {
+    this.webUIListeners_.push(cr.addWebUIListener(eventName, callback));
+  },
+
+  /** @override */
+  detached: function() {
+    while (this.webUIListeners_.length > 0) {
+      cr.removeWebUIListener(this.webUIListeners_.pop());
+    }
+  },
+};
diff --git a/chromium/ui/webui/resources/polymer_resources.grdp b/chromium/ui/webui/resources/polymer_resources.grdp
index 59fd3245d66..562f6b0c1ca 100644
--- a/chromium/ui/webui/resources/polymer_resources.grdp
+++ b/chromium/ui/webui/resources/polymer_resources.grdp
@@ -80,9 +80,15 @@
   <structure name="IDR_POLYMER_1_0_IRON_FLEX_LAYOUT_CLASSES_IRON_FLEX_LAYOUT_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-flex-layout/classes/iron-flex-layout.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_IRON_FLEX_LAYOUT_CLASSES_IRON_FLEX_LAYOUT_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/iron-flex-layout/classes/iron-flex-layout-extracted.js"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_IRON_FLEX_LAYOUT_CLASSES_IRON_SHADOW_FLEX_LAYOUT_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-flex-layout/classes/iron-shadow-flex-layout.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_IRON_FLEX_LAYOUT_CLASSES_IRON_SHADOW_FLEX_LAYOUT_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/iron-flex-layout/classes/iron-shadow-flex-layout-extracted.js"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_IRON_FLEX_LAYOUT_IRON_FLEX_LAYOUT_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-flex-layout/iron-flex-layout.html"
              type="chrome_html" />
@@ -131,6 +137,12 @@
   <structure name="IDR_POLYMER_1_0_IRON_ICONSET_SVG_IRON_ICONSET_SVG_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-iconset-svg/iron-iconset-svg.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_IRON_IMAGE_IRON_IMAGE_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/iron-image/iron-image-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_IRON_IMAGE_IRON_IMAGE_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/iron-image/iron-image.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_IRON_INPUT_IRON_INPUT_EXTRACTED_JS"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-input/iron-input-extracted.js"
              type="chrome_html" />
@@ -203,6 +215,12 @@
   <structure name="IDR_POLYMER_1_0_IRON_RESIZABLE_BEHAVIOR_IRON_RESIZABLE_BEHAVIOR_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-resizable-behavior/iron-resizable-behavior.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_IRON_SCROLL_TARGET_BEHAVIOR_IRON_SCROLL_TARGET_BEHAVIOR_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/iron-scroll-target-behavior/iron-scroll-target-behavior-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_IRON_SCROLL_TARGET_BEHAVIOR_IRON_SCROLL_TARGET_BEHAVIOR_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/iron-scroll-target-behavior/iron-scroll-target-behavior.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_IRON_SELECTOR_IRON_MULTI_SELECTABLE_EXTRACTED_JS"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-selector/iron-multi-selectable-extracted.js"
              type="chrome_html" />
@@ -227,9 +245,6 @@
   <structure name="IDR_POLYMER_1_0_IRON_SELECTOR_IRON_SELECTOR_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-selector/iron-selector.html"
              type="chrome_html" />
-  <structure name="IDR_POLYMER_1_0_IRON_TEST_HELPERS_IRON_TEST_HELPERS_EXTRACTED_JS"
-             file="../../../third_party/polymer/v1_0/components-chromium/iron-test-helpers/iron-test-helpers-extracted.js"
-             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_IRON_TEST_HELPERS_IRON_TEST_HELPERS_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/iron-test-helpers/iron-test-helpers.html"
              type="chrome_html" />
@@ -281,6 +296,12 @@
   <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_DOWN_ANIMATION_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-down-animation.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_FROM_BOTTOM_ANIMATION_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-from-bottom-animation-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_FROM_BOTTOM_ANIMATION_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-from-bottom-animation.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_FROM_LEFT_ANIMATION_EXTRACTED_JS"
              file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-from-left-animation-extracted.js"
              type="chrome_html" />
@@ -293,6 +314,12 @@
   <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_FROM_RIGHT_ANIMATION_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-from-right-animation.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_FROM_TOP_ANIMATION_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-from-top-animation-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_FROM_TOP_ANIMATION_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-from-top-animation.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_NEON_ANIMATION_ANIMATIONS_SLIDE_LEFT_ANIMATION_EXTRACTED_JS"
              file="../../../third_party/polymer/v1_0/components-chromium/neon-animation/animations/slide-left-animation-extracted.js"
              type="chrome_html" />
@@ -515,6 +542,12 @@
   <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_PAPER_LISTBOX_PAPER_LISTBOX_EXTRACTED_JS"
+             file="../../../third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_1_0_PAPER_LISTBOX_PAPER_LISTBOX_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_1_0_PAPER_MATERIAL_PAPER_MATERIAL_EXTRACTED_JS"
              file="../../../third_party/polymer/v1_0/components-chromium/paper-material/paper-material-extracted.js"
              type="chrome_html" />
diff --git a/chromium/ui/webui/resources/webui_resources.grd b/chromium/ui/webui/resources/webui_resources.grd
index df687b739aa..aadc894027f 100644
--- a/chromium/ui/webui/resources/webui_resources.grd
+++ b/chromium/ui/webui/resources/webui_resources.grd
@@ -260,6 +260,8 @@ without changes to the corresponding grd file. -->
                  file="html/action_link.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_ASSERT"
                  file="html/assert.html" type="chrome_html" />
+      <structure name="IDR_WEBUI_HTML_PROMISE_RESOLVER"
+                 file="html/promise_resolver.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_CR"
                  file="html/cr.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_CR_EVENT_TARGET"
@@ -301,17 +303,21 @@ without changes to the corresponding grd file. -->
                  file="html/i18n_template.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_LOAD_TIME_DATA"
                  file="html/load_time_data.html" type="chrome_html" />
-      <structure name="IDR_WEBUI_HTML_POLYMER_CONFIG"
-                 file="html/polymer_config.html" type="chrome_html" />
+      <structure name="IDR_WEBUI_HTML_POLYMER"
+                 file="html/polymer.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_I18N_BEHAVIOR"
                  file="html/i18n_behavior.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_UTIL"
                  file="html/util.html" type="chrome_html" />
+      <structure name="IDR_WEBUI_HTML_WEBUI_LISTENER_BEHAVIOR"
+                 file="html/web_ui_listener_behavior.html" type="chrome_html" />
 
       <structure name="IDR_WEBUI_JS_ACTION_LINK"
                  file="js/action_link.js" type="chrome_html" />
       <structure name="IDR_WEBUI_JS_ASSERT"
                  file="js/assert.js" type="chrome_html" />
+      <structure name="IDR_WEBUI_JS_PROMISE_RESOLVER"
+                 file="js/promise_resolver.js" type="chrome_html" />
       <structure name="IDR_WEBUI_JS_CR"
                  file="js/cr.js" type="chrome_html" />
       <structure name="IDR_WEBUI_JS_CR_EVENT_TARGET"
@@ -434,6 +440,8 @@ without changes to the corresponding grd file. -->
                  file="js/i18n_behavior.js" type="chrome_html" />
       <structure name="IDR_WEBUI_JS_UTIL"
                  file="js/util.js" type="chrome_html" flattenhtml="true" />
+      <structure name="IDR_WEBUI_JS_WEBUI_LISTENER_BEHAVIOR"
+                 file="js/web_ui_listener_behavior.js" type="chrome_html" />
       <structure name="IDR_WEBUI_JS_WEBUI_RESOURCE_TEST"
                  file="js/webui_resource_test.js" type="chrome_html" />
       <if expr="chromeos">
@@ -448,7 +456,9 @@ without changes to the corresponding grd file. -->
                    type="chrome_html" />
       </if>
       <part file="cr_elements_resources.grdp" />
-      <part file="polymer_resources.grdp" />
+      <if expr="not is_android">
+        <part file="polymer_resources.grdp" />
+      </if>
     </structures>
   </release>
 </grit>
author	Allan Sandfeld Jensen <allan.jensen@theqtcompany.com>	2016-05-09 14:22:11 +0200
committer	Allan Sandfeld Jensen <allan.jensen@qt.io>	2016-05-09 15:11:45 +0000
commit	2ddb2d3e14eef3de7dbd0cef553d669b9ac2361c (patch)
tree	e75f511546c5fd1a173e87c1f9fb11d7ac8d1af3 /chromium/ui/webui
parent	a4f3d46271c57e8155ba912df46a05559d14726e (diff)
download	qtwebengine-chromium-2ddb2d3e14eef3de7dbd0cef553d669b9ac2361c.tar.gz