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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1375333004: MD Downloads: use <iron-list> to render download items (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@iron-list2
Patch Set: merge Created 5 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/manager.js ('K') | « chrome/browser/resources/md_downloads/manager.js ('k') | chrome/browser/ui/webui/downloads_dom_handler.cc » ('j') | chrome/browser/ui/webui/downloads_dom_handler.cc » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><html i18n-values="dir:textdirection;lang:language"><head><!-- 1 <!DOCTYPE html><html i18n-values="dir:textdirection;lang: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 1614 matching lines...) Expand 10 before | Expand all | Expand 10 after
1625 1625
1626 body { 1626 body {
1627 display: flex; 1627 display: flex;
1628 font-family: Roboto; 1628 font-family: Roboto;
1629 font-size: 81.25%; 1629 font-size: 81.25%;
1630 margin: 0; 1630 margin: 0;
1631 } 1631 }
1632 </style> 1632 </style>
1633 <script src="chrome://downloads/strings.js"></script> 1633 <script src="chrome://downloads/strings.js"></script>
1634 </head> 1634 </head>
1635 <body><div hidden="" by-vulcanize=""><dom-module id="paper-header-panel" assetpa th="chrome://resources/polymer/v1_0/paper-header-panel/"> 1635 <body><div hidden="" by-vulcanize=""><dom-module id="iron-list" assetpath="chrom e://resources/polymer/v1_0/iron-list/">
1636 <template>
1637 <style>
1638 :host {
1639 display: block;
1640 }
1641
1642 :host(.has-scroller) {
1643 overflow: auto;
1644 }
1645
1646 :host(:not(.has-scroller)) {
1647 position: relative;
1648 }
1649
1650 #items {
1651 @apply(--iron-list-items-container);
1652 position: relative;
1653 }
1654
1655 #items > ::content > * {
1656 width: 100%;
1657 box-sizing: border-box;
1658 position: absolute;
1659 top: 0;
1660 will-change: transform;
1661 }
1662 </style>
1663
1664 <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}">
1665 </array-selector>
1666
1667 <div id="items">
1668 <content></content>
1669 </div>
1670
1671 </template>
1672 </dom-module>
1673
1674 <dom-module id="paper-header-panel" assetpath="chrome://resources/polymer/v1_0/p aper-header-panel/">
1636 1675
1637 <style> 1676 <style>
1638 /** 1677 /**
1639 @license 1678 @license
1640 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 1679 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
1641 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE 1680 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE
1642 The complete set of authors may be found at http://polymer.github.io/AUTHORS 1681 The complete set of authors may be found at http://polymer.github.io/AUTHORS
1643 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS 1682 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
1644 Code distributed by Google as part of the polymer project is also 1683 Code distributed by Google as part of the polymer project is also
1645 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS 1684 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS
(...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after
1763 <div id="mainPanel"> 1802 <div id="mainPanel">
1764 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]"> 1803 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">
1765 <content id="mainContent" select="*"></content> 1804 <content id="mainContent" select="*"></content>
1766 </div> 1805 </div>
1767 <div id="dropShadow"></div> 1806 <div id="dropShadow"></div>
1768 </div> 1807 </div>
1769 </template> 1808 </template>
1770 1809
1771 </dom-module> 1810 </dom-module>
1772 1811
1773 <dom-module id="paper-material" assetpath="chrome://resources/polymer/v1_0/paper -material/">
1774 <style>
1775 :host {
1776 display: block;
1777 position: relative;
1778 }
1779
1780 :host([animated]) {
1781 @apply(--shadow-transition);
1782 }
1783
1784 :host([elevation="1"]) {
1785 @apply(--shadow-elevation-2dp);
1786 }
1787
1788 :host([elevation="2"]) {
1789 @apply(--shadow-elevation-4dp);
1790 }
1791
1792 :host([elevation="3"]) {
1793 @apply(--shadow-elevation-6dp);
1794 }
1795
1796 :host([elevation="4"]) {
1797 @apply(--shadow-elevation-8dp);
1798 }
1799
1800 :host([elevation="5"]) {
1801 @apply(--shadow-elevation-16dp);
1802 }
1803 </style>
1804 <template>
1805 <content></content>
1806 </template>
1807 </dom-module>
1808 <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-r ipple/">
1809
1810
1811
1812 <template>
1813 <style>
1814 :host {
1815 display: block;
1816 position: absolute;
1817 border-radius: inherit;
1818 overflow: hidden;
1819 top: 0;
1820 left: 0;
1821 right: 0;
1822 bottom: 0;
1823 }
1824
1825 :host([animating]) {
1826 /* This resolves a rendering issue in Chrome (as of 40) where the
1827 ripple is not properly clipped by its parent (which may have
1828 rounded corners). See: http://jsbin.com/temexa/4
1829
1830 Note: We only apply this style conditionally. Otherwise, the browser
1831 will create a new compositing layer for every ripple element on the
1832 page, and that would be bad. */
1833 -webkit-transform: translate(0, 0);
1834 transform: translate3d(0, 0, 0);
1835 }
1836
1837 :host([noink]) {
1838 pointer-events: none;
1839 }
1840
1841 #background,
1842 #waves,
1843 .wave-container,
1844 .wave {
1845 pointer-events: none;
1846 position: absolute;
1847 top: 0;
1848 left: 0;
1849 width: 100%;
1850 height: 100%;
1851 }
1852
1853 #background,
1854 .wave {
1855 opacity: 0;
1856 }
1857
1858 #waves,
1859 .wave {
1860 overflow: hidden;
1861 }
1862
1863 .wave-container,
1864 .wave {
1865 border-radius: 50%;
1866 }
1867
1868 :host(.circle) #background,
1869 :host(.circle) #waves {
1870 border-radius: 50%;
1871 }
1872
1873 :host(.circle) .wave-container {
1874 overflow: hidden;
1875 }
1876 </style>
1877
1878 <div id="background"></div>
1879 <div id="waves"></div>
1880 </template>
1881 </dom-module>
1882 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b utton/">
1883 <template>
1884
1885 <style>
1886 :host {
1887 display: inline-block;
1888 position: relative;
1889 box-sizing: border-box;
1890 min-width: 5.14em;
1891 margin: 0 0.29em;
1892 background: transparent;
1893 text-align: center;
1894 font: inherit;
1895 text-transform: uppercase;
1896 outline-width: 0;
1897 border-radius: 3px;
1898 -moz-user-select: none;
1899 -ms-user-select: none;
1900 -webkit-user-select: none;
1901 user-select: none;
1902 cursor: pointer;
1903 z-index: 0;
1904 padding: 0.7em 0.57em;
1905
1906 @apply(--paper-button);
1907 }
1908
1909 :host([raised]) .keyboard-focus {
1910 font-weight: bold;
1911 @apply(--paper-button-raised-keyboard-focus);
1912 }
1913
1914 :host(:not([raised])) .keyboard-focus {
1915 font-weight: bold;
1916 @apply(--paper-button-flat-keyboard-focus);
1917 }
1918
1919 :host([disabled]) {
1920 background: #eaeaea;
1921 color: #a8a8a8;
1922 cursor: auto;
1923 pointer-events: none;
1924
1925 @apply(--paper-button-disabled);
1926 }
1927
1928 :host([noink]) paper-ripple {
1929 display: none;
1930 }
1931
1932 paper-ripple {
1933 color: var(--paper-button-ink-color);
1934 }
1935
1936 paper-material {
1937 border-radius: inherit;
1938 @apply(--layout-fit);
1939 }
1940
1941 .content > ::content * {
1942 text-transform: inherit;
1943 }
1944 </style>
1945
1946 <paper-ripple></paper-ripple>
1947
1948 <paper-material elevation="[[_elevation]]" animated=""></paper-material>
1949
1950 <div class$="[[_computeContentClass(receivedFocusFromKeyboard)]]">
1951 <content></content>
1952 </div>
1953
1954 </template>
1955 </dom-module>
1956
1957 <dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper -progress/">
1958 <style>
1959 :host {
1960 display: block;
1961 width: 200px;
1962 position: relative;
1963 overflow: hidden;
1964 }
1965
1966 #progressContainer {
1967 position: relative;
1968 }
1969
1970 #progressContainer,
1971 /* the stripe for the indeterminate animation*/
1972 .indeterminate:after {
1973 height: var(--paper-progress-height, 4px);
1974 }
1975
1976 #primaryProgress,
1977 #secondaryProgress,
1978 .indeterminate:after {
1979 @apply(--layout-fit);
1980 }
1981
1982 #progressContainer,
1983 .indeterminate:after {
1984 background-color: var(--paper-progress-container-color, --google-grey-300) ;
1985 }
1986
1987 :host(.transiting) #primaryProgress,
1988 :host(.transiting) #secondaryProgress {
1989 -webkit-transition-property: -webkit-transform;
1990 transition-property: transform;
1991
1992 /* Duration */
1993 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0 8s);
1994 transition-duration: var(--paper-progress-transition-duration, 0.08s);
1995
1996 /* Timing function */
1997 -webkit-transition-timing-function: var(--paper-progress-transition-timing -function, ease);
1998 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease);
1999
2000 /* Delay */
2001 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
2002 transition-delay: var(--paper-progress-transition-delay, 0s);
2003 }
2004
2005 #primaryProgress,
2006 #secondaryProgress {
2007 @apply(--layout-fit);
2008 -webkit-transform-origin: left center;
2009 transform-origin: left center;
2010 -webkit-transform: scaleX(0);
2011 transform: scaleX(0);
2012 will-change: transform;
2013 }
2014
2015 #primaryProgress {
2016 background-color: var(--paper-progress-active-color, --google-green-500);
2017 }
2018
2019 #secondaryProgress {
2020 position: relative;
2021 background-color: var(--paper-progress-secondary-color, --google-green-100 );
2022 }
2023
2024 :host([disabled]) #primaryProgress {
2025 background-color: var(--paper-progress-disabled-active-color, --google-gre y-500);
2026 }
2027
2028 :host([disabled]) #secondaryProgress {
2029 background-color: var(--paper-progress-disabled-active-color, --google-gre y-300);
2030 }
2031
2032 :host(:not([disabled])) #primaryProgress.indeterminate {
2033 -webkit-transform-origin: right center;
2034 transform-origin: right center;
2035 -webkit-animation: indeterminate-bar 2s linear infinite;
2036 animation: indeterminate-bar 2s linear infinite;
2037 }
2038
2039 :host(:not([disabled])) #primaryProgress.indeterminate:after {
2040 content: "";
2041 -webkit-transform-origin: center center;
2042 transform-origin: center center;
2043
2044 -webkit-animation: indeterminate-splitter 2s linear infinite;
2045 animation: indeterminate-splitter 2s linear infinite;
2046 }
2047
2048 @-webkit-keyframes indeterminate-bar {
2049 0% {
2050 -webkit-transform: scaleX(1) translateX(-100%);
2051 }
2052 50% {
2053 -webkit-transform: scaleX(1) translateX(0%);
2054 }
2055 75% {
2056 -webkit-transform: scaleX(1) translateX(0%);
2057 -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
2058 }
2059 100% {
2060 -webkit-transform: scaleX(0) translateX(0%);
2061 }
2062 }
2063
2064 @-webkit-keyframes indeterminate-splitter {
2065 0% {
2066 -webkit-transform: scaleX(.75) translateX(-125%);
2067 }
2068 30% {
2069 -webkit-transform: scaleX(.75) translateX(-125%);
2070 -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
2071 }
2072 90% {
2073 -webkit-transform: scaleX(.75) translateX(125%);
2074 }
2075 100% {
2076 -webkit-transform: scaleX(.75) translateX(125%);
2077 }
2078 }
2079
2080 @keyframes indeterminate-bar {
2081 0% {
2082 transform: scaleX(1) translateX(-100%);
2083 }
2084 50% {
2085 transform: scaleX(1) translateX(0%);
2086 }
2087 75% {
2088 transform: scaleX(1) translateX(0%);
2089 animation-timing-function: cubic-bezier(.28,.62,.37,.91);
2090 }
2091 100% {
2092 transform: scaleX(0) translateX(0%);
2093 }
2094 }
2095
2096 @keyframes indeterminate-splitter {
2097 0% {
2098 transform: scaleX(.75) translateX(-125%);
2099 }
2100 30% {
2101 transform: scaleX(.75) translateX(-125%);
2102 animation-timing-function: cubic-bezier(.42,0,.6,.8);
2103 }
2104 90% {
2105 transform: scaleX(.75) translateX(125%);
2106 }
2107 100% {
2108 transform: scaleX(.75) translateX(125%);
2109 }
2110 }
2111 </style>
2112 <template>
2113 <div id="progressContainer">
2114 <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRat io)]]"></div>
2115 <div id="primaryProgress"></div>
2116 </div>
2117 </template>
2118 </dom-module>
2119
2120 <dom-module id="downloads-item" assetpath="chrome://downloads/">
2121 <template>
2122 <template is="dom-if" if="[[!hideDate]]">
2123 <h3 id="date">[[computeDate_(data.since_string, data.date_string)]]</h3>
2124 </template>
2125
2126 <div id="content" on-dragstart="onDragStart_" class$="[[computeClass_(isActi ve_, isDangerous_, showProgress_)]]">
2127 <div id="file-icon-wrapper" class="icon-wrapper">
2128 <img class="icon" id="file-icon" alt="" hidden="[[isDangerous_]]">
2129 <div class="icon" id="warning" hidden="[[!isDangerous_]]"></div>
2130 </div>
2131
2132 <div id="details">
2133 <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>
2134 <span id="tag">[[computeTag_(data.state, data.last_reason_text, data.f ile_externally_removed)]]</span>
2135 </div>
2136
2137 <a id="url" target="_blank" href="[[data.url]]">[[data.url]]</a>
2138
2139 <div id="description">[[computeDescription_(data.state, data.danger_type , data.file_name, data.progress_status_text)]]</div>
2140
2141 <template is="dom-if" if="[[showProgress_]]">
2142 <paper-progress id="progress" indeterminate="[[isIndeterminate_(data.p ercent)]]" value="[[data.percent]]"></paper-progress>
2143 </template>
2144
2145 <div id="safe" class="controls" hidden="[[isDangerous_]]">
2146 <a is="action-link" id="show" i18n-content="controlShowInFolder" on-ta p="onShowTap_" hidden="[[!completelyOnDisk_]]"></a>
2147 <template is="dom-if" if="[[data.retry]]">
2148 <paper-button id="retry" on-tap="onRetryTap_">[[i18n_.retry]]</paper -button>
2149 </template>
2150 <template is="dom-if" if="[[isInProgress_]]">
2151 <paper-button id="pause" on-tap="onPauseTap_">[[i18n_.pause]]</paper -button>
2152 </template>
2153 <template is="dom-if" if="[[data.resume]]">
2154 <paper-button id="resume" on-tap="onResumeTap_">[[i18n_.resume]]</pa per-button>
2155 </template>
2156 <template is="dom-if" if="[[showCancel_]]">
2157 <paper-button id="cancel" on-tap="onCancelTap_">[[i18n_.cancel]]</pa per-button>
2158 </template>
2159 <span id="controlled-by"></span>
2160 </div>
2161
2162 <template is="dom-if" if="[[isDangerous_]]">
2163 <div id="dangerous" class="controls">
2164
2165 <template is="dom-if" if="[[!isMalware_]]">
2166 <paper-button id="discard" on-tap="onDiscardDangerousTap_" class=" discard">[[i18n_.discard]]</paper-button>
2167 <paper-button id="save" on-tap="onSaveDangerousTap_" class="keep"> [[i18n_.save]]</paper-button>
2168 </template>
2169
2170
2171 <template is="dom-if" if="[[isMalware_]]">
2172 <paper-button id="danger-remove" on-tap="onDiscardDangerousTap_" c lass="discard">[[i18n_.remove]]</paper-button>
2173 <paper-button id="restore" on-tap="onSaveDangerousTap_" class="kee p">[[i18n_.restore]</paper-button>
2174 </template>
2175 </div>
2176 </template>
2177 </div>
2178
2179 <div id="remove-wrapper" class="icon-wrapper">
2180 <paper-icon-button id="remove" icon="clear" i18n-values="title:controlRe moveFromList" style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]" on-tap ="onRemoveTap_"></paper-icon-button>
2181 </div>
2182
2183 <div id="incognito" i18n-values="title:inIncognito" hidden="[[!data.otr]]" ></div>
2184 </div>
2185
2186 </template>
2187 <style>
2188 /* Copyright 2015 The Chromium Authors. All rights reserved.
2189 * Use of this source code is governed by a BSD-style license that can be
2190 * found in the LICENSE file. */
2191
2192 [is='action-link'] {
2193 cursor: pointer;
2194 display: inline-block;
2195 text-decoration: none;
2196 }
2197
2198 [is='action-link']:hover {
2199 text-decoration: underline;
2200 }
2201
2202 [is='action-link']:active {
2203 color: rgb(5, 37, 119);
2204 text-decoration: underline;
2205 }
2206
2207 [is='action-link'][disabled] {
2208 color: #999;
2209 cursor: default;
2210 pointer-events: none;
2211 text-decoration: none;
2212 }
2213
2214 [is='action-link'].no-outline {
2215 outline: none;
2216 }
2217
2218 </style>
2219 <style>
2220 /* Copyright 2015 The Chromium Authors. All rights reserved.
2221 * Use of this source code is governed by a BSD-style license that can be
2222 * found in the LICENSE file. */
2223
2224 * {
2225 --downloads-item-width: 622px;
2226 }
2227
2228 paper-button {
2229 font-weight: 500;
2230 margin: 0;
2231 min-width: auto;
2232 }
2233
2234 </style>
2235 <style>
2236 /* Copyright 2015 The Chromium Authors. All rights reserved.
2237 * Use of this source code is governed by a BSD-style license that can be
2238 * found in the LICENSE file. */
2239
2240 :host {
2241 display: flex;
2242 flex-direction: column;
2243 margin: 12px 0;
2244 }
2245
2246 #date {
2247 color: #7c7c7c;
2248 font-size: 100%;
2249 font-weight: 500;
2250 margin: 18px auto 16px; /* This top margin + :host top margin = 30px. */
2251 width: var(--downloads-item-width);
2252 }
2253
2254 #content {
2255 background: white;
2256 border-radius: 2px;
2257 display: flex;
2258 flex: none;
2259 margin: 0 auto;
2260 min-height: 103px;
2261 position: relative;
2262 width: var(--downloads-item-width);
2263 }
2264
2265 #content.is-active {
2266 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08),
2267 0 3px 1px -2px rgba(0, 0, 0, .2);
2268 }
2269
2270 #content:not(.is-active) {
2271 opacity: .6;
2272 }
2273
2274 #details {
2275 -webkit-border-start: 1px #d8d8d8 solid;
2276 -webkit-padding-end: 16px;
2277 -webkit-padding-start: 24px;
2278 display: flex;
2279 flex: 1;
2280 flex-direction: column;
2281 padding-bottom: 12px;
2282 padding-top: 16px;
2283 }
2284
2285 #content:not(.is-active) #details {
2286 color: #bababa;
2287 }
2288
2289 #content:not(.is-active) #name {
2290 text-decoration: line-through;
2291 }
2292
2293 .icon-wrapper {
2294 align-self: center;
2295 flex: none;
2296 justify-content: center;
2297 margin: 0 24px;
2298 }
2299
2300 .icon {
2301 height: 32px;
2302 width: 32px;
2303 }
2304
2305 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
2306 /* TODO(dbeam): animate from top-aligned to centered when items finish? */
2307 align-self: flex-start;
2308 padding-top: 16px;
2309 }
2310
2311 #content:not(.is-active) .icon {
2312 -webkit-filter: grayscale(100%);
2313 opacity: .5;
2314 }
2315
2316 #warning {
2317 -webkit-mask-image: url("chrome://resources/images/warning.svg");
2318 -webkit-mask-repeat: no-repeat;
2319 -webkit-mask-size: 100%;
2320 background: rgb(255, 193, 7);
2321 }
2322
2323 #name,
2324 #file-link,
2325 #url {
2326 max-width: 100%;
2327 }
2328
2329 #name,
2330 #file-link {
2331 font-weight: 500;
2332 word-break: break-all;
2333 }
2334
2335 #name {
2336 -webkit-margin-end: 12px; /* Only really affects #tag. */
2337 }
2338
2339 .is-active :-webkit-any(#name, #file-link, #pause, #resume, #show) {
2340 color: rgb(51, 103, 214);
2341 }
2342
2343 #tag {
2344 color: #5a5a5a;
2345 font-weight: 500;
2346 }
2347
2348 #url {
2349 color: inherit;
2350 margin-top: 6px;
2351 overflow: hidden;
2352 text-decoration: none;
2353 text-overflow: ellipsis;
2354 white-space: nowrap;
2355 }
2356
2357 .is-active #url {
2358 color: #969696;
2359 }
2360
2361 #progress,
2362 #description:not(:empty),
2363 .controls {
2364 margin-top: 16px;
2365 }
2366
2367 .is-active #description {
2368 color: #616161;
2369 }
2370
2371 .dangerous #description {
2372 color: rgb(239, 108, 0);
2373 }
2374
2375 #progress {
2376 --paper-progress-active-color: rgb(54, 126, 237);
2377 --paper-progress-container-color: rgb(223, 222, 223);
2378 width: auto;
2379 }
2380
2381 .controls {
2382 -webkit-margin-start: -.57em;
2383 }
2384
2385 #cancel,
2386 #retry,
2387 .keep,
2388 .discard {
2389 color: #5a5a5a;
2390 }
2391
2392 #show {
2393 margin: .7em .57em;
2394 }
2395
2396 #controlled-by {
2397 -webkit-margin-start: 8px;
2398 }
2399
2400 #controlled-by,
2401 #controlled-by a {
2402 color: #5a5a5a;
2403 }
2404
2405 .is-active #controlled-by {
2406 color: #333;
2407 }
2408
2409 .is-active #controlled-by a {
2410 color: rgb(51, 103, 214);
2411 }
2412
2413 #remove-wrapper {
2414 align-self: flex-start;
2415 margin: 0;
2416 }
2417
2418 #remove {
2419 --iron-icon-height: 16px;
2420 --iron-icon-width: 16px;
2421 --layout-inline: {
2422 /* HACK(dbeam): we probably shouldn't be overriding Polymer like this. */
2423 };
2424 color: #969696;
2425 height: 16px;
2426 padding: 8px;
2427 width: 16px;
2428 }
2429
2430 #incognito {
2431 bottom: 20px;
2432 content: -webkit-image-set(
2433 url("chrome://downloads/1x/incognito_marker.png") 1x,
2434 url("chrome://downloads/2x/incognito_marker.png") 2x);
2435 position: absolute;
2436 right: 10px;
2437 }
2438
2439 </style>
2440 </dom-module>
2441 <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/ "> 1812 <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/ ">
2442 1813
2443 <style> 1814 <style>
2444 :host { 1815 :host {
2445 @apply(--layout-inline); 1816 @apply(--layout-inline);
2446 @apply(--layout-center-center); 1817 @apply(--layout-center-center);
2447 position: relative; 1818 position: relative;
2448 1819
2449 vertical-align: middle; 1820 vertical-align: middle;
2450 1821
(...skipping 269 matching lines...) Expand 10 before | Expand all | Expand 10 after
2720 <g id="view-week"><path d="M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-. 45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-. 45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-. 45 1-1V6c0-.55-.45-1-1-1z"></path></g> 2091 <g id="view-week"><path d="M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-. 45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-. 45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-. 45 1-1V6c0-.55-.45-1-1-1z"></path></g>
2721 <g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s 9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z">< /path></g> 2092 <g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s 9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z">< /path></g>
2722 <g id="visibility-off"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l 2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98 .7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3. 27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .4 4-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53- 2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path></g> 2093 <g id="visibility-off"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l 2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98 .7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3. 27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .4 4-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53- 2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path></g>
2723 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></p ath></g> 2094 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></p ath></g>
2724 <g id="work"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm- 6 0h-4V4h4v2z"></path></g> 2095 <g id="work"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm- 6 0h-4V4h4v2z"></path></g>
2725 <g id="youtube-searched-for"><path d="M17.01 14h-.8l-.27-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 3-6.5 6.5H2l3.84 4 4.16-4H6.51C6.51 7 8.5 3 5 11.01 5s4.5 2.01 4.5 4.5c0 2.48-2.02 4.5-4.5 4.5-.65 0-1.26-.14-1.82-.38L7.7 1 15.1c.97.57 2.09.9 3.3.9 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l5.01 4.99L22 19l -4.99-5z"></path></g> 2096 <g id="youtube-searched-for"><path d="M17.01 14h-.8l-.27-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 3-6.5 6.5H2l3.84 4 4.16-4H6.51C6.51 7 8.5 3 5 11.01 5s4.5 2.01 4.5 4.5c0 2.48-2.02 4.5-4.5 4.5-.65 0-1.26-.14-1.82-.38L7.7 1 15.1c.97.57 2.09.9 3.3.9 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l5.01 4.99L22 19l -4.99-5z"></path></g>
2726 <g id="zoom-in"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5 .91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v. 79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9 .5 11.99 14 9.5 14zM12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"></path></g> 2097 <g id="zoom-in"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5 .91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v. 79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9 .5 11.99 14 9.5 14zM12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"></path></g>
2727 <g id="zoom-out"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v .79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"></path></g> 2098 <g id="zoom-out"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v .79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"></path></g>
2728 </defs></svg> 2099 </defs></svg>
2729 </iron-iconset-svg> 2100 </iron-iconset-svg>
2101 <dom-module id="paper-material" assetpath="chrome://resources/polymer/v1_0/paper -material/">
2102 <style>
2103 :host {
2104 display: block;
2105 position: relative;
2106 }
2107
2108 :host([animated]) {
2109 @apply(--shadow-transition);
2110 }
2111
2112 :host([elevation="1"]) {
2113 @apply(--shadow-elevation-2dp);
2114 }
2115
2116 :host([elevation="2"]) {
2117 @apply(--shadow-elevation-4dp);
2118 }
2119
2120 :host([elevation="3"]) {
2121 @apply(--shadow-elevation-6dp);
2122 }
2123
2124 :host([elevation="4"]) {
2125 @apply(--shadow-elevation-8dp);
2126 }
2127
2128 :host([elevation="5"]) {
2129 @apply(--shadow-elevation-16dp);
2130 }
2131 </style>
2132 <template>
2133 <content></content>
2134 </template>
2135 </dom-module>
2136 <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-r ipple/">
2137
2138
2139
2140 <template>
2141 <style>
2142 :host {
2143 display: block;
2144 position: absolute;
2145 border-radius: inherit;
2146 overflow: hidden;
2147 top: 0;
2148 left: 0;
2149 right: 0;
2150 bottom: 0;
2151 }
2152
2153 :host([animating]) {
2154 /* This resolves a rendering issue in Chrome (as of 40) where the
2155 ripple is not properly clipped by its parent (which may have
2156 rounded corners). See: http://jsbin.com/temexa/4
2157
2158 Note: We only apply this style conditionally. Otherwise, the browser
2159 will create a new compositing layer for every ripple element on the
2160 page, and that would be bad. */
2161 -webkit-transform: translate(0, 0);
2162 transform: translate3d(0, 0, 0);
2163 }
2164
2165 :host([noink]) {
2166 pointer-events: none;
2167 }
2168
2169 #background,
2170 #waves,
2171 .wave-container,
2172 .wave {
2173 pointer-events: none;
2174 position: absolute;
2175 top: 0;
2176 left: 0;
2177 width: 100%;
2178 height: 100%;
2179 }
2180
2181 #background,
2182 .wave {
2183 opacity: 0;
2184 }
2185
2186 #waves,
2187 .wave {
2188 overflow: hidden;
2189 }
2190
2191 .wave-container,
2192 .wave {
2193 border-radius: 50%;
2194 }
2195
2196 :host(.circle) #background,
2197 :host(.circle) #waves {
2198 border-radius: 50%;
2199 }
2200
2201 :host(.circle) .wave-container {
2202 overflow: hidden;
2203 }
2204 </style>
2205
2206 <div id="background"></div>
2207 <div id="waves"></div>
2208 </template>
2209 </dom-module>
2210 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b utton/">
2211 <template strip-whitespace="">
2212
2213 <style include="paper-material">
2214 :host {
2215 display: inline-block;
2216 position: relative;
2217 box-sizing: border-box;
2218 min-width: 5.14em;
2219 margin: 0 0.29em;
2220 background: transparent;
2221 text-align: center;
2222 font: inherit;
2223 text-transform: uppercase;
2224 outline-width: 0;
2225 border-radius: 3px;
2226 -moz-user-select: none;
2227 -ms-user-select: none;
2228 -webkit-user-select: none;
2229 user-select: none;
2230 cursor: pointer;
2231 z-index: 0;
2232 padding: 0.7em 0.57em;
2233
2234 @apply(--paper-button);
2235 }
2236
2237 :host([raised].keyboard-focus) {
2238 font-weight: bold;
2239 @apply(--paper-button-raised-keyboard-focus);
2240 }
2241
2242 :host(:not([raised]).keyboard-focus) {
2243 font-weight: bold;
2244 @apply(--paper-button-flat-keyboard-focus);
2245 }
2246
2247 :host([disabled]) {
2248 background: #eaeaea;
2249 color: #a8a8a8;
2250 cursor: auto;
2251 pointer-events: none;
2252
2253 @apply(--paper-button-disabled);
2254 }
2255
2256 paper-ripple {
2257 color: var(--paper-button-ink-color);
2258 }
2259
2260 :host > ::content * {
2261 text-transform: inherit;
2262 }
2263 </style>
2264 <content></content>
2265 </template>
2266 </dom-module>
2267
2268 <dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper -progress/">
2269 <style>
2270 :host {
2271 display: block;
2272 width: 200px;
2273 position: relative;
2274 overflow: hidden;
2275 }
2276
2277 #progressContainer {
2278 position: relative;
2279 }
2280
2281 #progressContainer,
2282 /* the stripe for the indeterminate animation*/
2283 .indeterminate:after {
2284 height: var(--paper-progress-height, 4px);
2285 }
2286
2287 #primaryProgress,
2288 #secondaryProgress,
2289 .indeterminate:after {
2290 @apply(--layout-fit);
2291 }
2292
2293 #progressContainer,
2294 .indeterminate:after {
2295 background-color: var(--paper-progress-container-color, --google-grey-300) ;
2296 }
2297
2298 :host(.transiting) #primaryProgress,
2299 :host(.transiting) #secondaryProgress {
2300 -webkit-transition-property: -webkit-transform;
2301 transition-property: transform;
2302
2303 /* Duration */
2304 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0 8s);
2305 transition-duration: var(--paper-progress-transition-duration, 0.08s);
2306
2307 /* Timing function */
2308 -webkit-transition-timing-function: var(--paper-progress-transition-timing -function, ease);
2309 transition-timing-function: var(--paper-progress-transition-timing-functio n, ease);
2310
2311 /* Delay */
2312 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
2313 transition-delay: var(--paper-progress-transition-delay, 0s);
2314 }
2315
2316 #primaryProgress,
2317 #secondaryProgress {
2318 @apply(--layout-fit);
2319 -webkit-transform-origin: left center;
2320 transform-origin: left center;
2321 -webkit-transform: scaleX(0);
2322 transform: scaleX(0);
2323 will-change: transform;
2324 }
2325
2326 #primaryProgress {
2327 background-color: var(--paper-progress-active-color, --google-green-500);
2328 }
2329
2330 #secondaryProgress {
2331 position: relative;
2332 background-color: var(--paper-progress-secondary-color, --google-green-100 );
2333 }
2334
2335 :host([disabled]) #primaryProgress {
2336 background-color: var(--paper-progress-disabled-active-color, --google-gre y-500);
2337 }
2338
2339 :host([disabled]) #secondaryProgress {
2340 background-color: var(--paper-progress-disabled-active-color, --google-gre y-300);
2341 }
2342
2343 :host(:not([disabled])) #primaryProgress.indeterminate {
2344 -webkit-transform-origin: right center;
2345 transform-origin: right center;
2346 -webkit-animation: indeterminate-bar 2s linear infinite;
2347 animation: indeterminate-bar 2s linear infinite;
2348 }
2349
2350 :host(:not([disabled])) #primaryProgress.indeterminate:after {
2351 content: "";
2352 -webkit-transform-origin: center center;
2353 transform-origin: center center;
2354
2355 -webkit-animation: indeterminate-splitter 2s linear infinite;
2356 animation: indeterminate-splitter 2s linear infinite;
2357 }
2358
2359 @-webkit-keyframes indeterminate-bar {
2360 0% {
2361 -webkit-transform: scaleX(1) translateX(-100%);
2362 }
2363 50% {
2364 -webkit-transform: scaleX(1) translateX(0%);
2365 }
2366 75% {
2367 -webkit-transform: scaleX(1) translateX(0%);
2368 -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
2369 }
2370 100% {
2371 -webkit-transform: scaleX(0) translateX(0%);
2372 }
2373 }
2374
2375 @-webkit-keyframes indeterminate-splitter {
2376 0% {
2377 -webkit-transform: scaleX(.75) translateX(-125%);
2378 }
2379 30% {
2380 -webkit-transform: scaleX(.75) translateX(-125%);
2381 -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
2382 }
2383 90% {
2384 -webkit-transform: scaleX(.75) translateX(125%);
2385 }
2386 100% {
2387 -webkit-transform: scaleX(.75) translateX(125%);
2388 }
2389 }
2390
2391 @keyframes indeterminate-bar {
2392 0% {
2393 transform: scaleX(1) translateX(-100%);
2394 }
2395 50% {
2396 transform: scaleX(1) translateX(0%);
2397 }
2398 75% {
2399 transform: scaleX(1) translateX(0%);
2400 animation-timing-function: cubic-bezier(.28,.62,.37,.91);
2401 }
2402 100% {
2403 transform: scaleX(0) translateX(0%);
2404 }
2405 }
2406
2407 @keyframes indeterminate-splitter {
2408 0% {
2409 transform: scaleX(.75) translateX(-125%);
2410 }
2411 30% {
2412 transform: scaleX(.75) translateX(-125%);
2413 animation-timing-function: cubic-bezier(.42,0,.6,.8);
2414 }
2415 90% {
2416 transform: scaleX(.75) translateX(125%);
2417 }
2418 100% {
2419 transform: scaleX(.75) translateX(125%);
2420 }
2421 }
2422 </style>
2423 <template>
2424 <div id="progressContainer">
2425 <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRat io)]]"></div>
2426 <div id="primaryProgress"></div>
2427 </div>
2428 </template>
2429 </dom-module>
2430
2431 <dom-module id="downloads-item" assetpath="chrome://downloads/">
2432 <template>
2433 <template is="dom-if" if="[[!hideDate]]">
2434 <h3 id="date">[[computeDate_(hideDate, data.since_string, data.date_string )]]</h3>
2435 </template>
2436
2437 <div id="content" on-dragstart="onDragStart_" class$="[[computeClass_(isActi ve_, isDangerous_, showProgress_)]]">
2438 <div id="file-icon-wrapper" class="icon-wrapper">
2439 <img class="icon" id="file-icon" alt="" hidden="[[isDangerous_]]">
2440 <iron-icon id="danger-icon" icon$="[[computeDangerIcon_(isDangerous_, da ta.danger_type)]]" hidden="[[!isDangerous_]]"></iron-icon>
2441 </div>
2442
2443 <div id="details">
2444 <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>
2445 <span id="tag">[[computeTag_(data.state, data.last_reason_text, data.f ile_externally_removed)]]</span>
2446 </div>
2447
2448 <a id="url" target="_blank" href="[[data.url]]">[[data.url]]</a>
2449
2450 <div id="description">[[computeDescription_(data.state, data.danger_type , data.file_name, data.progress_status_text)]]</div>
2451
2452 <template is="dom-if" if="[[showProgress_]]">
2453 <paper-progress id="progress" indeterminate="[[isIndeterminate_(data.p ercent)]]" value="[[data.percent]]"></paper-progress>
2454 </template>
2455
2456 <div id="safe" class="controls" hidden="[[isDangerous_]]">
2457 <a is="action-link" id="show" i18n-content="controlShowInFolder" on-ta p="onShowTap_" hidden="[[!completelyOnDisk_]]"></a>
2458 <template is="dom-if" if="[[data.retry]]">
2459 <paper-button id="retry" on-tap="onRetryTap_">[[i18n_.retry]]</paper -button>
2460 </template>
2461 <template is="dom-if" if="[[isInProgress_]]">
2462 <paper-button id="pause" on-tap="onPauseTap_">[[i18n_.pause]]</paper -button>
2463 </template>
2464 <template is="dom-if" if="[[data.resume]]">
2465 <paper-button id="resume" on-tap="onResumeTap_">[[i18n_.resume]]</pa per-button>
2466 </template>
2467 <template is="dom-if" if="[[showCancel_]]">
2468 <paper-button id="cancel" on-tap="onCancelTap_">[[i18n_.cancel]]</pa per-button>
2469 </template>
2470 <span id="controlled-by"></span>
2471 </div>
2472
2473 <template is="dom-if" if="[[isDangerous_]]">
2474 <div id="dangerous" class="controls">
2475
2476 <template is="dom-if" if="[[!isMalware_]]">
2477 <paper-button id="discard" on-tap="onDiscardDangerousTap_" class=" discard">[[i18n_.discard]]</paper-button>
2478 <paper-button id="save" on-tap="onSaveDangerousTap_" class="keep"> [[i18n_.save]]</paper-button>
2479 </template>
2480
2481
2482 <template is="dom-if" if="[[isMalware_]]">
2483 <paper-button id="danger-remove" on-tap="onDiscardDangerousTap_" c lass="discard">[[i18n_.remove]]</paper-button>
2484 <paper-button id="restore" on-tap="onSaveDangerousTap_" class="kee p">[[i18n_.restore]</paper-button>
2485 </template>
2486 </div>
2487 </template>
2488 </div>
2489
2490 <div id="remove-wrapper" class="icon-wrapper">
2491 <paper-icon-button id="remove" icon="clear" i18n-values="title:controlRe moveFromList" style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]" on-tap ="onRemoveTap_"></paper-icon-button>
2492 </div>
2493
2494 <div id="incognito" i18n-values="title:inIncognito" hidden="[[!data.otr]]" ></div>
2495 </div>
2496
2497 </template>
2498 <style>
2499 /* Copyright 2015 The Chromium Authors. All rights reserved.
2500 * Use of this source code is governed by a BSD-style license that can be
2501 * found in the LICENSE file. */
2502
2503 [is='action-link'] {
2504 cursor: pointer;
2505 display: inline-block;
2506 text-decoration: none;
2507 }
2508
2509 [is='action-link']:hover {
2510 text-decoration: underline;
2511 }
2512
2513 [is='action-link']:active {
2514 color: rgb(5, 37, 119);
2515 text-decoration: underline;
2516 }
2517
2518 [is='action-link'][disabled] {
2519 color: #999;
2520 cursor: default;
2521 pointer-events: none;
2522 text-decoration: none;
2523 }
2524
2525 [is='action-link'].no-outline {
2526 outline: none;
2527 }
2528
2529 </style>
2530 <style>
2531 /* Copyright 2015 The Chromium Authors. All rights reserved.
2532 * Use of this source code is governed by a BSD-style license that can be
2533 * found in the LICENSE file. */
2534
2535 * {
2536 --downloads-item-width: 622px;
2537 }
2538
2539 paper-button {
2540 font-weight: 500;
2541 margin: 0;
2542 min-width: auto;
2543 }
2544
2545 </style>
2546 <style>
2547 /* Copyright 2015 The Chromium Authors. All rights reserved.
2548 * Use of this source code is governed by a BSD-style license that can be
2549 * found in the LICENSE file. */
2550
2551 :host {
2552 display: flex;
2553 flex-direction: column;
2554 }
2555
2556 #date {
2557 color: #7c7c7c;
2558 font-size: 100%;
2559 font-weight: 500;
2560 margin: 24px auto 10px;
2561 width: var(--downloads-item-width);
2562 }
2563
2564 #content {
2565 background: white;
2566 border-radius: 2px;
2567 display: flex;
2568 flex: none;
2569 margin: 6px auto;
2570 min-height: 103px;
2571 position: relative;
2572 width: var(--downloads-item-width);
2573 }
2574
2575 #content.is-active {
2576 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08),
2577 0 3px 1px -2px rgba(0, 0, 0, .2);
2578 }
2579
2580 #content:not(.is-active) {
2581 opacity: .6;
2582 }
2583
2584 #details {
2585 -webkit-border-start: 1px #d8d8d8 solid;
2586 -webkit-padding-end: 16px;
2587 -webkit-padding-start: 24px;
2588 display: flex;
2589 flex: 1;
2590 flex-direction: column;
2591 padding-bottom: 12px;
2592 padding-top: 16px;
2593 }
2594
2595 #content:not(.is-active) #details {
2596 color: #bababa;
2597 }
2598
2599 #content:not(.is-active) #name {
2600 text-decoration: line-through;
2601 }
2602
2603 .icon-wrapper {
2604 align-self: center;
2605 flex: none;
2606 justify-content: center;
2607 margin: 0 24px;
2608 }
2609
2610 .icon {
2611 height: 32px;
2612 width: 32px;
2613 }
2614
2615 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
2616 /* TODO(dbeam): animate from top-aligned to centered when items finish? */
2617 align-self: flex-start;
2618 padding-top: 16px;
2619 }
2620
2621 #content:not(.is-active) .icon {
2622 -webkit-filter: grayscale(100%);
2623 opacity: .5;
2624 }
2625
2626 #danger-icon {
2627 height: 32px;
2628 width: 32px;
2629 }
2630
2631 #danger-icon[icon='warning'] {
2632 color: rgb(255, 193, 7);
2633 }
2634
2635 #danger-icon[icon='remove-circle'] {
2636 color: rgb(244, 67, 54);
2637 }
2638
2639 #name,
2640 #file-link,
2641 #url {
2642 max-width: 100%;
2643 }
2644
2645 #name,
2646 #file-link {
2647 font-weight: 500;
2648 word-break: break-all;
2649 }
2650
2651 #name {
2652 -webkit-margin-end: 12px; /* Only really affects #tag. */
2653 }
2654
2655 .is-active :-webkit-any(#name, #file-link, #pause, #resume, #show) {
2656 color: rgb(51, 103, 214);
2657 }
2658
2659 #tag {
2660 color: #5a5a5a;
2661 font-weight: 500;
2662 }
2663
2664 #url {
2665 color: inherit;
2666 margin-top: 6px;
2667 overflow: hidden;
2668 text-decoration: none;
2669 text-overflow: ellipsis;
2670 white-space: nowrap;
2671 }
2672
2673 .is-active #url {
2674 color: #969696;
2675 }
2676
2677 #progress,
2678 #description:not(:empty),
2679 .controls {
2680 margin-top: 16px;
2681 }
2682
2683 .is-active #description {
2684 color: #616161;
2685 }
2686
2687 .dangerous #description {
2688 color: rgb(239, 108, 0);
2689 }
2690
2691 #progress {
2692 --paper-progress-active-color: rgb(54, 126, 237);
2693 --paper-progress-container-color: rgb(223, 222, 223);
2694 width: auto;
2695 }
2696
2697 .controls {
2698 -webkit-margin-start: -.57em;
2699 }
2700
2701 #cancel,
2702 #retry,
2703 .keep,
2704 .discard {
2705 color: #5a5a5a;
2706 }
2707
2708 #show {
2709 margin: .7em .57em;
2710 }
2711
2712 #controlled-by {
2713 -webkit-margin-start: 8px;
2714 }
2715
2716 #controlled-by,
2717 #controlled-by a {
2718 color: #5a5a5a;
2719 }
2720
2721 .is-active #controlled-by {
2722 color: #333;
2723 }
2724
2725 .is-active #controlled-by a {
2726 color: rgb(51, 103, 214);
2727 }
2728
2729 #remove-wrapper {
2730 align-self: flex-start;
2731 margin: 0;
2732 }
2733
2734 #remove {
2735 --iron-icon-height: 16px;
2736 --iron-icon-width: 16px;
2737 --layout-inline: {
2738 /* HACK(dbeam): we probably shouldn't be overriding Polymer like this. */
2739 };
2740 color: #969696;
2741 height: 16px;
2742 padding: 8px;
2743 width: 16px;
2744 }
2745
2746 #incognito {
2747 bottom: 20px;
2748 content: -webkit-image-set(
2749 url("chrome://downloads/1x/incognito_marker.png") 1x,
2750 url("chrome://downloads/2x/incognito_marker.png") 2x);
2751 position: absolute;
2752 right: 10px;
2753 }
2754
2755 </style>
2756 </dom-module>
2730 <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/ v1_0/paper-item/"> 2757 <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/ v1_0/paper-item/">
2731 <template> 2758 <template>
2732 <style> 2759 <style>
2733 :host { 2760 :host {
2734 display: block; 2761 display: block;
2735 min-height: var(--paper-item-min-height, 48px); 2762 min-height: var(--paper-item-min-height, 48px);
2736 padding: 0px 16px; 2763 padding: 0px 16px;
2737 } 2764 }
2738 2765
2739 :host > ::content > *:not(:first-child):not(:last-child) { 2766 :host > ::content > *:not(:first-child):not(:last-child) {
(...skipping 180 matching lines...) Expand 10 before | Expand all | Expand 10 after
2920 <content select=".dropdown-trigger"></content> 2947 <content select=".dropdown-trigger"></content>
2921 </div> 2948 </div>
2922 <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizon talAlign]]" vertical-align="[[verticalAlign]]" horizontal-offset="[[horizontalOf fset]]" vertical-offset="[[verticalOffset]]" open-animation-config="[[openAnimat ionConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[ noAnimations]]" focus-target="[[_dropdownContent]]"> 2949 <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizon talAlign]]" vertical-align="[[verticalAlign]]" horizontal-offset="[[horizontalOf fset]]" vertical-offset="[[verticalOffset]]" open-animation-config="[[openAnimat ionConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[ noAnimations]]" focus-target="[[_dropdownContent]]">
2923 <paper-material class="dropdown-content"> 2950 <paper-material class="dropdown-content">
2924 <content id="content" select=".dropdown-content"></content> 2951 <content id="content" select=".dropdown-content"></content>
2925 </paper-material> 2952 </paper-material>
2926 </iron-dropdown> 2953 </iron-dropdown>
2927 </template> 2954 </template>
2928 </dom-module> 2955 </dom-module>
2929 <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/pa per-icon-button/"> 2956 <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/pa per-icon-button/">
2930 <style> 2957 <template strip-whitespace="">
2958 <style>
2959 :host {
2960 display: inline-block;
2961 position: relative;
2962 padding: 8px;
2963 outline: none;
2964 -webkit-tap-highlight-color: rgba(0,0,0,0);
2965 -webkit-user-select: none;
2966 -moz-user-select: none;
2967 -ms-user-select: none;
2968 user-select: none;
2969 cursor: pointer;
2970 z-index: 0;
2931 2971
2932 :host { 2972 width: 24px;
2933 display: inline-block; 2973 @apply(--paper-icon-button);
2934 position: relative; 2974 }
2935 padding: 8px;
2936 outline: none;
2937 -webkit-tap-highlight-color: rgba(0,0,0,0);
2938 -webkit-user-select: none;
2939 -moz-user-select: none;
2940 -ms-user-select: none;
2941 user-select: none;
2942 cursor: pointer;
2943 z-index: 0;
2944 2975
2945 @apply(--paper-icon-button); 2976 :host #ink {
2946 } 2977 color: var(--paper-icon-button-ink-color, --primary-text-color);
2978 opacity: 0.6;
2979 }
2947 2980
2948 :host #ink { 2981 :host([disabled]) {
2949 color: var(--paper-icon-button-ink-color, --primary-text-color); 2982 color: var(--paper-icon-button-disabled-text, --disabled-text-color);
2950 opacity: 0.6; 2983 pointer-events: none;
2951 } 2984 cursor: auto;
2985 @apply(--paper-icon-button-disabled);
2986 }
2952 2987
2953 :host([disabled]) { 2988 iron-icon {
2954 color: var(--paper-icon-button-disabled-text, --disabled-text-color); 2989 --iron-icon-width: 100%;
2955 pointer-events: none; 2990 --iron-icon-height: 100%;
2956 cursor: auto; 2991 }
2957 @apply(--paper-icon-button-disabled); 2992 </style>
2958 }
2959 </style>
2960 <template>
2961 <paper-ripple id="ink" class="circle" center=""></paper-ripple>
2962 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico n> 2993 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico n>
2963 </template> 2994 </template>
2964 </dom-module> 2995
2996 </dom-module>
2965 <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_ 0/paper-input/"> 2997 <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_ 0/paper-input/">
2966 <template> 2998 <template>
2967 2999
2968 <style> 3000 <style>
2969 :host { 3001 :host {
2970 display: block; 3002 display: block;
2971 padding: 8px 0; 3003 padding: 8px 0;
2972 3004
2973 @apply(--paper-input-container); 3005 @apply(--paper-input-container);
2974 } 3006 }
(...skipping 331 matching lines...) Expand 10 before | Expand all | Expand 10 after
3306 margin-bottom: 0; 3338 margin-bottom: 0;
3307 margin-top: 0; 3339 margin-top: 0;
3308 } 3340 }
3309 3341
3310 #actions { 3342 #actions {
3311 display: flex; 3343 display: flex;
3312 flex: none; 3344 flex: none;
3313 width: var(--downloads-item-width); 3345 width: var(--downloads-item-width);
3314 } 3346 }
3315 3347
3348 :host-context(.loading) #actions {
3349 visibility: hidden;
3350 }
3351
3316 :host(:not([downloads-showing])) #actions { 3352 :host(:not([downloads-showing])) #actions {
3317 justify-content: center; 3353 justify-content: center;
3318 } 3354 }
3319 3355
3320 #actions paper-button:first-of-type { 3356 #actions paper-button:first-of-type {
3321 -webkit-margin-start: -0.57em; /* Matches paper-button padding. */ 3357 -webkit-margin-start: -0.57em; /* Matches paper-button padding. */
3322 } 3358 }
3323 3359
3324 #actions paper-button:not(:last-of-type) { 3360 #actions paper-button:not(:last-of-type) {
3325 -webkit-margin-end: 8px; /* Margin between items. */ 3361 -webkit-margin-end: 8px; /* Margin between items. */
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
3393 display: none; 3429 display: none;
3394 } 3430 }
3395 } 3431 }
3396 3432
3397 </style> 3433 </style>
3398 </dom-module> 3434 </dom-module>
3399 <dom-module id="downloads-manager" assetpath="chrome://downloads/"> 3435 <dom-module id="downloads-manager" assetpath="chrome://downloads/">
3400 <template> 3436 <template>
3401 <paper-header-panel id="panel" class="loading"> 3437 <paper-header-panel id="panel" class="loading">
3402 <downloads-toolbar class="paper-header" id="toolbar"></downloads-toolbar> 3438 <downloads-toolbar class="paper-header" id="toolbar"></downloads-toolbar>
3403 <div id="downloads-list" hidden$="[[!hasDownloads_]]"></div> 3439 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_ ]]">
3404 <div id="no-downloads" hidden$="[[hasDownloads_]]"> 3440 <template>
3441 <downloads-item data="[[item.item]]" hide-date="[[item.hideDate]]">
3442 </downloads-item>
3443 </template>
3444 </iron-list>
3445 <div id="no-downloads" hidden="[[hasDownloads_]]">
3405 <div> 3446 <div>
3406 <div class="illustration"></div> 3447 <div class="illustration"></div>
3407 <span></span> 3448 <span></span>
3408 </div> 3449 </div>
3409 </div> 3450 </div>
3410 </paper-header-panel> 3451 </paper-header-panel>
3411 </template> 3452 </template>
3412 <style> 3453 <style>
3413 /* Copyright 2015 The Chromium Authors. All rights reserved. 3454 /* Copyright 2015 The Chromium Authors. All rights reserved.
3414 * Use of this source code is governed by a BSD-style license that can be 3455 * Use of this source code is governed by a BSD-style license that can be
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after
3485 </div> 3526 </div>
3486 <downloads-manager></downloads-manager> 3527 <downloads-manager></downloads-manager>
3487 <command id="clear-all-command" shortcut="Alt-U+0043"></command> 3528 <command id="clear-all-command" shortcut="Alt-U+0043"></command>
3488 <if expr="is_macosx"> 3529 <if expr="is_macosx">
3489 <command id="undo-command" shortcut="Meta-U+005A"></command> 3530 <command id="undo-command" shortcut="Meta-U+005A"></command>
3490 </if> 3531 </if>
3491 <if expr="not is_macosx"> 3532 <if expr="not is_macosx">
3492 <command id="undo-command" shortcut="Ctrl-U+005A"></command> 3533 <command id="undo-command" shortcut="Ctrl-U+005A"></command>
3493 </if> 3534 </if>
3494 <script src="crisper.js"></script></body></html> 3535 <script src="crisper.js"></script></body></html>
OLDNEW
« chrome/browser/resources/md_downloads/manager.js ('K') | « chrome/browser/resources/md_downloads/manager.js ('k') | chrome/browser/ui/webui/downloads_dom_handler.cc » ('j') | chrome/browser/ui/webui/downloads_dom_handler.cc » ('J')

Powered by Google App Engine
This is Rietveld 408576698