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

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

Index: chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css
index c61bb2a96d84e4797ff21d224c0c6d5f4907d60c..028bc448b81e27c2dc542fbbd50b0ad08702ae1e 100644
--- a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css
+++ b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.css
@@ -3,36 +3,47 @@
  * 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;

[michaelpg, 2016/11/16 01:59:01]

nit: lowercase for generic fonts (sans-serif)

[Alexander Alekseev, 2016/11/16 07:10:59]

Done.

+  font-size: 13px;
+  width: 240px;
 }
 
-.selected-icon {
-  --iron-icon-height: 16px;
-  --iron-icon-width: 16px;
-  -webkit-padding-start: 8px;
-  color: var(--google-blue-500);
+#container {
+  height: 100%;
 }
 
-paper-item {
-  -webkit-padding-end: 8px;
-  -webkit-padding-start: 16px;
-  min-height: 32px;
+option {
+  color: rgba(0, 0, 0, 0.87);
+  font: 13px Roboto, sans-serif;
 }
 
-paper-item[hr] {
-  min-height: 10px;
-}
 
-.option-name {
+select {

[michaelpg, 2016/11/16 01:59:01]

if this is basically the same as md_select_css.html (and it probably should be),
can you use that? Would require moving it int ui/webui/cr_elements.

[Alexander Alekseev, 2016/11/16 07:10:59]

It turns out that this would require a lot of changes.
md_select_css.html carries a link to /settings_vars_css.html which has to be
manually included in all files that referenced original md_select_css.html .

Than, it requires some special initialization, which I did not found. And its
container is different.

So  I tried it, but it didn't work.

Probably we could once create md-select element and use it instead of plain
select with md-select class styling, but it doesn't seem to be easy.

So let's leave this as it is now.

[michaelpg, 2016/11/16 07:23:39]

hrm, no it shouldn't be that complicated. So it should take a lot less code than
adding a copy of it here would. If you need to override some parts of the style
you can still do that here.

On 2016/11/16 07:10:59, Alexander Alekseev wrote:
Actually, AFAICT, md_select_css.html actually uses no external variables aside
from paper-styles/color.html, so you should be able to replace the
"/shared_vars_css.html" import in md_select_css.html with that Polymer
paper-styles/color.html file.

Not sure what "manually" means. Does OOBE inline HTML imports or something?
Other OOBE resources already import paper-styles/color.html, and it should be
de-duped by the browser.
Looks like it just requires being wrapped in <div class="md-select-wrapper> and
having the md-select-underline <span>, which is already the structure you've
copied in oobe_i18n_dropdown.html, e.g.:
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/intern...

[Alexander Alekseev, 2016/11/16 07:40:30]

md_select_css.html includes "/shared_vars_css.html" so "/shared_vars_css.html"
becomes available to all files that include md_select_css.html. This way it
looks like these files also have to be modified if md_select_css.html will not
include that file.

Yes, OOBE mostly inlines HTML. I tried to link (not inline) md_select_css.html
into OOBE, it becomes available, but ".md-select" CSS selector didn't work. Even
though md_select_css.html was loaded.
The problem is that CSS selector ".md-select" doesn't work and style is not
applied.

+  background-color: transparent;
+  border-bottom: 1px solid var(--paper-grey-300);
+  border-left: none;
+  border-right: none;
+  border-top: none;
   color: rgba(0, 0, 0, 0.87);
-  font: 13px Roboto, sans-serif;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  outline: none;
+  padding: 3px 0;
+  width: 100%;
 }
 
-.hr {
-  border-top: 1px solid rgba(0, 0, 0, 0.14);
+.select-underline {
+  border-top: 2px solid var(--paper-indigo-500);
+  display: block;
+  position: relative;
+  top: -1px;
+  transform: scale3d(0, 1, 1);
+  transition: transform 200ms ease-in;
   width: 100%;
 }
+
+select:focus + .select-underline {
+  transform: scale3d(1, 1, 1);
+  transition: transform 200ms ease-out;
+}