Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(27)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_downloads/vulcanized.html

Issue 2374473003: MD Downloads: remove most deprecated CSS imports (Closed)
Patch Set: 80 col wrap Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« chrome/browser/resources/md_downloads/item.html ('K') | « chrome/browser/resources/md_downloads/toolbar.html ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!- - 1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!- -
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
48 48
49 html, 49 html,
50 body { 50 body {
51 height: 100%; 51 height: 100%;
52 } 52 }
53 53
54 body { 54 body {
55 display: flex; 55 display: flex;
56 margin: 0; 56 margin: 0;
57 } 57 }
58
59 :root {
60 --downloads-card-margin: 24px;
61 --downloads-card-width: 622px;
62 }
58 </style> 63 </style>
59 </head> 64 </head>
60 <body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_tim e_data.js"></script> 65 <body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_tim e_data.js"></script>
61 <script src="chrome://downloads/strings.js"></script> 66 <script src="chrome://downloads/strings.js"></script>
62 <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/ " css-build="shadow"> 67 <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/ " css-build="shadow">
63 <template> 68 <template>
64 <style scope="iron-list">:host { 69 <style scope="iron-list">:host {
65 display: block; 70 display: block;
66 position: relative; 71 position: relative;
67 } 72 }
(...skipping 931 matching lines...) Expand 10 before | Expand all | Expand 10 after
999 1004
1000 <iron-iconset-svg name="downloads" size="24"> 1005 <iron-iconset-svg name="downloads" size="24">
1001 <svg> 1006 <svg>
1002 <defs> 1007 <defs>
1003 1008
1004 <g id="remove-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4 .48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"></path></g> 1009 <g id="remove-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4 .48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"></path></g>
1005 </defs> 1010 </defs>
1006 </svg> 1011 </svg>
1007 </iron-iconset-svg> 1012 </iron-iconset-svg>
1008 <dom-module id="downloads-item" assetpath="chrome://downloads/" css-build="shado w"> 1013 <dom-module id="downloads-item" assetpath="chrome://downloads/" css-build="shado w">
1009 <template><style scope="downloads-item">:host { 1014 <template>
1015 <style scope="downloads-item">[is='action-link'] {
1016 cursor: pointer;
1017 display: inline-block;
1018 text-decoration: none;
1019 }
1020
1021 [is='action-link']:hover {
1022 text-decoration: underline;
1023 }
1024
1025 [is='action-link']:active {
1026 color: rgb(5, 37, 119);
1027 text-decoration: underline;
1028 }
1029
1030 [is='action-link'][disabled] {
1031 color: #999;
1032 cursor: default;
1033 pointer-events: none;
1034 text-decoration: none;
1035 }
1036
1037 [is='action-link'].no-outline {
1038 outline: none;
1039 }
1040
1041 :host {
1010 display: flex; 1042 display: flex;
1011 flex-direction: column; 1043 flex-direction: column;
1044 }
1045
1046 [hidden] {
1047 display: none !important;
1048 }
1049
1050 paper-button {
1051 font-weight: 500;
1052 margin: 0;
1053 min-width: auto;
1012 } 1054 }
1013 1055
1014 #date { 1056 #date {
1015 color: rgb(104, 113, 116); 1057 color: rgb(104, 113, 116);
1016 font-size: 100%; 1058 font-size: 100%;
1017 font-weight: 500; 1059 font-weight: 500;
1018 margin: 24px auto 10px; 1060 margin: 24px auto 10px;
1019 width: var(--downloads-item-width); 1061 width: var(--downloads-card-width);
1020 } 1062 }
1021 1063
1022 #date:empty { 1064 #date:empty {
1023 display: none; 1065 display: none;
1024 } 1066 }
1025 1067
1026 #content { 1068 #content {
1027 background: white; 1069 background: white;
1028 border-radius: 2px; 1070 border-radius: 2px;
1029 display: flex; 1071 display: flex;
1030 flex: none; 1072 flex: none;
1031 margin: 6px auto; 1073 margin: 6px auto;
1032 min-height: 103px; 1074 min-height: 103px;
1033 position: relative; 1075 position: relative;
1034 width: var(--downloads-item-width); 1076 width: var(--downloads-card-width);
1035 } 1077 }
1036 1078
1037 #content.is-active { 1079 #content.is-active {
1038 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); 1080 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
1039 } 1081 }
1040 1082
1041 #content:not(.is-active) { 1083 #content:not(.is-active) {
1042 background: rgba(255, 255, 255, .6); 1084 background: rgba(255, 255, 255, .6);
1043 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .03), 0 1px 4px 0 rgba(0, 0, 0, .048), 1085 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .03), 0 1px 4px 0 rgba(0, 0, 0, .0 48),
1044 0 3px 1px -2px rgba(0, 0, 0, .12); 1086 0 3px 1px -2px rgba(0, 0, 0, .12);
1045 } 1087 }
1046 1088
1047 #details { 1089 #details {
1048 -webkit-border-start: 1px #d8d8d8 solid; 1090 -webkit-border-start: 1px #d8d8d8 solid;
1049 -webkit-padding-end: 16px; 1091 -webkit-padding-end: 16px;
1050 -webkit-padding-start: 24px; 1092 -webkit-padding-start: var(--downloads-card-margin);
1051 display: flex; 1093 display: flex;
1052 flex: 1; 1094 flex: 1;
1053 flex-direction: column; 1095 flex-direction: column;
1054 min-width: 0; 1096 min-width: 0;
1055 padding-bottom: 12px; 1097 padding-bottom: 12px;
1056 padding-top: 16px; 1098 padding-top: 16px;
1057 } 1099 }
1058 1100
1059 #content:not(.is-active) #details { 1101 #content:not(.is-active) #details {
1060 color: rgba(186, 186, 186, .6); 1102 color: rgba(186, 186, 186, .6);
1061 } 1103 }
1062 1104
1063 #content:not(.is-active) #name { 1105 #content:not(.is-active) #name {
1064 text-decoration: line-through; 1106 text-decoration: line-through;
1065 } 1107 }
1066 1108
1067 .icon-wrapper { 1109 .icon-wrapper {
1068 align-self: center; 1110 align-self: center;
1069 flex: none; 1111 flex: none;
1070 justify-content: center; 1112 justify-content: center;
1071 margin: 0 24px; 1113 margin: 0 24px;
1072 } 1114 }
1073 1115
1074 .icon { 1116 .icon {
1075 height: 32px; 1117 height: 32px;
1076 width: 32px; 1118 width: 32px;
1077 } 1119 }
1078 1120
1079 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper { 1121 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
1080 align-self: flex-start; 1122 align-self: flex-start;
1081 padding-top: 16px; 1123 padding-top: 16px;
1082 } 1124 }
1083 1125
1084 #content:not(.is-active) .icon { 1126 #content:not(.is-active) .icon {
1085 -webkit-filter: grayscale(100%); 1127 -webkit-filter: grayscale(100%);
1086 opacity: .5; 1128 opacity: .5;
1087 } 1129 }
1088 1130
1089 #danger-icon { 1131 #danger-icon {
1090 height: 32px; 1132 height: 32px;
1091 width: 32px; 1133 width: 32px;
1092 } 1134 }
1093 1135
1094 #danger-icon[icon='cr:warning'] { 1136 #danger-icon[icon='cr:warning'] {
1095 color: rgb(255, 193, 7); 1137 color: rgb(255, 193, 7);
1096 } 1138 }
1097 1139
1098 #danger-icon[icon='downloads:remove-circle'] { 1140 #danger-icon[icon='downloads:remove-circle'] {
1099 color: rgb(244, 67, 54); 1141 color: rgb(244, 67, 54);
1100 } 1142 }
1101 1143
1102 #name, #file-link, #url { 1144 #name, #file-link, #url {
1103 max-width: 100%; 1145 max-width: 100%;
1104 } 1146 }
1105 1147
1106 #name, #file-link { 1148 #name, #file-link {
1107 font-weight: 500; 1149 font-weight: 500;
1108 word-break: break-all; 1150 word-break: break-all;
1109 } 1151 }
1110 1152
1111 #name { 1153 #name {
1112 -webkit-margin-end: 12px; 1154 -webkit-margin-end: 12px;
1113 } 1155 }
1114 1156
1115 #pause-or-resume, .is-active :-webkit-any(#name, #file-link, #show) { 1157 #pause-or-resume, .is-active :-webkit-any(#name, #file-link, #show) {
1116 color: rgb(51, 103, 214); 1158 color: rgb(51, 103, 214);
1117 } 1159 }
1118 1160
1119 #tag { 1161 #tag {
1120 color: #5a5a5a; 1162 color: #5a5a5a;
1121 font-weight: 500; 1163 font-weight: 500;
1122 } 1164 }
1123 1165
1124 #url { 1166 #url {
1125 color: inherit; 1167 color: inherit;
1126 margin-top: 6px; 1168 margin-top: 6px;
1127 min-height: 0; 1169 min-height: 0;
1128 overflow: hidden; 1170 overflow: hidden;
1129 text-decoration: none; 1171 text-decoration: none;
1130 text-overflow: ellipsis; 1172 text-overflow: ellipsis;
1131 white-space: nowrap; 1173 white-space: nowrap;
1132 } 1174 }
1133 1175
1134 .is-active #url { 1176 .is-active #url {
1135 color: #969696; 1177 color: #969696;
1136 } 1178 }
1137 1179
1138 #progress, #description:not(:empty), .controls { 1180 #progress, #description:not(:empty), .controls {
1139 margin-top: 16px; 1181 margin-top: 16px;
1140 } 1182 }
1141 1183
1142 .is-active #description { 1184 .is-active #description {
1143 color: #616161; 1185 color: #616161;
1144 } 1186 }
1145 1187
1146 .dangerous #description { 1188 .dangerous #description {
1147 color: rgb(239, 108, 0); 1189 color: rgb(239, 108, 0);
1148 } 1190 }
1149 1191
1150 #progress { 1192 #progress {
1151 --paper-progress-active-color: rgb(54, 126, 237); 1193 --paper-progress-active-color: rgb(54, 126, 237);
1152 --paper-progress-container-color: rgb(223, 222, 223); 1194 --paper-progress-container-color: rgb(223, 222, 223);
1153 width: auto; 1195 width: auto;
1154 } 1196 }
1155 1197
1156 .controls { 1198 .controls {
1157 -webkit-margin-start: -.57em; 1199 -webkit-margin-start: -.57em;
1158 } 1200 }
1159 1201
1160 #cancel, #retry, .keep, .discard { 1202 #cancel, #retry, .keep, .discard {
1161 color: #5a5a5a; 1203 color: #5a5a5a;
1162 } 1204 }
1163 1205
(...skipping 12 matching lines...) Expand all
1176 .is-active #controlled-by { 1218 .is-active #controlled-by {
1177 color: #333; 1219 color: #333;
1178 } 1220 }
1179 1221
1180 .is-active #controlled-by a { 1222 .is-active #controlled-by a {
1181 color: rgb(51, 103, 214); 1223 color: rgb(51, 103, 214);
1182 } 1224 }
1183 1225
1184 #remove-wrapper { 1226 #remove-wrapper {
1185 align-self: flex-start; 1227 align-self: flex-start;
1186 margin: 0; 1228 margin: 0;
1187 } 1229 }
1188 1230
1189 #remove { 1231 #remove {
1190 color: #969696; 1232 color: #969696;
1191 font-size: 16px; 1233 font-size: 16px;
1192 height: 32px; 1234 height: 32px;
1193 line-height: 17px; 1235 line-height: 17px;
1194 width: 32px; 1236 width: 32px;
1195 } 1237 }
1196 1238
1197 #incognito { 1239 #incognito {
1198 bottom: 20px; 1240 bottom: 20px;
1199 content: -webkit-image-set( 1241 content: -webkit-image-set(
1200 url("chrome://downloads/1x/incognito_marker.png") 1x, 1242 url("chrome://downloads/1x/incognito_marker.png") 1x,
1201 url("chrome://downloads/2x/incognito_marker.png") 2x); 1243 url("chrome://downloads/2x/incognito_marker.png") 2x);
1202 position: absolute; 1244 position: absolute;
1203 right: 10px; 1245 right: 10px;
1204 }
1205
1206 * {
1207 --downloads-item-width: 622px;
1208 }
1209
1210 [hidden] {
1211 display: none !important;
1212 }
1213
1214 paper-button {
1215 font-weight: 500;
1216 margin: 0;
1217 min-width: auto;
1218 }
1219
1220 [is='action-link'] {
1221 cursor: pointer;
1222 display: inline-block;
1223 text-decoration: none;
1224 }
1225
1226 [is='action-link']:hover {
1227 text-decoration: underline;
1228 }
1229
1230 [is='action-link']:active {
1231 color: rgb(5, 37, 119);
1232 text-decoration: underline;
1233 }
1234
1235 [is='action-link'][disabled] {
1236 color: #999;
1237 cursor: default;
1238 pointer-events: none;
1239 text-decoration: none;
1240 }
1241
1242 [is='action-link'].no-outline {
1243 outline: none;
1244 } 1246 }
1245 1247
1246 </style> 1248 </style>
1249
1247 <h3 id="date">[[computeDate_(data.hideDate, data.since_string, data.date_str ing)]]</h3> 1250 <h3 id="date">[[computeDate_(data.hideDate, data.since_string, data.date_str ing)]]</h3>
1248 1251
1249 <div id="content" on-dragstart="onDragStart_" class$="[[computeClass_(isActi ve_, isDangerous_, showProgress_)]]"> 1252 <div id="content" on-dragstart="onDragStart_" class$="[[computeClass_(isActi ve_, isDangerous_, showProgress_)]]">
1250 <div id="file-icon-wrapper" class="icon-wrapper"> 1253 <div id="file-icon-wrapper" class="icon-wrapper">
1251 <img class="icon" id="file-icon" alt="" hidden="[[isDangerous_]]"> 1254 <img class="icon" id="file-icon" alt="" hidden="[[isDangerous_]]">
1252 <iron-icon id="danger-icon" icon$="[[computeDangerIcon_(isDangerous_, da ta.danger_type)]]" hidden="[[!isDangerous_]]"></iron-icon> 1255 <iron-icon id="danger-icon" icon$="[[computeDangerIcon_(isDangerous_, da ta.danger_type)]]" hidden="[[!isDangerous_]]"></iron-icon>
1253 </div> 1256 </div>
1254 1257
1255 <div id="details"> 1258 <div id="details">
1256 <div id="title-area"><a is="action-link" id="file-link" href="[[data.url ]]" on-tap="onFileLinkTap_" hidden="[[!completelyOnDisk_]]">[[data.file_name]]</ a><span id="name" hidden="[[completelyOnDisk_]]">[[data.file_name]]</span> 1259 <div id="title-area"><a is="action-link" id="file-link" href="[[data.url ]]" on-tap="onFileLinkTap_" hidden="[[!completelyOnDisk_]]">[[data.file_name]]</ a><span id="name" hidden="[[completelyOnDisk_]]">[[data.file_name]]</span>
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
1305 <div id="remove-wrapper" class="icon-wrapper"> 1308 <div id="remove-wrapper" class="icon-wrapper">
1306 <button is="paper-icon-button-light" id="remove" title="$i18n{controlRem oveFromList}" style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]" on-tap ="onRemoveTap_">✕</button> 1309 <button is="paper-icon-button-light" id="remove" title="$i18n{controlRem oveFromList}" style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]" on-tap ="onRemoveTap_">✕</button>
1307 </div> 1310 </div>
1308 1311
1309 <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]"> 1312 <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]">
1310 </div> 1313 </div>
1311 </div> 1314 </div>
1312 1315
1313 </template> 1316 </template>
1314 1317
1315
1316
1317 </dom-module> 1318 </dom-module>
1318 1319
1319 1320
1320 <style is="custom-style" css-build="shadow">html { 1321 <style is="custom-style" css-build="shadow">html {
1321 --primary-text-color: var(--light-theme-text-color); 1322 --primary-text-color: var(--light-theme-text-color);
1322 --primary-background-color: var(--light-theme-background-color); 1323 --primary-background-color: var(--light-theme-background-color);
1323 --secondary-text-color: var(--light-theme-secondary-color); 1324 --secondary-text-color: var(--light-theme-secondary-color);
1324 --disabled-text-color: var(--light-theme-disabled-color); 1325 --disabled-text-color: var(--light-theme-disabled-color);
1325 --divider-color: var(--light-theme-divider-color); 1326 --divider-color: var(--light-theme-divider-color);
1326 --error-color: var(--paper-deep-orange-a700); 1327 --error-color: var(--paper-deep-orange-a700);
(...skipping 2093 matching lines...) Expand 10 before | Expand all | Expand 10 after
3420 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 3421 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
3421 </iron-media-query> 3422 </iron-media-query>
3422 </div> 3423 </div>
3423 3424
3424 <div id="rightContent"> 3425 <div id="rightContent">
3425 <content select=".more-actions"></content> 3426 <content select=".more-actions"></content>
3426 </div> 3427 </div>
3427 </template> 3428 </template>
3428 </dom-module> 3429 </dom-module>
3429 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="sh adow"> 3430 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="sh adow">
3430 <template><style scope="downloads-toolbar">:host { 3431 <template>
3432 <style scope="downloads-toolbar">:host {
3431 align-items: center; 3433 align-items: center;
3432 background: var(--md-toolbar-color); 3434 background: var(--md-toolbar-color);
3433 color: white; 3435 color: white;
3434 display: flex; 3436 display: flex;
3435 min-height: 56px; 3437 min-height: 56px;
3438 }
3439
3440 [hidden] {
3441 display: none !important;
3436 } 3442 }
3437 3443
3438 #toolbar { 3444 #toolbar {
3439 --cr-toolbar-field-end-padding: 0; 3445 --cr-toolbar-field-end-padding: 0;
3440 --cr-toolbar-field-width: var(--downloads-item-width); 3446 --cr-toolbar-field-width: var(--downloads-card-width);
3441 --cr-toolbar-header-wide_-_-webkit-margin-start: 24px; --cr-toolbar-header-wi de_-_-webkit-margin-end: 16px;; 3447 --cr-toolbar-header-wide_-_-webkit-margin-start: 24px; --cr-toolbar-hea der-wide_-_-webkit-margin-end: 16px;;
3442 --cr-toolbar-left-content-wide_-_-webkit-margin-start: 0; --cr-toolbar-left-c ontent-wide_-_flex: 1 0 1px; --cr-toolbar-left-content-wide_-_max-width: none; --cr-toolbar-left-content-wide_-_position: static;; 3448 --cr-toolbar-left-content-wide_-_-webkit-margin-start: 0; --cr-toolbar- left-content-wide_-_flex: 1 0 1px; --cr-toolbar-left-content-wide_-_max-width: none; --cr-toolbar-left-content-wide_-_position: static;;
3443 --cr-toolbar-right-content-wide_-_flex: 1 0 1px; --cr-toolbar-right-content-w ide_-_position: static;; 3449 --cr-toolbar-right-content-wide_-_flex: 1 0 1px; --cr-toolbar-right-con tent-wide_-_position: static;;
3444 align-items: center; 3450 align-items: center;
3445 flex: 1; 3451 flex: 1;
3446 } 3452 }
3447 3453
3448 paper-icon-button { 3454 paper-icon-button {
3449 --iron-icon-height: 20px; 3455 --iron-icon-height: 20px;
3450 --iron-icon-width: 20px; 3456 --iron-icon-width: 20px;
3451 --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px; --pa per-icon-button_-_width: 32px;; 3457 --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px ; --paper-icon-button_-_width: 32px;;
3452 } 3458 }
3453 3459
3454 .more-actions { 3460 .more-actions {
3455 -webkit-margin-end: 16px; 3461 -webkit-margin-end: 16px;
3456 -webkit-margin-start: 8px; 3462 -webkit-margin-start: 8px;
3457 text-align: end; 3463 text-align: end;
3458 } 3464 }
3459 3465
3460 #more { 3466 #more {
3461 --paper-menu-button_-_padding: 0;; 3467 --paper-menu-button_-_padding: 0;;
3462 } 3468 }
3463 3469
3464 paper-menu { 3470 paper-menu {
3465 --paper-menu-selected-item_-_font-weight: normal;; 3471 --paper-menu-selected-item_-_font-weight: normal;;
3466 } 3472 }
3467 3473
3468 paper-item { 3474 paper-item {
3469 -webkit-user-select: none; 3475 -webkit-user-select: none;
3470 cursor: pointer; 3476 cursor: pointer;
3471 font: inherit; 3477 font: inherit;
3472 min-height: 40px; 3478 min-height: 40px;
3473 3479
3474 white-space: nowrap; 3480 white-space: nowrap;
3475 }
3476
3477 * {
3478 --downloads-item-width: 622px;
3479 }
3480
3481 [hidden] {
3482 display: none !important;
3483 }
3484
3485 paper-button {
3486 font-weight: 500;
3487 margin: 0;
3488 min-width: auto;
3489 } 3481 }
3490 3482
3491 </style> 3483 </style>
3492 <cr-toolbar id="toolbar" page-name="$i18n{title}" search-prompt="$i18n{searc h}" clear-label="$i18n{clearSearch}" spinner-active="{{spinnerActive}}" on-searc h-changed="onSearchChanged_"> 3484 <cr-toolbar id="toolbar" page-name="$i18n{title}" search-prompt="$i18n{searc h}" clear-label="$i18n{clearSearch}" spinner-active="{{spinnerActive}}" on-searc h-changed="onSearchChanged_">
3493 <div class="more-actions"> 3485 <div class="more-actions">
3494 <paper-menu-button id="more" horizontal-align="right" allow-outside-scro ll=""> 3486 <paper-menu-button id="more" horizontal-align="right" allow-outside-scro ll="">
3495 <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" clas s="dropdown-trigger"></paper-icon-button> 3487 <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" clas s="dropdown-trigger"></paper-icon-button>
3496 <paper-menu class="dropdown-content"> 3488 <paper-menu class="dropdown-content">
3497 <paper-item class="clear-all" on-tap="onClearAllTap_" on-blur="onIte mBlur_"> 3489 <paper-item class="clear-all" on-tap="onClearAllTap_" on-blur="onIte mBlur_">
3498 $i18n{clearAll} 3490 $i18n{clearAll}
3499 </paper-item> 3491 </paper-item>
3500 <paper-item on-tap="onOpenDownloadsFolderTap_" on-blur="onItemBlur_" > 3492 <paper-item on-tap="onOpenDownloadsFolderTap_" on-blur="onItemBlur_" >
3501 $i18n{openDownloadsFolder} 3493 $i18n{openDownloadsFolder}
3502 </paper-item> 3494 </paper-item>
3503 </paper-menu> 3495 </paper-menu>
3504 </paper-menu-button> 3496 </paper-menu-button>
3505 </div> 3497 </div>
3506 </cr-toolbar> 3498 </cr-toolbar>
3507 </template> 3499 </template>
3508
3509
3510 </dom-module> 3500 </dom-module>
3511 <style> 3501 <style>
3512 /* Copyright 2016 The Chromium Authors. All rights reserved. 3502 /* Copyright 2016 The Chromium Authors. All rights reserved.
3513 * Use of this source code is governed by a BSD-style license that can be 3503 * Use of this source code is governed by a BSD-style license that can be
3514 * found in the LICENSE file. */ 3504 * found in the LICENSE file. */
3515 3505
3516 :root { 3506 :root {
3517 /* This is a custom, Chrome-specific color that does not have a --paper or 3507 /* This is a custom, Chrome-specific color that does not have a --paper or
3518 * --google equivalent. */ 3508 * --google equivalent. */
3519 --md-background-color: rgb(241, 241, 241); 3509 --md-background-color: rgb(241, 241, 241);
3520 /* This is --google-blue-700, rewritten as a native custom property for speed. 3510 /* This is --google-blue-700, rewritten as a native custom property for speed.
3521 */ 3511 */
3522 --md-toolbar-color: rgb(51, 103, 214); 3512 --md-toolbar-color: rgb(51, 103, 214);
3523 } 3513 }
3524 3514
3525 </style> 3515 </style>
3526 3516
3527 <dom-module id="downloads-manager" assetpath="chrome://downloads/" css-build="sh adow"> 3517 <dom-module id="downloads-manager" assetpath="chrome://downloads/" css-build="sh adow">
3528 <template> 3518 <template>
3529 <style scope="downloads-manager">:host { 3519 <style scope="downloads-manager">:host {
3530 display: flex; 3520 display: flex;
3531 flex: 1 0; 3521 flex: 1 0;
3532 flex-direction: column; 3522 flex-direction: column;
3533 height: 100%; 3523 height: 100%;
3534 z-index: 0; 3524 z-index: 0;
3525 }
3526
3527 [hidden] {
3528 display: none !important;
3535 } 3529 }
3536 3530
3537 @media screen and (max-width: 1024px) { 3531 @media screen and (max-width: 1024px) {
3538 :host { 3532 :host {
3539 flex-basis: 670px; 3533 flex-basis: calc(
3534 var(--downloads-card-width) + 2 * var(--downloads-card-margin));
3540 } 3535 }
3541 3536
3542 } 3537 }
3543 3538
3544 #toolbar { 3539 #toolbar {
3545 position: relative; 3540 position: relative;
3546 z-index: 1; 3541 z-index: 1;
3547 } 3542 }
3548 3543
3549 #toolbar::after { 3544 #toolbar::after {
3550 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); 3545 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
3551 content: ''; 3546 content: '';
3552 display: block; 3547 display: block;
3553 height: 6px; 3548 height: 6px;
3554 opacity: 0; 3549 opacity: 0;
3555 position: absolute; 3550 position: absolute;
3556 top: 100%; 3551 top: 100%;
3557 transition: opacity 500ms; 3552 transition: opacity 500ms;
3558 width: 100%; 3553 width: 100%;
3559 } 3554 }
3560 3555
3561 :host([has-shadow_]) #toolbar::after { 3556 :host([has-shadow_]) #toolbar::after {
3562 opacity: 1; 3557 opacity: 1;
3563 } 3558 }
3564 3559
3565 #downloads-list { 3560 #downloads-list {
3566 overflow-y: overlay !important; 3561 overflow-y: overlay !important;
3567 } 3562 }
3568 3563
3569 #no-downloads, #downloads-list { 3564 #no-downloads, #downloads-list {
3570 flex: 1; 3565 flex: 1;
3571 } 3566 }
3572 3567
3573 :host([loading]) #no-downloads, :host([loading]) #downloads-list { 3568 :host([loading]) #no-downloads, :host([loading]) #downloads-list {
3574 display: none; 3569 display: none;
3575 } 3570 }
3576 3571
3577 #no-downloads { 3572 #no-downloads {
3578 align-items: center; 3573 align-items: center;
3579 color: #b4b4b4; 3574 color: #b4b4b4;
3580 display: flex; 3575 display: flex;
3581 font-size: 123.1%; 3576 font-size: 123.1%;
3582 font-weight: 500; 3577 font-weight: 500;
3583 justify-content: center; 3578 justify-content: center;
3584 3579
3585 min-height: min-content; 3580 min-height: min-content;
3586 } 3581 }
3587 3582
3588 #no-downloads .illustration { 3583 #no-downloads .illustration {
3589 background: -webkit-image-set( 3584 background: -webkit-image-set(
3590 url("chrome://downloads/1x/no_downloads.png") 1x, 3585 url("chrome://downloads/1x/no_downloads.png") 1x,
3591 url("chrome://downloads/2x/no_downloads.png") 2x) no-repeat center center; 3586 url("chrome://downloads/2x/no_downloads.png") 2x)
3592 height: 144px; 3587 no-repeat center center;
3593 margin-bottom: 32px; 3588 height: 144px;
3594 } 3589 margin-bottom: 32px;
3595
3596 * {
3597 --downloads-item-width: 622px;
3598 }
3599
3600 [hidden] {
3601 display: none !important;
3602 }
3603
3604 paper-button {
3605 font-weight: 500;
3606 margin: 0;
3607 min-width: auto;
3608 }
3609
3610 #toolbar {
3611 background: var(--md-toolbar-color);
3612 } 3590 }
3613 3591
3614 </style> 3592 </style>
3593
3615 <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}"> 3594 <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}">
3616 </downloads-toolbar> 3595 </downloads-toolbar>
3617 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]] "> 3596 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]] ">
3618 <template> 3597 <template>
3619 <downloads-item data="[[item]]" hide-date="[[item.hideDate]]"> 3598 <downloads-item data="[[item]]" hide-date="[[item.hideDate]]">
3620 </downloads-item> 3599 </downloads-item>
3621 </template> 3600 </template>
3622 </iron-list> 3601 </iron-list>
3623 <div id="no-downloads" hidden="[[hasDownloads_]]"> 3602 <div id="no-downloads" hidden="[[hasDownloads_]]">
3624 <div> 3603 <div>
3625 <div class="illustration"></div> 3604 <div class="illustration"></div>
3626 <span></span> 3605 <span></span>
3627 </div> 3606 </div>
3628 </div> 3607 </div>
3629 </template> 3608 </template>
3630
3631
3632 </dom-module> 3609 </dom-module>
3633 </div> 3610 </div>
3634 <downloads-manager></downloads-manager> 3611 <downloads-manager></downloads-manager>
3635 <if expr="is_macosx"> 3612 <if expr="is_macosx">
3636 <command id="clear-all-command" shortcut="Alt|c Alt|ç"></command> 3613 <command id="clear-all-command" shortcut="Alt|c Alt|ç"></command>
3637 <command id="undo-command" shortcut="Meta|z"></command> 3614 <command id="undo-command" shortcut="Meta|z"></command>
3638 <command id="find-command" shortcut="Meta|f"></command> 3615 <command id="find-command" shortcut="Meta|f"></command>
3639 </if> 3616 </if>
3640 <if expr="not is_macosx"> 3617 <if expr="not is_macosx">
3641 <command id="clear-all-command" shortcut="Alt|c"></command> 3618 <command id="clear-all-command" shortcut="Alt|c"></command>
3642 <command id="undo-command" shortcut="Ctrl|z"></command> 3619 <command id="undo-command" shortcut="Ctrl|z"></command>
3643 <command id="find-command" shortcut="Ctrl|f"></command> 3620 <command id="find-command" shortcut="Ctrl|f"></command>
3644 </if> 3621 </if>
3645 <link rel="import" href="chrome://resources/html/polymer.html"> 3622 <link rel="import" href="chrome://resources/html/polymer.html">
3646 <script src="crisper.js"></script></body></html> 3623 <script src="crisper.js"></script></body></html>
OLDNEW
« chrome/browser/resources/md_downloads/item.html ('K') | « chrome/browser/resources/md_downloads/toolbar.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698