| <!doctype html> |
| <html> |
| <head> |
| <title>Provided File Systems</title> |
| <meta charset="utf-8"> |
| <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}}">–</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> |
