| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/action_link.html"> |
| <link rel="import" href="chrome://resources/html/action_link_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="item_behavior.html"> |
| <link rel="import" href="item_util.html"> |
| <link rel="import" href="navigation_helper.html"> |
| <link rel="import" href="runtime_host_permissions.html"> |
| <link rel="import" href="strings.html"> |
| <link rel="import" href="toggle_row.html"> |
| |
| <dom-module id="extensions-detail-view"> |
| <template> |
| <style include="iron-flex cr-shared-style cr-icons action-link paper-button-style"> |
| :host { |
| --iron-icon-fill-color: var(--google-grey-refresh-700); |
| display: block; |
| height: 100%; |
| } |
| |
| #enable-section { |
| margin-bottom: 8px; |
| } |
| |
| #enable-section cr-tooltip-icon { |
| margin-inline-end: 20px; |
| } |
| |
| #enable-section span { |
| color: var(--cr-secondary-text-color); |
| font-weight: 500; |
| } |
| |
| #enable-section .enabled-text { |
| color: var(--google-blue-500); |
| } |
| |
| #container { |
| height: 100%; |
| overflow: overlay; |
| } |
| |
| #main { |
| @apply --cr-card-elevation; |
| background-color: white; |
| margin: auto; |
| min-height: 100%; |
| padding-bottom: 64px; |
| width: var(--cr-toolbar-field-width); |
| } |
| |
| #top-bar { |
| align-items: center; |
| display: flex; |
| height: 40px; |
| margin-bottom: 12px; |
| padding: 8px 12px 0; |
| } |
| |
| #icon { |
| height: 24px; |
| margin-inline-end: 12px; |
| margin-inline-start: 16px; |
| width: 24px; |
| } |
| |
| #name { |
| flex-grow: 1; |
| @apply --cr-title-text; |
| } |
| |
| #learn-more-link { |
| color: var(--google-blue-700); |
| text-decoration: none; |
| } |
| |
| .three-line { |
| min-height: var(--cr-section-three-line-min-height); |
| } |
| |
| .section { |
| @apply --cr-section; |
| } |
| |
| .section.block { |
| display: block; |
| padding-bottom: 16px; |
| padding-top: 16px; |
| } |
| |
| .section.continuation { |
| border-top: none; |
| } |
| |
| .section.control-line { |
| justify-content: space-between; |
| } |
| |
| .section:first-child { |
| border: none; |
| } |
| |
| .section-title { |
| margin-bottom: 12px; |
| } |
| |
| .section-content { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| .actionable { |
| cursor: pointer; |
| } |
| |
| .inspectable-view { |
| color: var(--google-blue-700); |
| height: 20px; |
| width: auto; /* override the default button size of 24x24 */ |
| } |
| |
| .warning .action-button { |
| background: white; |
| color: var(--google-blue-500); |
| } |
| |
| #reload-button { |
| color: var(--google-blue-500); |
| } |
| |
| .warning span { |
| color: var(--google-red-700); |
| flex: 1; |
| } |
| |
| .warning-icon { |
| --iron-icon-fill-color: var(--google-red-700); |
| flex-shrink: 0; |
| height: 18px; |
| margin-inline-end: 8px; |
| width: 18px; |
| } |
| |
| ul { |
| margin: 0; |
| padding-inline-start: 20px; |
| } |
| |
| #options-section .control-line:first-child { |
| border-top: var(--cr-separator-line); |
| } |
| |
| #load-path { |
| word-break: break-all; |
| } |
| |
| #load-path > a[is='action-link'] { |
| display: inline; |
| } |
| |
| #size { |
| align-items: center; |
| display: flex; |
| } |
| |
| paper-spinner-lite { |
| @apply --cr-icon-height-width; |
| } |
| </style> |
| <div id="container"> |
| <div id="main"> |
| <div id="top-bar"> |
| <paper-icon-button-light class="icon-arrow-back no-overlap"> |
| <button id="closeButton" aria-label="$i18n{back}" |
| on-click="onCloseButtonTap_"></button> |
| </paper-icon-button-light> |
| <img id="icon" src="[[data.iconUrl]]" |
| alt$="[[appOrExtension( |
| data.type, |
| '$i18nPolymer{appIcon}', |
| '$i18nPolymer{extensionIcon}')]]"> |
| <span id="name">[[data.name]]</span> |
| </div> |
| <div class="section continuation control-line" id="enable-section"> |
| <span class$="{{computeEnabledStyle_(data.state)}}"> |
| [[computeEnabledText_(data.state, '$i18nPolymer{itemOn}', |
| '$i18nPolymer{itemOff}')]] |
| </span> |
| <div class="layout horizontal"> |
| <cr-tooltip-icon hidden$="[[!data.controlledInfo]]" |
| tooltip-text="[[data.controlledInfo.text]]" |
| icon-class="[[getIndicatorIcon_(data.controlledInfo.type)]]" |
| icon-aria-label="[[data.controlledInfo.type]]"> |
| </cr-tooltip-icon> |
| <cr-toggle id="enable-toggle" |
| aria-label$="[[appOrExtension( |
| data.type, |
| '$i18nPolymer{appEnabled}', |
| '$i18nPolymer{extensionEnabled}')]]" |
| aria-describedby="name" |
| checked="[[isEnabled_(data.state)]]" |
| on-change="onEnableChange_" |
| disabled="[[!isEnableToggleEnabled_(data.*)]]"> |
| </cr-toggle> |
| </div> |
| </div> |
| <div id="warnings" hidden$="[[!hasWarnings_(data.*)]]"> |
| <div id="runtime-warnings" aria-describedby="a11yAssociation" |
| hidden$="[[!data.runtimeWarnings.length]]" |
| class="section continuation warning control-line"> |
| <iron-icon class="warning-icon" icon="cr:error"></iron-icon> |
| <span> |
| <template is="dom-repeat" items="[[data.runtimeWarnings]]"> |
| [[item]] |
| </template> |
| </span> |
| <paper-button id="reload-button" class="action-button" |
| on-click="onReloadTap_"> |
| $i18n{itemReload} |
| </paper-button> |
| </div> |
| <div class="section continuation warning" id="suspicious-warning" |
| hidden$="[[!data.disableReasons.suspiciousInstall]]"> |
| <iron-icon class="warning-icon" icon="cr:warning"></iron-icon> |
| <span> |
| $i18n{itemSuspiciousInstall} |
| <a target="_blank" id="learn-more-link" |
| href="$i18n{suspiciousInstallHelpUrl}"> |
| $i18n{learnMore} |
| </a> |
| </span> |
| </div> |
| <div class="section continuation warning control-line" |
| id="corrupted-warning" |
| hidden$="[[!data.disableReasons.corruptInstall]]"> |
| <iron-icon class="warning-icon" icon="cr:warning"></iron-icon> |
| <span>$i18n{itemCorruptInstall}</span> |
| <paper-button id="repair-button" class="action-button" |
| on-click="onRepairTap_"> |
| $i18n{itemRepair} |
| </paper-button> |
| </div> |
| <div class="section continuation warning" id="blacklisted-warning" |
| hidden$="[[!data.blacklistText]]"> |
| <iron-icon class="warning-icon" icon="cr:warning"></iron-icon> |
| <span>[[data.blacklistText]]</span> |
| </div> |
| <div class="section continuation warning" id="update-required-warning" |
| hidden$="[[!data.disableReasons.updateRequired]]"> |
| <iron-icon class="warning-icon" icon="cr:warning"></iron-icon> |
| <span>$i18n{updateRequiredByPolicy}</span> |
| </div> |
| </div> |
| <div class="section continuation block"> |
| <div class="section-title">$i18n{itemDescriptionLabel}</div> |
| <div class="section-content" id="description"> |
| [[getDescription_(data.description, '$i18nPolymer{noDescription}')]] |
| </div> |
| </div> |
| <div class="section block"> |
| <div class="section-title">$i18n{itemVersion}</div> |
| <div class="section-content">[[data.version]]</div> |
| </div> |
| <div class="section block"> |
| <div class="section-title">$i18n{itemSize}</div> |
| <div class="section-content" id="size"> |
| <span>[[size_]]</span> |
| <paper-spinner-lite active="[[!size_]]" hidden="[[size_]]"> |
| </paper-spinner-lite> |
| </div> |
| </div> |
| <div class="section block" id="id-section" hidden$="[[!inDevMode]]"> |
| <div class="section-title">$i18n{itemIdHeading}</div> |
| <div class="section-content">[[data.id]]</div> |
| </div> |
| <template is="dom-if" if="[[inDevMode]]"> |
| <div class="section block" id="inspectable-views"> |
| <div class="section-title">$i18n{itemInspectViews}</div> |
| <div class="section-content"> |
| <ul id="inspect-views"> |
| <li hidden="[[data.views.length]]"> |
| $i18n{noActiveViews} |
| </li> |
| <template is="dom-repeat" items="[[data.views]]"> |
| <li> |
| <a is="action-link" class="inspectable-view" |
| on-click="onInspectTap_"> |
| [[computeInspectLabel_(item)]] |
| </a> |
| </li> |
| </template> |
| </ul> |
| </div> |
| </div> |
| </template> |
| <div class="section block"> |
| <div class="section-title">$i18n{itemPermissions}</div> |
| <div class="section-content"> |
| <span id="no-permissions" hidden$="[[hasPermissions_(data.*)]]"> |
| $i18n{itemPermissionsEmpty} |
| </span> |
| <ul id="permissions-list" |
| hidden$="[[!data.permissions.simplePermissions.length]]"> |
| <template is="dom-repeat" |
| items="[[data.permissions.simplePermissions]]"> |
| <li> |
| [[item.message]] |
| <ul hidden="[[!item.submessages.length]]"> |
| <template is="dom-repeat" items="[[item.submessages]]"> |
| <li>[[item]]</li> |
| </template> |
| </ul> |
| </li> |
| </template> |
| </ul> |
| <template is="dom-if" if="[[showRuntimeHostPermissions_(data.*)]]"> |
| <extensions-runtime-host-permissions |
| permissions="[[data.permissions]]" |
| delegate="[[delegate]]" |
| item-id="[[data.id]]"> |
| </extensions-runtime-host-permissions> |
| </template> |
| </div> |
| </div> |
| <template is="dom-if" |
| if="[[hasDependentExtensions_(data.dependentExtensions.splices)]]"> |
| <div class="section block"> |
| <div class="section-title">$i18n{itemDependencies}</div> |
| <div class="section-content"> |
| <ul id="dependent-extensions-list"> |
| <template is="dom-repeat" items="[[data.dependentExtensions]]"> |
| <li>[[computeDependentEntry_(item)]]</li> |
| </template> |
| </ul> |
| </div> |
| </div> |
| </template> |
| <template is="dom-if" if="[[shouldShowOptionsSection_(data.*)]]"> |
| <div id="options-section"> |
| <template is="dom-if" |
| if="[[shouldShowIncognitoOption_( |
| data.incognitoAccess.isEnabled, incognitoAvailable)]]"> |
| <extensions-toggle-row id="allow-incognito" class="three-line" |
| checked="[[data.incognitoAccess.isActive]]" |
| on-change="onAllowIncognitoChange_"> |
| <div> |
| <div>$i18n{itemAllowIncognito}</div> |
| <div class="section-content">$i18n{incognitoInfoWarning}</div> |
| </div> |
| </extensions-toggle-row> |
| </template> |
| <template is="dom-if" if="[[data.fileAccess.isEnabled]]"> |
| <extensions-toggle-row id="allow-on-file-urls" |
| checked="[[data.fileAccess.isActive]]" |
| on-change="onAllowOnFileUrlsChange_"> |
| <span>$i18n{itemAllowOnFileUrls}</span> |
| </extensions-toggle-row> |
| </template> |
| <template is="dom-if" if="[[data.errorCollection.isEnabled]]"> |
| <extensions-toggle-row id="collect-errors" |
| checked="[[data.errorCollection.isActive]]" |
| on-change="onCollectErrorsChange_"> |
| <span>$i18n{itemCollectErrors}</span> |
| </extensions-toggle-row> |
| </template> |
| </div> |
| </template> |
| <cr-link-row class="hr" is="" id="extensions-options" |
| disabled="[[!isEnabled_(data.state)]]" |
| hidden="[[!shouldShowOptionsLink_(data.*)]]" |
| icon-class="icon-external" label="$i18n{itemOptions}" |
| on-click="onExtensionOptionsTap_"> |
| </cr-link-row> |
| <cr-link-row class="hr" hidden="[[!data.manifestHomePageUrl.length]]" |
| icon-class="icon-external" id="extensionWebsite" |
| label="$i18n{extensionWebsite}" on-click="onExtensionWebSiteTap_"> |
| </cr-link-row> |
| <cr-link-row class="hr" hidden="[[!data.webStoreUrl.length]]" |
| icon-class="icon-external" id="viewInStore" |
| label="$i18n{viewInStore}" on-click="onViewInStoreTap_"> |
| </cr-link-row> |
| <div class="section block"> |
| <div class="section-title">$i18n{itemSource}</div> |
| <div id="source" class="section-content"> |
| [[computeSourceString_(data.*)]] |
| </div> |
| <div id="load-path" class="section-content" |
| hidden$="[[!data.prettifiedPath]]"> |
| <span>$i18n{itemExtensionPath}</span> |
| <a is="action-link" on-click="onLoadPathTap_"> |
| [[data.prettifiedPath]] |
| </a> |
| </div> |
| </div> |
| <cr-link-row class="hr" |
| hidden="[[isControlled_(data.controlledInfo)]]" |
| icon-class="subpage-arrow" id="remove-extension" |
| label="$i18n{itemRemoveExtension}" on-click="onRemoveTap_"> |
| </cr-link-row> |
| </div> |
| </div> |
| </template> |
| <script src="detail_view.js"></script> |
| </dom-module> |
