MD Downloads: remove most deprecated CSS imports

chrome/browser/resources/md_downloads/item.html

Index: chrome/browser/resources/md_downloads/item.html
diff --git a/chrome/browser/resources/md_downloads/item.html b/chrome/browser/resources/md_downloads/item.html
index 6c44fcc2011892d4802db1cd16b86eacce6639f2..3f0ff3d0115d9f6dc02a18f9e7ab0ae087c97d2a 100644
--- a/chrome/browser/resources/md_downloads/item.html
+++ b/chrome/browser/resources/md_downloads/item.html
@@ -13,6 +13,228 @@
 
 <dom-module id="downloads-item">
   <template>
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      paper-button {
+        font-weight: 500;
+        margin: 0;
+        min-width: auto;
+      }
+
+      #date {
+        color: rgb(104, 113, 116);
+        font-size: 100%;
+        font-weight: 500;
+        margin: 24px auto 10px;
+        width: var(--downloads-card-width);
+      }
+
+      #date:empty {
+        display: none;
+      }
+
+      #content {
+        background: white;
+        border-radius: 2px;
+        display: flex;
+        flex: none;
+        margin: 6px auto;
+        min-height: 103px;
+        position: relative;
+        width: var(--downloads-card-width);
+      }
+
+      #content.is-active {
+        @apply(--shadow-elevation-2dp);

[Dan Beam, 2016/09/27 01:25:22]

I wasn't able to trick rietveld into adding multiple CL deps, but this is proof
I applied Chris' CL to make shadows look the same

+      }
+
+      #content:not(.is-active) {
+        background: rgba(255, 255, 255, .6);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .03),
+                    0 1px 4px 0 rgba(0, 0, 0, .048),
+                    0 3px 1px -2px rgba(0, 0, 0, .12);
+      }
+
+      #details {
+        -webkit-border-start: 1px #d8d8d8 solid;
+        -webkit-padding-end: 16px;
+        -webkit-padding-start: var(--downloads-card-margin);
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-width: 0;  /* This allows #url to ellide correctly. */
+        padding-bottom: 12px;
+        padding-top: 16px;
+      }
+
+      #content:not(.is-active) #details {
+        color: rgba(186, 186, 186, .6);
+      }
+
+      #content:not(.is-active) #name {
+        text-decoration: line-through;
+      }
+
+      .icon-wrapper {
+        align-self: center;
+        flex: none;
+        justify-content: center;
+        margin: 0 24px;
+      }
+
+      .icon {
+        height: 32px;
+        width: 32px;
+      }
+
+      #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
+        /* TODO(dbeam): animate from top-aligned to centered when items finish?
+         */
+        align-self: flex-start;
+        padding-top: 16px;
+      }
+
+      #content:not(.is-active) .icon {
+        -webkit-filter: grayscale(100%);
+        opacity: .5;
+      }
+
+      #danger-icon {
+        height: 32px;
+        width: 32px;
+      }
+
+      #danger-icon[icon='cr:warning'] {
+        color: rgb(255, 193, 7);
+      }
+
+      #danger-icon[icon='downloads:remove-circle'] {
+        color: rgb(244, 67, 54);
+      }
+
+      #name,
+      #file-link,
+      #url {
+        max-width: 100%;
+      }
+
+      #name,
+      #file-link {
+        font-weight: 500;
+        word-break: break-all;
+      }
+
+      #name {
+        -webkit-margin-end: 12px;  /* Only really affects #tag. */
+      }
+
+      #pause-or-resume,
+      .is-active :-webkit-any(#name, #file-link, #show) {
+        color: rgb(51, 103, 214);
+      }
+
+      #tag {
+        color: #5a5a5a;
+        font-weight: 500;
+      }
+
+      #url {
+        color: inherit;
+        margin-top: 6px;
+        min-height: 0;
+        overflow: hidden;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .is-active #url {
+        color: #969696;
+      }
+
+      #progress,
+      #description:not(:empty),
+      .controls {
+        margin-top: 16px;
+      }
+
+      .is-active #description {
+        color: #616161;
+      }
+
+      .dangerous #description {
+        color: rgb(239, 108, 0);
+      }
+
+      #progress {
+        --paper-progress-active-color: rgb(54, 126, 237);
+        --paper-progress-container-color: rgb(223, 222, 223);
+        width: auto;
+      }
+
+      .controls {
+        -webkit-margin-start: -.57em;
+      }
+
+      #cancel,
+      #retry,
+      .keep,
+      .discard {
+        color: #5a5a5a;
+      }
+
+      #show {
+        margin: .7em .57em;
+      }
+
+      #controlled-by {
+        -webkit-margin-start: 8px;
+      }
+
+      #controlled-by,
+      #controlled-by a {
+        color: #5a5a5a;
+      }
+
+      .is-active #controlled-by {
+        color: #333;
+      }
+
+      .is-active #controlled-by a {
+        color: rgb(51, 103, 214);
+      }
+
+      #remove-wrapper {
+        align-self: flex-start;
+        margin: 0;
+      }
+
+      #remove {
+        color: #969696;
+        font-size: 16px;
+        height: 32px;
+        line-height: 17px;  /* TODO(dbeam): why is this necesssary? */
+        width: 32px;
+      }
+
+      #incognito {
+        bottom: 20px;
+        content: -webkit-image-set(
+            url(chrome://downloads/1x/incognito_marker.png) 1x,
+            url(chrome://downloads/2x/incognito_marker.png) 2x);
+        position: absolute;
+        right: 10px;
+      }
+    </style>
+
     <h3 id="date">[[computeDate_(data.hideDate, data.since_string, data.date_string)]]</h3>
 
     <div id="content" on-dragstart="onDragStart_"
@@ -101,7 +323,5 @@
 
   </template>
   <link rel="import" type="css" href="chrome://resources/css/action_link.css">
-  <link rel="import" type="css" href="chrome://downloads/shared_style.css">
-  <link rel="import" type="css" href="chrome://downloads/item.css">
   <script src="chrome://downloads/item.js"></script>
 </dom-module>