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}}">&ndash;</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