Home | History | Annotate | Download | only in resources 
      1 <!DOCTYPE html>
      2 <html i18n-values="dir:textdirection;">
      3 <head>
      4 <meta charset=UTF-8">
      5 <title i18n-content="title"></title>
      6 <style>
      7 body {
      8   -webkit-user-select: none;
      9 }
     10 
     11 h1 {
     12   border-bottom: 1px solid #7289E2;
     13   padding: 8px;
     14   height: 32px;
     15   background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
     16   border: 1px solid #999;
     17   border-top: 0;
     18   color: black;
     19 }
     20 
     21 html[dir='rtl'] h1 {
     22   left: auto;
     23   right: 0;
     24   background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
     25 }
     26 
     27 .rowlink {
     28   height: 100%;
     29   -webkit-margin-end: 2px;
     30 }
     31 
     32 .devicerow div.icon {
     33   -webkit-margin-start: 5px;
     34   margin-top: -3px;
     35   float: left;
     36   width: 17px;
     37   height: 17px;
     38   background-repeat: no-repeat;
     39   background: url('shared/images/icon_folder.png');
     40 }
     41 
     42 html[dir='rtl'] .devicerow div.icon {
     43   float: right;
     44 }
     45 
     46 .burnicon {
     47   background:  url('shared/images/filebrowse_menu.png');
     48   position: absolute;
     49   right: 4px;
     50   top: 5px;
     51   height: 15px;
     52   width: 15px;
     53   margin-top: 5px;
     54   background-repeat: no-repeat;
     55   cursor: pointer;
     56   opacity: 0.3;
     57   -webkit-transition: opacity 0.15s ease-out;
     58   border: 0;
     59 }
     60 
     61 html[dir='rtl'].burnicon {
     62   right: auto;
     63   left: 4px;
     64 }
     65 
     66 .devicerow:hover .burnicon {
     67   opacity: 0.75;
     68   -webkit-transition: none;
     69 }
     70 
     71 .devicerow:hover .burnicon:hover {
     72   opacity: 1;
     73   -webkit-transition: none;
     74 }
     75 
     76 .devicerow {
     77   border-bottom: 1px solid #f7f7f7;
     78   padding: 8px 5px 5px 8px;
     79   font-size: .8em;
     80   position: relative;
     81   background-color: #fff;
     82 }
     83 
     84 html[dir='rtl'] .devicerow {
     85   padding: 8px 8px 5px 5px;
     86 }
     87 
     88 .devicerow:hover {
     89   background-color: #ebeff9;
     90   cursor: pointer;
     91 }
     92 
     93 .devicerow span.name {
     94   margin-top: 10px;
     95   -webkit-margin-start: 10px;
     96 }
     97 
     98 .selected {
     99   background-color: #b1c8f2;
    100 }
    101 
    102 h1.title {
    103   margin-top: 5px;
    104   text-align: center;
    105   font-size: 1.2em;
    106   font-weight: bold;
    107 }
    108 
    109 .columnlist {
    110   width: 100%;
    111   bottom: 0;
    112 }
    113 
    114 .fullcontainer {
    115   top: 0px;
    116   position: absolute;
    117   left: 0;
    118   bottom: 0;
    119   right: 600px;
    120   -webkit-border-end: 1px solid #7289E2;
    121 }
    122 
    123 html[dir='rtl'] .fullcontainer {
    124   left: 600px;
    125   right: 0;
    126 }
    127 
    128 progress {
    129   -webkit-margin-start: 15px;
    130   width: 700px;
    131 }
    132 
    133 .progressText {
    134   -webkit-padding-start: 20px;
    135   font-size: .6em;
    136   font: "Helvetica";
    137 }
    138 
    139 .statusText {
    140   padding-top: 5px;
    141   -webkit-padding-start: 15px;
    142   font-size: 1em;
    143 }
    144 
    145 .statusDiv{
    146   border-bottom: 1px solid #f7f7f7;
    147   padding-bottom: 2px;
    148   background-color: #fff;
    149 }
    150 
    151 #rootsColumn:not(.burningColumn) {
    152   height: 50%;
    153 }
    154 
    155 #statusColumn:not(.burningColumn) {
    156   height: 50%;
    157   border-top: 1px solid #7289E2;
    158 }
    159 </style>
    160 
    161 <script src="shared/js/local_strings.js"></script>
    162 <script>
    163 function $(o) {
    164   return document.getElementById(o);
    165 }
    166 
    167 var currentlySelectedItem;
    168 var currentlySelectedPath;
    169 var localStrings;
    170 var statusMessages;
    171 var burnStarted;
    172 
    173 function promptUserDownloadFinished() {
    174   // This could be done nicer.
    175   var answer = confirm(localStrings.getString('burnConfirmText1') +
    176       currentlySelectedPath + localStrings.getString('burnConfirmText2'));
    177   chrome.send(answer ? 'burnImage' : 'cancelBurnImage', []);
    178 }
    179 
    180 function alertUserDownloadAborted(){
    181   alert(localStrings.getString('downloadAbortedMessage'));
    182 }
    183 
    184 function burnSuccessful() {
    185   alert(localStrings.getString('burnSuccessfulMessage'));
    186 }
    187 
    188 function burnUnsuccessful(){
    189   alert(localStrings.getString('burnUnsuccessfulMessage'));
    190 }
    191 
    192 function rootsChanged(){
    193   chrome.send('getRoots', []);
    194 }
    195 
    196 function browseFileResult(info, results) {
    197   var path = info.path;
    198   var list = $('rootsList');
    199   list.innerHTML = '';
    200   var selectedRemoved = true;
    201   var addedRoots=[];
    202   for (var x = 0; x < results.length; x++) {
    203     if (!(results[x].title in addedRoots)) {
    204       addedRoots[results[x].title] = true;
    205       var element = createNewItem(results[x].title, results[x].path);
    206       if (results[x].path == currentlySelectedPath) {
    207         selectItem(element.id, results[x].path);
    208         selectedRemoved = false;
    209       }
    210       list.appendChild(element);
    211     }
    212   }
    213   if (selectedRemoved) {
    214     currentlySelectedItem = null;
    215     currentlySelectedPath = null;
    216   }
    217 }
    218 
    219 function selectItem(elementId, path) {
    220   var element = $(elementId);
    221   var index;
    222   if (currentlySelectedItem)
    223     currentlySelectedItem.className = 'devicerow';
    224   if (element) {
    225     element.className = 'selected devicerow';
    226     currentlySelectedItem = element;
    227     currentlySelectedPath = path;
    228   }
    229 }
    230 
    231 function createProgressElement(id) {
    232   var statusDiv = document.createElement('div');
    233   statusDiv.id = id;
    234   statusDiv.className = 'statusDiv';
    235 
    236   var statusText = document.createElement('div');
    237   statusText.id = id + 'StatusText';
    238   statusText.className = 'statusText';
    239   statusDiv.appendChild(statusText);
    240 
    241   var progressBar = document.createElement('progress');
    242   progressBar.id = id + 'ProgressBar';
    243   progressBar.className = 'progressBar';
    244   statusDiv.appendChild(progressBar);
    245 
    246   var progressText = document.createElement('div');
    247   progressText.id = id + 'ProgressText';
    248   progressText.className = 'progressText'
    249   statusDiv.appendChild(progressText);
    250 
    251   return statusDiv;
    252 }
    253 
    254 function setProgressElementFinalValues(element, statuses, event) {
    255   var statusTextDiv;
    256   var progressBarDiv;
    257   var progressTextDiv;
    258   for (var i = 0; i < element.children.length; i++ ) {
    259     switch(element.children[i].className) {
    260       case 'statusText':
    261         statusTextDiv = element.children[i];
    262         break;
    263       case 'progressBar':
    264         progressBarDiv = element.children[i];
    265         break;
    266       case 'progressText':
    267         progressTextDiv = element.children[i];
    268         break;
    269     }
    270   }
    271   if (event == 'COMPLETE')
    272     statusTextDiv.textContent = statuses['finished'];
    273   else
    274       statusTextDiv.textContent = statuses['canceled'];
    275 
    276   var progressBarParent = progressBarDiv.parentNode;
    277   progressBarParent.removeChild(progressBarDiv);
    278 
    279   var progressTextParent = progressTextDiv.parentNode;
    280   progressTextParent.removeChild(progressTextDiv);
    281   return element;
    282 }
    283 
    284 function setProgressElementValues(element, statuses, amountFinished,
    285                                   amountTotal, progressText){
    286   var statusTextDiv;
    287   var progressBarDiv;
    288   var progressTextDiv;
    289   for (var i = 0; i < element.children.length; i++ ) {
    290     switch(element.children[i].className) {
    291       case 'statusText':
    292         statusTextDiv = element.children[i];
    293         break;
    294       case 'progressBar':
    295         progressBarDiv = element.children[i];
    296         break;
    297       case 'progressText':
    298         progressTextDiv = element.children[i];
    299         break;
    300     }
    301   }
    302 
    303   if (!(amountFinished > 0)) {
    304     amountFinished = 0;
    305     statusTextDiv.textContent = statuses["start"];
    306     progressTextDiv.textContent = "";
    307   } else {
    308     statusTextDiv.textContent = statuses["inProgress"];
    309     progressTextDiv.textContent = progressText;
    310   }
    311   if(amountFinished > amountTotal)
    312     amountFinished = amountTotal;
    313   progressBarDiv.value = amountFinished;
    314   if (amountTotal)
    315     progressBarDiv.max = amountTotal;
    316   return element;
    317 }
    318 
    319 function updateProgressElement(progressType, progressInfo) {
    320   var element = $(progressType + 'ProgressElement');
    321   if (!element) {
    322     element = createProgressElement(progressType + 'ProgressElement');
    323     var column  = $('statusList');
    324     column.appendChild(element);
    325   }
    326   var errorOccurred = (progressInfo.state == 'CANCELLED');
    327   if (progressInfo.state == 'IN_PROGRESS') {
    328     setProgressElementValues(element, statusMessages[progressType],
    329         progressInfo.received, progressInfo.total,
    330         progressInfo.progress_status_text);
    331   } else {
    332     setProgressElementFinalValues(element, statusMessages[progressType],
    333                                   progressInfo.state);
    334   }
    335 }
    336 
    337 function downloadUpdated(result) {
    338   updateProgressElement('download', result);
    339 }
    340 
    341 function burnProgressUpdated(result) {
    342   if (!burnStarted) {
    343     $('rootsList').style.display = 'none';
    344     $('rootsListTitle').textContent = result.path;
    345     $('rootsColumn').className = 'burningColumn columnList';
    346     $('statusColumn').className = 'burningColumn columnList';
    347     burnStarted = true;
    348   }
    349   updateProgressElement('burn', result);
    350 }
    351 
    352 var elementIdCounter = 0;
    353 
    354 function createNewItem(title, path) {
    355   var element = document.createElement('div');
    356   element.className = 'devicerow';
    357   element.id = path + elementIdCounter;
    358   elementIdCounter++;
    359   var link;
    360   link = document.createElement('div');
    361   link.onclick = function() { burnImage(element.id, path); };
    362   link.className = 'rowlink';
    363 
    364   var icon = document.createElement('div');
    365   icon.className = 'icon';
    366   link.appendChild(icon);
    367 
    368   var span = document.createElement('span');
    369   span.className = 'name';
    370   span.textContent = title;
    371   link.appendChild(span);
    372 
    373   element.appendChild(link);
    374 
    375   var burnicon = document.createElement('button');
    376   burnicon.className = 'burnicon';
    377   burnicon.onclick = function() { burnImage(element.id, path); };
    378   element.appendChild(burnicon);
    379 
    380   return element;
    381 }
    382 
    383 function burnImage(elementId, path) {
    384   selectItem(elementId, path);
    385   chrome.send('downloadImage', [path]);
    386 }
    387 
    388 function clearList(list) {
    389   while (list.childNodes.length >= 1) {
    390     list.removeChild(list.firstChild);
    391   }
    392 }
    393 
    394 document.addEventListener('DOMContentLoaded', function() {
    395   localStrings = new LocalStrings();
    396   burnStarted = false;
    397   chrome.send("getRoots", []);
    398 
    399   // Initialize messages that will be displayed as download
    400   // or burn progress is updated.
    401   statusMessages = [];
    402 
    403   var downloadStatuses = [];
    404   downloadStatuses['start'] = localStrings.getString('downloadStatusStart');
    405   downloadStatuses['inProgress'] =
    406       localStrings.getString('downloadStatusInProgress');
    407   downloadStatuses['finished'] =
    408       localStrings.getString('downloadStatusComplete');
    409   downloadStatuses['canceled'] =
    410       localStrings.getString('downloadStatusCanceled');
    411   statusMessages['download'] = downloadStatuses;
    412 
    413   var burnStatuses = [];
    414   burnStatuses['start'] = localStrings.getString('burnStatusStart');
    415   burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress');
    416   burnStatuses['finished'] = localStrings.getString('burnStatusComplete');
    417   burnStatuses['canceled'] = localStrings.getString('burnStatusCanceled');
    418   statusMessages['burn'] = burnStatuses;
    419 });
    420 </script>
    421 </head>
    422 <body>
    423   <div id="main" class="fullcontainer">
    424     <div id="rootsColumn" class="columnlist">
    425       <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>
    426       <div id="rootsList"></div>
    427     </div>
    428     <div id="statusColumn" class="columnlist">
    429       <div id="statusList"></div>
    430     </div>
    431   </div>
    432 </body>
    433 </html>
    434