MD Settings: change outlinks to actually use <a>

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style include="cr-shared-style">
       /* Included here so we don't have to include "iron-positioning" in every
        * stylesheet. See crbug.com/498405. */
       [hidden] {
@@ skipping 55 matching lines @@
       .tertiary-button {
         --paper-button-flat-keyboard-focus: {
           background: rgba(51, 103, 214, .12);  /* --google-blue-700 */
         };
       }
 
       a[href] {
         text-decoration: none;
       }
 
+      a[href][tabindex='-1'] {

[dschuyler, 2017/04/18 23:22:44]

Please add a comment about why this is here (or what it's used for). It's pretty
clear in the context of this CL, but it would likely look odd to a future reader
(without the context of this CL).

[Dan Beam, 2017/04/20 00:24:34]

this is kindddda ghetto

[scottchen, 2017/04/20 18:41:50]

Done.

[scottchen, 2017/04/20 18:41:50]

I checked code-search and no other anchors seem to have the potential to have
tabindex=-1 currently.

Not sure how else I'd do this unless I add a class called ".unstyled-anchor" or
something. Would that be preferred over this?

[Dan Beam, 2017/04/20 18:49:41]

a.settings-box?

[Dan Beam, 2017/04/20 18:52:54]

ah, so i guess they're not all .setting-box

maybe use no-outline to take care of the outline.  or just make a class for this
kind of links...

tabindex="-1" changing the font color seems pretty bonkers to me

[dschuyler, 2017/04/20 18:58:17]

How about
a[actionable]
Is that a 1:1 with wanting this styling? (It also seems like a decent style
condition; an 'actionable anchor' vs. other anchors).

[Dan Beam, 2017/04/20 21:15:40]

on that note: why do we need [actionable] on a[href] again?  isn't the user
agent style to apply cursor: pointer; for a[href]?

[scottchen, 2017/04/20 21:48:34]

I kept it around because of this: 
https://cs.chromium.org/chromium/src/out/Debug/gen/chrome/browser/resources/m...

But I found out I could also move the "[actionable]" onto the icon-buttons
themselves and they would still show up, so I did that in my new patch.

I also created a new class called "unstyled-link" for these types of <a>s.

+        color: var(--paper-grey-900);

[Dan Beam, 2017/04/20 00:28:35]

is this value being copied from somewhere else?

[scottchen, 2017/04/20 18:41:50]

Body text color's hard-coded in settings_ui -
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/settin...

I pulled it out to a variable in the new patch.

[scottchen, 2017/04/20 18:43:23]

Sorry - I meant I swapped it to use --primary-text-color from
default-theme.html.

+        outline: none;
+      }
+
       /* There are three main button styles, .primary-button, .secondary-button,
        * and .tertiary-button. The primary is the action button (e.g. "edit",
        * "delete") while the secondary is often a "Cancel" button. A tertiary
        * button may be used to get more information or similar, that we expect
        * most users will not need. */
       .primary-button {
         --paper-button: {
           font-weight: 500;
           text-align: start;
         };
@@ skipping 306 matching lines @@
         transform: rotate(-135deg);
       }
 
       .column-header {
         color: var(--paper-grey-600);
         font-weight: 500;
       }
     </style>
   </template>
 </dom-module>