1 <!doctype html> 2 <html> 3 <head> 4 <title>Provided File Systems</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="provided_file_systems.css"> 7 <script src="chrome://provided-file-systems/provided_file_systems.js"> 8 </script> 9 </head> 10 <body> 11 <polymer-element name="file-systems"> 12 <template> 13 <link rel="stylesheet" 14 href="chrome://provided-file-systems/provided_file_systems.css"> 15 <div id="fileSystems"> 16 <table> 17 <thead> 18 <tr> 19 <th>ID</th> 20 <th>Name</th> 21 <th>Extension ID</th> 22 <th>Active Requests</th> 23 </tr> 24 </thead> 25 <tbody> 26 <template id="file-system" repeat="{{item in model}}"> 27 <tr on-click="{{rowClicked}}" data-id="{{item.id}}" 28 data-extension-id="{{item.extensionId}}"> 29 <td>{{item.id}}</td> 30 <td>{{item.name}}</td> 31 <td> 32 <div class="icon" style="background-image: 33 -webkit-image-set( 34 url(chrome://extension-icon/{{item.extensionId}}/24/1) 35 1x, 36 url(chrome://extension-icon/{{item.extensionId}}/48/1) 37 2x)"></div> 38 {{item.extensionId}} 39 </td> 40 <td>{{item.activeRequests}}</td> 41 </tr> 42 </template> 43 </tbody> 44 </table> 45 </div> 46 </template> 47 </polymer-element> 48 49 <polymer-element name="request-timeline"> 50 <template> 51 <link rel="stylesheet" 52 href="chrome://provided-file-systems/provided_file_systems.css"> 53 <div id="requestTimeline"> 54 <div class="request-timeline-toolbar"> 55 <button on-click="{{zoomOutClicked}}">–</button> 56 <button on-click="{{zoomInClicked}}">+</button> 57 </div> 58 <div class="request-timeline-scroller"> 59 <div class="request-timeline-padding" 60 style="min-height: {{rows.length * ROW_HEIGHT}}px"> 61 <div class="request-timeline-scroller"> 62 <template id="request-timeline-request" 63 repeat="{{request in chart}}"> 64 <button class="request-timeline-request" 65 on-click="{{elementClicked}}" 66 title="{{request.id}}" 67 data-id="{{request.id}}" 68 data-state="{{request.state}}" 69 data-request-type="{{request.requestType}}" 70 style="-webkit-margin-start: {{request.left * scale}}px; 71 top: {{request.row * ROW_HEIGHT}}px; 72 width: {{request.length * scale}}px"> 73 <div class="request-timeline-request-overhead" 74 style="width: 75 {{(request.length - request.executionTime) * scale}}px"> 76 </div> 77 <template if= 78 "{{request.valueSize && request.length * scale > 50}}"> 79 <div class="request-timeline-request-value-size"> 80 {{request.valueSize | formatSize}} 81 </div> 82 </template> 83 </button> 84 </template> 85 </div> 86 </div> 87 </div> 88 </div> 89 </template> 90 </polymer-element> 91 92 <polymer-element name="request-events"> 93 <template> 94 <link rel="stylesheet" 95 href="chrome://provided-file-systems/provided_file_systems.css"> 96 <div id="requestEvents"> 97 <table> 98 <thead> 99 <tr> 100 <th>Time</th> 101 <th>Request ID</th> 102 <th>Request Type</th> 103 <th>Size</th> 104 <th>JS Time</th> 105 <th>Event Type</th> 106 <th>Error</th> 107 <th>Has Next</th> 108 </tr> 109 </thead> 110 <tbody> 111 <template id="request-event" repeat="{{item in model}}"> 112 <tr> 113 <td> 114 <a id="request-{{item.id}}"></a> 115 {{item.time | formatTime}} 116 </td> 117 <td>{{item.id}}</td> 118 <td data-request-type="{{item.requestType}}"> 119 <span>{{item.requestType}}</span> 120 </td> 121 <td> 122 <template if={{item.valueSize}}> 123 {{item.valueSize | formatSize}} 124 </template> 125 </td> 126 <td> 127 <template if={{item.valueSize}}> 128 {{item.executionTime | formatExecutionTime}} 129 </template> 130 </td> 131 <td>{{item.eventType}}</td> 132 <td data-error="{{item.error}}"> 133 <span>{{item.error}}</span> 134 </td> 135 <td>{{item.hasMore | formatHasMore}}</td> 136 </tr> 137 </template> 138 </tbody> 139 </table> 140 </div> 141 </template> 142 </polymer-element> 143 144 <file-systems id="file-systems"> 145 </file-systems> 146 147 <request-timeline hidden id="request-timeline"> 148 </request-timeline> 149 150 <request-events hidden id="request-events"> 151 </request-events> 152 </body> 153 </html> 154
