ChromeOS OOBE: switch from iron-dropdown to <select>.

To fix several issues with polymer dropdown menu by switching to native select. BUG=604119,663267 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation Review-Url: https://codereview.chromium.org/2502773003 Cr-Commit-Position: refs/heads/master@{#433137}
nwjs · Nov 18, 2016 · 076cf8a · 076cf8a
1 parent c5afa23
commit 076cf8a
Show file tree

Hide file tree

Showing 20 changed files with 58 additions and 138 deletions.
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css
@@ -3,36 +3,11 @@
  * found in the LICENSE file. */
 
 :host {
-  --paper-font-subhead: {
-    @apply(--paper-font-common-base);
-    font-family: Roboto;
-    font-size: 13px;
-  };
+  font-family: Roboto, sans-serif;
+  font-size: 13px;
+  width: 240px;
 }
 
-.selected-icon {
-  --iron-icon-height: 16px;
-  --iron-icon-width: 16px;
-  -webkit-padding-start: 8px;
-  color: var(--google-blue-500);
-}
-
-paper-item {
-  -webkit-padding-end: 8px;
-  -webkit-padding-start: 16px;
-  min-height: 32px;
-}
-
-paper-item[hr] {
-  min-height: 10px;
-}
-
-.option-name {
-  color: rgba(0, 0, 0, 0.87);
-  font: 13px Roboto, sans-serif;
-}
-
-.hr {
-  border-top: 1px solid rgba(0, 0, 0, 0.14);
-  width: 100%;
+#container {
+  height: 100%;
 }
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
@@ -1,50 +1,15 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.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-iconset-svg/iron-iconset-svg.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-
-<iron-iconset-svg name="oobe-i18n-dropdown" size="24">
-  <svg>
-    <defs>
-      <!--
-      These icons are copied from Polymer's iron-icons and kept in sorted order.
-      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-      -->
-      <g id="check">
-        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z">
-        </path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
 
 <dom-module id="oobe-i18n-dropdown">
   <template>
     <link rel="stylesheet" href="oobe_i18n_dropdown.css">
-    <paper-dropdown-menu no-label-float>
-      <paper-listbox id="listboxDropdown" class="dropdown-content"
-          on-iron-select="onSelect_"
-          on-iron-deselect="onDeselect_">
-        <template is="dom-repeat" id="domRepeat" items="[[items]]">
-          <paper-item item="[[item]]" disabled="[[item.optionGroupName]]"
-              hr$="[[item.optionGroupName]]">
-            <div class="option-entry flex horizontal layout justified"
-                hidden="[[item.optionGroupName]]">
-              <div class="option-name">
-                [[item.title]]
-              </div>
-              <iron-icon icon="oobe-i18n-dropdown:check" class="selected-icon"
-                  hidden="[[!item.selected]]">
-              </iron-icon>
-            </div>
-            <div class="hr" hidden="[[!item.optionGroupName]]"></div>
-          </paper-item>
-        </template>
-      </paper-listbox>
-    </paper-dropdown-menu>
+    <style include="md-select"></style>
+    <div id="container"
+        class="flex vertical layout center center-justified md-select-wrapper">
+      <select id="select" class="md-select" ></select>
+      <span class="md-select-underline"></span>
+    </div>
   </template>
 </dom-module>
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js
@@ -37,61 +37,28 @@ Polymer({
   },
 
   /**
-   * This flag prevents recursive calls of observers and callbacks.
+   * Mapping from item id to item.
+   * @type {!Map<string,I18nMenuItem>}
    */
-  observersDisabled_: false,
+  idToItem_: null,
 
   /**
-   * @param {!{detail: !{item: { item: {!I18nMenuItem}}}}} event
+   * @param {string} value Option value.
    * @private
    */
-  onSelect_: function(event) {
-    if (this.observersDisabled_)
-      return;
-
-    var selectedModel = this.$.domRepeat.modelForElement(event.detail.item);
-    if (!selectedModel.item)
-      return;
-
-    selectedModel.set('item.selected', true);
-    this.fire('select-item', selectedModel.item);
-  },
-
-  onDeselect_: function(event) {
-    if (this.observersDisabled_)
-      return;
-
-    var deSelectedModel = this.$.domRepeat.modelForElement(event.detail.item);
-    if (!deSelectedModel.item)
-      return;
-
-    deSelectedModel.set('item.selected', false);
+  onSelected_: function(value) {
+    this.fire('select-item', this.idToItem_.get(value));
   },
 
   onItemsChanged_: function(items) {
-    if (this.observersDisabled_)
-      return;
-
-    if (!items)
-      return;
-
-    this.observersDisabled_ = true;
-
-    var index = items.findIndex(function(item) { return item.selected; });
-    if (index != -1) {
-      // This is needed for selectIndex() to pick up values from updated
-      // this.items (for example, translated into other language).
-      Polymer.dom.flush();
-
-      if (this.$.listboxDropdown.selected == index) {
-        // This is to force update real <input> element value even if selection
-        // index has not changed.
-        this.$.listboxDropdown.selectIndex(null);
-      }
-      this.$.listboxDropdown.selectIndex(index);
+    this.idToItem_ = new Map();
+    for (var i = 0; i < items.length; ++i) {
+      var item = items[i];
+      this.idToItem_.set(item.value, item);
     }
-
-    this.observersDisabled_ = false;
+    Oobe.setupSelect(this.$.select,
+                       items,
+                       this.onSelected_.bind(this));
   },
 });
 })();
