Dark Mode: start fixing up downloads to look like specs

Screenshots: https://imgur.com/a/mcoKkKc
Specs: https://docs.google.com/presentation/d/1kJoBzf_HGYK-_FAJPAjD67TW8224dCPLA6dAhlDmysk/edit#slide=id.g471d243f08_0_874

There's still a bit of work to be done (notably: buttons),
but this gets us closer to Namrata's mocks.

To run locally, use --enable-features=WebUIDarkMode --force-dark-mode

BUG=883049
R=hcarmona@chromium.org

Change-Id: I232adf9b487d8be2042c5123484fdb6f87da13c4
Reviewed-on: https://chromium-review.googlesource.com/c/1377147Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619893}

chrome/browser/resources/md_downloads/item.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://downloads/browser_proxy.html">
+<link rel="import" href="chrome://downloads/constants.html">
+<link rel="import" href="chrome://downloads/i18n_setup.html">
+<link rel="import" href="chrome://downloads/icon_loader.html">
+<link rel="import" href="chrome://downloads/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
@@ -13,11 +18,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-<link rel="import" href="chrome://downloads/browser_proxy.html">
-<link rel="import" href="chrome://downloads/constants.html">
-<link rel="import" href="chrome://downloads/i18n_setup.html">
-<link rel="import" href="chrome://downloads/icon_loader.html">
-<link rel="import" href="chrome://downloads/icons.html">
 
 <dom-module id="downloads-item">
   <template>
@@ -67,6 +67,11 @@
         border: 1px var(--google-grey-300) solid;
       }
 
+      :host-context([dark]) #content:not(.is-active) {
+        background: none;  /* override */
+        border-color: rgba(var(--google-grey-800-rgb), .8);
+      }
+
       #details {
         border-inline-start: 1px #d8d8d8 solid;
         display: flex;
@@ -79,14 +84,26 @@
         padding-top: 16px;
       }
 
+      :host-context([dark]) #details {
+        border-color: rgba(var(--google-grey-800-rgb), .8);
+      }
+
       #content:not(.is-active) #details {
         color: rgba(27, 27, 27, .6);
       }
 
+      :host-context([dark]) #content:not(.is-active) #details {
+        color: rgba(var(--google-grey-500-rgb), .6);
+      }
+
       #content:not(.is-active) #name {
         text-decoration: line-through;
       }
 
+      :host-context([dark]) #content:not(.is-active) #name {
+        color: var(--google-grey-500);
+      }
+
       .icon-wrapper {
         align-self: center;
         flex: none;
@@ -137,7 +154,8 @@
         word-break: break-all;
       }
 
-      .is-active :-webkit-any(#name, #file-link, #show) {
+      :host-context(html:not([dark])) .is-active
+          :-webkit-any(#name, #file-link, #show) {
         color: var(--google-blue-600);
       }
 
@@ -216,6 +234,10 @@
         width: 32px;
       }
 
+      :host-context([dark]) #remove-wrapper > paper-icon-button-light {
+        color: var(--google-grey-500);
+      }
+
       #incognito {
         bottom: 20px;
         content: -webkit-image-set(

chrome/browser/resources/md_downloads/manager.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://downloads/browser_proxy.html">
+<link rel="import" href="chrome://downloads/constants.html">
+<link rel="import" href="chrome://downloads/i18n_setup.html">
+<link rel="import" href="chrome://downloads/item.html">
+<link rel="import" href="chrome://downloads/search_service.html">
+<link rel="import" href="chrome://downloads/toolbar.html">
 <link rel="import" href="chrome://resources/cr_components/managed_footnote/managed_footnote.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
@@ -9,12 +15,6 @@
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
-<link rel="import" href="chrome://downloads/browser_proxy.html">
-<link rel="import" href="chrome://downloads/constants.html">
-<link rel="import" href="chrome://downloads/i18n_setup.html">
-<link rel="import" href="chrome://downloads/item.html">
-<link rel="import" href="chrome://downloads/search_service.html">
-<link rel="import" href="chrome://downloads/toolbar.html">
 
 <dom-module id="downloads-manager">
   <template>
@@ -30,6 +30,10 @@
         @apply --cr-page-host;
       }
 
+      :host-context([dark]) {
+        color: var(--cr-secondary-text-color);
+      }
+
       #toolbar {
         z-index: 1;
       }
@@ -75,6 +79,10 @@
         min-height: min-content;
       }
 
+      :host-context([dark]) #no-downloads {
+        color: var(--cr-secondary-text-color);
+      }
+
       #no-downloads .illustration {
         background: -webkit-image-set(
             url(chrome://downloads/1x/no_downloads.png) 1x,

chrome/browser/resources/md_downloads/toolbar.html

@@ -2,16 +2,17 @@
 
 <link rel="import" href="chrome://downloads/search_service.html">
 <link rel="import" href="chrome://downloads/browser_proxy.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 
 <dom-module id="downloads-toolbar">
   <template>
@@ -28,6 +29,10 @@
         flex: 1;
       }
 
+      :host-context([dark]) #toolbar {
+        color: var(--cr-primary-text-color);
+      }
+
       #moreActionsContainer {
         --iron-icon-height: 20px;
         --iron-icon-width: 20px;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -17,6 +17,7 @@
     --google-grey-refresh-100: #F1F3F4;
     --google-grey-200: #E8EAED;
     --google-grey-400: #BDC1C6;
+    --google-grey-500-rgb: 158, 158, 158;
     --google-grey-600-rgb: 128, 134, 139;
     --google-grey-600: rgb(var(--google-grey-600-rgb));
     /* -refresh differentiates from google-grey-700 in polymer's color.html. */
@@ -58,7 +59,7 @@
     --cr-card-elevation: {
       background-color: rgba(255, 255, 255, .04);
       box-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
-      rgba(0, 0, 0, .15) 0 4px 8px 3px;
+                  rgba(0, 0, 0, .15) 0 4px 8px 3px;
     }
 
     /* TODO(dbeam): form-field-label, {section,title}-text, & toggle colors. */
@@ -66,7 +67,7 @@
     --cr-form-field-label-color: var(--dark-secondary-color);
     --cr-link-color: var(--google-blue-300);
     --cr-menu-background-color: var(--google-grey-900);
-    --cr-menu-background-focus-color: rgba(60, 64, 67, .6);
+    --cr-menu-background-focus-color: rgba(var(--google-grey-800-rgb), .6);
     --cr-menu-background-sheen: rgba(255, 255, 255, .06);  /* Only dark mode. */
     --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                       rgba(0, 0, 0, .15) 0 2px 6px 2px;