blob: 384464815e69bd9dd818d659c3305ff1c7edafb8 [file] [log] [blame]
<!doctype html>
<html>
<head>
<title>Provided File Systems</title>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="provided_file_systems.css">
<script src="chrome://provided-file-systems/provided_file_systems.js">
</script>
</head>
<body>
<polymer-element name="file-systems">
<template>
<link rel="stylesheet"
href="chrome://provided-file-systems/provided_file_systems.css">
<div id="fileSystems">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Extension ID</th>
<th>Active Requests</th>
</tr>
</thead>
<tbody>
<template id="file-system" repeat="{{item in model}}">
<tr on-click="{{rowClicked}}" data-id="{{item.id}}"
data-extension-id="{{item.extensionId}}">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<div class="icon" style="background-image:
-webkit-image-set(
url(chrome://extension-icon/{{item.extensionId}}/24/1)
1x,
url(chrome://extension-icon/{{item.extensionId}}/48/1)
2x)"></div>
{{item.extensionId}}
</td>
<td>{{item.activeRequests}}</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
</polymer-element>
<polymer-element name="request-timeline">
<template>
<link rel="stylesheet"
href="chrome://provided-file-systems/provided_file_systems.css">
<div id="requestTimeline">
<div class="request-timeline-toolbar">
<button on-click="{{zoomOutClicked}}">&ndash;</button>
<button on-click="{{zoomInClicked}}">+</button>
</div>
<div class="request-timeline-scroller">
<div class="request-timeline-padding"
style="min-height: {{rows.length * ROW_HEIGHT}}px">
<div class="request-timeline-scroller">
<template id="request-timeline-request"
repeat="{{request in chart}}">
<button class="request-timeline-request"
on-click="{{elementClicked}}"
title="{{request.id}}"
data-id="{{request.id}}"
data-state="{{request.state}}"
data-request-type="{{request.requestType}}"
style="-webkit-margin-start: {{request.left * scale}}px;
top: {{request.row * ROW_HEIGHT}}px;
width: {{request.length * scale}}px">
<div class="request-timeline-request-overhead"
style="width:
{{(request.length - request.executionTime) * scale}}px">
</div>
<template if=
"{{request.valueSize && request.length * scale > 50}}">
<div class="request-timeline-request-value-size">
{{request.valueSize | formatSize}}
</div>
</template>
</button>
</template>
</div>
</div>
</div>
</div>
</template>
</polymer-element>
<polymer-element name="request-events">
<template>
<link rel="stylesheet"
href="chrome://provided-file-systems/provided_file_systems.css">
<div id="requestEvents">
<table>
<thead>
<tr>
<th>Time</th>
<th>Request ID</th>
<th>Request Type</th>
<th>Size</th>
<th>JS Time</th>
<th>Event Type</th>
<th>Error</th>
<th>Has Next</th>
</tr>
</thead>
<tbody>
<template id="request-event" repeat="{{item in model}}">
<tr>
<td>
<a id="request-{{item.id}}"></a>
{{item.time | formatTime}}
</td>
<td>{{item.id}}</td>
<td data-request-type="{{item.requestType}}">
<span>{{item.requestType}}</span>
</td>
<td>
<template if={{item.valueSize}}>
{{item.valueSize | formatSize}}
</template>
</td>
<td>
<template if={{item.valueSize}}>
{{item.executionTime | formatExecutionTime}}
</template>
</td>
<td>{{item.eventType}}</td>
<td data-error="{{item.error}}">
<span>{{item.error}}</span>
</td>
<td>{{item.hasMore | formatHasMore}}</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
</polymer-element>
<file-systems id="file-systems">
</file-systems>
<request-timeline hidden id="request-timeline">
</request-timeline>
<request-events hidden id="request-events">
</request-events>
</body>
</html>