diff --git a/chrome/browser/resources/settings/appearance_page/appearance_page.html b/chrome/browser/resources/settings/appearance_page/appearance_page.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/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/neon-animation/neon-animatable.html">
@@ -10,11 +11,11 @@
 <link rel="import" href="/controls/settings_dropdown_menu.html">
 <link rel="import" href="/controls/settings_input.html">
 <link rel="import" href="/controls/settings_radio_group.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 <link rel="import" href="appearance_fonts_page.html">
 
 <dom-module id="settings-appearance-page">

diff --git a/chrome/browser/resources/settings/controls/settings_dropdown_menu.html b/chrome/browser/resources/settings/controls/settings_dropdown_menu.html
@@ -1,9 +1,10 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/controls/pref_control_behavior.html">
 <link rel="import" href="/i18n_setup.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/prefs/pref_util.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-dropdown-menu">
   <template>

diff --git a/chrome/browser/resources/settings/device_page/display.html b/chrome/browser/resources/settings/device_page/display.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/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">
@@ -9,8 +10,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="/device_page/display_layout.html">
 <link rel="import" href="/device_page/display_overscan_dialog.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-display">
   <template>

diff --git a/chrome/browser/resources/settings/internet_page/network_apnlist.html b/chrome/browser/resources/settings/internet_page/network_apnlist.html
@@ -1,7 +1,8 @@
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="/md_select_css.html">
+<link rel="import" href="/settings_vars_css.html">
 <link rel="import" href="internet_shared_css.html">
 <link rel="import" href="network_property_list.html">
 

diff --git a/chrome/browser/resources/settings/internet_page/network_nameservers.html b/chrome/browser/resources/settings/internet_page/network_nameservers.html
@@ -1,7 +1,8 @@
+<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
-<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
-<link rel="import" href="/md_select_css.html">
+<link rel="import" href="/settings_vars_css.html">
 <link rel="import" href="internet_shared_css.html">
 
 <dom-module id="network-nameservers">

diff --git a/chrome/browser/resources/settings/internet_page/network_proxy.html b/chrome/browser/resources/settings/internet_page/network_proxy.html
@@ -4,15 +4,16 @@
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/i18n_setup.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/prefs/prefs_behavior.html">
+<link rel="import" href="/settings_vars_css.html">
 <link rel="import" href="internet_shared_css.html">
 <link rel="import" href="network_proxy_exclusions.html">
 <link rel="import" href="network_proxy_input.html">

diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html b/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html
@@ -1,11 +1,12 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-textarea.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-address-edit-dialog">
   <template>

diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
@@ -1,9 +1,10 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="/md_select_css.html">
+<link rel="import" href="/settings_vars_css.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-credit-card-edit-dialog">

