OLD | NEW |
---|---|
1 <link rel="import" href="chrome://resources/html/cr.html"> | 1 <link rel="import" href="chrome://resources/html/cr.html"> |
2 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> | |
2 <link rel="import" href="chrome://resources/html/polymer.html"> | 3 <link rel="import" href="chrome://resources/html/polymer.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f lex-layout-classes.html"> | 4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f lex-layout-classes.html"> |
4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> |
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-ch eckbox.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button-light.html"> |
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> | 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> |
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> | 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> |
8 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-ani matable-behavior.html"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-ani matable-behavior.html"> |
9 <link rel="import" href="chrome://extensions/animation_helper.html"> | 10 <link rel="import" href="chrome://extensions/animation_helper.html"> |
10 <link rel="import" href="chrome://extensions/item_source.html"> | 11 <link rel="import" href="chrome://extensions/item_util.html"> |
11 | 12 |
12 <dom-module id="extensions-detail-view"> | 13 <dom-module id="extensions-detail-view"> |
13 <style include="iron-flex"></style> | 14 <style include="iron-flex"></style> |
14 <template> | 15 <template> |
15 <style> | 16 <style> |
16 [hidden] { | 17 [hidden] { |
17 display: none !important; | 18 display: none !important; |
18 } | 19 } |
19 | 20 |
20 #main { | 21 #main { |
21 background-color: white; | 22 background-color: white; |
22 height: 800px; | 23 height: 800px; |
23 width: 90%; | 24 width: 90%; |
24 } | 25 } |
25 | 26 |
26 #top-bar { | 27 #top-bar { |
27 align-items: center; | 28 align-items: center; |
28 color: var(--paper-grey-600); | 29 color: #5a5a5a; |
29 display: flex; | 30 display: flex; |
31 font-size: 14px; | |
30 height: 40px; | 32 height: 40px; |
31 margin-bottom: 30px; | 33 margin-bottom: 12px; |
32 padding: 8px 12px 0; | 34 padding: 8px 12px 0; |
33 } | 35 } |
34 | 36 |
37 #icon { | |
38 -webkit-margin-end: 8px; | |
39 -webkit-margin-start: 20px; | |
40 height: 24px; | |
41 width: 24px; | |
42 } | |
43 | |
35 a paper-icon-button { | 44 a paper-icon-button { |
36 color: var(--paper-grey-600); | 45 color: var(--paper-grey-600); |
37 } | 46 } |
38 | 47 |
39 #name { | 48 #name { |
40 flex-grow: 1; | 49 flex-grow: 1; |
41 } | 50 } |
42 | 51 |
52 .control-line { | |
53 align-items: center; | |
54 display: flex; | |
55 justify-content: space-between; | |
56 } | |
57 | |
58 .control-line span { | |
59 color: #333; | |
60 } | |
61 | |
62 #enable-section { | |
63 height: 48px; | |
64 margin-bottom: 8px; | |
65 padding: 0 20px; | |
66 } | |
67 | |
43 .section { | 68 .section { |
44 border-bottom: 1px solid var(--paper-grey-400); | 69 border-bottom: 1px solid var(--paper-grey-400); |
45 padding: 12px 20px; | 70 font-size: 13px; |
71 padding: 16px 20px; | |
46 } | 72 } |
47 | 73 |
48 .section:last-child { | 74 .section:last-child { |
49 border: none; | 75 border: none; |
50 } | 76 } |
51 | 77 |
52 .section-title { | 78 .section-title { |
53 color: var(--paper-grey-800); | 79 color: #333; |
80 margin-bottom: 12px; | |
54 } | 81 } |
55 | 82 |
56 .section-content { | 83 .section-content { |
57 color: var(--paper-grey-600); | 84 color: #646464; |
58 } | 85 } |
59 | 86 |
60 .section paper-checkbox { | 87 #options-section { |
61 align-items: center; | 88 padding: 7px 20px; |
62 display: flex; | |
63 min-height: 40px; | |
64 } | 89 } |
65 | 90 |
66 paper-checkbox { | 91 #options-section .control-line { |
67 --paper-checkbox-checked-color: var(--google-blue-500); | 92 height: 52px; |
68 --primary-text-color: var(--paper-grey-800); | 93 } |
94 | |
95 .actionable { | |
96 cursor: pointer; | |
97 } | |
98 | |
99 .inspectable-view { | |
100 color: var(--google-blue-700); | |
101 height: 20px; | |
102 width: auto; /* override the default button size of 24x24 */ | |
69 } | 103 } |
70 | 104 |
71 ul { | 105 ul { |
72 -webkit-padding-start: 20px; | 106 -webkit-padding-start: 20px; |
73 margin: 0; | 107 margin: 0; |
74 } | 108 } |
109 | |
110 button[is='paper-icon-button-light'].action-arrow { | |
111 background-image: url(chrome://resources/images/arrow_right.svg); | |
112 } | |
113 | |
114 button[is='paper-icon-button-light'].open-in-new { | |
115 background-image: url(chrome://resources/images/open_in_new.svg); | |
116 background-size: contain; | |
117 height: 20px; | |
118 width: 20px; | |
119 } | |
75 </style> | 120 </style> |
76 <div id="main"> | 121 <div id="main"> |
77 <div id="top-bar"> | 122 <div id="top-bar"> |
78 <paper-icon-button id="close-button" icon="arrow-back" | 123 <paper-icon-button id="close-button" icon="arrow-back" |
79 on-tap="onCloseButtonTap_"></paper-icon-button> | 124 on-tap="onCloseButtonTap_"></paper-icon-button> |
125 <img alt="icon" id="icon" src="[[data.iconUrl]]"> | |
michaelpg
2017/03/06 19:08:46
alt should be localized or ignored (alt="" makes s
Devlin
2017/03/06 20:12:12
Whoops, meant to be alt="". Done.
| |
80 <span id="name">[[data.name]]</span> | 126 <span id="name">[[data.name]]</span> |
81 <a id="open-homepage" href="[[data.homePage.url]]" tabindex="-1" | 127 </div> |
82 target="_blank" hidden$="[[!shouldShowHomepageButton_(data.*)]]"> | 128 <div class="control-line" id="enable-section"> |
83 <paper-icon-button icon="open-in-new"></paper-icon-button> | 129 <span>[[computeEnabledText_(data.*)]]</span> |
84 </a> | 130 <paper-toggle-button id="enable-toggle" |
85 <paper-icon-button id="options" icon="settings" | 131 checked="[[isEnabled_(data.state)]]" |
86 on-tap="onOptionsButtonTap_" | 132 on-change="onEnableChange_" |
87 hidden$="[[!shouldShowOptionsButton_(data.*)]]"> | 133 enabled="[[isEnableToggleEnabled_(data)]]"> |
88 </paper-icon-button> | 134 </paper-toggle-button> |
89 </div> | 135 </div> |
90 <div class="section"> | 136 <div class="section"> |
91 <div class="section-title">$i18n{itemDescriptionLabel}</div> | 137 <div class="section-title">$i18n{itemDescriptionLabel}</div> |
92 <div class="section-content">[[data.description]]</div> | 138 <div class="section-content">[[data.description]]</div> |
93 </div> | 139 </div> |
94 <div class="section"> | 140 <div class="section"> |
95 <div class="section-title">$i18n{itemVersion}</div> | 141 <div class="section-title">$i18n{itemVersion}</div> |
96 <div class="section-content">[[data.version]]</div> | 142 <div class="section-content">[[data.version]]</div> |
97 </div> | 143 </div> |
144 <div class="section" hidden$="[[!inDevMode]]" id="id-section"> | |
145 <div class="section-title">$i18n{itemIdHeading}</div> | |
146 <div class="section-content">[[data.id]]</div> | |
147 </div> | |
148 <div class="section" hidden$="[[!inDevMode]]" id="inspectable-views"> | |
149 <div class="section-title">$i18n{itemInspectViews}</div> | |
150 <div class="section-content"> | |
151 <ul id="inspect-views"> | |
152 <template is="dom-repeat" items="[[data.views]]"> | |
153 <li> | |
154 <button class="inspectable-view" on-tap="onInspectTap_" | |
155 is="paper-icon-button-light"> | |
156 [[computeInspectLabel_(item)]] | |
157 </button> | |
158 </li> | |
159 </template> | |
160 </ul> | |
161 </div> | |
162 </div> | |
98 <div class="section"> | 163 <div class="section"> |
99 <div class="section-title">$i18n{itemPermissions}</div> | 164 <div class="section-title">$i18n{itemPermissions}</div> |
100 <div class="section-content"> | 165 <div class="section-content"> |
101 <span id="no-permissions" | 166 <span id="no-permissions" |
102 hidden$="[[hasPermissions_(data.permissions.splices)]]"> | 167 hidden$="[[hasPermissions_(data.permissions.splices)]]"> |
103 $i18n{itemPermissionsEmpty} | 168 $i18n{itemPermissionsEmpty} |
104 </span> | 169 </span> |
105 <ul id="permissions-list" | 170 <ul id="permissions-list" |
106 hidden$="[[!hasPermissions_(data.permissions.splices)]]"> | 171 hidden$="[[!hasPermissions_(data.permissions.splices)]]"> |
107 <template is="dom-repeat" items="[[data.permissions]]"> | 172 <template is="dom-repeat" items="[[data.permissions]]"> |
108 <li>[[item]]</li> | 173 <li>[[item]]</li> |
109 </template> | 174 </template> |
110 </ul> | 175 </ul> |
111 </div> | 176 </div> |
112 </div> | 177 </div> |
113 <template is="dom-if" | 178 <template is="dom-if" |
114 if="[[hasDependentExtensions_(data.dependentExtensions.splices)]]"> | 179 if="[[hasDependentExtensions_(data.dependentExtensions.splices)]]"> |
115 <div class="section"> | 180 <div class="section"> |
116 <div class="section-title">$i18n{itemDependencies}</div> | 181 <div class="section-title">$i18n{itemDependencies}</div> |
117 <div class="section-content"> | 182 <div class="section-content"> |
118 <ul id="dependent-extensions-list"> | 183 <ul id="dependent-extensions-list"> |
119 <template is="dom-repeat" items="[[data.dependentExtensions]]"> | 184 <template is="dom-repeat" items="[[data.dependentExtensions]]"> |
120 <li>[[computeDependentEntry_(item)]]</li> | 185 <li>[[computeDependentEntry_(item)]]</li> |
121 </template> | 186 </template> |
122 </ul> | 187 </ul> |
123 </div> | 188 </div> |
124 </div> | 189 </div> |
125 </template> | 190 </template> |
126 <template is="dom-if" if="[[shouldShowOptionsSection_(data.*)]]"> | 191 <template is="dom-if" if="[[shouldShowOptionsSection_(data.*)]]"> |
127 <div class="section layout vertical"> | 192 <div class="section layout vertical" id="options-section"> |
128 <template is="dom-if" if="[[data.incognitoAccess.isEnabled]]"> | 193 <template is="dom-if" if="[[data.incognitoAccess.isEnabled]]"> |
129 <paper-checkbox id="allow-incognito" class="checkbox" | 194 <div class="control-line"> |
130 checked="[[data.incognitoAccess.isActive]]" | 195 <span>$i18n{itemAllowIncognito}</span> |
131 on-change="onAllowIncognitoChange_"> | 196 <paper-toggle-button id="allow-incognito" |
132 $i18n{itemAllowIncognito} | 197 checked="[[data.incognitoAccess.isActive]]" |
133 </paper-checkbox> | 198 on-change="onAllowIncognitoChange_"></paper-toggle-button> |
199 </div> | |
134 </template> | 200 </template> |
135 <template is="dom-if" if="[[data.fileAccess.isEnabled]]"> | 201 <template is="dom-if" if="[[data.fileAccess.isEnabled]]"> |
136 <paper-checkbox id="allow-on-file-urls" class="checkbox" | 202 <div class="control-line"> |
137 checked="[[data.fileAccess.isActive]]" | 203 <span>$i18n{itemAllowOnFileUrls}</span> |
138 on-change="onAllowOnFileUrlsChange_"> | 204 <paper-toggle-button id="allow-on-file-urls" |
139 $i18n{itemAllowOnFileUrls} | 205 checked="[[data.fileAccess.isActive]]" |
140 </paper-checkbox> | 206 on-change="onAllowOnFileUrlsChange_"></paper-toggle-button> |
207 </div> | |
141 </template> | 208 </template> |
142 <template is="dom-if" if="[[data.runOnAllUrls.isEnabled]]"> | 209 <template is="dom-if" if="[[data.runOnAllUrls.isEnabled]]"> |
143 <paper-checkbox id="allow-on-all-sites" class="checkbox" | 210 <div class="control-line"> |
144 checked="[[data.runOnAllUrls.isActive]]" | 211 <span>$i18n{itemAllowOnAllSites}</span> |
145 on-change="onAllowOnAllSitesChange_"> | 212 <paper-toggle-button id="allow-on-all-sites" |
146 $i18n{itemAllowOnAllSites} | 213 checked="[[data.runOnAllUrls.isActive]]" |
147 </paper-checkbox> | 214 on-change="onAllowOnAllSitesChange_"></paper-toggle-button> |
215 </div> | |
148 </template> | 216 </template> |
149 <template is="dom-if" if="[[data.errorCollection.isEnabled]]"> | 217 <template is="dom-if" if="[[data.errorCollection.isEnabled]]"> |
150 <paper-checkbox id="collect-errors" class="checkbox" | 218 <div class="control-line"> |
151 checked="[[data.errorCollection.isActive]]" | 219 <span>$i18n{itemCollectErrors}</span> |
152 on-change="onCollectErrorsChange_"> | 220 <paper-toggle-button id="collect-errors" |
153 $i18n{itemCollectErrors} | 221 checked="[[data.errorCollection.isActive]]" |
154 </paper-checkbox> | 222 on-change="onCollectErrorsChange_"></paper-toggle-button> |
223 </div> | |
155 </template> | 224 </template> |
156 </div> | 225 </div> |
157 </template> | 226 </template> |
227 <div class="section" | |
228 hidden$="[[!shouldShowExtensionsOptionsSection_(data.*)]]"> | |
michaelpg
2017/03/06 19:08:46
nit: maybe shouldShowOptionsLink_, to disambiguate
Devlin
2017/03/06 20:12:12
I like it, done.
| |
229 <div class="control-line actionable" id="extensions-options" | |
230 on-tap="onOptionsTap_"> | |
231 <span>$i18n{itemOptions}</span> | |
232 <button class="open-in-new" is="paper-icon-button-light"></button> | |
233 </div> | |
234 </div> | |
235 <div class="section"> | |
236 <div class="control-line actionable" on-tap="onRemoveTap_" | |
237 id="remove-extension"> | |
michaelpg
2017/03/06 19:08:46
general, optional nit: id, class and is tend to go
Devlin
2017/03/06 20:12:12
Fair enough; done.
| |
238 <span>$i18n{itemRemoveExtension}</span> | |
239 <button class="action-arrow" is="paper-icon-button-light"></button> | |
240 </div> | |
241 </div> | |
158 <div class="section"> | 242 <div class="section"> |
159 <div class="section-title">$i18n{itemSource}</div> | 243 <div class="section-title">$i18n{itemSource}</div> |
160 <div class="section-content"> | 244 <div class="section-content"> |
161 [[computeSourceString_(data.*)]] | 245 [[computeSourceString_(data.*)]] |
162 </div> | 246 </div> |
163 </div> | 247 </div> |
164 </div> | 248 </div> |
165 </template> | 249 </template> |
166 <script src="chrome://extensions/detail_view.js"></script> | 250 <script src="chrome://extensions/detail_view.js"></script> |
167 </dom-module> | 251 </dom-module> |
OLD | NEW |