MD Settings: Style native <select> down arrow.

BUG=651513
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2384273005
Cr-Commit-Position: refs/heads/master@{#423009}

chrome/browser/resources/settings/controls/settings_dropdown_menu.html

@@ -8,8 +8,9 @@
 <dom-module id="settings-dropdown-menu">
   <template>
     <style include="settings-shared md-select"></style>
-    <div class="select-wrapper">
-      <select id="dropdownMenu" on-change="onChange_" value="[[selected_]]"
+    <div class="md-select-wrapper">
+      <select class="md-select" id="dropdownMenu" on-change="onChange_"
+          value="[[selected_]]"
           disabled="[[shouldDisableMenu_(disabled, menuOptions)]]">
         <template is="dom-repeat" items="[[menuOptions]]">
           <option value="[[item.value]]" data-value$="[[item.value]]">
@@ -21,7 +22,7 @@
           $i18n{custom}
         </option>
       </select>
-      <span class="select-underline"></span>
+      <span class="md-select-underline"></span>
     </div>
   </template>
   <script src="settings_dropdown_menu.js"></script>

chrome/browser/resources/settings/images/arrow_down.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#757575"><g><path d="M 0 0 L 24 0 L 12 12 z"/></g></svg>

chrome/browser/resources/settings/md_select_css.html

@@ -3,8 +3,10 @@
 <dom-module id="md-select">
   <template>
     <style>
-      select {
-        background-color: transparent;
+      .md-select {
+        -webkit-appearance: none;
+        background: url(images/arrow_down.svg) 97% 70% no-repeat;
+        background-size: 0.9em;
         border-bottom: 1px solid var(--paper-grey-300);
         border-left: none;
         border-right: none;
@@ -18,7 +20,11 @@
         width: 200px;
       }
 
-      .select-underline {
+      :host-context([dir=rtl]) .md-select {
+        background-position-x: 3%;
+      }
+
+      .md-select-underline {
         border-top: 2px solid var(--paper-indigo-500);
         display: block;
         position: relative;
@@ -28,12 +34,12 @@
         width: 100%;
       }
 
-      select:focus + .select-underline {
+      .md-select:focus + .md-select-underline {
         transform: scale3d(1, 1, 1);
         transition: transform 200ms ease-out;
       }
 
-      .select-wrapper {
+      .md-select-wrapper {
         display: inline-block;
       }
     </style>

chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html

@@ -20,7 +20,7 @@
         width: calc((var(--paper-input-max-width) - 16px) / 2);
       }
 
-      select.address-column {
+      .md-select.address-column {
         -webkit-margin-end: 0;
         margin-bottom: 0;
       }
@@ -75,9 +75,9 @@
         </template>
         <div id="select-row" class="address-row">
           <div id="select-label">$i18n{addressCountry}</div>
-          <span class="select-wrapper">
-            <select class="address-column long" value="[[countryCode_]]"
-                  on-change="onCountryChange_">
+          <span class="md-select-wrapper">
+            <select class="md-select address-column long"
+                  value="[[countryCode_]]" on-change="onCountryChange_">
               <option value=""></option>
               <template is="dom-repeat" items="[[countries_]]">
                 <option value="[[getCode_(item)]]"
@@ -86,7 +86,7 @@
                 </option>
               </template>
             </select>
-            <span class="select-underline"></span>
+            <span class="md-select-underline"></span>
           </span>
         </div>
         <div class="address-row">

chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html

@@ -12,7 +12,7 @@
       width: var(--paper-input-max-width);
     }
 
-    .select-wrapper + .select-wrapper {
+    .md-select-wrapper + .md-select-wrapper {
       -webkit-margin-start: 16px;
     }
 
@@ -40,23 +40,23 @@
             value="{{creditCard.cardNumber}}" always-float-label>
         </paper-input>
         <label>$i18n{creditCardExpiration}</label>
-        <span class="select-wrapper">
-          <select id="month" value="[[expirationMonth_]]"
+        <span class="md-select-wrapper">
+          <select class="md-select" id="month" value="[[expirationMonth_]]"
               on-change="onMonthChange_">
             <template is="dom-repeat" items="[[monthList_]]">
               <option>[[item]]</option>
             </template>
           </select>
-          <span class="select-underline"></span>
+          <span class="md-select-underline"></span>
         </span>
-        <span class="select-wrapper">
-          <select id="year" value="[[expirationYear_]]"
+        <span class="md-select-wrapper">
+          <select class="md-select" id="year" value="[[expirationYear_]]"
               on-change="onYearChange_">
             <template is="dom-repeat" items="[[yearList_]]">
               <option>[[item]]</option>
             </template>
           </select>
-          <span class="select-underline"></span>
+          <span class="md-select-underline"></span>
         </span>
       </div>
       <div class="button-container">

chrome/browser/resources/settings/search_page/search_page.html

@@ -18,12 +18,12 @@
         <div class="settings-box first">
           <p class="start">$i18n{searchExplanation}</p>
           <div>
-            <select on-change="onChange_">
+            <select class="md-select" on-change="onChange_">
               <template is="dom-repeat" items="[[searchEngines_]]">
                 <option selected$="[[item.default]]">[[item.name]]</option>
               </template>
             </select>
-            <span class="select-underline"></span>
+            <span class="md-select-underline"></span>
           </div>
         </div>
         <div id="subpage-trigger" class="settings-box two-line"

chrome/browser/resources/settings/settings_resources.grd

@@ -235,7 +235,8 @@
                  flattenhtml="true" />
       <structure name="IDR_SETTINGS_MD_SELECT_CSS_HTML"
                  file="md_select_css.html"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 flattenhtml="true" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_UI_HTML"
                  file="settings_ui/settings_ui.html"
                  type="chrome_html" />