| <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; |
| } |
| |
| .pagelabel { |
| font-size: smaller; |
| float:right; |
| } |
| </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> |
| <template is="dom-if" if="[[getPageClassificationLabel_(pgcl_)]]"> |
| <cr-chip class="pagelabel" on-click="onChipClick_">[[getPageClassificationLabel_(pgcl_)]]</cr-chip> |
| </template> |
| </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> |
| </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 iron-icon="suggest:lock" title="hardcode response" |
| on-click="onHardcodeResponseClick_"> |
| </cr-icon-button> |
| </div> |
| </div> |
| </cr-collapse> |