WebUI Dark Mode: rework link and error colors on Extensions page

Pretty much everything should use --cr-link-color, which magically
changes based on light/dark mode.

There was also just a ton of duplicated a[href] rules, which I
instead added to shared_style.html (and verified each place I
deleted from used include="shared-style").

Screenshots: https://imgur.com/a/kaT6MJc

R=dpapad@chromium.org
BUG=883049

Change-Id: I00440e1bcfaae21b31763f51d65385729ba7fab9
Reviewed-on: https://chromium-review.googlesource.com/c/1429379
Commit-Queue: Dan Beam (slow until 1/29) <dbeam@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Auto-Submit: Dan Beam (slow until 1/29) <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625386}

chrome/browser/resources/md_extensions/detail_view.html

@@ -24,6 +24,7 @@
 <link rel="import" href="navigation_helper.html">
 <link rel="import" href="runtime_host_permissions.html">
 <link rel="import" href="shared_style.html">
+<link rel="import" href="shared_vars.html">
 <link rel="import" href="strings.html">
 <link rel="import" href="toggle_row.html">
 
@@ -31,7 +32,7 @@
   <template>
     <style include="iron-flex cr-shared-style cr-icons action-link paper-button-style shared-style">
       :host {
-        --iron-icon-fill-color: var(--google-grey-refresh-700);
+        --iron-icon-fill-color: var(--cr-secondary-text-color);
         display: block;
         height: 100%;
       }
@@ -53,6 +54,10 @@
         color: var(--google-blue-500);
       }
 
+      :host-context([dark]) #enable-section .enabled-text {
+        color: var(--google-blue-refresh-300);
+      }
+
       #icon {
         height: 24px;
         margin-inline-end: 12px;
@@ -65,11 +70,6 @@
         @apply --cr-title-text;
       }
 
-      #learn-more-link {
-        color: var(--google-blue-700);
-        text-decoration: none;
-      }
-
       .section {
         @apply --cr-section;
       }
@@ -102,27 +102,26 @@
       }
 
       .inspectable-view {
-        color: var(--google-blue-700);
         height: 20px;
         width: auto;  /* override the default button size of 24x24 */
       }
 
-      .warning .action-button {
+      :host-context(html:not([dark])) .warning .action-button {
         background: white;
         color: var(--google-blue-500);
       }
 
-      #reload-button {
+      :host-context(html:not([dark])) #reload-button {
         color: var(--google-blue-500);
       }
 
       .warning span {
-        color: var(--google-red-700);
+        color: var(--error-color);
         flex: 1;
       }
 
       .warning-icon {
-        --iron-icon-fill-color: var(--google-red-700);
+        --iron-icon-fill-color: var(--error-color);
         flex-shrink: 0;
         height: 18px;
         margin-inline-end: 8px;
@@ -180,7 +179,7 @@
           <span id="name">[[data.name]]</span>
         </div>
         <div class="section continuation control-line" id="enable-section">
-          <span class$="{{computeEnabledStyle_(data.state)}}">
+          <span class$="[[computeEnabledStyle_(data.state)]]">
             [[computeEnabledText_(data.state, '$i18nPolymer{itemOn}',
                 '$i18nPolymer{itemOff}')]]
           </span>
@@ -222,8 +221,7 @@
             <iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
             <span>
               $i18n{itemSuspiciousInstall}
-              <a target="_blank" id="learn-more-link"
-                  href="$i18n{suspiciousInstallHelpUrl}">
+              <a target="_blank" href="$i18n{suspiciousInstallHelpUrl}">
                 $i18n{learnMore}
               </a>
             </span>

chrome/browser/resources/md_extensions/error_page.html

@@ -34,11 +34,12 @@
       }
 
       iron-icon[icon='cr:warning'] {
+        /* TODO(dbeam): find dark mode equivalent for this orange. */
         --iron-icon-fill-color: var(--paper-orange-500);
       }
 
       iron-icon[icon='cr:error'] {
-        --iron-icon-fill-color: var(--paper-red-700);
+        --iron-icon-fill-color: var(--error-color);
       }
 
       .section {

chrome/browser/resources/md_extensions/host_permissions_toggle_list.html

@@ -20,11 +20,6 @@
         margin-top: 12px;
       }
 
