| <style include="cr-shared-style shared-style"> |
| .panel-header { |
| /* label in panel-header's cr-expand-button adds its own vertical padding. |
| Thus, we need to substract it from the panel-header padding */ |
| padding: calc(var(--cr-section-padding) - |
| var(--cr-section-vertical-padding)) 0px; |
| } |
| |
| .header-group-wrapper { |
| flex: 1; |
| margin-inline-start: 15px; |
| } |
| |
| cr-icon[icon='cr:check'] { |
| padding-inline-start: 10px; |
| fill: var(--google-green-700); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| cr-icon[icon='cr:check'] { |
| fill: var(--grey-900-white-4-percent); |
| } |
| } |
| |
| .completion-container { |
| font-weight: 500; |
| font-size: 14px; |
| margin-top: 20px; |
| min-height: 42px; |
| } |
| |
| .panel-extension-info { |
| flex: 1; |
| margin-top: 15px; |
| margin-bottom: 0px; |
| } |
| |
| .bulk-action-button { |
| margin-inline-start: auto; |
| } |
| |
| .cr-row { |
| padding: 0; |
| } |
| </style> |
| |
| <h2 id="safetyHubTitleContainer" class="panel-title" |
| hidden$="[[!shouldShowSafetyHubHeader_]]"> |
| $i18n{safetyHubHeader} |
| </h2> |
| |
| <div class="panel-background"> |
| <cr-expand-button no-hover |
| id="expandButton" |
| expanded="{{unsafeExtensionsReviewListExpanded_}}" |
| hidden$="[[!shouldShowUnsafeExtensions_]]"> |
| <div class="panel-header" id="reviewPanelContainer"> |
| <cr-icon aria-hidden="true" icon="extensions-icons:my_extensions" |
| class="panel-header-icon"> |
| </cr-icon> |
| <div class="panel-header-text"> |
| <h3 id="headingText">[[headerString_]]</h3> |
| <div |
| class="cr-secondary-text" |
| id="secondaryText"> |
| [[subtitleString_]] |
| </div> |
| </div> |
| <cr-button |
| class="action-button bulk-action-button" |
| aria-label="$i18n{safetyCheckRemoveAll}" |
| id="removeAllButton" |
| on-click="onRemoveAllClick_" |
| hidden$="[[!shouldShowSafetyHubRemoveAllButton_]]"> |
| $i18n{safetyCheckRemoveAll} |
| </cr-button> |
| </div> |
| </cr-expand-button> |
| <cr-collapse class="panel-extensions" |
| opened="[[unsafeExtensionsReviewListExpanded_]]" |
| hidden$="[[!shouldShowUnsafeExtensions_]]"> |
| <template is="dom-repeat" items="[[extensions]]"> |
| <div class="panel-extension-row cr-row"> |
| <img class="panel-extension-icon" src="[[item.iconUrl]]" |
| role="presentation"> |
| <div class="panel-extension-info text-elide"> |
| <div class="extension-representation">[[item.name]]</div> |
| <div class="cr-secondary-text"> |
| [[item.safetyCheckText.panelString]] |
| </div> |
| </div> |
| <cr-icon-button iron-icon="cr:delete" |
| actionable on-click="onRemoveExtensionClick_" |
| aria-label="[[getRemoveButtonA11yLabel_(item.name)]]"> |
| </cr-icon-button> |
| <cr-icon-button class="icon-more-vert header-aligned-button" |
| id="makeExceptionMenuButton" |
| on-click="onMakeExceptionMenuClick_" |
| aria-label="[[getOptionMenuA11yLabel_(item.name)]]" |
| focus-type="makeExceptionMenuButton"></cr-icon-button> |
| </div> |
| </template> |
| </cr-collapse> |
| <div class="header-with-icon completion-container" |
| hidden$="[[!shouldShowCompletionInfo_]]"> |
| <cr-icon role="img" icon="cr:check"></cr-icon> |
| <span class="header-group-wrapper">[[completionMessage_]]</span> |
| </div> |
| <cr-action-menu id="makeExceptionMenu"> |
| <button id="menuKeepExtension" |
| class="dropdown-item" |
| on-click="onKeepExtensionClick_"> |
| $i18n{safetyCheckKeepExtension} |
| </button> |
| </cr-action-menu> |
| </div> |
