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 |