<style include="cr-shared-style">
:host {
background-color: var(--cr-card-background-color);
border-radius: var(--cr-card-border-radius);
box-shadow: var(--cr-card-shadow);
display: block;
margin: calc(var(--cr-section-padding) / 2);
overflow: hidden;
}
.cr-row {
padding: calc(var(--cr-section-padding) / 2) var(--cr-section-padding);
}
.label:not(:first-child) {
margin-inline-start: var(--cr-icon-button-margin-start);
}
.status {
--iron-icon-fill-color: var(--google-grey-700);
--iron-icon-height: 20px;
--iron-icon-width: 20px;
}
@media (prefers-color-scheme: dark) {
.status {
--iron-icon-fill-color: var(--google-grey-500);
}
}
.content {
flex-grow: 1;
overflow: auto;
white-space: pre;
}
.actions {
align-self: flex-start;
display: flex;
flex-direction: column;
}
</style>
<cr-expand-button class="cr-row first" expanded="{{request.expanded}}">
<span class="label">[[getTimestamp_(request.startTime)]]</span>
<cr-icon class="label status" icon="[[getStatusIcon_(request.status)]]"
title="[[getStatusTitle_(request.endTime)]]">
</cr-icon>
<span class="label">[[getRequestPath_(request)]]</span>
</cr-expand-button>
<cr-collapse opened="[[request.expanded]]">
<div class="cr-row" hidden$="[[!requestDataJson_]]">
<div class="content"
inner-h-t-m-l="[[getRequestDataHtml_(requestDataJson_)]]">
</div>
<div class="actions">
<cr-icon-button class="icon-copy-content" title="copy to clipboard"
on-click="onCopyRequestClick_">
</cr-icon-button>
<cr-icon-button class="icon-visibility" title="view content"
on-click="onViewRequestClick_">
</cr-icon-button>
</div>
</div>
<div class="cr-row" hidden$="[[!responseJson_]]">
<div class="content" inner-h-t-m-l="[[getResponseHtml_(responseJson_)]]">
</div>
<div class="actions">
<cr-icon-button class="icon-copy-content" title="copy to clipboard"
on-click="onCopyResponseClick_">
</cr-icon-button>
<cr-icon-button class="icon-visibility" title="view content"
on-click="onViewResponseClick_">
</cr-icon-button>
<cr-icon-button iron-icon="suggest:lock" title="hardcode response"
on-click="onHardcodeResponseClick_">
</cr-icon-button>
</div>
</div>
</cr-collapse>