Home | History | Annotate | Download | only in basic 
      1 <!doctype html>
      2 <!--
      3  * Copyright (c) 2011 The Chromium Authors. All rights reserved.  Use of this
      4  * source code is governed by a BSD-style license that can be found in the
      5  * LICENSE file.
      6 -->
      7 <html>
      8   <head>
      9     <title>WebNavigation Tech Demo Popup</title>
     10     <style>
     11       body {
     12         margin: 5px 10px 10px;
     13       }
     14 
     15       h1 {
     16         color: #53637D;
     17         font: 26px/1.2 Helvetica, sans-serif;
     18         font-size: 200%;
     19         margin: 0;
     20         padding-bottom: 4px;
     21         text-shadow: white 0 1px 2px;
     22       }
     23 
     24       body > section {
     25         border-radius: 5px;
     26         background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #EAEEF3),
     27                     -webkit-linear-gradient(
     28                         left, #EAEEF3, #EAEEF3 97%, #D3D7DB);
     29         font: 14px/1 Arial,Sans Serif;
     30         padding: 10px;
     31         width:  563px;
     32         max-height: 400px;
     33         overflow-y: auto;
     34         box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5);
     35       }
     36 
     37       body > section > ol {
     38         padding: 0;
     39         margin: 0;
     40         list-style: none inside;
     41       }
     42 
     43       body > section > ol > li {
     44         position: relative;
     45         margin: 0.5em 0 0.5em 40px;
     46       }
     47 
     48       code {
     49         word-wrap: break-word;
     50         background: rgba(255,255,0, 0.5);
     51       }
     52 
     53       em {
     54         position: absolute;
     55         top: 0px;
     56         left: -40px;
     57         width: 30px;
     58         text-align: right;
     59         font: 30px/1 Helvetica, sans-serif;
     60         font-weight: 700;
     61       }
     62 
     63       p {
     64         min-height: 30px;
     65         line-height: 1.2;
     66       }
     67   </style>
     68   </head>
     69   <body>
     70     <h1>Most Requested URLs</h1>
     71     <section></section>
     72     <script>
     73         chrome.extension.sendRequest(
     74             {'type': 'getMostRequestedUrls'},
     75             function generateList(response) {
     76               var section = document.querySelector('body>section');
     77               var results = response.result;
     78               var ol = document.createElement('ol');
     79               var li, p, em, code, text;
     80               var i;
     81               for (i = 0; i < results.length; i++ ) {
     82                 li = document.createElement('li');
     83                 p = document.createElement('p');
     84                 em = document.createElement('em');
     85                 em.textContent = i + 1;
     86                 code = document.createElement('code');
     87                 code.textContent = results[i].url;
     88                 text = document.createTextNode(
     89                     chrome.i18n.getMessage('navigationDescription',
     90                                            [results[i].numRequests,
     91                                             results[i].average]));
     92                 p.appendChild(em);
     93                 p.appendChild(code);
     94                 p.appendChild(text);
     95                 li.appendChild(p);
     96                 ol.appendChild(li);
     97               }
     98               section.innerHTML = '';
     99               section.appendChild(ol);
    100             });
    101     </script>
    102   </body>
    103 </html>
    104