| <style include="iron-flex cr-shared-style cr-icons action-link |
| shared-style"> |
| :host { |
| --iron-icon-fill-color: var(--cr-secondary-text-color); |
| 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); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| #enable-section .enabled-text { |
| color: var(--google-blue-refresh-300); |
| } |
| } |
| |
| #icon { |
| height: 24px; |
| margin-inline-end: 12px; |
| margin-inline-start: 16px; |
| width: 24px; |
| } |
| |
| #name { |
| flex-grow: 1; |
| } |
| |
| .section { |
| box-sizing: border-box; |
| padding: var(--cr-section-vertical-padding) var(--cr-section-padding); |
| } |
| |
| .cr-row.control-line { |
| justify-content: space-between; |
| } |
| |
| .section-content { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| .actionable { |
| cursor: pointer; |
| } |
| |
| .inspectable-view { |
| height: 20px; |
| width: auto; /* override the default button size of 24x24 */ |
| } |
| |
| @media (prefers-color-scheme: light) { |
| .warning .action-button { |
| background: white; |
| color: var(--google-blue-500); |
| } |
| |
| #reload-button { |
| color: var(--google-blue-500); |
| } |
| } |
| |
| .warning span { |
| color: var(--error-color); |
| flex: 1; |
| } |
| |
| .warning-icon { |
| --iron-icon-fill-color: var(--error-color); |
| 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); |
| } |
| |
| extensions-toggle-row { |
| box-sizing: border-box; |
| padding: var(--cr-section-vertical-padding) var(--cr-section-padding); |
| } |
| |
| #load-path { |
| word-break: break-all; |
| } |
| |
| #load-path > a[is='action-link'] { |
| display: inline; |
| } |
| |
| #size { |
| align-items: center; |
| display: flex; |
| } |
| |
| paper-spinner-lite { |
| height: var(--cr-icon-size); |
| width: var(--cr-icon-size); |
| } |
| </style> |
| <div class="page-container" id="container"> |
| <div class="page-content"> |
| <div class="page-header"> |
| <cr-icon-button class="icon-arrow-back no-overlap" id="closeButton" |
| aria-label="$i18n{back}" on-click="onCloseButtonTap_"> |
| </cr-icon-button> |
| <img id="icon" src="[[data.iconUrl]]" |
| aria-label$="[[a11yAssociation(data.name)]]" |
| alt$="[[appOrExtension( |
| data.type, |
| '$i18nPolymer{appIcon}', |
| '$i18nPolymer{extensionIcon}')]]"> |
| <span id="name" class="cr-title-text" role="heading" aria-level="1"> |
| [[data.name]] |
| </span> |
| </div> |
| <div class="cr-row first 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="cr20:domain" |
| icon-aria-label="[[data.controlledInfo.text]]"> |
| </cr-tooltip-icon> |
| <template is="dom-if" if="[[showReloadButton_(data.state)]]"> |
| <cr-button id="terminated-reload-button" class="action-button" |
| on-click="onReloadTap_"> |
| $i18n{itemReload} |
| </cr-button> |
| </template> |
| <cr-tooltip-icon id="parentDisabledPermissionsToolTip" |
| hidden$="[[!data.disableReasons.parentDisabledPermissions]]" |
| tooltip-text="$i18n{parentDisabledPermissions}" |
| icon-class="cr20:kite" |
| icon-aria-label="$i18n{parentDisabledPermissions}"> |
| </cr-tooltip-icon> |
| <cr-toggle id="enableToggle" |
| aria-label$="[[appOrExtension( |
| data.type, |
| '$i18nPolymer{appEnabled}', |
| '$i18nPolymer{extensionEnabled}')]]" |
| aria-describedby="name" |
| checked="[[isEnabled_(data.state)]]" |
| on-change="onEnableToggleChange_" |
| disabled$="[[!isEnableToggleEnabled_(data.*)]]" |
| hidden$="[[!showEnableToggle_(data.*)]]"> |
| </cr-toggle> |
| </div> |
| </div> |
| <div id="warnings" hidden$="[[!hasWarnings_(data.*)]]"> |
| <div id="runtime-warnings" hidden$="[[!data.runtimeWarnings.length]]" |
| class="cr-row 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> |
| <template is="dom-if" if="[[!showReloadButton_(data.state)]]"> |
| <cr-button id="warnings-reload-button" class="action-button" |
| on-click="onReloadTap_"> |
| $i18n{itemReload} |
| </cr-button> |
| </template> |
| </div> |
| <div class="cr-row 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" href="$i18n{suspiciousInstallHelpUrl}"> |
| $i18n{learnMore} |
| </a> |
| </span> |
| </div> |
| <div class="cr-row continuation warning control-line" |
| id="corrupted-warning" |
| hidden$="[[!showRepairButton_(data.disableReasons.corruptInstall)]]"> |
| <iron-icon class="warning-icon" icon="cr:warning"></iron-icon> |
| <span>$i18n{itemCorruptInstall}</span> |
| <cr-button id="repair-button" class="action-button" |
| on-click="onRepairTap_"> |
| $i18n{itemRepair} |
| </cr-button> |
| </div> |
| <div class="cr-row 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="cr-row 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"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $i18n{itemDescriptionLabel} |
| </div> |
| <div class="section-content" id="description"> |
| [[getDescription_(data.description, '$i18nPolymer{noDescription}')]] |
| </div> |
| </div> |
| <div class="section hr"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $i18n{itemVersion} |
| </div> |
| <div class="section-content">[[data.version]]</div> |
| </div> |
| <div class="section hr"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $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 hr" id="id-section" hidden$="[[!inDevMode]]"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $i18n{itemIdHeading} |
| </div> |
| <div class="section-content">[[data.id]]</div> |
| </div> |
| <template is="dom-if" if="[[inDevMode]]"> |
| <div class="section hr" id="inspectable-views"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $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 hr"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $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> |
| </div> |
| </div> |
| <div class="section hr"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $i18n{itemSiteAccess} |
| </div> |
| <div class="section-content"> |
| <span id="no-site-access" |
| hidden$="[[showSiteAccessContent_(data.*)]]"> |
| $i18n{itemSiteAccessEmpty} |
| </span> |
| <template is="dom-if" |
| if="[[showFreeformRuntimeHostPermissions_(data.*)]]"> |
| <extensions-runtime-host-permissions |
| permissions="[[data.permissions.runtimeHostPermissions]]" |
| delegate="[[delegate]]" |
| item-id="[[data.id]]"> |
| </extensions-runtime-host-permissions> |
| </template> |
| <template is="dom-if" |
| if="[[showHostPermissionsToggleList_(data.*)]]"> |
| <extensions-host-permissions-toggle-list |
| permissions="[[data.permissions.runtimeHostPermissions]]" |
| delegate="[[delegate]]" |
| item-id="[[data.id]]"> |
| </extensions-host-permissions-toggle-list> |
| </template> |
| </div> |
| </div> |
| <template is="dom-if" |
| if="[[hasDependentExtensions_(data.dependentExtensions.splices)]]"> |
| <div class="section hr"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $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" |
| checked="[[data.incognitoAccess.isActive]]" |
| class="hr" |
| 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]]" |
| class="hr" |
| 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]]" |
| class="hr" |
| on-change="onCollectErrorsChange_"> |
| <span>$i18n{itemCollectErrors}</span> |
| </extensions-toggle-row> |
| </template> |
| </div> |
| </template> |
| <cr-link-row class="hr" id="extensions-options" |
| disabled="[[!isEnabled_(data.state)]]" |
| hidden="[[!shouldShowOptionsLink_(data.*)]]" |
| label="$i18n{itemOptions}" on-click="onExtensionOptionsTap_" |
| external></cr-link-row> |
| <cr-link-row class="hr" |
| id="extensionsActivityLogLink" hidden$="[[!showActivityLog]]" |
| label="$i18n{viewActivityLog}" on-click="onActivityLogTap_" |
| role-description="$i18n{subpageArrowRoleDescription}"> |
| </cr-link-row> |
| <cr-link-row class="hr" hidden="[[!data.manifestHomePageUrl.length]]" |
| id="extensionWebsite" label="$i18n{extensionWebsite}" |
| on-click="onExtensionWebSiteTap_" external></cr-link-row> |
| <cr-link-row class="hr" hidden="[[!data.webStoreUrl.length]]" |
| id="viewInStore" label="$i18n{viewInStore}" |
| on-click="onViewInStoreTap_" external></cr-link-row> |
| <div class="section hr"> |
| <div class="section-title" role="heading" aria-level="2"> |
| $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" id="remove-extension" |
| hidden="[[data.mustRemainInstalled]]" |
| label="$i18n{itemRemoveExtension}" on-click="onRemoveTap_"> |
| </cr-link-row> |
| </div> |
| </div> |
