chrome/browser/resources/downloads/item.html

<style include="action-link cr-hidden-style cr-icons">
  :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;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --controlled-by-active-color: inherit;
      --controlled-by-active-link-color: var(--cr-link-color);
      --controlled-by-inactive-color: inherit;
    }
  }

  cr-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;
    width: var(--downloads-card-width);
  }

  #content.is-active {
    box-shadow: var(--cr-card-shadow);
  }

  @media (prefers-color-scheme: light) {
    #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;
  }

  @media (prefers-color-scheme: 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;
  }

  @media (prefers-color-scheme: dark) {
    #details {
      border-color: rgba(var(--google-grey-800-rgb), .8);
    }
  }

  #content:not(.is-active) #details {
    color: rgba(27, 27, 27, .6);
  }

  @media (prefers-color-scheme: dark) {
    #content:not(.is-active) #details {
      color: rgba(var(--google-grey-refresh-500-rgb), .6);
    }
  }

  #content:not(.is-active) #name {
    text-decoration: line-through;
  }

  @media (prefers-color-scheme: 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-color='paper-grey'] {
    color: var(--paper-grey-400);
  }

  #file-icon-wrapper iron-icon[icon-color='red'] {
    color: var(--google-red-700);
  }

  #file-icon-wrapper iron-icon[icon-color='yellow'] {
    color: var(--google-yellow-500);
  }

  @media (prefers-color-scheme: dark) {
    #file-icon-wrapper iron-icon[icon-color='red'] {
      color: var(--google-red-refresh-300);
    }
  }

  #file-icon-wrapper iron-icon[icon-color='grey'] {
    color: var(--google-grey-700);
  }

  @media (prefers-color-scheme: dark) {
    #file-icon-wrapper iron-icon[icon-color='grey'] {
      color: var(--google-grey-500);
    }
  }

  #name,
  #file-link,
  #url {
    max-width: 100%;
  }

  #name,
  #file-link {
    font-weight: 500;
    word-break: break-all;
  }

  @media (prefers-color-scheme: light) {
    .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;
    display: block;
    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;
  }

  @media (prefers-color-scheme: light) {
    .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;
  }

  @media (prefers-color-scheme: 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);
  }

  .more-options {
    display: flex;
    flex-direction: column;
  }

  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);
    align-self: flex-end;
    background-color: var(--cr-secondary-text-color);
    height: 16px;
    margin-block-end: 20px;
    margin-block-start: auto;
    margin-inline-end: 16px;
    width: 16px;
  }

  :host-context([dir='rtl']) #incognito {
    left: 16px;
    right: initial;
  }

  #pauseOrResume,
  #dangerous .action-button,
  #openNow {
    margin-inline-end: 8px;
  }
</style>

<div id="date" role="heading" aria-level="2">[[computeDate_(data.hideDate,
    data.sinceString,
    data.dateString)]]</div>

<div id="content" on-dragstart="onDragStart_"
    class$="[[computeClass_(isActive_, isDangerous_, showProgress_)]]"
    focus-row-container>
  <!--
    TODO(hcarmona): Investigate displaying danger level as text in alt
    attribute and remove aria-hidden="true" from #file-icon-wrapper
  -->
  <div id="file-icon-wrapper" class="icon-wrapper" aria-hidden="true">
    <img class="icon" id="file-icon" alt="" hidden="[[!useFileIcon_]]"
    icon-color$="[[computeIconColor_(isDangerous_, data.dangerType,
    useFileIcon_)]]">
    <iron-icon class="icon" icon$="[[computeIcon_(
        isDangerous_, data.dangerType, useFileIcon_)]]"
        hidden="[[useFileIcon_]]" icon-color$="[[computeIconColor_(isDangerous_,
        data.dangerType, useFileIcon_)]]"></iron-icon>
  </div>

  <div id="details">
    <div id="title-area" role="gridcell"><!--
      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>

    <div role="gridcell">
      <a id="url" target="_blank" on-click="onUrlTap_" focus-row-control
          focus-type="url">[[chopUrl_(data.url)]]</a>
    </div>

    <div id="description" role="gridcell"
        hidden$="[[!computeDescriptionVisible_(data.*)]]">
      [[computeDescription_(
          data.state,
          data.dangerType,
          data.fileName,
          data.progressStatusText)]]
    </div>

    <template is="dom-if" if="[[showProgress_]]">
      <div role="gridcell">
        <paper-progress id="progress"
            indeterminate="[[isIndeterminate_(data.percent)]]"
            value="[[data.percent]]"></paper-progress>
      </div>
    </template>

    <div id="safe" class="controls" hidden="[[isDangerous_]]">
      <span role="gridcell" hidden="[[!hasShowInFolderLink_]]">
        <a is="action-link" id="show" on-click="onShowTap_"
            focus-row-control
            focus-type="show">[[data.showInFolderText]]</a>
      </span>
      <template is="dom-if" if="[[data.retry]]">
        <span role="gridcell">
          <cr-button class="action-button" on-click="onRetryTap_"
              focus-row-control focus-type="retry">
            $i18n{controlRetry}
          </cr-button>
        </span>
      </template>
      <template is="dom-if" if="[[pauseOrResumeText_]]">
        <span role="gridcell">
          <cr-button on-click="onPauseOrResumeTap_" id="pauseOrResume"
              focus-row-control focus-type="pauseOrResume">
            [[pauseOrResumeText_]]
          </cr-button>
        </span>
      </template>
      <template is="dom-if" if="[[showOpenNow_]]" restamp>
        <span role="gridcell">
          <cr-button on-click="onOpenNowTap_" id="openNow" class="action-button"
                     focus-row-control focus-type="open">
            $i18n{controlOpenNow}
          </cr-button>
        </span>
      </template>
      <template is="dom-if" if="[[showCancel_]]">
        <span role="gridcell">
          <cr-button on-click="onCancelTap_" focus-row-control
              focus-type="cancel">
            $i18n{controlCancel}
          </cr-button>
        </span>
      </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_]]">
          <span role="gridcell">
            <cr-button on-click="onDiscardDangerousTap_"
                class="action-button" focus-row-control
                focus-type="discard">$i18n{dangerDiscard}</cr-button>
          </span>
          <span role="gridcell">
            <cr-button on-click="onSaveDangerousTap_" focus-row-control
                focus-type="save">
              $i18n{dangerSave}</cr-button>
          </span>
        </template>

        <!-- Things that safe browsing has determined to be dangerous. -->
        <template is="dom-if" if="[[isMalware_]]">
          <span role="gridcell">
            <cr-button on-click="onDiscardDangerousTap_"
                class="action-button"
                focus-row-control focus-type="discard">
              $i18n{controlRemoveFromList}</cr-button>
          </span>
          <span role="gridcell">
            <cr-button on-click="onSaveDangerousTap_" focus-row-control
                focus-type="save">
              $i18n{dangerRestore}</cr-button>
          </span>
        </template>
      </div>
    </template>
  </div>
  <div class="more-options">
    <div role="gridcell">
      <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>
    <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]"></div>
  </div>
</div>