-      a[href] {
-        color: var(--google-blue-700);
-        text-decoration: none;
-      }
-
       extensions-toggle-row {
         color: black;
       }

chrome/browser/resources/md_extensions/item.html

@@ -14,6 +14,8 @@
 <link rel="import" href="icons.html">
 <link rel="import" href="item_behavior.html">
 <link rel="import" href="item_util.html">
+<link rel="import" href="shared_style.html">
+<link rel="import" href="shared_vars.html">
 <link rel="import" href="strings.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/iron-icon/iron-icon.html">
@@ -23,8 +25,7 @@
 
 <dom-module id="extensions-item">
   <template>
-    <style include=
-        "iron-flex cr-hidden-style cr-icons action-link paper-button-style">
+    <style include="iron-flex cr-hidden-style cr-icons action-link paper-button-style shared-style">
       .bounded-text,
       .multiline-clippable-text,
       .clippable-flex-text {
@@ -102,13 +103,13 @@
       }
 
       #warnings {
-        color: var(--google-red-700);
+        color: var(--error-color);
         flex: 1;
         margin-bottom: 8px;
       }
 
       #error-icon {
-        --iron-icon-fill-color: var(--google-red-700);
+        --iron-icon-fill-color: var(--error-color);
         height: 18px;
         margin-inline-end: 4px;
         width: 18px;
@@ -148,11 +149,6 @@
         margin-inline-start: 8px;
       }
 
-      #learn-more-link {
-        color: var(--google-blue-700);
-        text-decoration: none;
-      }
-
       #source-indicator {
         margin-inline-start: 24px;
         margin-top: 24px;
@@ -184,12 +180,8 @@
         };
       }
 
-      .action-button {
-        color: var(--google-blue-500);
-      }
-
       #errors-button {
-        color: var(--google-red-700);
+        color: var(--error-color);
       }
 
       #dev-reload-button-container {
@@ -270,8 +262,7 @@
               <span id="suspicious-warning" aria-describedby="a11yAssociation"
                   hidden$="[[!data.disableReasons.suspiciousInstall]]">
                 $i18n{itemSuspiciousInstall}
-                <a target="_blank" id="learn-more-link"
-                    href="$i18n{suspiciousInstallHelpUrl}">
+                <a target="_blank" href="$i18n{suspiciousInstallHelpUrl}">
                   $i18n{learnMore}
                 </a>
               </span>

chrome/browser/resources/md_extensions/runtime_host_permissions.html

@@ -63,11 +63,6 @@
       cr-radio-button.multi-row {
         align-items: normal;
       }
-
-      a[href] {
-        color: var(--google-blue-700);
-        text-decoration: none;
-      }
     </style>
     <div id="permissions-mode">
       <div id="section-heading">

chrome/browser/resources/md_extensions/shared_style.html

@@ -4,6 +4,11 @@
 <dom-module id="shared-style">
   <template>
     <style include="cr-shared-style">
+      a[href] {
+        color: var(--cr-link-color);
+        text-decoration: none;
+      }
+
       .page-container {
         height: 100%;
         overflow: overlay;

chrome/browser/resources/md_extensions/shared_vars.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
 <custom-style>
 <style is="custom-style">
   html {
+    /* Note: error-color is used for many warnings. There's also an orange-y
+     * warning color in 1 place. */
+    --error-color: var(--google-red-700);
     --separator-gap: 9px;
   }
+
+  html[dark] {
+    --error-color: var(--google-red-refresh-300);
+  }
 </style>
 </custom-style>

chrome/browser/resources/md_extensions/sidebar.html

@@ -11,7 +11,6 @@
   <template>
     <style include="cr-icons">
       :host {
-        --selected-color: var(--google-blue-700);
         --sidebar-inactive-color: #5a5a5a;
         color: var(--sidebar-inactive-color);
         display: flex;
@@ -24,12 +23,11 @@
       }
 
       :host-context([dark]) {
-        --selected-color: var(--google-blue-refresh-300);
         --sidebar-inactive-color: var(--cr-primary-text-color);
       }
 
       iron-selector .iron-selected {
-        color: var(--selected-color);
+        color: var(--cr-link-color);
       }
 
       #sectionMenu {