blob: 378c95d501564991ef0d5d6213865181a592bb40 [file] [log] [blame]
<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>