| OLD | NEW |
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <!-- | 2 <!-- |
| 3 * Copyright (c) 2011 The Chromium Authors. All rights reserved. Use of this | 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 | 4 * source code is governed by a BSD-style license that can be found in the |
| 5 * LICENSE file. | 5 * LICENSE file. |
| 6 --> | 6 --> |
| 7 <html> | 7 <html> |
| 8 <head> | 8 <head> |
| 9 <title>WebNavigation Tech Demo Popup</title> | 9 <title>WebNavigation Tech Demo Popup</title> |
| 10 <style> | 10 <link href="popup.css" rel="stylesheet" type="text/css"> |
| 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> | 11 </head> |
| 69 <body> | 12 <body> |
| 70 <h1>Most Requested URLs</h1> | 13 <h1>Most Requested URLs</h1> |
| 71 <section></section> | 14 <section></section> |
| 72 <script> | 15 <script src="popup.js"></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> | 16 </body> |
| 103 </html> | 17 </html> |
| OLD | NEW |