chrome/browser/resources/chromeos/provided_file_systems.html

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