blob: 8c9e616e99319cf68c1cf90fb9a9505dd325c6bd [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="browser_proxy.html">
<link rel="import" href="constants.html">
<link rel="import" href="i18n_setup.html">
<link rel="import" href="icon_loader.html">
<link rel="import" href="icons.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.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/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_row.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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-button/paper-button.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">
<dom-module id="downloads-item">
<template>
<style include="action-link cr-hidden-style cr-icons paper-button-style">
:host {
--controlled-by-active-color: #333;
--controlled-by-active-link-color: var(--google-blue-600);
--controlled-by-inactive-color: #5a5a5a;
display: flex;
flex-direction: column;
outline: none;
}
:host-context([dark]) {
--controlled-by-active-color: inherit;
--controlled-by-active-link-color: var(--cr-link-color);
--controlled-by-inactive-color: inherit;
}
paper-button {
font-weight: 500;
margin: 0;
min-width: auto;
}
#date {
font-size: 0.875rem;
font-weight: 400;
letter-spacing: .25px;
margin: 21px auto 6px;
padding-bottom: 4px;
padding-top: 8px;
width: var(--downloads-card-width);
}
#date:empty {
display: none;
}
#content {
border-radius: var(--cr-card-border-radius);
display: flex;
flex: none;
margin: 6px auto;
min-height: 103px;
position: relative;
width: var(--downloads-card-width);
}
#content.is-active {
@apply --cr-card-elevation;
}
:host-context(html:not([dark])) #content.is-active {
background-color: var(--cr-card-background-color);
}
#content:not(.is-active) {
background: rgba(255, 255, 255, .6);
border: 1px var(--google-grey-300) solid;
}
:host-context([dark]) #content:not(.is-active) {
background: none; /* override */
border-color: var(--google-grey-800);
}
#details {
border-inline-start: 1px #d8d8d8 solid;
display: flex;
flex: 1;
flex-direction: column;
min-width: 0; /* This allows #url to ellide correctly. */
padding-bottom: 12px;
padding-inline-end: 16px;
padding-inline-start: var(--downloads-card-margin);
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-refresh-500-rgb), .6);
}
#content:not(.is-active) #name {
text-decoration: line-through;
}
:host-context([dark]) #content:not(.is-active) :-webkit-any(#name, #tag) {
color: var(--google-grey-refresh-500);
}
.icon-wrapper {
align-self: center;
flex: none;
justify-content: center;
margin: 0 24px;
}
.icon,
#file-icon-wrapper {
height: 32px;
width: 32px;
}
#file-icon-wrapper {
overflow: hidden; /* Reduces file icon flicker on initial load. */
}
#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;
}
#file-icon-wrapper iron-icon[icon='cr:insert-drive-file'] {
color: var(--paper-grey-400);
}
#file-icon-wrapper iron-icon[icon='cr:warning'],
.dangerous #description {
color: var(--google-red-700);
}
:host-context([dark]) #file-icon-wrapper iron-icon[icon='cr:warning'],
:host-context([dark]) .dangerous #description {
color: var(--google-red-refresh-300);
}
#name,
#file-link,
#url {
max-width: 100%;
}
#name,
#file-link {
font-weight: 500;
word-break: break-all;
}
:host-context(html:not([dark])) .is-active
:-webkit-any(#name, #file-link, #show) {
color: var(--google-blue-600);
}
#name {
margin-inline-end: 12px; /* Only really affects #tag. */
}
#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: var(--cr-secondary-text-color);
}
#progress,
#description:not(:empty),
.controls {
margin-top: 16px;
}
:host-context(html:not([dark])) .is-active #description {
color: #616161;
}
#progress {
/* TODO(dbeam): border-radius on container and progress bar. */
--paper-progress-active-color: var(--google-blue-600);
--paper-progress-container-color: rgb(223, 222, 223);
width: auto;
}
:host-context([dark]) #progress {
--paper-progress-active-color: var(--google-blue-refresh-300);
--paper-progress-container-color: var(--google-grey-800);
}
#show {
margin: .7em 0;
}
#controlled-by,
#controlled-by a {
color: var(--controlled-by-inactive-color);
}
.is-active #controlled-by {
color: var(--controlled-by-active-color);
margin-inline-start: 8px;
}
.is-active #controlled-by a {
color: var(--controlled-by-active-link-color);
}
cr-icon-button {
--cr-icon-button-icon-size: 16px;
--cr-icon-button-margin-end: 8px;
margin-top: 8px;
}
#incognito {
-webkit-mask-image: url(images/incognito_marker.svg);
background-color: var(--cr-secondary-text-color);
bottom: 20px;
height: 16px;
position: absolute;
right: 16px;
width: 16px;
}
:host-context([dir='rtl']) #incognito {
left: 16px;
right: initial;
}
#pauseOrResume,
#dangerous .action-button {
margin-inline-end: 8px;
}
</style>
<div id="date">[[computeDate_(data.hideDate,
data.sinceString,
data.dateString)]]</div>
<div id="content" on-dragstart="onDragStart_"
class$="[[computeClass_(isActive_, isDangerous_, showProgress_)]]"
focus-row-container>
<div id="file-icon-wrapper" class="icon-wrapper">
<img class="icon" id="file-icon" alt="" hidden="[[!useFileIcon_]]">
<iron-icon class="icon" icon$="[[computeIcon_(
isDangerous_, data.dangerType, useFileIcon_)]]"
hidden="[[useFileIcon_]]"></iron-icon>
</div>
<div id="details">
<div id="title-area"><!--
Can't have any line breaks.
--><a is="action-link" id="file-link" href="[[data.url]]"
on-click="onFileLinkTap_" focus-row-control
focus-type="fileLink"
hidden="[[!completelyOnDisk_]]">[[data.fileName]]</a><!--
Before #name.
--><span id="name"
hidden="[[completelyOnDisk_]]">[[data.fileName]]</span>
<span id="tag">[[computeTag_(data.state,
data.lastReasonText,
data.fileExternallyRemoved)]]</span>
</div>
<a id="url" target="_blank" on-click="onUrlTap_" focus-row-control
focus-type="url">[[chopUrl_(data.url)]]</a>
<div id="description">[[computeDescription_(
data.state,
data.dangerType,
data.fileName,
data.progressStatusText)]]</div>
<template is="dom-if" if="[[showProgress_]]">
<paper-progress id="progress"
indeterminate="[[isIndeterminate_(data.percent)]]"
value="[[data.percent]]"></paper-progress>
</template>
<div id="safe" class="controls" hidden="[[isDangerous_]]">
<a is="action-link" id="show" on-click="onShowTap_"
hidden="[[!completelyOnDisk_]]" focus-row-control
focus-type="show">$i18n{controlShowInFolder}</a>
<template is="dom-if" if="[[data.retry]]">
<paper-button class="action-button" on-click="onRetryTap_"
focus-row-control focus-type="retry">
$i18n{controlRetry}
</paper-button>
</template>
<template is="dom-if" if="[[pauseOrResumeText_]]">
<paper-button on-click="onPauseOrResumeTap_" id="pauseOrResume"
focus-row-control focus-type="pauseOrResume">
[[pauseOrResumeText_]]
</paper-button>
</template>
<template is="dom-if" if="[[showCancel_]]">
<paper-button on-click="onCancelTap_" focus-row-control
focus-type="cancel">
$i18n{controlCancel}
</paper-button>
</template>
<span id="controlled-by"><!-- Text populated dynamically. --></span>
</div>
<template is="dom-if" if="[[isDangerous_]]">
<div id="dangerous" class="controls">
<!-- Dangerous file types (e.g. .exe, .jar). -->
<template is="dom-if" if="[[!isMalware_]]">
<paper-button on-click="onDiscardDangerousTap_"
class="action-button" focus-row-control
focus-type="discard">$i18n{dangerDiscard}</paper-button>
<paper-button on-click="onSaveDangerousTap_" focus-row-control
focus-type="save">
$i18n{dangerSave}</paper-button>
</template>
<!-- Things that safe browsing has determined to be dangerous. -->
<template is="dom-if" if="[[isMalware_]]">
<paper-button on-click="onDiscardDangerousTap_"
class="action-button" focus-row-control focus-type="discard">
$i18n{controlRemoveFromList}</paper-button>
<paper-button on-click="onSaveDangerousTap_" focus-row-control
focus-type="save">
$i18n{dangerRestore}</paper-button>
</template>
</div>
</template>
</div>
<cr-icon-button class="icon-clear"
style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]"
id="remove" title="$i18n{controlRemoveFromList}"
aria-label$="[[controlRemoveFromListAriaLabel_]]"
on-click="onRemoveTap_" focus-row-control focus-type="remove">
</cr-icon-button>
<div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]">
</div>
</div>
</template>
<script src="item.js"></script>
</dom-module>