| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="shared_vars.html"> |
| |
| <dom-module id="activity-log-item"> |
| <template> |
| <style include="cr-icons cr-shared-style shared-style"> |
| :host { |
| border-top: var(--cr-separator-line); |
| display: block; |
| margin: 0 var(--cr-section-padding); |
| padding: 8px 0; |
| --activity-log-call-and-count-width: 529px; |
| } |
| |
| #activity-item-main-row { |
| align-items: center; |
| display: flex; |
| flex-direction: row; |
| /* Match separator height. */ |
| min-height: calc(var(--cr-section-min-height) - var(--separator-gap)); |
| } |
| |
| #activity-item-main-row .separator { |
| margin: 0 calc( |
| var(--cr-section-padding) + var(--cr-icon-ripple-margin)); |
| } |
| |
| #activity-item-main-row cr-expand-button { |
| margin-inline-end: 6px; |
| } |
| |
| #activity-call-and-count { |
| display: flex; |
| flex: 1; |
| flex-direction: row; |
| margin-inline-end: auto; |
| max-width: var(--activity-log-call-and-count-width); |
| } |
| |
| #activity-delete { |
| margin: 0; |
| } |
| |
| #activity-type { |
| flex: 0 85px; |
| } |
| |
| #activity-key { |
| flex: 1; |
| margin-inline-start: 10px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| #activity-count { |
| flex: 0 100px; |
| text-align: end; |
| } |
| |
| .page-url { |
| display: flex; |
| flex-direction: row; |
| margin-bottom: 10px; |
| max-width: var(--activity-log-call-and-count-width); |
| } |
| |
| .page-url-link { |
| flex-grow: 1; |
| margin-inline-end: 20px; |
| margin-inline-start: 16px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| </style> |
| <div actionable$="[[isExpandable_]]" |
| id="activity-item-main-row" |
| on-click="onExpandTap_"> |
| <div id="activity-call-and-count"> |
| <span id="activity-type">[[data.activityType]]</span> |
| <span id="activity-key" title="[[data.key]]">[[data.key]]</span> |
| <span id="activity-count">[[data.count]]</span> |
| </div> |
| <cr-expand-button expanded="{{isExpanded_}}" |
| hidden$="[[!isExpandable_]]"> |
| </cr-expand-button> |
| <div class="separator" hidden$="[[!isExpandable_]]"></div> |
| <paper-icon-button-light id="activity-delete" class="icon-delete-gray"> |
| <button id="activity-delete-button" aria-describedby="api-call" |
| aria-label="$i18n{clearEntry}" on-click="onDeleteTap_"> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| <iron-collapse opened="[[isExpanded_]]"> |
| <div id="page-url-list" hidden$="[[!isExpandable_]]"> |
| <template is="dom-repeat" items="[[getPageUrls_(data)]]"> |
| <div class="page-url"> |
| <a class="page-url-link" href="[[item.page]]" |
| title="[[item.page]]">[[item.page]]</a> |
| <span class="page-url-count" |
| hidden$="[[!shouldShowPageUrlCount_(data)]]"> |
| [[item.count]] |
| </span> |
| </div> |
| </template> |
| </div> |
| </iron-collapse> |
| </template> |
| <script src="activity_log_item.js"></script> |
| </dom-module> |