MD Settings: Fix internet focus and styling

ui/webui/resources/cr_elements/shared_style_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 
 <!-- Common styles for Material Design WebUI. Included directly in
   settings_shared_css.html. -->
 <dom-module id="cr-shared-style">
   <template>
     <style>
       /* Chrome spinners should be blue. */
       paper-spinner {
@@ skipping 23 matching lines @@
 
       .action-button,
       .cancel-button {
         font-weight: 500;
       }
 
       [actionable] {
         @apply(--cr-actionable);
       }
 
+      [actionable] button[is='paper-icon-button-light'].subpage-arrow {
+        background-image: url(../images/arrow_right.svg);
+      }
+
+      [actionable] button[is='paper-icon-button-light'].icon-external {
+        background-image: url(../images/open_in_new.svg);
+      }

[Dan Beam, 2016/12/09 00:11:38]

sorry, but you're propagating this.

this implementation isn't great.

it leaves around buttons that have ripples but no backgrounds.

it's annoying in cases where ONLY the button should be actionable, but you have
to wrap with an extra node or add actionable on an ancestor.

additionally, not all things use the [actionable] attribute, but instead might
@apply(--cr-actionable); or @apply(--settings-actionable); directly.

can we drop the [actionable] part of the selector and figure out a better way to
do this?

[stevenjb, 2016/12/09 00:57:52]

The [actionable] seems unnecessary/unwanted. Dave, is there a reason it was
included in the first place?

[dschuyler, 2016/12/09 01:15:52]

The reason it was initially done is that the issues mentioned above where not
known to me/us and it seemed to be correct. Other than the @apply() vs
[actionable] was known as something that could need and extra attribute, but
wasn't an issue as used.

The bug at 655292 may also be considered - it asks that those buttons not have
ripples at all.

[stevenjb, 2016/12/09 01:29:30]

I think we should address 655292 separately, and eliminate the [actionable] part
of these selectors, since I can't imagine we would ever not want e.g.
button[is='paper-icon-button-light'].subpage-arrow not to have the specified
background. Sound good?

+
       [scrollable] {
         border-color: transparent;
         border-style: solid;
         border-width: 1px 0;
         overflow-y: auto;
       }
       [scrollable].is-scrolled {
         border-top-color: var(--google-grey-300);
       }
       [scrollable].can-scroll:not(.scrolled-to-bottom) {
@@ skipping 16 matching lines @@
       [selectable]:focus,
       [selectable] > :focus {
         @apply(--cr-selectable-focus);
       }
       [selectable] > * {
         @apply(--cr-actionable);
       }
     </style>
   </template>
 </dom-module>