ChromeOS: Update styles of material design OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
index 0fe181b270d99be09f29fa78fb2e982054be68a4..6aa8aea0b794c31f631097e10d1dccf76bb45700 100644
--- a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
+++ b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
@@ -24,26 +24,24 @@
 
 <dom-module id="oobe-i18n-dropdown">
   <template>
-    <style>
-      .selected-icon {
-        color: var(--google-blue-500);
-      } 
-    </style>
+    <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]]">
-            <div class="flex horizontal layout justified">
-              <div hidden="[[item.optionGroupName]]">
+          <paper-item item="[[item]]" disabled="[[item.optionGroupName]]"
+              hr$="[[item.optionGroupName]]">

[michaelpg, 2016/08/18 19:40:59]

if these are the same, can you just style on [disabled] instead of adding a hr
attribute?

[Alexander Alekseev, 2016/08/19 06:00:06]

The problem is that "disabled" has implied meaning (that matches exactly what it
says ;) ), so that someone who would need to add disabled regular items to the
list, will never know that "disabled" is also used as a flag to display <hr>
entry. So I'd vote for using different properties for different purposes.

+            <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>
-            <hr hidden="[[!item.optionGroupName]]">
+            <div class="hr" hidden="[[!item.optionGroupName]]"></div>
           </paper-item>
         </template>
       </paper-listbox>