[MD settings] layout vertical separators with paper-icon-button-light

ui/webui/resources/cr_elements/network/cr_network_list_item.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
@@ skipping 28 matching lines @@
         color: var(--paper-grey-600);
         font-size: inherit;
         font-weight: 400;
       }
 
       #networkStateText[connected] {
         color: var(--google-green-500);
       }
 
       #subpageDiv {
         -webkit-border-start: var(--cr-separator-line);

[stevenjb, 2017/05/17 22:00:49]

Do you want to go ahead and just remove this while you are looking at this? (For
crbug.com/723150)

[dschuyler, 2017/05/18 00:17:52]

Sure, I'll look at that, but I'd like to do it separately.

-        -webkit-padding-start: 4px;
+        -webkit-padding-start: 20px;

[stevenjb, 2017/05/17 16:39:37]

That is a fair bit of padding. I assume you checked this pretty thoroughly,
including with a chromeos=1 build? (Ignoring the places in Networking where we
shouldn't have a separator at all of course).

[dschuyler, 2017/05/17 21:28:14]

I did a chromeos build if that's what you mean. (target_os = "chromeos" in
args.gn).
This is also only used in this one file. I don't think iron-a11y-keys has UI, so
there's really just the <button> to consider - is that correct?

[stevenjb, 2017/05/17 21:36:04]

Yes, if the list of wifi networks (click on the wifi row in the main page) still
looks correct, and the list of known networks (click on 'known networks' in the
wifi page) both look correct, then this should be fine.

       }
 
       :host-context([dir=rtl]) #subpageDiv > button {
         transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
       }
 
       iron-icon {
         height: 24px;
         width: 24px;
       }
@@ skipping 33 matching lines @@
           <button class="subpage-arrow" is="paper-icon-button-light"
               on-tap="fireShowDetails_" tabindex$="[[tabindex]]"
               aria-label$="[[ariaLabel]]">
           </button>
         </div>
       </template>
     </div>
   </template>
   <script src="cr_network_list_item.js"></script>
 </dom-module>