diff --git a/chrome/browser/resources/settings/people_page/import_data_dialog.html b/chrome/browser/resources/settings/people_page/import_data_dialog.html
@@ -1,5 +1,6 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
@@ -9,9 +10,9 @@
 <link rel="import" href="/controls/settings_toggle_button.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/icons.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/people_page/import_data_browser_proxy.html">
 <link rel="import" href="/prefs/prefs_behavior.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-import-data-dialog">
   <template>

diff --git a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
@@ -1,12 +1,13 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="/i18n_setup.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/printing_page/cups_add_printer_dialog_util.html">
 <link rel="import" href="/printing_page/cups_printers_browser_proxy.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="add-printer-discovery-dialog">
   <template>

diff --git a/chrome/browser/resources/settings/search_page/search_page.html b/chrome/browser/resources/settings/search_page/search_page.html
@@ -1,13 +1,14 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/search_engines_page/search_engines_page.html">
 <link rel="import" href="/search_engines_page/search_engines_browser_proxy.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-search-page">
   <template>

diff --git a/chrome/browser/resources/settings/settings_resources.grd b/chrome/browser/resources/settings/settings_resources.grd
@@ -245,10 +245,6 @@
                  file="settings_shared_css.html"
                  type="chrome_html"
                  flattenhtml="true" />
-      <structure name="IDR_SETTINGS_MD_SELECT_CSS_HTML"
-                 file="md_select_css.html"
-                 type="chrome_html"
-                 flattenhtml="true" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_UI_HTML"
                  file="settings_ui/settings_ui.html"
                  type="chrome_html" />

diff --git a/chrome/browser/resources/settings/site_settings/media_picker.html b/chrome/browser/resources/settings/site_settings/media_picker.html
@@ -1,6 +1,7 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="media-picker">
   <template>

diff --git a/chrome/browser/resources/settings/site_settings/site_details_permission.html b/chrome/browser/resources/settings/site_settings/site_details_permission.html
@@ -1,8 +1,9 @@
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_vars_css.html">
 <link rel="import" href="/site_settings/constants.html">
 <link rel="import" href="/site_settings/site_settings_behavior.html">
 <link rel="import" href="/site_settings/site_settings_prefs_browser_proxy.html">

diff --git a/...ser/resources/settings/md_select_css.html → ui/webui/resources/html/md_select_css.html b/...ser/resources/settings/md_select_css.html → ui/webui/resources/html/md_select_css.html
@@ -1,4 +1,5 @@
-<link rel="import" href="/settings_vars_css.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <dom-module id="md-select">
   <template>
@@ -8,7 +9,7 @@
         -webkit-appearance: none;
         /* Ensure that the text does not overlap with the down arrow. */
         -webkit-padding-end: calc(var(--md-arrow-width) * 1.8);
-        background: url(images/arrow_down.svg) 97% center no-repeat;
+        background: url(../images/arrow_down.svg) 97% center no-repeat;
         background-size: var(--md-arrow-width);
         border-bottom: 1px solid var(--paper-grey-300);
         border-left: none;

diff --git a/.../resources/settings/images/arrow_down.svg → ui/webui/resources/images/arrow_down.svg b/.../resources/settings/images/arrow_down.svg → ui/webui/resources/images/arrow_down.svg
diff --git a/ui/webui/resources/webui_resources.grd b/ui/webui/resources/webui_resources.grd
@@ -314,6 +314,9 @@ without changes to the corresponding grd file. -->
                  file="html/icon.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_I18N_TEMPLATE"
                  file="html/i18n_template.html" type="chrome_html" />
+      <structure name="IDR_WEBUI_HTML_MD_SELECT_CSS_HTML"
+                 file="html/md_select_css.html" type="chrome_html"
+                 flattenhtml="true" />
       <structure name="IDR_WEBUI_HTML_LOAD_TIME_DATA"
                  file="html/load_time_data.html" type="chrome_html" />
       <structure name="IDR_WEBUI_HTML_PARSE_HTML_SUBSET"