OLD | NEW |
1 <link rel="import" href="chrome://resources/html/assert.html"> | 1 <link rel="import" href="chrome://resources/html/assert.html"> |
2 <link rel="import" href="chrome://resources/html/cr.html"> | 2 <link rel="import" href="chrome://resources/html/cr.html"> |
3 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> | 3 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
4 <link rel="import" href="chrome://resources/html/load_time_data.html"> | 4 <link rel="import" href="chrome://resources/html/load_time_data.html"> |
5 <link rel="import" href="chrome://resources/html/polymer.html"> | 5 <link rel="import" href="chrome://resources/html/polymer.html"> |
6 <link rel="import" href="chrome://extensions/icons.html"> | 6 <link rel="import" href="chrome://extensions/icons.html"> |
7 <link rel="import" href="chrome://extensions/item_source.html"> | 7 <link rel="import" href="chrome://extensions/item_source.html"> |
8 <link rel="import" href="chrome://extensions/strings.html"> | 8 <link rel="import" href="chrome://extensions/strings.html"> |
9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> |
10 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communicatio
n-icons.html"> | 10 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communicatio
n-icons.html"> |
(...skipping 13 matching lines...) Expand all Loading... |
24 align-self: flex-start; | 24 align-self: flex-start; |
25 display: flex; | 25 display: flex; |
26 padding: 6px; | 26 padding: 6px; |
27 } | 27 } |
28 | 28 |
29 #icon { | 29 #icon { |
30 height: 36px; | 30 height: 36px; |
31 width: 36px; | 31 width: 36px; |
32 } | 32 } |
33 | 33 |
34 #card, | 34 #card { |
35 #card-wrapper { | 35 @apply(--shadow-elevation-2dp); |
36 min-height: 154px; | 36 background: white; |
| 37 display: flex; |
| 38 flex-direction: column; |
| 39 font-size: 13px; |
| 40 height: 160px; |
37 width: 400px; | 41 width: 400px; |
38 } | 42 } |
39 | 43 |
40 #card-wrapper { | 44 #card.dev-mode { |
41 @apply(--shadow-elevation-2dp); | 45 height: 208px; |
42 background: white; | |
43 } | |
44 | |
45 #card { | |
46 display: flex; | |
47 flex-direction: column; | |
48 font-size: 13px; | |
49 } | 46 } |
50 | 47 |
51 #card.disabled { | 48 #card.disabled { |
52 opacity: 0.6; | 49 opacity: 0.6; |
53 } | 50 } |
54 | 51 |
55 #main { | 52 #main { |
56 display: flex; | 53 display: flex; |
57 flex-grow: 1; | 54 flex-grow: 1; |
58 padding: 16px; | 55 padding: 16px 20px 17px; |
59 } | 56 } |
60 | 57 |
61 #content { | 58 #content { |
62 -webkit-margin-start: 24px; | 59 -webkit-margin-start: 24px; |
| 60 display: flex; |
| 61 flex-direction: column; |
63 width: 100%; | 62 width: 100%; |
64 } | 63 } |
65 | 64 |
66 #name-and-version { | 65 #name-and-version { |
| 66 line-height: 15px; |
67 margin-bottom: 4px; | 67 margin-bottom: 4px; |
68 } | 68 } |
69 | 69 |
70 #name { | 70 #name { |
71 -webkit-margin-end: 8px; | 71 -webkit-margin-end: 8px; |
72 color: var(--paper-grey-800); | 72 color: #333; |
73 } | 73 } |
74 | 74 |
75 #description { | 75 #description, |
| 76 #warnings { |
| 77 flex-grow: 1; |
76 margin-bottom: 8px; | 78 margin-bottom: 8px; |
77 } | 79 } |
78 | 80 |
| 81 #description, |
79 #version, | 82 #version, |
80 #extension-id, | 83 #extension-id, |
81 #inspect-views, | 84 #inspect-views, |
82 #button-strip { | 85 #button-strip { |
83 color: var(--paper-grey-600); | 86 color: var(--paper-grey-600); |
84 } | 87 } |
85 | 88 |
86 #description, | 89 #description, |
87 #extension-id, | 90 #extension-id, |
88 #inspect-views { | 91 #inspect-views { |
89 line-height: 20px; | 92 line-height: 20px; |
90 } | 93 } |
91 | 94 |
92 #inspect-views paper-button { | 95 #inspect-views paper-button { |
93 color: var(--google-blue-700); | 96 color: var(--google-blue-700); |
| 97 height: 20px; |
| 98 padding: 0; |
| 99 text-transform: none; |
94 } | 100 } |
95 | 101 |
96 #button-strip { | 102 #button-strip { |
| 103 -webkit-padding-end: 4px; |
| 104 -webkit-padding-start: 20px; |
97 border-top: 1px solid var(--paper-grey-400); | 105 border-top: 1px solid var(--paper-grey-400); |
| 106 box-sizing: border-box; |
| 107 height: 48px; |
| 108 padding-bottom: 8px; |
| 109 padding-top: 8px; |
98 } | 110 } |
99 | 111 |
100 #source-indicator { | 112 #source-indicator { |
101 align-items: center; | 113 -webkit-margin-start: 30px; |
102 align-self: flex-end; | 114 margin-top: 30px; |
103 border-radius: 0 2px; | |
104 color: var(--paper-grey-800); | |
105 display: flex; | |
106 min-height: 32px; | |
107 padding: 0 8px; | |
108 position: absolute; | 115 position: absolute; |
109 white-space: nowrap; | |
110 } | 116 } |
111 | 117 |
112 #source-indicator iron-icon { | 118 #source-indicator iron-icon { |
113 height: 16px; | 119 height: 22px; |
114 width: 16px; | 120 width: 22px; |
115 } | 121 } |
116 | 122 |
117 #source-indicator span { | 123 #source-indicator-text { |
118 -webkit-margin-end: 8px; | 124 -webkit-margin-start: 11px; /* To align with the center of the icon. */ |
| 125 background: black; |
| 126 border-radius: 2px; |
| 127 color: white; |
119 display: none; | 128 display: none; |
| 129 margin-top: 8px; |
| 130 opacity: 0.6; |
| 131 padding: 8px 12px; |
| 132 position: absolute; |
| 133 transform: translateX(-50%); /* Move back 50% of width so that the |
| 134 text and icon share an x-center. */ |
120 } | 135 } |
121 | 136 |
122 #source-indicator:hover { | 137 #source-indicator:hover #source-indicator-text { |
123 background-color: var(--paper-grey-700); | |
124 color: white; | |
125 } | |
126 | |
127 #source-indicator:hover span { | |
128 display: block; | 138 display: block; |
129 } | 139 } |
130 | 140 |
131 paper-button, | 141 paper-button, |
132 paper-toggle-button { | 142 paper-toggle-button { |
133 cursor: pointer; | 143 cursor: pointer; |
134 } | 144 } |
135 | 145 |
136 #button-strip paper-button { | 146 #button-strip paper-button { |
137 align-items: center; | 147 align-items: center; |
138 display: flex; | 148 display: flex; |
139 margin: 4px; | 149 margin: 0 4px; |
140 min-height: 32px; | 150 min-height: 32px; |
141 padding: 0 12px; | 151 padding: 0 12px; |
142 text-transform: uppercase; | 152 text-transform: uppercase; |
143 } | 153 } |
144 | 154 |
145 #enable-toggle { | 155 .action-button { |
146 -webkit-margin-end: 16px; | 156 color: var(--google-blue-500); |
147 } | 157 } |
148 | 158 |
149 .warning { | 159 #warnings { |
150 align-items: center; | 160 color: var(--google-red-700); |
151 display: flex; | |
152 font-size: 13px; | |
153 justify-content: space-between; | |
154 padding: 12px 16px; | |
155 } | |
156 | |
157 .warning paper-button { | |
158 -webkit-margin-start: 12px; | |
159 align-items: center; | |
160 display: flex; | |
161 text-transform: uppercase; | |
162 } | |
163 | |
164 .severe.warning { | |
165 background-color: var(--paper-red-50); | |
166 color: var(--paper-red-700); | |
167 } | |
168 | |
169 .mild.warning { | |
170 background-color: var(--paper-yellow-50); | |
171 color: var(--paper-grey-600); | |
172 } | 161 } |
173 | 162 |
174 #blacklisted-warning:empty { | 163 #blacklisted-warning:empty { |
175 display: none; | 164 display: none; |
176 } | 165 } |
177 </style> | 166 </style> |
178 <div id="card-wrapper" class$="[[computeClasses_(data.state)]]"> | 167 <div id="card" class$="[[computeClasses_(data.state, inDevMode)]]"> |
179 <div id="card"> | 168 <div id="main"> |
180 <template is="dom-if" | 169 <template is="dom-if" |
181 if="[[computeSourceIndicatorIcon_(data.*)]]"> | 170 if="[[computeSourceIndicatorIcon_(data.*)]]"> |
182 <div id="source-indicator"> | 171 <div id="source-indicator"> |
183 <span>[[computeSourceIndicatorText_(data.*)]]</span> | |
184 <iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]"> | 172 <iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]"> |
185 </iron-icon> | 173 </iron-icon> |
| 174 <div id="source-indicator-text"> |
| 175 [[computeSourceIndicatorText_(data.*)]] |
| 176 </div> |
186 </div> | 177 </div> |
187 </template> | 178 </template> |
188 <div id="main"> | 179 <div id="icon-wrapper"> |
189 <div id="icon-wrapper"> | 180 <img alt="" id="icon" src="[[data.iconUrl]]"> |
190 <img alt="" id="icon" src="[[data.iconUrl]]"> | 181 </div> |
| 182 <div id="content"> |
| 183 <div id="name-and-version" class="layout horizontal center"> |
| 184 <div id="name">[[data.name]]</div> |
| 185 <template is="dom-if" if="[[inDevMode]]"> |
| 186 <span id="version">[[data.version]]</span> |
| 187 </template> |
191 </div> | 188 </div> |
192 <div id="content"> | 189 <div id="description" hidden$="[[hasWarnings_(data.*)]]"> |
193 <div id="name-and-version" class="layout horizontal center"> | 190 [[data.description]] |
194 <div id="name">[[data.name]]</div> | 191 </div> |
195 <template is="dom-if" if="[[inDevMode]]"> | 192 <div id="warnings" hidden$="[[!hasWarnings_(data.*)]]"> |
196 <span id="version">[[data.version]]</span> | 193 <div id="suspicious-warning" |
197 </template> | 194 hidden$="[[!data.disableReasons.suspiciousInstall]]"> |
| 195 $i18n{itemSuspiciousInstall} |
198 </div> | 196 </div> |
199 <div id="description">[[data.description]]</div> | 197 <div id="corrupted-warning" |
200 <template is="dom-if" if="[[inDevMode]]"> | 198 hidden$="[[!data.disableReasons.corruptInstall]]"> |
201 <div id="extension-id">[[data.id]]</div> | 199 $i18n{itemCorruptInstall} |
202 <div id="inspect-views"> | 200 </div> |
203 <span>$i18n{itemInspectViews}</span> | 201 <div id="blacklisted-warning"><!-- No whitespace |
204 <template is="dom-repeat" items="[[data.views]]"> | 202 -->[[data.blacklistText]]<!-- so we can use :empty in css. |
205 <paper-button on-tap="onInspectTap_"> | 203 --></div> |
206 [[computeInspectLabel_(item)]] | 204 </div> |
207 </paper-button> | 205 <template is="dom-if" if="[[inDevMode]]"> |
208 </template> | 206 <div id="extension-id">[[data.id]]</div> |
209 </div> | 207 <template is="dom-if" |
| 208 if="[[!computeInspectViewsHidden_(data.views)]]"> |
| 209 <div id="inspect-views"> |
| 210 <span>$i18n{itemInspectViews}</span> |
| 211 <paper-button on-tap="onInspectTap_"> |
| 212 [[computeFirstInspectLabel_(data.views)]] |
| 213 </paper-button> |
| 214 <paper-button |
| 215 hidden$="[[computeExtraViewsHidden_(data.views)]]" |
| 216 on-tap="onExtraInspectTap_"> |
| 217 [[computeExtraInspectLabel_(data.views)]] |
| 218 </paper-button> |
210 </div> | 219 </div> |
211 </template> | 220 </template> |
212 </div> | 221 </template> |
213 </div> | |
214 <div id="button-strip" class="layout horizontal"> | |
215 <div class="layout flex horizontal center"> | |
216 <paper-button id="details-button" on-tap="onDetailsTap_"> | |
217 $i18n{itemDetails} | |
218 </paper-button> | |
219 <paper-button id="errors-button" on-tap="onErrorsTap_" | |
220 hidden$="[[computeErrorsHidden_(data.*)]]"> | |
221 $i18n{itemErrors} | |
222 </paper-button> | |
223 <paper-button id="remove-button" on-tap="onRemoveTap_"> | |
224 $i18n{itemRemove} | |
225 </paper-button> | |
226 </div> | |
227 <paper-toggle-button id="enable-toggle" | |
228 checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_"> | |
229 </paper-toggle-button> | |
230 </div> | 222 </div> |
231 </div> | 223 </div> |
232 <template is="dom-if" if="[[hasWarnings_(data.*)]]"> | 224 <div id="button-strip" class="layout horizontal"> |
233 <div id="suspicious-warning" class="warning mild" | 225 <div class="layout flex horizontal center"> |
234 hidden$="[[!data.disableReasons.suspiciousInstall]]"> | 226 <paper-button id="details-button" on-tap="onDetailsTap_"> |
235 $i18n{itemSuspiciousInstall} | 227 $i18n{itemDetails} |
236 </div> | 228 </paper-button> |
237 <div id="corrupted-warning" class="warning severe" | 229 <paper-button id="remove-button" on-tap="onRemoveTap_"> |
238 hidden$="[[!data.disableReasons.corruptInstall]]"> | 230 $i18n{itemRemove} |
239 <span>$i18n{itemCorruptInstall}</span> | 231 </paper-button> |
240 <paper-button id="repair-button" on-tap="onRepairTap_"> | 232 <paper-button id="errors-button" on-tap="onErrorsTap_" |
241 $i18n{itemRepair} | 233 hidden$="[[computeErrorsHidden_(data.*)]]"> |
| 234 $i18n{itemErrors} |
242 </paper-button> | 235 </paper-button> |
243 </div> | 236 </div> |
244 <div id="blacklisted-warning" class="warning severe"><!-- No whitespace | 237 <paper-button id="repair-button" class="action-button" |
245 -->[[data.blacklistText]]<!-- ... so we can use :empty in css | 238 on-tap="onRepairTap_" |
246 --></div> | 239 hidden$="[[!data.disableReasons.corruptInstall]]"> |
247 </template> | 240 $i18n{itemRepair} |
| 241 </paper-button> |
| 242 <paper-button id="reload-button" on-tap="onReloadTap_" |
| 243 class="action-button" |
| 244 hidden$="[[!isTerminated_(data.state)]]"> |
| 245 $i18n{itemReload} |
| 246 </paper-button> |
| 247 <paper-toggle-button id="enable-toggle" class="action-button" |
| 248 checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_" |
| 249 hidden$="[[!showEnableToggle_(data.*)]]"> |
| 250 </paper-toggle-button> |
| 251 </div> |
248 </div> | 252 </div> |
249 </template> | 253 </template> |
250 <script src="chrome://extensions/item.js"></script> | 254 <script src="chrome://extensions/item.js"></script> |
251 </dom-module> | 255 </dom-module> |
OLD | NEW |